refactor(auth): update requireAuth to handle loading and redirect to login

Author: HuanFengYeh

components/Login/Login.tsx

@@ -1,7 +1,19 @@
 import { useForm } from "react-hook-form"
 import { useRouter } from "next/router"
-import { useSignInWithEmailAndPassword, SignInWithEmailAndPasswordData } from "../auth/hooks"
-import { Form, Stack, Button, Alert } from "../bootstrap"
+import {
+  useSignInWithEmailAndPassword,
+  SignInWithEmailAndPasswordData
+} from "../auth/hooks"
+import {
+  Form,
+  Stack,
+  Button,
+  Alert,
+  Container,
+  Row,
+  Col,
+  Card
+} from "../bootstrap"
 import Input from "../forms/Input"
 import PasswordInput from "../forms/PasswordInput"
 import { useTranslation } from "next-i18next"
@@ -17,7 +29,7 @@ export default function Login() {
   const {
     register,
     handleSubmit,
-    formState: { errors },
+    formState: { errors }
   } = useForm<SignInWithEmailAndPasswordData>()
 
   const signIn = useSignInWithEmailAndPassword()
@@ -26,45 +38,58 @@ export default function Login() {
     const safeRedirect = redirect.startsWith("/") ? redirect : "/"
     router.replace(safeRedirect)
   }
-  const onSubmit = handleSubmit( credentials => {
+  const onSubmit = handleSubmit(credentials => {
     signIn.execute(credentials).then(success)
   })
 
-
   return (
-    <Form onSubmit={onSubmit} noValidate>
-      {signIn.error && <Alert variant="danger">{signIn.error.message}</Alert>}
+    <Container className="py-5">
+      <Row className="justify-content-center">
+        <Col xs={12} sm={10} md={8} lg={6}>
+          <Card className="p-4 shadow-lg">
+            <h2 className="text-center mb-4">{t("signInToAccess")}</h2>
+
+            <Form onSubmit={onSubmit} noValidate>
+              {signIn.error && (
+                <Alert variant="danger">{signIn.error.message}</Alert>
+              )}
 
-      <Stack gap={3}>
-        <Input
-          label={t("email")}
-          type="email"
-          {...register("email", {
-            required: t("emailIsRequired") ?? "Email is required",
-          })}
-          error={errors.email?.message}
-        />
+              <Stack gap={3}>
+                <Input
+                  label={t("email")}
+                  type="email"
+                  {...register("email", {
+                    required: t("emailIsRequired") ?? "Email is required"
+                  })}
+                  error={errors.email?.message}
+                />
 
-        <PasswordInput
-          label={t("password")}
-          {...register("password", {
-            required: t("passwordRequired") ?? "Password is required",
-          })}
-          error={errors.password?.message}
-        />
+                <PasswordInput
+                  label={t("password")}
+                  {...register("password", {
+                    required: t("passwordRequired") ?? "Password is required"
+                  })}
+                  error={errors.password?.message}
+                />
 
-        <LoadingButton
-            type="submit"
-            className="w-100"
-            loading={signIn.loading}
-        >
-            {t("signIn")}
-        </LoadingButton>
+                <LoadingButton
+                  type="submit"
+                  className="w-100"
+                  loading={signIn.loading}
+                >
+                  {t("signIn")}
+                </LoadingButton>
 
-        <Divider className="px-4">{t("or")}</Divider>
+                <Divider className="px-4">{t("or")}</Divider>
 
-        <SocialSignOnButtons onComplete={onSubmit} />
-      </Stack>
-    </Form>
+                <SocialSignOnButtons
+                  onComplete={() => router.replace(redirect)}
+                />
+              </Stack>
+            </Form>
+          </Card>
+        </Col>
+      </Row>
+    </Container>
   )
-}
+}

components/Newsfeed/Newsfeed.tsx

@@ -16,12 +16,11 @@ import {
 import ProfileSettingsModal from "components/EditProfilePage/ProfileSettingsModal"
 import { NewsfeedCard } from "components/NewsfeedCard/NewsfeedCard"
 import { ProfileButtons } from "components/ProfilePage/ProfileButtons"
-import { useAuthRedirect } from "components/auth/AuthRedirect"
 
 export default function Newsfeed() {
   const { t } = useTranslation("common")
 
-  const { user, loading: authLoading } = useAuthRedirect()
+  const { user } = useAuth()
   const uid = user?.uid
   const { result: profile, loading } = usePublicProfile(uid)
   const isUser = user?.uid !== undefined
@@ -192,7 +191,7 @@ export default function Newsfeed() {
 
   return (
     <>
-      {authLoading || loading ? (
+      {loading ? (
         <Row>
           <Spinner animation="border" className="mx-auto" />
         </Row>

components/auth/AuthRedirect.tsx

@@ -3,7 +3,9 @@ import { getAuth, onAuthStateChanged, User } from "firebase/auth"
 import { useDispatch } from "react-redux"
 import { authChanged } from "./redux"
 
-export const Provider: React.FC<React.PropsWithChildren<unknown>> = ({ children }) => {
+export const Provider: React.FC<React.PropsWithChildren<unknown>> = ({
+  children
+}) => {
   const dispatch = useDispatch()
 
   useEffect(() => {

components/auth/ProtectedPageWrapper.tsx

@@ -3,4 +3,4 @@ export * from "./service"
 export { default as SignInWithButton } from "./SignInWithButton"
 export { default as SignOut } from "./SignOut"
 export * from "./types"
-export { Provider } from "./Provider"
+export { Provider } from "./Provider"

components/auth/Provider.tsx

@@ -8,6 +8,7 @@ import { useAppDispatch } from "../hooks"
 import { createService } from "../service"
 import { authChanged, useAuth } from "./redux"
 import { Claim } from "./types"
+import { Row, Spinner } from "../bootstrap"
 
 export const { Provider } = createService(() => {
   const dispatch = useAppDispatch()
@@ -76,13 +77,22 @@ export function requireAuth(
   Component: React.FC<React.PropsWithChildren<{ user: User }>>
 ) {
   return function ProtectedRoute() {
-    const { user } = useAuth()
+    const { user, loading } = useAuth()
     const router = useRouter()
     useEffect(() => {
-      if (user === null) {
-        router.push({ pathname: "/" })
+      if (!loading && !user) {
+        const currentPath = router.asPath
+        router.replace(`/login?redirect=${encodeURIComponent(currentPath)}`)
       }
-    }, [router, user])
+    }, [user, loading, router])
+
+    if (loading) {
+      return (
+        <Row>
+          <Spinner animation="border" className="mx-auto" />
+        </Row>
+      )
+    }
 
     return user ? <Component user={user} /> : null
   }
@@ -92,6 +102,6 @@ export function requireAuth(
  * Redirects user after logging out.
  */
 export async function signOutAndRedirectToHome() {
-  await auth.signOut()
   Router.push("/")
+  await auth.signOut()
 }

components/auth/index.ts

@@ -1,5 +1,5 @@
 import { createPage } from "../components/page"
-import Login from "components/Login/login"
+import Login from "components/Login/Login"
 
 export default createPage({
   title: "Login",
@@ -12,4 +12,4 @@ export async function getStaticProps({ locale }: any) {
       ...(await serverSideTranslations(locale, ["auth", "common"]))
     }
   }
-}
+}

components/auth/service.tsx

@@ -1,11 +1,12 @@
 import { createPage } from "../components/page"
 import Newsfeed from "components/Newsfeed/Newsfeed"
+import { requireAuth } from "../components/auth"
 
 export default createPage({
   title: "Newsfeed",
-  Page: () => {
+  Page: requireAuth(() => {
     return <Newsfeed />
-  }
+  })
 })
 
 // this must only be on pages in the pages folder

pages/login.tsx

@@ -54,7 +54,7 @@
   "subscribeNewsletter": "Click here to subscribe to our newsletter",
   "verifyEmail": "Verify your email address",
   "verifyLinkSent": "Please verify your email for your account by clicking the verification link we sent to your email. You will be required to verify your email before submitting testimony.",
-  "setUpProfile": "Set Up Your Profile"
-  
+  "setUpProfile": "Set Up Your Profile",
+  "signInToAccess": "Login required to access this the content"
 
 }