Merge pull request #160 from JR-prog/156-cannot-login-after-registering-using-oauth

Fixed Google OAuth registration issue

Author: Adamo-O

app/page.tsx

@@ -1,28 +1,9 @@
 'use client';
 
-// import { Inter } from '@next/font/google';
-// import { Alert } from "react-bootstrap";
 import { useAuth } from '../contexts/AuthContext';
-// import { useEffect, useState } from 'react';
-
-// const inter = Inter({ subsets: ['latin'] });
 
 const Home = () => {
   const { currentUser } = useAuth();
-  // const location = useLocation();
-  //   const ALERT_TIMEOUT = 5000; // Deleted alert timeout in milliseconds
-  //   const [isDeletedAlertShow, setIsDeletedAlertShow] = useState(false);
-
-  // TODO reintroduce deleted account alert
-  /*useEffect(() => {
-        if (location.state?.deletedAccount) {
-            setIsDeletedAlertShow(true);
-            setTimeout(async () => {
-                setIsDeletedAlertShow(false);
-            }, ALERT_TIMEOUT);
-            location.state.deletedAccount = false;
-        }
-    }, [location.state])*/
 
   return (
     <div className="container mx-auto text-white">
@@ -45,9 +26,6 @@ const Home = () => {
           </p>
         </>
       )}
-      {/* <Alert variant='danger' show={isDeletedAlertShow}>
-                Successfully deleted your account.
-            </Alert> */}
     </div>
   );
 };

components/Card/FullPostCard.tsx

@@ -28,18 +28,10 @@ const FullPostCard = ({
   testKey?: number;
 }) => {
   const [commentsOpen, setCommentsOpen] = useState(false);
-  const [postHeight, setPostHeight] = useState(0);
   const [comments, setComments] = useState(post?.comments);
 
   const postContainer = useRef(null);
 
-  useEffect(() => {
-    setTimeout(() => setPostHeight(postContainer.current.clientHeight), 2000);
-  }, []);
-  useEffect(() => {
-    setPostHeight(postContainer.current.clientHeight);
-  });
-
   return (
     <CardGrid
       data-testid="card-grid"
@@ -56,7 +48,6 @@ const FullPostCard = ({
           id="post-content"
           ref={postContainer}
         >
-          {/* <div>{postHeight}</div> */}
           <PostHeader
             author={author}
             authorID={authorID}

config/firebase.ts

@@ -24,7 +24,7 @@ auth.useDeviceLanguage();
 
 // Initialize firestore database
 export const firestore = initializeFirestore(app, {
-  experimentalAutoDetectLongPolling: true,
+  experimentalAutoDetectLongPolling: !!process.env.NEXT_PUBLIC_EMULATOR,
 });
 export const storage = getStorage();
 

contexts/AuthContext.tsx

@@ -16,7 +16,13 @@ import auth from '../config/firebase';
 import type { User as AuthUser } from 'firebase/auth';
 import type { User } from '../types/User';
 import { db } from '../config/firestore';
-import { deleteDoc, doc, getDoc, setDoc } from 'firebase/firestore';
+import {
+  deleteDoc,
+  doc,
+  getDoc,
+  getDocFromServer,
+  setDoc,
+} from 'firebase/firestore';
 import md5 from 'md5';
 
 interface AuthContextType {
@@ -62,10 +68,8 @@ export function AuthProvider({ children }) {
   /**
    * Creates user in Firestore and updates current user state
    */
-  async function createUser(credential: UserCredential) {
+  async function createUser(newUser: AuthUser) {
     // Create a new user document in database using same user id as auth
-    const newUser = credential.user;
-
     const emptyUser: User = {
       awards: [],
       certifications: [],
@@ -95,8 +99,10 @@ export function AuthProvider({ children }) {
     await setDoc(doc(db.users, newUser.uid), emptyUser);
 
     // Refresh auth user state with signed in user
-    setAuthUser(credential.user);
+    setAuthUser(newUser);
     setCurrentUser(emptyUser);
+
+    console.log('new user created. current and auth user updated.', emptyUser);
   }
 
   /**
@@ -109,7 +115,7 @@ export function AuthProvider({ children }) {
       password
     );
 
-    await createUser(credential);
+    await createUser(credential.user);
 
     return credential;
   }
@@ -135,15 +141,19 @@ export function AuthProvider({ children }) {
     const credential = await signInWithPopup(auth, googleProvider);
 
     // Get user from database
-    const userDoc = await getDoc(doc(db.users, credential.user.uid));
+    const userDoc = await getDocFromServer(doc(db.users, credential.user.uid));
 
     // User exists -> set user as state
     if (userDoc.exists()) {
+      console.log('user doc exists: ', userDoc.data());
+
       setCurrentUser(userDoc.data());
     }
     // User doesn't exist -> create user
     else {
-      await createUser(credential);
+      console.log('user doc does not exist. Creating it.');
+
+      await createUser(credential.user);
     }
 
     return credential;
@@ -157,10 +167,16 @@ export function AuthProvider({ children }) {
     await auth.currentUser.reload();
 
     // Refresh current user
-    const userDoc = await getDoc(doc(db.users, auth.currentUser.uid));
-    setCurrentUser(userDoc.data());
+    if (auth.currentUser) {
+      const userDoc = await getDoc(doc(db.users, auth.currentUser.uid));
+      if (!userDoc.exists()) {
+        await createUser(auth.currentUser);
+      } else {
+        setCurrentUser(userDoc.data());
+      }
 
-    return userDoc.data();
+      return userDoc.data();
+    }
   }
 
   /**
@@ -200,6 +216,8 @@ export function AuthProvider({ children }) {
   // On first load of the page, prepare an unsubscribe function
   useEffect(() => {
     const unsubscribe = auth.onAuthStateChanged((user) => {
+      console.log('auth state changed triggered!');
+
       setLoading(true);
 
       setAuthUser(user);
@@ -213,7 +231,11 @@ export function AuthProvider({ children }) {
       // Ensure user data is loaded if user logged in
       else if (!currentUser) {
         getDoc(doc(db.users, user.uid)).then((res) => {
-          setCurrentUser(res.data());
+          if (!res.exists()) {
+            createUser(auth.currentUser);
+          } else {
+            setCurrentUser(res.data());
+          }
           setLoading(false);
         });
       }