Get firebase User even if user/privateUser not set

web/components/auth-context.tsx

@@ -20,10 +20,7 @@ import {isOnboardingFlag} from 'web/lib/util/signup'
 
 // Either we haven't looked up the logged-in user yet (undefined), or we know
 // the user is not logged in (null), or we know the user is logged in.
-export type AuthUser =
-  | undefined
-  | null
-  | (UserAndPrivateUser & {authLoaded: boolean; firebaseUser: FirebaseUser})
+export type AuthUser = undefined | null | (UserAndPrivateUser & {authLoaded: boolean})
 const CACHED_USER_KEY = 'CACHED_USER_KEY_V2'
 
 export const ensureDeviceToken = () => {
@@ -85,7 +82,7 @@ export const clearUserCookie = () => {
  * - ID token changes (after `getIdToken(true)` or `user.reload()`),
  *   which is important for reflecting `emailVerified` changes without a hard refresh.
  */
-export function useAndSetupFirebaseUser() {
+function useAndSetupFirebaseUser() {
   const [, forceRender] = useState(0)
   const [firebaseUser, setFirebaseUser] = useState<FirebaseUser | null>(auth.currentUser)
 
@@ -107,6 +104,7 @@ export function useAndSetupFirebaseUser() {
   return firebaseUser
 }
 
+export const FirebaseUserContext = createContext<FirebaseUser | null | undefined>(undefined)
 export const AuthContext = createContext<AuthUser>(undefined)
 
 // function getSupabaseAuthCall() {
@@ -133,7 +131,7 @@ export function AuthProvider(props: {children: ReactNode; serverUser?: AuthUser}
     : !privateUser
       ? privateUser
       : firebaseUser
-        ? {user, privateUser, authLoaded, firebaseUser}
+        ? {user, privateUser, authLoaded}
         : undefined
 
   useEffect(() => {
@@ -246,5 +244,9 @@ export function AuthProvider(props: {children: ReactNode; serverUser?: AuthUser}
     if (authLoaded && listenPrivateUser) setPrivateUser(listenPrivateUser)
   }, [authLoaded, listenPrivateUser])
 
-  return <AuthContext.Provider value={authUser}>{children}</AuthContext.Provider>
+  return (
+    <FirebaseUserContext.Provider value={firebaseUser}>
+      <AuthContext.Provider value={authUser}>{children}</AuthContext.Provider>
+    </FirebaseUserContext.Provider>
+  )
 }

web/components/email-verification-button.tsx

@@ -6,20 +6,20 @@ import {sendVerificationEmail} from 'web/lib/firebase/email-verification'
 import {useT} from 'web/lib/locale'
 
 export function EmailVerificationButton() {
-  const user = useFirebaseUser()
+  const firebaseUser = useFirebaseUser()
   const t = useT()
 
-  const isEmailVerified = user?.emailVerified
+  const isEmailVerified = firebaseUser?.emailVerified
 
   async function reload() {
-    if (!user) return false
+    if (!firebaseUser) return false
 
     // Refresh user record from Firebase
-    await user.reload()
+    await firebaseUser.reload()
 
-    if (user.emailVerified) {
+    if (firebaseUser.emailVerified) {
       // IMPORTANT: force a new ID token with updated claims
-      await user.getIdToken(true)
+      await firebaseUser.getIdToken(true)
       console.log('User email verified')
       return true
     } else {
@@ -31,7 +31,7 @@ export function EmailVerificationButton() {
     <Col className={'gap-2'}>
       <Button
         color={'gray-outline'}
-        onClick={() => sendVerificationEmail(user, t)}
+        onClick={() => sendVerificationEmail(firebaseUser, t)}
         disabled={isEmailVerified}
         className={'w-fit'}
       >

web/hooks/use-firebase-user.ts

@@ -1,7 +1,6 @@
 import {useContext} from 'react'
-import {AuthContext} from 'web/components/auth-context'
+import {FirebaseUserContext} from 'web/components/auth-context'
 
 export function useFirebaseUser() {
-  const ctx = useContext(AuthContext)
-  return ctx?.firebaseUser
+  return useContext(FirebaseUserContext)
 }

web/pages/settings.tsx

@@ -75,14 +75,14 @@ const LoadedGeneralSettings = (props: {privateUser: PrivateUser}) => {
   } = useForm<{newEmail: string}>()
   const t = useT()
 
-  const user = useFirebaseUser()
-  if (!user) return null
+  const firebaseUser = useFirebaseUser()
+  if (!firebaseUser) return null
 
   const changeUserEmail = async (newEmail: string) => {
-    if (!user) return
+    if (!firebaseUser) return
 
     try {
-      await updateEmail(user, newEmail)
+      await updateEmail(firebaseUser, newEmail)
       toast.success(t('settings.email.updated_success', 'Email updated successfully'))
       setIsChangingEmail(false)
       reset()
@@ -95,8 +95,8 @@ const LoadedGeneralSettings = (props: {privateUser: PrivateUser}) => {
   }
 
   const onSubmitEmailChange = (data: {newEmail: string}) => {
-    if (!user) return
-    if (data.newEmail === user.email) {
+    if (!firebaseUser) return
+    if (data.newEmail === firebaseUser.email) {
       toast.error(t('settings.email.same_as_current', 'New email is the same as current email'))
       return
     }
@@ -156,7 +156,7 @@ const LoadedGeneralSettings = (props: {privateUser: PrivateUser}) => {
                     message: t('settings.email.invalid', 'Invalid email address'),
                   },
                 })}
-                disabled={!user}
+                disabled={!firebaseUser}
               />
               {errors.newEmail && (
                 <span className="text-red-500 text-sm">