Skip to main content

Configure Firebase for Google authentication

+ saving in a firestore Database with React.​

[Image import problem being resolved]

Firebase​

This document was created to split the learning on the different skills around the creation of an E-commerce store done while following a fullstack course in English with adaptation in relation to my services/product + change of design.

In this document we focus on firebase / firestore on the data side.

It is configured for my project however it can give you an overview of the process.

This was first created for me, it is not necessarily tutorial oriented for beginners.

What is Firebase?​

Firebase is a platform belonging to Alphabet (Google) since October 2014 allowing access to a set of hosting services for all types of applications.

Is the service an SQL/NoSQL database?​

Firebase offers

  • NoSQL real-time database hosting (example: MongoDB)
  • Content hosting (blog articles)
  • Social authentication (facebook, google, github, twitter)

Why do it?​

Very useful for front-end developers who, with little back-end knowledge, can literally create complete applications and therefore potential projects or businesses.

Or even experienced developers looking to make a first version of a project quickly.

Before :​

  • Have installed, configured react-router/outlet, the different pages.

Facility​

  • yarn add firebase (or npm install firebase)

  • create utils/firebase/firebase.utils.js folder (fill with the code obtained by firebase)

  • Creation in the routes folder, a new sign-in folder

  • create component in sign-in/sign-in.component.jsx

  • In app.js, set the route for Connection

    • path: localhost:3000/connexion will display the connection page component
    • element: Indication of the name of the component.

  • Added the link to the Navigation component

Authentication flow:​

CRUD allows us to operate in different ways on our data stored in a database (in my project on firestore) [Create. Read, Update, Delete]

How is it going?​

Our app —— Request to recover data —> Firebase

Our app < ​​returns data — Firebase

The Firebase database (firestore) allows the storage of all our data such as user data, product data, profile data, order history, etc.

To secure we use an authentication system

For connection use with Google Sign, here is the process

App ————→ Google = Connects to Google [ Generates an auth_token which is a unique hashed string

in this auth_token we have confirmation that I am who I claim

APP < Returns the auth_token < Google =

App —send auth_token ———> firebase =

Firebase —check token ——> Google

google ——— Create a verification_token and send it ——- > firebase

Firebase ——- Create an access_token and return to —— APP

Use social authentication with google popup​

Today we are going to use it to make a login form using auth to save users. In addition, we can simplify authentication by allowing connection with your Google account.

  • Create folder in src utils/firebase/firebase.utils.js
  • In firebase.utils.js:
    • import initializeApp from firebase/app

in firebase:

  • click on web icon and c/c the code proposed in firebase.utils

Firestore data model​

Authentication is a separate model of data storage for data storage with Firebase we use Firestore here.

Firestore = Real-time database

  • Data
  • Document
  • Collection = file analogy

Allows you to save the connection in the database.

create database in firestore → production mode

firestore → rules

false → true

For firebase.utils below:

  • Add getFirestore import from firebase/firestore
    • setDoc = Set
    • getDoc = Get
    • doc = allows you to create and retrieve documents for the firestore database

Result: our Google authentication for registration records correctly in the user database:

  • create the users collection in firestore
    • create the user doc in users
      • createdAt -displayName
      • email