FIREBASE: Add Firebase to your JavaScrpt project + Firebase CLI installation + Firebase hosting deploy

I will focus in this article on important part of work when you, as front-end developer, want to make in your own project users authentication, add based on that, give them access to your back-end API in Node.js.

But as you are front-end developer, you are not a specialist in security of back-end applications and implementing on your own, let’s say, JWT (Json Web Token) authentication, can be not 100% secure and we can have then some security gaps in our back-end. When we keep there some sensitive data, like user’s personal data, than we should not go that way.

Google Firebase in JavaScript project

Much better way is to use for user maintenance some third-party solution like Google FIREBASE or Microsoft Azure. In this article we will focus on Google Firebase user management inside our own custom JavaScript project. We will do:

1. Authenticate user on the front-end (JavaScript) of our application via Firebase
2. Keep in front-end JavaScript user’s token
3. Send Firebase token and verify on our own Node.js back-end API
4. Accept or refuse access to protected resource.

The reason why I decided to write this article is that Google Firebase is a huge software with big documentation. It took me a few hours of reading to know how to implement user account login to Firebase in JavaScript on front-end site and how to verify that user in my back-end Node.js API. Here you have in one place step by step instruction how to do connect your custom JavaScript front-end and back-end project with  Firebase 🙂

Add Firebase to own JavaScript project

Let’s go now with step by step instructions how to implement Google Firebase user authentication on front-end JavaScript project and verify it on Node.js back-end. You can find whole front-end app project files HERE ON GITLAB.

1. Create a new project for WEB: go to https://firebase.google.com/docs/web/setup – here you can find the documentation which corresponds with my text and screen shots below.When we create a new web project in Firebase we are given by a number of functionalities (database, cloud storage, user management etc.) which we can use directly in Front-end in JavaScript, without need of writing our own back-end. But if our application has front-end and back-end, then we can have access to, more or less, the same Firebase functionalities from back-end site via Admin SDK:
   https://firebase.google.com/docs/admin/setup in “Add firebase to server” section. Using that we can have direct access from e.g. NodeJS to data gathered from our web app. We should remember that always when we have normal front-end project of web app: front-end JavaScript + (optionally) small back-end, then we can use in this back-end (NodeJS, Java, Python, Go, C#) connection with Firebase ADMIN SDK.
2. REMEMBER: When you see in Firebase documentation in WEB section the “Node.js” then it referrers to the Node.js CLIENT app (like desktop app), not the Node.js back-end server. It is important to know that!
3. Creating a new WEB project step by step (with VUE CLI project). Go to your main page of Firebase (when you login there): https://console.firebase.google.com and add new project – our project will have name “only-test”:

   

   

   

   

4. We will now add a Firebase to our front-end JavaScript app by linking there JavaScript files generated by Firebase. In section “Get started by adding Firebase to your app” choose front-end (HTML symbol: </>) icon, like on image below:

   

   And next, go step by step like on screen shots below:

   

   

5. Next step is adding scripts (above).
   a) The script FIREBASE APP (core Firebase SDK) always has to be attached in the beginning and next (if we had chosen) goes Google Analytics script file.
   b) And after above 2 scripts goes scripts of individual Firebase functionalities which we are going to use.

Add Firebase scripts to JavaScript project

