How to Configure Firebase Cloud Storage bucket for cross-origin access (CORS)

If you have ever tried to download data stored in Firebase Cloud Storage directly in your browser you may have come across this error:

No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin '' is therefore not allowed access

In order to fix this error you will need to run through a couple of steps to configure Firebase Cloud Storage for CORS. The following steps can be taken in order to do this:

GSUtil

There are at least two approaches to configure the cloud storage with GSUtil:

Cloud shell within Google Cloud Platform

You can manage Compute Engine resources like virtual machine instances using the gcloud command-line tool in a Cloud Shell session.

• The following instructions outline how to start the session
• Google Cloud Shell is free for customers of Google Cloud Platform which isn't free. 

Install GSUtil

Gsutil is a tool that enables you to access Google Cloud Storage from the command-line and is needed to configure Firebase Cloud Storage for CORS.

• The detailed installation instructions for this tool can be found in the google cloud website. 

• If you are behind a corporate proxy or firewall, the tool may not be able to access the internet with its default settings during installation. In this case you could use one of the self-contained versioned archives as detailed here.
• Once you have successfully run gcloud init and been authenticated you can configure CORS
• With the cors.json file created run the following command to deploy the configuration to your storage: 
• bin/gsutil.cmd -d cors set  gs://

That should be all you need to do. 

Vue.js, NUXT.js, Vuex, Firebase persisted authentication, Axios

I created the following application to demonstrate how to handle authentication with Firebase within a Nuxt (Vue) application. I wanted to make sure the application stayed logged in as long as the Firebase authentication token hadn't expired. User should not be logged out when:

• The browser is refreshed
• The browser is closed and restarted and the Firebase token is still valid (persisted sessions)

You can grab the example from Github and you can see below for a brief outline of the steps I took to setup configure the application:

Firebase Project

• Signup / Login to the Firebase console and Create a new project by clicking the Add project icon and following the instructions for creating your project. 
• Setup authentication within your new Firebase project by clicking on the authentication menu in the left navigation bar. Click on the sign-in method tab and select the Email/Password provider from the list of sign-in methods. Enable it and click save.

Create Vue+NUXT application

• Create your Vue+NUXT application by following instructions outlined in the the NUXT starter-template.

Install the necessary dependencies

• yarn add @nuxtjs/axios body-parser express express-session firebase jwt-decode vuex  

Configure and initialise Firebase

• Add Firebase configuration settings by creating a development (and production) configuration file to your application and adding your Firebase  project settings to it
• Locate your Firebase application configuration settings by logging into your Firebase console and searching for: Add Firebase to you Web Application
• Create a file that will export the instance of your Firebase application
• The example application also makes use query the Firebase realtime database. If you are wanting to run the example application be sure to create your own database in your Firebase project

Create express server API 

• Create an express server API to handle the login and logout posts for the user. On receiving a post request from the client the user ID is stored in the session and the access token is stored in a cookie
• Modify your nuxt.config.js file so that it includes a section for the serverMiddleware and also has @nuxtjs/axios module defined

Create Vuex actions and mutations

• Add Vuex to your application and choose between the classic or module mode. I opted for the module mode
• Inside your root store file define the nuxtServerInit action. This action is used to save the currently logged in user to the session
• Inside your stores users module add the necessary getters, actions and mutations needed to save the user ID to the store. We include our login and logout actions here that use axios to send a post request to the server 

Create check authentication middleware

• Create a check authentication middleware action and add the necessary configuration to nuxt.config.js so that it will be called for every route
• The middleware component will check to see if the user is stored in the session or if the access token is found in the cookie. If it finds a match the store is initialised with the user ID. 

Create protected resource

• Create a page that will only be accessible if a user has successfully been authenticated
• Create the authenticated middleware action that will be called for every protected page. This action checks to see if a user is authenticated, if not the user is redirected to the sign in page

Create SignIn and SignUp pages

• Create a page to allow the user to sign in to the application
• Create a page to allow a user to register as a new user to the application

Run your Application

• npm run dev
• If all was configured successfully you should be able to sign up, sign in, reload page and still be signed in, close browser and reopen browser and still be logged in (as long as access token is still valid) and finally be able to sign out of the application