Aller au contenu principal

Configurer Firebase pour une authentification google

+ enregistrement dans une Base de donnée firestore avec React.​

[Probleme d'import dimage en cours de resolution]

Firebase​

Ce document a été creer pour splitter l’apprentissage sur les différentes competences autour d’une creation d’une boutique E-commerce fait pendant le suivi d’un cours fullstack en Anglais avec adaptation par rapport a mes services/produit + changement de design.

Sur ce document on tourne autour de firebase / firestore coté data.

Il est configuré pour mon projet cependant ca peut vous donnez une vision d’ensemble du processus.

Ceci a d’abord ete creer pour moi, il n’est pas forcement orienté tuto pour debutant.

C’est quoi Firebase ?​

Firebase est une plateforme appartenant a Alphabet(Google) depuis octobre 2014 permettant l’accès a un ensemble de services d’hébergements tout type d’application.

Le service est une base de donnée SQL/NoSQL ?​

Firebase propose

  • l’hébergement de base de données en temps reel NoSQL ( exemple : MongoDB )
  • Hébergement du contenu (articles de blogs)
  • Authentification social (facebook,google,github,twitter)

Pourquoi faire ?​

Très utile pour les développeurs front-end qui avec peu de connaissance cote back-end peuvent littéralement créer des applications completes et donc des potentiels projets ou business.

Ou meme des developpeurs confirmés cherchant a faire une premiere version de projet rapidement.

Avant :​

  • Avoir installer, configurer react-router/outlet , les differentes pages.

Installation​

  • yarn add firebase ( ou npm install firebase )
  • cree dossier utils/firebase/firebase.utils.js ( remplir avec le code obtenu par firebase)
  • Creation dans le dossier des routes, un nouveau dossier sign-in
  • creer composant dans sign-in/sign-in.component.jsx
  • Dans app.js, mettre la route pour Connexion
  • Ajout du lien sur le composant Navigation

Flow D’authentification :​

CRUD permet d’operer de differentes manieres sur nos donnees stockes dans une bdd (dans mon projet sur firestore) [Create. Read, Update, Delete]

Comment ca se deroule ?​

Notre app —— Demander a Recuperer des donnée —> Firebase

Notre app < retourne des donnée — Firebase

La base de donnée Firebase (firestore) permet le stockage de toute nos données comme les donnée utilisateur, de produit, de profil, historique de commandeetc..

Pour securiser nous utilisons un systeme d’authentification

Pour une utilisation de connexion avec google Sign voici le process

App ————→ Google = Se connecte sur google [ Genere un auth_token qui est une chaine hashé unique

dans ce auth_token nous avons la confirmation que je suis celui que je pretend

APP < Renvoi le auth_token < Google =

App —envoier le auth_token ———> firebase =

Firebase —verifier le token ——> Google

google ——— Creer un verification_token et l’envoi ——- > firebase

Firebase ——- Creer un access_token et retourne a —— APP

Utilisation authentification social avec google popup​

Aujourd’hui nous allons l’utiliser pour faire un formulaire de connexion en utilisant l’auth pour sauvegarder les utilisateurs. De plus nous pouvont simplifier l’authentification en permettant la connexion avec son compte google.

  • Cree dossier dans src utils/firebase/firebase.utils.js
  • Dans firebase.utils.js :
    • import initializeApp de firebase/app

dans firebase :

  • cliquez sur licone web et c/c le code proposé dans firebase.utils

Modele des données firestore​

Authentification est un modele a part du stockage des données pour le stockage de donnée avec firebase on utilise ici Firestore.

Firestore = Base de donnée en temps reel

  • Data
  • Document
  • Collection = analogie du dossier

Permet d’enregistrer la connexion dans la base de donnee.

create database dans firestore → production mode

firestore → rules

false → true

Pour firebase.utils ci dessous:

  • Ajouter l’import de getFirestore de firebase/firestore

    • setDoc = Definir

    • getDoc = Obtenir

    • doc = permet de creer,recuperer des document pour la base de donnée firestore

      Resultat : notre authentification google pour l’inscription enregistre bien dans la base de donnée user :

      • creer la collection users dans firestore
      • creer dans users le doc user
        • createdAt
        • displayName
        • email