How to add above scripts depends on which technology do we build our front-end app (docs: https://firebase.google.com/docs/web/setup#add-sdks-initialize)

• When it is a normal JS and HTML and we will host the app in the Firebase
  https://firebase.google.com/docs/web/setup#test-locally we can copy code from above and add the scripts of the services that we will use (e. g. authentication), from the link below: https://firebase.google.com/docs/web/setup#available-libraries
  Both hosting services and local server from Firebase automatically will have those scripts in locations:
  /__/firebase/…
  However, when we are creating our application in different environment (NuxtJS, Vue CLI, create-react-app etc.) then we should use another options:
  https://firebase.google.com/docs/web/setup#add-sdks-initialize It means, after uploading JavaScript front-end application to the Firebase hosting, those files will be there. Tip: During development you can keep files from CDN in your project added as normal scripts.
• If we have traditional application in HTML and vanilla JS, and we won’t host it on Firebase either, then we will connect scripts with CDN or copy them locally in whatever location you want.
• If we use any kind of BUNDLER or FRAMEWORK in Nodejs/NPM environemnt (NuxtJS, Vue CLI, create-react-app) then we have to use the Firebase option using module bundlers.

Firebase hosting deploy

We will use the last option and we will host our front-end javaScript app on Firebase Hosting:
– install in your node/npm project environemnt firebase by command:
npm install --save firebase
– and add to your main project file:

import * as firebase from "firebase/app";
import "firebase/analytics"; // optional
import "firebase/auth";
// if you want ot use more libraries than auth, import it here

– and create Firebase JS config file:

We have to add it in a new js/ts file, then this item after importing to different modules will be shared by them (by reference):

– Import in different file (module):

Install Firebase CLI on Windows

To deploy our front-end JavaScript app in Firebase hosting, we need to have Friebase CLI inside our project. I was doing everything on my Windows 10 machine, and Firebase installation went without any problems. Let’s go step by step with its installation:

•  Install Firebase CLI by npm/node command in windows CMD terminal (or in your SKD terminal):
  npm install -g firebase-tools
• Then, if we use Firebase HOSTING and we work with some environment (Vue CLI, NuxtJS, Create-react-app etc.) or with bundler (e. g. Wepack), we will have to initiate FRIEBASE CLI in the catalogue in which we will put bundles files, usually “./dist”.But then we have to remember about turning off the option “cleaning folder” /.dist”.
  Better solution is copying folder “dist” into folder, e. g. “dist-firebase”, let’s go through that:- To initiate copying, we have to install pack:
  npm install --save-dev copyfiles– We create a rule which will copy from the base directory ./dist to the target directory. In this case:
  ./dist-firebase copyfiles -u 1 dist-local/**/* dist-firebase/publicExample of my code in Vue CLI package.json looks like:

  "serve": "vue-cli-service serve",
  "build": "vue-cli-service build",
  "build-no-clean": "vue-cli-service build --no-clean",
  "inspect": "vue-cli-service inspect > output2.js",
  "lint": "vue-cli-service lint",
  "copy-firebase": "copyfiles -u 1 dist-local/**/* dist-firebase/public",
  "build-firebase": "npm run build && npm run copy-firebase"

  Additionally, in my Vue CLI project, I’ve changed settings of the webpack in vue.config.js file, to rename the destination catalogue:

  module.exports = {
    outputDir: 'dist-local' //https://cli.vuejs.org/config/#outputdir
  }

  Docs about Firebase CLI: https://firebase.google.com/docs/cli/

•  Go in the terminal to directory where your folder dist-firebase is located:
  cd /dist-firebase
  and next enter the following commands:
  firebase loginThat will open the browser with Google services login page and log us in:

  

• Command to start the project in specific space:
  firebase init

  

  Then we have to choose which one of “CLI features” we want to turn on. In the beginning we should choose only hosting. Later, we can call out firebase init again and turn on new features.

• Then we have to choose the project from these, which are already done in firebase. We should choose standard options for the next questions.
• We must be careful with this question “Configure as a single-page app”. If we have got an app for example NuxtJS or Vue CLI with internal router (or simply SPA, not multi page app), we have to choose Y.
• We go back to the catalogue by entering in the console:
  cd ../
• And run command:
  npm run build-firebase
• Now we can check with the firebase local server how our deployed app works
  Move to ./dist-firebase directory:
  cd ./dist-firebaseand run command:
  firebase serveThe server will be opened – always before the deployment we should have done a preview.
• Deployment of our Vue CLI app on Firebase hosting server via Firebase CLI:
  firebase deploy

  

  and Firebase will return URL to our app, like:

  

• Tip: The list of commands for FireBase CLI: https://firebase.google.com/docs/cli/?authuser=0#command_reference

Check here the next article about integrating Firebase user authentication service with your app JavaScript front-end.

Related posts:

FIREBASE: AUTHENTICATION IN WEB APP VueJS – loading spinner component MySQL – change next auto increment value