Authentification facile avec firebase

Une simple librairie pour vous permettre de rapidement mettre en place l'authentification avec firebase .

Installation

npm i fb-crazy-auth

Configuration

Commencer par installez firebase npm install firebase et créer un projet firebase

Activez l'authentification par Email et mot de passe ainsi que Google et Facebook si vous souhaitez les utiliser

Les composant

import { initAuthService, SignIn, SignUp, ResetPassword } from 'fb-crazy-auth';

Exemple

Démarrer firebase :

import { initializeApp } from 'firebase/app';
import { getAuth } from 'firebase/auth';

// Votre configuration Firebase
const firebaseConfig = {
  apiKey: process.env.REACT_APP_FIREBASE_API_KEY,
  authDomain: process.env.REACT_APP_FIREBASE_AUTH_DOMAIN,
  projectId: process.env.REACT_APP_FIREBASE_PROJECT_ID,
  storageBucket: process.env.REACT_APP_FIREBASE_STORAGE_BUCKET,
  messagingSenderId: process.env.REACT_APP_FIREBASE_MESSAGING_SENDER_ID,
  appId: process.env.REACT_APP_FIREBASE_APP_ID
};

// Initialiser l'application Firebase
const app = initializeApp(firebaseConfig);

// Accéder à l'instance Auth pour l'application Firebase
const auth = getAuth(app);

export { auth };

Connexion

App.js

import React from 'react';
import {auth} from './YOUR_FIREBASE_CONFIG_FILE.js'
import { initAuthService, SignIn, SignUp, ResetPassword } from 'fb-crazy-auth';


function App() {

  initAuthService(auth);

  return (
    <>
    <SignIn 
    authEnabled={true}
    
	onSignInSuccess={()=>alert('je suis connecté)}
	
	onSignInFail={()=>alert('oups, problème')}
	
	customLoader={<p>Chargement...</p>}
	
	terms={{ 
	signInButton: "Se Connecter", 
	emailLabel: "Adresse Email", 
	passwordLabel: "Mot de Passe" }} 
	 																              			 	
	style={{ 
	button: { backgroundColor: "green", color: "white" }, 
	input: { borderColor: "lightgray" }, 
	label: { fontWeight: "normal" } }}

  </>
  )
}

export default App;

Création de compte

App.js

import React from 'react';
import {auth} from './YOUR_FIREBASE_CONFIG_FILE.js'
import { initAuthService, SignIn, SignUp, ResetPassword } from 'fb-crazy-auth';


function App() {

  initAuthService(auth);

  return (
    <>
    <SignUp
    authEnabled={true}
    
	onSignInSuccess={()=>alert('je suis connecté)}
	
	onSignInFail={()=>alert('oups, problème')}
	
	customLoader={<p>Chargement...</p>}
	
	terms={{ 
	signInButton: "Créer un compte", 
	emailLabel: "Adresse Email", 
	passwordLabel: "Mot de Passe" }} 
	 																              			 	
	style={{ 
	button: { backgroundColor: "green", color: "white" }, 
	input: { borderColor: "lightgray" }, 
	label: { fontWeight: "normal" } }}

  </>
  )
}

export default App;

Reset mot de passe

App.js

import React from 'react';
import {auth} from './YOUR_FIREBASE_CONFIG_FILE.js'
import { initAuthService, SignIn, SignUp, ResetPassword } from 'fb-crazy-auth';


function App() {

  initAuthService(auth);

  return (
    <>
    <ResetPassword />
    
  </>
  )
}

export default App;

Classes

| className | description | |--|--| | fb-auth-signinForm | classe pour le formulaire de connexion | | fb-auth-signupForm | classe pour formulaire d'inscription | | fb-auth-socials | Conteneur connexion google && facebook |