Make main login/logout buttons reload server side props (#677)

* Set cookies in auth handler before looking up user

* Make sidebar logout button trigger SSR reload

* Make sidebar login button trigger SSR reload

web/components/auth-context.tsx

@@ -41,6 +41,7 @@ export function AuthProvider({ children }: any) {
   useEffect(() => {
     return onIdTokenChanged(auth, async (fbUser) => {
       if (fbUser) {
+        setAuthCookies(await fbUser.getIdToken(), fbUser.refreshToken)
         let user = await getUser(fbUser.uid)
         if (!user) {
           const deviceToken = ensureDeviceToken()
@@ -51,12 +52,11 @@ export function AuthProvider({ children }: any) {
         // Note: Cap on localStorage size is ~5mb
         localStorage.setItem(CACHED_USER_KEY, JSON.stringify(user))
         setCachedReferralInfoForUser(user)
-        setAuthCookies(await fbUser.getIdToken(), fbUser.refreshToken)
       } else {
         // User logged out; reset to null
+        deleteAuthCookies()
         setAuthUser(null)
         localStorage.removeItem(CACHED_USER_KEY)
-        deleteAuthCookies()
       }
     })
   }, [setAuthUser])

web/components/create-question-button.tsx

@@ -1,4 +1,5 @@
 import Link from 'next/link'
+import { useRouter } from 'next/router'
 import clsx from 'clsx'
 import { firebaseLogin, User } from 'web/lib/firebase/users'
 import React from 'react'
@@ -16,6 +17,7 @@ export const CreateQuestionButton = (props: {
     'from-indigo-500 to-blue-500 hover:from-indigo-700 hover:to-blue-700'
 
   const { user, overrideText, className, query } = props
+  const router = useRouter()
   return (
     <div className={clsx('flex justify-center', className)}>
       {user ? (
@@ -26,7 +28,12 @@ export const CreateQuestionButton = (props: {
         </Link>
       ) : (
         <button
-          onClick={firebaseLogin}
+          onClick={async () => {
+            // login, and then reload the page, to hit any SSR redirect (e.g.
+            // redirecting from / to /home for logged in users)
+            await firebaseLogin()
+            router.replace(router.asPath)
+          }}
           className={clsx(gradient, createButtonStyle)}
         >
           Sign in

web/components/nav/sidebar.tsx

@@ -11,7 +11,7 @@ import {
 } from '@heroicons/react/outline'
 import clsx from 'clsx'
 import Link from 'next/link'
-import { useRouter } from 'next/router'
+import Router, { useRouter } from 'next/router'
 import { usePrivateUser, useUser } from 'web/hooks/use-user'
 import { firebaseLogout, User } from 'web/lib/firebase/users'
 import { ManifoldLogo } from './manifold-logo'
@@ -31,6 +31,13 @@ import { setNotificationsAsSeen } from 'web/pages/notifications'
 import { PrivateUser } from 'common/user'
 import { useWindowSize } from 'web/hooks/use-window-size'
 
+const logout = async () => {
+  // log out, and then reload the page, in case SSR wants to boot them out
+  // of whatever logged-in-only area of the site they might be in
+  await withTracking(firebaseLogout, 'sign out')()
+  await Router.replace(Router.asPath)
+}
+
 function getNavigation() {
   return [
     { name: 'Home', href: '/home', icon: HomeIcon },
@@ -71,7 +78,7 @@ function getMoreNavigation(user?: User | null) {
     {
       name: 'Sign out',
       href: '#',
-      onClick: withTracking(firebaseLogout, 'sign out'),
+      onClick: logout,
     },
   ]
 }
@@ -122,7 +129,7 @@ function getMoreMobileNav() {
     {
       name: 'Sign out',
       href: '#',
-      onClick: withTracking(firebaseLogout, 'sign out'),
+      onClick: logout,
     },
   ]
 }

web/lib/firebase/users.ts

@@ -179,7 +179,7 @@ export async function firebaseLogin() {
 }
 
 export async function firebaseLogout() {
-  auth.signOut()
+  await auth.signOut()
 }
 
 const storage = getStorage(app)

web/pages/index.tsx

@@ -1,6 +1,3 @@
-import React, { useEffect } from 'react'
-import { useRouter } from 'next/router'
-import { useUser } from 'web/hooks/use-user'
 import { Contract, getContractsBySlugs } from 'web/lib/firebase/contracts'
 import { Page } from 'web/components/page'
 import { LandingPagePanel } from 'web/components/landing-page-panel'
@@ -29,19 +26,8 @@ export const getServerSideProps = redirectIfLoggedIn('/home', async (_) => {
 export default function Home(props: { hotContracts: Contract[] }) {
   const { hotContracts } = props
 
-  // for now this redirect in the component is how we handle the case where they are
-  // on this page and they log in -- in the future we will make some cleaner way
-  const user = useUser()
-  const router = useRouter()
-
   useSaveReferral()
 
-  useEffect(() => {
-    if (user != null) {
-      router.replace('/home')
-    }
-  }, [router, user])
-
   return (
     <Page>
       <div className="px-4 pt-2 md:mt-0 lg:hidden">