Press "Enter" to skip to content

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 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.

Much better way is to use some third-party solution like Google FIREBASE or Microsoft Azure. In this article we will focus on Google Firebase user management. We can reuse that on our front-end only, or – we can:

  1. Authenticate user on the front-end of our application via Firebase
  2. Keep there user’s token
  3. Send it 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 now how to implement user account login to Firebase in front-end and how to verify that user in my back-end Node.js API. Here you have in place step by step instruction how to do it 🙂

Let’s go now with step by step instructions how to implement Google Firebase user authentication on front-end 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, 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 mostly front-end project of web app: front-end + (optionally) small backend, then we can use in this back-end (NodeJS, Java, Python, Go, C#) connection with Firebase ADMIN SDK.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!
  2. 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”:
    Firebase console
    Firebase console
    Firebase project name
    Firebase project name
    Add or not Google analytics
    Add or not Google analytics

    Project is created
    Project is created
  3. We will now add a Firebase to our front-end project by linking there JavaScript files generated by Firebase. In section “Get started by adding Firebase to your app” choose front-end (html) icon, like on image below:
    Add firebase to your front-end project
    Add Firebase to your front-end project

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

    Add firebase to your front-end project
    Add firebase to your front-end project

    Add firebase to your front-end project
    Add firebase to your front-end project
  4. 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.
  5. 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)a) 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-librariesBoth hosting services and local server from Firebase automatically 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-initializeIt means, after uploading 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.b) If we have traditional application in pure HTML and JS files, 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.c) If we use any kind of BUNDLER or FRAMEWORK in Node/NPM environemnt (NuxtJS, Vue CLI, create-react-app) then we have to use the Firebase option using module bundlers. We use this option and we will host our front-end 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:

    Create Firebase config file
    Create Firebase 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):

    Add Firebase config to your project
    Add Firebase config to your project

    – Import in different file (module):

    Add Firebase config to your project
    Add Firebase config to your project
  6.  Install Firebase CLI:
    npm install -g firebase-tools
  7. 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/

  8.  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:

    Init Firebase CLI project
    Init Firebase CLI project
  9. Command to start the project in specific space:
    firebase init

    Init Firebase CLI project
    Init Firebase CLI project

    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.

  10. Then we have to choose the project from these, which are already done in firebase. We should choose standard options for the next questions.
  11. 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.
  12. We go back to the catalogue by entering in the console:
    cd ../
  13. And run command:
    npm run build-firebase
  14. 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.
  15. Deployment on Firebase hosting server of our Vue CLI app:
    firebase deploy

    Firebase deployment of front-end Vue CLI app
    Firebase deployment of front-end Vue CLI app

    and Firebase will return URL to our app, like:

    Url to Firebase hosted front-end app
    Url to Firebase hosted front-end app
  16. 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.