FIREBASE AUTH

Initialize App

initializeApp(firebaseConfig) ➡ This function return the firebase App object
A Firebase App is a container-like object that stores common configuration and shares authentication across Firebase services. After you initialize a Firebase App object in your code, you can add and start using Firebase services.

import { initializeApp } from 'firebase/app';
const app = initializeApp({
  apiKey: "",
  authDomain: "",
  projectId: "",
  storageBucket: "",
  messagingSenderId: "",
  appId: ""
});

HOW TO IMPORT FIREBASE SERVICE

import {<"what you want to import"> } from 'firebase/<service name>'
<!-- Example -->
import { getAuth } from "firebase/auth";

AUTH

import { getAuth } from "firebase/auth";
const auth = getAuth(app);

WITH EMAIL AND PASSWORD

Create new user (Sign up)

for sign up a new user we use the method createUserWithEmailAndPassword

import {createUserWithEmailAndPassword } from "firebase/auth";
createUserWithEmailAndPassword(auth , email , password)
.then(userCredential => console.log(userCredential.user))
.catch(error => console.log(error))

Sign in existing users

for Sign in an existing user we use the method signInWithEmailAndPassword

import {signInWithEmailAndPassword } from "firebase/auth";
signInWithEmailAndPassword(auth , email , password)
.then(userCredential => console.log(userCredential.user))
.catch(error => console.log(error))

Check if user is signed in oe not

onAuthStateChanged(auth , () => {}) this function run each time user auth change

import { onAuthStateChanged } from "firebase/auth";
onAuthStateChanged(auth, (user) => {
  if (user) {
    const uid = user.uid;
  } else {
    consle.log("user logout")
  }
});

SIGN OUT

import { signOut } from "firebase/auth";
signOut(auth)
    .then(res => {/*sucssess*/})
    .cathc((err => {/*fail*/}))

WITH GOOGLE

import { getAuth, signInWithPopup, GoogleAuthProvider } from "firebase/auth";
const provider = new GoogleAuthProvider();
const auth = getAuth();
// sign in
signInWithPopup(auth, provider)
    .then((result) => {})
    .catch((error) => {  });