diff --git a/web/components/auth-context.tsx b/web/components/auth-context.tsx index 12b84c72..fcc3de39 100644 --- a/web/components/auth-context.tsx +++ b/web/components/auth-context.tsx @@ -13,6 +13,10 @@ import { randomString } from 'common/util/random' import { identifyUser, setUserProperty } from 'web/lib/service/analytics' import { useStateCheckEquality } from 'web/hooks/use-state-check-equality' +// 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 (User). +type AuthUser = undefined | null | User + const CACHED_USER_KEY = 'CACHED_USER_KEY' const ensureDeviceToken = () => { @@ -24,15 +28,15 @@ const ensureDeviceToken = () => { return deviceToken } -export const AuthContext = createContext(null) +export const AuthContext = createContext(null) export function AuthProvider({ children }: any) { - const [currentUser, setCurrentUser] = useStateCheckEquality(null) + const [authUser, setAuthUser] = useStateCheckEquality(undefined) useEffect(() => { const cachedUser = localStorage.getItem(CACHED_USER_KEY) - setCurrentUser(cachedUser && JSON.parse(cachedUser)) - }, [setCurrentUser]) + setAuthUser(cachedUser && JSON.parse(cachedUser)) + }, [setAuthUser]) useEffect(() => { return onIdTokenChanged(auth, async (fbUser) => { @@ -42,7 +46,7 @@ export function AuthProvider({ children }: any) { const deviceToken = ensureDeviceToken() user = (await createUser({ deviceToken })) as User } - setCurrentUser(user) + setAuthUser(user) // Persist to local storage, to reduce login blink next time. // Note: Cap on localStorage size is ~5mb localStorage.setItem(CACHED_USER_KEY, JSON.stringify(user)) @@ -50,22 +54,24 @@ export function AuthProvider({ children }: any) { setAuthCookies(await fbUser.getIdToken(), fbUser.refreshToken) } else { // User logged out; reset to null - setCurrentUser(null) + setAuthUser(null) localStorage.removeItem(CACHED_USER_KEY) deleteAuthCookies() } }) - }, [setCurrentUser]) + }, [setAuthUser]) + const authUserId = authUser?.id + const authUsername = authUser?.username useEffect(() => { - if (currentUser) { - identifyUser(currentUser.id) - setUserProperty('username', currentUser.username) - return listenForUser(currentUser.id, setCurrentUser) + if (authUserId && authUsername) { + identifyUser(authUserId) + setUserProperty('username', authUsername) + return listenForUser(authUserId, setAuthUser) } - }, [currentUser, setCurrentUser]) + }, [authUserId, authUsername, setAuthUser]) return ( - {children} + {children} ) }