auth provider

in folder Routes create file AuthProvider.jsx

dont forget to install the store for storage

npm install store

import { useToast } from "@chakra-ui/react";
import { createUserWithEmailAndPassword, getAuth, onAuthStateChanged, signInWithEmailAndPassword } from "firebase/auth";
import { arrayUnion, doc, getDoc, updateDoc } from "firebase/firestore";
import { useState, useEffect } from "react";
import { useNavigate } from "react-router-dom";
import { auth, db, fetchToken } from "../Configs/firebase";
import AuthContext from "./hooks/AuthContext";
import store from "store";

export const AuthProvider = ({ children }) => {
  const [currentUser, setCurrentUser] = useState();
  const [subscriptionUser, setSubscriptionUser] = useState();
  const [tokenId, setTokenId] = useState("");
  const [loading, setLoading] = useState(true);
  const navigate = useNavigate();
  const toast = useToast();

  const login = (email, password) => {
    return signInWithEmailAndPassword(auth, email, password)
      .then(async (response) => {
        try {
          const docRef = doc(db, "users", response.user.uid);
          const docSnap = await getDoc(docRef);
          if (docSnap.exists()) {
            store.set("user_data", docSnap.data());
            await updateDoc(docRef, { tokenId: arrayUnion(tokenId) });
            // console.log('test')
          } else {
            console.log("No such document!");
          }
        } catch (error) {
          console.log(error, "ini error");
        }

        toast({
          title: "Success Login",
          description: `Success Login account ${response.user.displayName} `,
          status: "success",
          duration: 10000,
          isClosable: true,
          position: "top-right",
        });



        return navigate("/");
      })
      .catch((error) => {
        toast({
          title: "Something wrong !",
          description: error.message,
          status: "error",
          duration: 10000,
          isClosable: true,
          position: "top-right",
        });
      });
  };

  const signOut = () => {
    return auth.signOut();
  };
 
  //this option for subscription file db context
  const getSubscription = async () => {
    try {
      const docRef = doc(db, "users", currentUser.uid);
      const docSnap = await getDoc(docRef);
      if (docSnap.exists()) {
        setSubscriptionUser(docSnap.data());
      } else {
        console.log("No such document!");
      }
    } catch (error) {
      console.log(error, "ini error");
    }

    return subscriptionUser;
  };
  
  //this option for storage context
  const getUserStorage = () => {
    return store.get("user_data");
  };

  const signUp = (email, password) => {
    return createUserWithEmailAndPassword(auth, email, password);
  };
  
  //this option for get auth uid in firebase
  const getUser = () => {
    return auth.currentUser;
  };

  useEffect(() => {
    onAuthStateChanged(auth, (user) => {
      setCurrentUser(user);
      setLoading(false);
    });
  }, []);

  const value = {
    currentUser,
    tokenId,
    getUser,
    login,
    signOut,
    signUp,
    getSubscription,
    getUserStorage,
  };

  return <AuthContext.Provider value={value}>{!loading && children}</AuthContext.Provider>;
};

and then you must set in index.js

import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";
import { BrowserRouter } from "react-router-dom";
import { ChakraProvider, extendTheme } from "@chakra-ui/react";
import { AuthProvider } from "./Routes/AuthProvider";

//this option for token messaging
if ('serviceWorker' in navigator) {
  window.addEventListener('load', () => {
    navigator.serviceWorker.register('../firebase-messaging-sw.js')
    .then(function (registration) {
      // Successful registration
      console.log('Hooray. Registration successful, scope is:', registration.scope);
    }).catch(function (error) {
      // Failed registration, service worker won’t be installed
      console.log('Whoops. Service worker registration failed, error:', error);
    });
  });
}


const themes = extendTheme({
  config:{
    initialColorMode: 'dark',
    useSystemColorMode: false,
  },

  shadows: {
    purple: '0 0 0 3px rgba(159, 122, 234, 0.6)'
  },
  colors: {
    brand: {
      100: "#ffd600",
      900: "#1a202c",
    },
  },
});

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <BrowserRouter>
    <ChakraProvider>
      <AuthProvider>
          <App />
      </AuthProvider>
    </ChakraProvider>
  </BrowserRouter>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();