Merge pull request #4 from TrumanH/store-auth-with-context

use react context to store authenticate user

src/App.js

@@ -8,7 +8,6 @@ const Shop = ()=> {
   return ( <div><p>The shop page.</p></div> );
 }
 
-
 const App = ()=> {
   return (
     <Routes>

src/components/sign-in-form/sign-in-form.component.jsx

@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import { signInWithGooglePopup, createUserDocumentFromAuth } from '../../utils/firebase/firebase.utils';
+import { signInWithGooglePopup } from '../../utils/firebase/firebase.utils';
 import { signInAuthUserWithEmailAndPassword } from '../../utils/firebase/firebase.utils';
 import FormInput from '../../components/form-input/form-input.component';
 import Button from '../../components/button/button.component';
@@ -27,8 +27,7 @@ const SignInForm = ()=> {
         event.preventDefault();
         const { email, password } = formFields;
         try {
-            const response = await signInAuthUserWithEmailAndPassword(email, password);
-            console.log(response);
+            await signInAuthUserWithEmailAndPassword(email, password);
             resetFormFields();
         } catch(error) {
             switch (error.code) {
@@ -40,8 +39,8 @@ const SignInForm = ()=> {
     };
 
     const LogGoogleUser = async () => {
-        const response = await signInWithGooglePopup();
-        createUserDocumentFromAuth(response.user)
+        await signInWithGooglePopup();
+        // createUserDocumentFromAuth(user); // already registered in listener
     };
 
     return ( 

src/context/user.context.jsx

@@ -0,0 +1,25 @@
+import { createContext, useState, useEffect } from "react";
+import { onAuthStateChangeListener, createUserDocumentFromAuth } from '../utils/firebase/firebase.utils'
+
+export const UserContext = createContext({
+    user: null,
+    setUser: ()=>null,
+});
+
+export const UserProvider = ({ children }) => {
+    const [ user, setUser ] = useState(null);
+    const value = {user, setUser};
+    useEffect(() => {
+        const unsubscribe = onAuthStateChangeListener((user)=>{
+        console.log("listener:", user);
+        setUser(user);
+        if (user) {
+            createUserDocumentFromAuth(user);
+        }
+        });
+
+        return unsubscribe;
+    }, []);
+
+    return (<UserContext.Provider value={value}>{children}</UserContext.Provider>);
+};

src/index.js

@@ -3,15 +3,19 @@ import ReactDOM from 'react-dom/client';
 import './index.scss';
 import { BrowserRouter } from 'react-router-dom';
 import App from './App';
+import { UserProvider } from './context/user.context';
 import reportWebVitals from './reportWebVitals';
 
 const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(
-  <React.StrictMode>
+  // StrictMode in development mode would render all components twice when initiating
+  // <React.StrictMode>
     <BrowserRouter>
-      <App />
+      <UserProvider>
+        <App />
+      </UserProvider>
     </BrowserRouter>
-  </React.StrictMode>
+  // </React.StrictMode>
 );
 
 // If you want to start measuring performance in your app, pass a function

src/routes/navigation/navigation.component.jsx

@@ -1,9 +1,13 @@
 import { Outlet, Link } from 'react-router-dom'
-import { Fragment } from 'react'
+import { Fragment, useContext } from 'react'
 import { ReactComponent as Crownlogo } from '../../assets/crown.svg'
 import './navigation.styles.scss'
+import { UserContext } from '../../context/user.context'
+import { signOutUser } from '../../utils/firebase/firebase.utils';
 
 const Navigation = ()=> {
+    const { user } = useContext(UserContext);
+
     return (
       <Fragment>
         <div className='navigation'>
@@ -12,8 +16,7 @@ const Navigation = ()=> {
             </Link>
             <div className='nav-links-container'>
                 <Link className='nav-link' to='/shop'>SHOP</Link>
-                <Link className='nav-link' to='/auth'>SIGN IN/SIGN UP</Link>
-                {/* <Link className='nav-link' to='/sign-up'>SIGN UP</Link> */}
+                {user ? (<Link className='nav-link' onClick={signOutUser}>SIGN OUT</Link>) : (<Link className='nav-link' to='/auth'>SIGN IN/SIGN UP</Link>)}
                 {/* more anchor tag add below */}
             </div>
         </div>

src/utils/firebase/firebase.utils.js

@@ -4,7 +4,10 @@ import { getAuth,
   signInWithPopup, 
   signInWithRedirect, 
   createUserWithEmailAndPassword,
-  signInWithEmailAndPassword } from "firebase/auth";
+  signInWithEmailAndPassword,
+  signOut,
+  onAuthStateChanged,
+ } from "firebase/auth";
 import { getFirestore, doc, getDoc, setDoc } from 'firebase/firestore';
 
 // Your web app's Firebase configuration
@@ -71,4 +74,8 @@ export const signInAuthUserWithEmailAndPassword = async (email, password) => {
     return;
   }
   return await signInWithEmailAndPassword(auth, email, password);
-};
+};
+
+export const signOutUser = async ()=> await signOut(auth);
+
+export const onAuthStateChangeListener = (callback) => onAuthStateChanged(auth, callback);