Merge pull request #1858 from HuanFengYeh/1795_auth_redirect_page

1795 auth redirect page

Author: mertbagt

components/EditProfilePage/EditProfilePage.tsx

@@ -25,7 +25,7 @@ import {
 } from "./StyledEditProfileComponents"
 import { TestimoniesTab } from "./TestimoniesTab"
 import { useFlags } from "components/featureFlags"
-import LoginPage from "components/Login/login"
+import LoginPage from "components/Login/Login"
 import { PendingUpgradeBanner } from "components/PendingUpgradeBanner"
 
 const tabTitle = ["about-you", "testimonies", "following"] as const

components/Login/Login.tsx

@@ -0,0 +1,86 @@
+import { useForm } from "react-hook-form"
+import { useRouter } from "next/router"
+import {
+  useSignInWithEmailAndPassword,
+  SignInWithEmailAndPasswordData
+} from "../auth/hooks"
+import { Form, Stack, Alert, Container, Row, Col, Card } from "../bootstrap"
+import Input from "../forms/Input"
+import PasswordInput from "../forms/PasswordInput"
+import { useTranslation } from "next-i18next"
+import { LoadingButton } from "../buttons"
+import SocialSignOnButtons from "components/auth/SocialSignOnButtons"
+import Divider from "../Divider/Divider"
+
+export default function Login() {
+  const router = useRouter()
+  const redirect = (router.query.redirect as string) || "/"
+  const { t } = useTranslation("auth")
+
+  const {
+    register,
+    handleSubmit,
+    formState: { errors }
+  } = useForm<SignInWithEmailAndPasswordData>()
+
+  const signIn = useSignInWithEmailAndPassword()
+
+  const success = () => {
+    const safeRedirect = redirect.startsWith("/") ? redirect : "/"
+    router.replace(safeRedirect)
+  }
+  const onSubmit = handleSubmit(credentials => {
+    signIn.execute(credentials).then(success)
+  })
+
+  return (
+    <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">{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}
+                />
+
+                <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>
+
+                <Divider className="px-4">{t("or")}</Divider>
+
+                <SocialSignOnButtons
+                  onComplete={() => router.replace(redirect)}
+                />
+              </Stack>
+            </Form>
+          </Card>
+        </Col>
+      </Row>
+    </Container>
+  )
+}

components/Login/login.tsx

@@ -14,7 +14,7 @@ import {
   StyledContainer
 } from "./StyledNewsfeedComponents"
 import ProfileSettingsModal from "components/EditProfilePage/ProfileSettingsModal"
-import LoginPage from "components/Login/login"
+import LoginPage from "components/Login/Login"
 import { NewsfeedCard } from "components/NewsfeedCard/NewsfeedCard"
 import { ProfileButtons } from "components/ProfilePage/ProfileButtons"
 

components/Newsfeed/Newsfeed.tsx

@@ -0,0 +1,21 @@
+import { useEffect } from "react"
+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
+}) => {
+  const dispatch = useDispatch()
+
+  useEffect(() => {
+    const auth = getAuth()
+    const unsubscribe = onAuthStateChanged(auth, (user: User | null) => {
+      dispatch(authChanged({ user }))
+    })
+
+    return () => unsubscribe()
+  }, [])
+
+  return <>{children}</>
+}

components/auth/Provider.tsx

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

components/auth/index.ts

@@ -23,12 +23,14 @@ export interface State {
   /** True iff user is signed in */
   authenticated: boolean
   authFlowStep: AuthFlowStep
+  loading: boolean
 }
 
 const initialState: State = {
   authenticated: false,
   user: undefined,
-  authFlowStep: null
+  authFlowStep: null,
+  loading: true
 }
 
 export const {
@@ -45,6 +47,7 @@ export const {
       state.user = payload.user
       state.claims = payload.claims
       state.authenticated = Boolean(payload.user)
+      state.loading = false
     },
     authStepChanged(state, action: PayloadAction<AuthFlowStep>) {
       state.authFlowStep = action.payload

components/auth/redux.ts

@@ -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/service.tsx

@@ -14,11 +14,10 @@ const Query = z.object({
 
 export default createPage({
   titleI18nKey: "navigation.editProfile",
-  Page: () => {
-    // Page: requireAuth(({ user }) => {
+  Page: requireAuth(() => {
     const tabTitle = Query.parse(useRouter().query).docName?.[0] || "about-you"
     return <EditProfile tabTitle={tabTitle as TabTitles} />
-  }
+  })
 })
 
 export const getStaticPaths: GetStaticPaths = async ctx => {

pages/edit-profile/[[...docName]].tsx

@@ -0,0 +1,15 @@
+import { createPage } from "../components/page"
+import Login from "components/Login/Login"
+
+export default createPage({
+  titleI18nKey: "navigation.login",
+  Page: () => <Login />
+})
+import { serverSideTranslations } from "next-i18next/serverSideTranslations"
+export async function getStaticProps({ locale }: any) {
+  return {
+    props: {
+      ...(await serverSideTranslations(locale, ["auth", "common"]))
+    }
+  }
+}