Create an Login page

Author: HuanFengYeh

components/Login/Login.tsx

@@ -0,0 +1,70 @@
+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 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 (
+    <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={onSubmit} />
+      </Stack>
+    </Form>
+  )
+}

components/auth/AuthRedirect.tsx

@@ -1,6 +1,6 @@
 import { useEffect } from 'react';
 import { useRouter } from 'next/router';
-import { useAuth } from '../auth'; // Adjust this path to your actual useAuth hook
+import { useAuth } from '../auth'; 
 
 export function useAuthRedirect(isAuthRequired: boolean = true) {
   const { user, loading } = useAuth();

components/auth/ProtectedPageWrapper.tsx

@@ -0,0 +1,25 @@
+import { useAuth } from '.'
+import { useRouter } from "next/router"
+import { useEffect } from "react"
+
+interface ProtectedPageWrapperProps {
+  children: React.ReactNode
+}
+
+export const ProtectedPageWrapper = ({ children }: ProtectedPageWrapperProps) => {
+  const { user, loading } = useAuth()
+  const router = useRouter()
+
+  useEffect(() => {
+    if (!loading && !user) {
+      const currentPath = router.asPath
+      router.replace(`/login?redirect=${encodeURIComponent(currentPath)}`)
+    }
+  }, [user, loading, router])
+
+  if (loading || !user) {
+    return <div>Loading...</div>
+  }
+
+  return <>{children}</>
+}

pages/login.tsx

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