From 564916134834fab8a9779a58090bda427bdc7a98 Mon Sep 17 00:00:00 2001
From: Marshall Polaris <marshall@pol.rs>
Date: Mon, 8 Aug 2022 22:42:52 -0700
Subject: [PATCH] Pass page props user to auth provider if present (#724)

* Pass page props user to auth provider if present

* Rename `user` -> `serverUser`

* Don't load from local storage if server told us a user
---
 web/components/auth-context.tsx | 21 +++++++++++++--------
 web/pages/_app.tsx              |  2 +-
 2 files changed, 14 insertions(+), 9 deletions(-)

diff --git a/web/components/auth-context.tsx b/web/components/auth-context.tsx
index 24adde25..332c96be 100644
--- a/web/components/auth-context.tsx
+++ b/web/components/auth-context.tsx
@@ -1,4 +1,4 @@
-import { createContext, useEffect } from 'react'
+import { ReactNode, createContext, useEffect } from 'react'
 import { User } from 'common/user'
 import { onIdTokenChanged } from 'firebase/auth'
 import {
@@ -28,15 +28,20 @@ const ensureDeviceToken = () => {
   return deviceToken
 }
 
-export const AuthContext = createContext<AuthUser>(null)
-
-export function AuthProvider({ children }: any) {
-  const [authUser, setAuthUser] = useStateCheckEquality<AuthUser>(undefined)
+export const AuthContext = createContext<AuthUser>(undefined)
 
+export function AuthProvider(props: {
+  children: ReactNode
+  serverUser?: AuthUser
+}) {
+  const { children, serverUser } = props
+  const [authUser, setAuthUser] = useStateCheckEquality<AuthUser>(serverUser)
   useEffect(() => {
-    const cachedUser = localStorage.getItem(CACHED_USER_KEY)
-    setAuthUser(cachedUser && JSON.parse(cachedUser))
-  }, [setAuthUser])
+    if (serverUser === undefined) {
+      const cachedUser = localStorage.getItem(CACHED_USER_KEY)
+      setAuthUser(cachedUser && JSON.parse(cachedUser))
+    }
+  }, [setAuthUser, serverUser])
 
   useEffect(() => {
     return onIdTokenChanged(auth, async (fbUser) => {
diff --git a/web/pages/_app.tsx b/web/pages/_app.tsx
index 14dd6cf0..42b5e922 100644
--- a/web/pages/_app.tsx
+++ b/web/pages/_app.tsx
@@ -79,7 +79,7 @@ function MyApp({ Component, pageProps }: AppProps) {
           content="width=device-width, initial-scale=1, maximum-scale=1"
         />
       </Head>
-      <AuthProvider>
+      <AuthProvider serverUser={pageProps.user}>
         <QueryClientProvider client={queryClient}>
           <Welcome {...pageProps} />
           <Component {...pageProps} />