Create user context

firebase/context.js

@@ -0,0 +1,35 @@
+import React, { useState, useEffect, useContext, createContext } from "react";
+import { firebase, auth, db } from "../config/firebase";
+
+const authContext = createContext();
+export function AuthProvider({ children }) {
+  const auth = useProvideAuth();
+  return <authContext.Provider value={auth}>{children}</authContext.Provider>;
+}
+export const useAuth = () => {
+  return useContext(authContext);
+};
+function useProvideAuth() {
+  const [user, setUser] = useState(null);
+
+  const getCurrentUser = () => {
+    db.collection("Users")
+      .doc(auth.currentUser.uid)
+      .get()
+      .then((doc) => {
+        setUser(doc.data());
+      });
+  };
+
+  useEffect(() => {
+    const unsubscribe = firebase
+      .auth()
+      .onAuthStateChanged(() => getCurrentUser());
+    return () => unsubscribe();
+  }, []);
+
+  return {
+    user,
+    getCurrentUser,
+  };
+}

jsconfig.json

@@ -4,7 +4,9 @@
     "paths": {
       "@/icons/*": ["components/icons/*"],
       "@/styles/*": ["styles/*"],
-      "@/components/*": ["components/*"]
+      "@/components/*": ["components/*"],
+      "@/config/*": ["config/*"],
+      "@/firebase/*": ["firebase/*"]
     }
   }
 }

pages/_app.js

@@ -1,7 +1,13 @@
 import "@/styles/globals.css";
 
+import { AuthProvider } from "../firebase/context";
+
 function MyApp({ Component, pageProps }) {
-  return <Component {...pageProps} />;
+  return (
+    <AuthProvider>
+      <Component {...pageProps} />
+    </AuthProvider>
+  );
 }
 
 export default MyApp;

pages/index.js

@@ -9,6 +9,8 @@ import Products from "components/HomeProducts";
 import { db } from "config/firebase";
 import Layout from "components/Layout";
 
+import { useAuth } from "../firebase/context";
+
 export default function Home() {
   db.collection("Users")
     .get()
@@ -19,6 +21,9 @@ export default function Home() {
       });
     });
 
+  const auth = useAuth();
+  console.log(auth);
+
   return (
     <Layout>
       <div className={styles.container}>

pages/login/index.js

@@ -14,7 +14,7 @@ export default function LoginPage() {
   auth.onAuthStateChanged(function (user) {
     if (user) {
       console.log(user);
-      // router.push("/"); active it later
+      router.push("/");
     }
   });