├── .eslintrc.json
├── .gitignore
├── README.md
├── app
    ├── [locale]
    │   └── (root)
    │   │   ├── (auth)
    │   │       ├── _components
    │   │       │   ├── error-card.tsx
    │   │       │   ├── new-password-form.tsx
    │   │       │   ├── new-verification-form.tsx
    │   │       │   ├── reset-form.tsx
    │   │       │   ├── signin-form.tsx
    │   │       │   └── signup-form.tsx
    │   │       ├── error
    │   │       │   └── page.tsx
    │   │       ├── layout.tsx
    │   │       ├── new-password
    │   │       │   └── page.tsx
    │   │       ├── new-verification
    │   │       │   └── page.tsx
    │   │       ├── reset
    │   │       │   └── page.tsx
    │   │       ├── signin
    │   │       │   └── page.tsx
    │   │       └── signup
    │   │       │   └── page.tsx
    │   │   ├── (protected)
    │   │       ├── _components
    │   │       │   └── settings-form.tsx
    │   │       ├── layout.tsx
    │   │       └── settings
    │   │       │   └── page.tsx
    │   │   ├── favicon.ico
    │   │   ├── globals.css
    │   │   ├── layout.tsx
    │   │   └── page.tsx
    └── api
    │   ├── auth
    │       └── [...nextauth]
    │       │   └── route.ts
    │   ├── test
    │       └── email-preview
    │       │   └── route.ts
    │   ├── twofac
    │       ├── [id]
    │       │   └── route.ts
    │       └── user
    │       │   └── [userId]
    │       │       └── route.ts
    │   └── user
    │       ├── [id]
    │           └── route.ts
    │       ├── oauth
    │           └── route.ts
    │       └── route.ts
├── auth.config.ts
├── auth.ts
├── components.json
├── components
    ├── shared
    │   ├── button
    │   │   ├── back-button.tsx
    │   │   ├── locale-select.tsx
    │   │   ├── locale-switcher.tsx
    │   │   ├── mode-toggle.tsx
    │   │   ├── signin-button.tsx
    │   │   ├── signout-button.tsx
    │   │   ├── social-button.tsx
    │   │   └── user-button.tsx
    │   ├── footer.tsx
    │   ├── form
    │   │   ├── form-error.tsx
    │   │   ├── form-header.tsx
    │   │   ├── form-success.tsx
    │   │   └── form-wrapper.tsx
    │   ├── main-nav.tsx
    │   ├── navbar.tsx
    │   └── spinner.tsx
    └── ui
    │   ├── avatar.tsx
    │   ├── button.tsx
    │   ├── card.tsx
    │   ├── dialog.tsx
    │   ├── dropdown-menu.tsx
    │   ├── form.tsx
    │   ├── input.tsx
    │   ├── label.tsx
    │   ├── select.tsx
    │   ├── skeleton.tsx
    │   ├── switch.tsx
    │   ├── toast.tsx
    │   ├── toaster.tsx
    │   └── use-toast.ts
├── constants
    ├── auth-error.ts
    └── nav-links.ts
├── hooks
    └── use-session.ts
├── i18n
    ├── request.ts
    └── routing.ts
├── lib
    ├── actions
    │   └── auth
    │   │   ├── new-password.ts
    │   │   ├── new-verification.ts
    │   │   ├── reset-password.ts
    │   │   ├── settings.ts
    │   │   ├── signIn.ts
    │   │   ├── signin-with-credentials.ts
    │   │   ├── signout.ts
    │   │   └── signup-with-credentials.ts
    ├── api-client
    │   ├── twofac.ts
    │   └── user.ts
    ├── database
    │   ├── db.ts
    │   ├── models
    │   │   └── auth.model.ts
    │   ├── services
    │   │   ├── create-one.ts
    │   │   ├── index.ts
    │   │   └── update-model-field.ts
    │   └── types.ts
    ├── fetcher.ts
    ├── mail
    │   ├── nodemailer.ts
    │   └── resend.ts
    ├── session.ts
    ├── token.ts
    ├── utils.ts
    └── validations
    │   └── auth.ts
├── messages
    ├── en.json
    └── zh.json
├── middleware.ts
├── middleware
    ├── chain.ts
    ├── internal-auth.ts
    ├── with-Intl-middleware.ts
    └── with-auth-middleware.ts
├── next.config.mjs
├── package-lock.json
├── package.json
├── postcss.config.mjs
├── providers
    └── theme-provider.tsx
├── public
    ├── next.svg
    └── vercel.svg
├── routes.ts
├── tailwind.config.ts
├── tsconfig.json
└── types
    └── next-auth.d.ts


/.eslintrc.json:
--------------------------------------------------------------------------------
1 | {
2 |   "extends": "next/core-web-vitals"
3 | }
4 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | /.pnp
 6 | .pnp.js
 7 | .yarn/install-state.gz
 8 | 
 9 | # testing
10 | /coverage
11 | 
12 | # next.js
13 | /.next/
14 | /out/
15 | 
16 | # production
17 | /build
18 | 
19 | # misc
20 | .DS_Store
21 | *.pem
22 | 
23 | # debug
24 | npm-debug.log*
25 | yarn-debug.log*
26 | yarn-error.log*
27 | 
28 | # local env files
29 | .env*.local
30 | 
31 | # vercel
32 | .vercel
33 | 
34 | # typescript
35 | *.tsbuildinfo
36 | next-env.d.ts
37 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | ## Next.js 14 Fullstack NextAuth.js & i18n Example (with MongoDB + TypeScript)
  2 | A full-stack authentication demo built with Next.js 14, NextAuth.js v5, MongoDB (via Mongoose), and TypeScript.
  3 | 
  4 | Supports both Google OAuth and email/password login, with internationalization (i18n) and comprehensive authentication flows.
  5 | 
  6 | ## ✨ Features
  7 | - Google OAuth Login – Authenticate users via their Google accounts.
  8 | 
  9 | - Email & Password Authentication: Sign-in with email and password.
 10 | 
 11 | - Email Verification: Ensure account validity by requiring users to confirm their email address.
 12 | 
 13 | - Forgot Password Flow: Allow users to reset their password through a email link.
 14 | 
 15 | - Two-Factor Authentication (2FA): Login requires a digit verification code sent via email.
 16 | 
 17 | - User Account Settings: Let users update their username, change passwords, and enable or disable 2FA.
 18 | 
 19 | - Internationalization (i18n) with Auth Integration: Built-in locale routing with authentication middleware support.
 20 | 
 21 | This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
 22 | 
 23 | ## 🚀 Getting Started
 24 | 
 25 | Run the development server:
 26 | ```bash
 27 | npm run dev
 28 | # or
 29 | yarn dev
 30 | # or
 31 | pnpm dev
 32 | # or
 33 | bun dev
 34 | ```
 35 | 
 36 | Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
 37 | 
 38 | ## ⚙️ Environment Variables
 39 | Create a .env file in the project root and include the following:
 40 | 
 41 | ```env
 42 | NEXT_PUBLIC_APP_URL="http://localhost:3000"
 43 | 
 44 | AUTH_SECRET="YOUR_AUTH_SECRET"
 45 | INTERNAL_API_KEY="YOUR_INTERNAL_API_KEY"
 46 | INTERNAL_API_SECRET="YOUR_INTERNAL_API_SECRET"
 47 | NEXT_PUBLIC_INTERNAL_API_SECRET="YOUR_NEXT_PUBLIC_INTERNAL_API_SECRET"
 48 | 
 49 | MONGODB_URI="YOUR_MONGODB_URI"
 50 | 
 51 | GOOGLE_CLIENT_ID="YOUR_GOOGLE_CLIENT_ID"
 52 | GOOGLE_CLIENT_SECRET="YOUR_GOOGLE_CLIENT_SECRET"
 53 | 
 54 | TOKEN_SECRET="YOUR_TOKEN_SECRET"
 55 | 
 56 | # Resend
 57 | RESEND_API_KEY="YOUR_RESEND_API_KEY"
 58 | RESEND_EMAIL_URL="YOUR_RESEND_EMAIL_URL"
 59 | 
 60 | # OR
 61 | 
 62 | # Nodemailer
 63 | EMAIL_USER="YOUR_EMAIL_USER"
 64 | EMAIL_PASSWORD="YOUR_EMAIL_PASSWORD"
 65 | ```
 66 | 
 67 | ## 🔐 Getting Google OAuth Credentials
 68 | 
 69 | How to obtain GOOGLE_CLIENT_ID & GOOGLE_CLIENT_SECRET
 70 | 
 71 | - Go to [Google Cloud Console](https://console.cloud.google.com/) .
 72 | 
 73 | - Create a new project.
 74 | 
 75 | - Navigate to APIs & Services → Credentials.
 76 |   
 77 | - Click Create Credentials → OAuth client ID.
 78 |   
 79 | - Choose Web application.
 80 | 
 81 | - Under Authorized JavaScript origins, add: http://localhost:3000 .
 82 | 
 83 | - Under Authorized redirect URIs, add: http://localhost:3000/api/auth/callback/google.
 84 | 
 85 | - Configure your OAuth consent screen and publish the app.
 86 | 
 87 | ## 📚 Learn More
 88 | 
 89 | Explore these official resources to learn more:
 90 | 
 91 | - [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
 92 | - [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
 93 | - [NextAuth.js Documentation](https://next-auth.js.org) - Learn how to implement secure authentication with OAuth, credentials, JWT, and more.
 94 | - [next-intl Documentation](https://next-intl.dev) - A internationalization solution for Next.js.
 95 | 
 96 | ## ☁️ Deploy to Vercel
 97 | 
 98 | The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
 99 | 
100 | Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
101 | 


--------------------------------------------------------------------------------
/app/[locale]/(root)/(auth)/_components/error-card.tsx:
--------------------------------------------------------------------------------
 1 | "use client"
 2 | 
 3 | import { useSearchParams } from "next/navigation"
 4 | import { useTranslations } from "next-intl"
 5 | import { AuthErrorCode } from "@/constants/auth-error"
 6 | 
 7 | import { FiAlertTriangle } from "react-icons/fi"
 8 | import { FormWrapper } from "@/components/shared/form/form-wrapper"
 9 | 
10 | export const ErrorCard = () => {
11 |   const searchParams = useSearchParams()
12 |   const errorCode = searchParams.get("error") as AuthErrorCode
13 |   const tUi = useTranslations("ErrorCard.ui")
14 | 
15 |   const errorHeaders: Record<AuthErrorCode, string> = {
16 |     [AuthErrorCode.ACCESS_DENIED]: tUi("headerAccessDenied"),
17 |     [AuthErrorCode.PROVIDER_MISMATCH]: tUi("headerProviderMismatch"),
18 |     [AuthErrorCode.EMAIL_UNVERIFIED]: tUi("headerEmailUnverified"),
19 |     [AuthErrorCode.UNKNOWN]: tUi("headerUnknownError"),
20 |   }
21 | 
22 |   const errorMessages: Record<AuthErrorCode, string> = {
23 |     [AuthErrorCode.ACCESS_DENIED]: tUi("accessDenied"),
24 |     [AuthErrorCode.PROVIDER_MISMATCH]: tUi("providerMismatch"),
25 |     [AuthErrorCode.EMAIL_UNVERIFIED]: tUi("emailUnverified"),
26 |     [AuthErrorCode.UNKNOWN]: tUi("unknownError"),
27 |   }
28 | 
29 |   const headerLabel = errorHeaders[errorCode] ?? errorHeaders[AuthErrorCode.UNKNOWN]
30 |   const errorMessage = errorMessages[errorCode] ?? errorMessages[AuthErrorCode.UNKNOWN]
31 | 
32 |   return (
33 |     <FormWrapper
34 |       headerLabel={headerLabel}
35 |       backButtonLabel={tUi("backButton")}
36 |       backButtonHref="/signin"
37 |     >
38 |       <div className="w-full flex flex-col items-center">
39 |         <FiAlertTriangle className="text-destructive" />
40 |         <p className="text-center text-sm text-destructive">{errorMessage}</p>
41 |       </div>
42 |     </FormWrapper>
43 |   )
44 | }


--------------------------------------------------------------------------------
/app/[locale]/(root)/(auth)/_components/new-password-form.tsx:
--------------------------------------------------------------------------------
  1 | "use client"
  2 | 
  3 | import { useState, useTransition } from "react"
  4 | import { useForm } from "react-hook-form"
  5 | import { useTranslations } from "next-intl"
  6 | import { useSearchParams } from "next/navigation"
  7 | import { zodResolver } from "@hookform/resolvers/zod"
  8 | import {
  9 |   NewPasswordFormValues,
 10 |   getNewPasswordFormSchema
 11 | } from "@/lib/validations/auth"
 12 | import { newPassword } from "@/lib/actions/auth/new-password"
 13 | 
 14 | import { Button } from "@/components/ui/button"
 15 | import {
 16 |   Form,
 17 |   FormControl,
 18 |   FormField,
 19 |   FormItem,
 20 |   FormLabel,
 21 |   FormMessage,
 22 | } from "@/components/ui/form"
 23 | import { Input } from "@/components/ui/input"
 24 | import { FormError } from "@/components/shared/form/form-error"
 25 | import { FormSuccess } from "@/components/shared/form/form-success"
 26 | import { FormWrapper } from "@/components/shared/form/form-wrapper"
 27 | 
 28 | export const NewPasswordForm = () => {
 29 |   const searchParams = useSearchParams()
 30 |   const token = searchParams.get("token")
 31 | 
 32 |   const [error, setError] = useState<string | undefined>("")
 33 |   const [success, setSuccess] = useState<string | undefined>("")
 34 |   const [isPending, startTransition] = useTransition()
 35 | 
 36 |   const tUi = useTranslations("NewPasswordForm.ui")
 37 |   const tValidation = useTranslations("NewPasswordForm.validation")
 38 |   const tError = useTranslations("Common.error")
 39 | 
 40 |   const form = useForm<NewPasswordFormValues>({
 41 |     resolver: zodResolver(getNewPasswordFormSchema(tValidation)),
 42 |     defaultValues: {
 43 |       newPassword: "",
 44 |       confirmPassword: ""
 45 |     }
 46 |   })
 47 | 
 48 |   async function onSubmit(values: NewPasswordFormValues) {
 49 |     // console.log(values)
 50 |     setError("")
 51 |     setSuccess("")
 52 | 
 53 |     startTransition(() => {
 54 |       newPassword(values, token)
 55 |         .then((data) => {
 56 |           if (data?.error) {
 57 |             setError(data.error)
 58 |           } else if (data?.success) {
 59 |             setSuccess(data.success)
 60 |           }
 61 |         })
 62 |         .catch(() => setError(tError("generic")))
 63 |     })
 64 |   }
 65 | 
 66 |   return (
 67 |     <FormWrapper
 68 |       headerLabel={tUi("header")}
 69 |       backButtonLabel={tUi("backButton")}
 70 |       backButtonHref="/signin"
 71 |     >
 72 |       <Form {...form}>
 73 |         <form onSubmit={form.handleSubmit(onSubmit)} className="w-full">
 74 |           <div className="space-y-4">
 75 |             <FormField
 76 |               control={form.control}
 77 |               name="newPassword"
 78 |               render={({ field }) => (
 79 |                 <FormItem>
 80 |                   <FormLabel>{tUi("newPassword")}</FormLabel>
 81 |                   <FormControl>
 82 |                     <Input
 83 |                       disabled={isPending}
 84 |                       type="password"
 85 |                       placeholder={tUi("newPassword")}
 86 |                       autoComplete="new-password"
 87 |                       {...field}
 88 |                     />
 89 |                   </FormControl>
 90 |                   <FormMessage />
 91 |                 </FormItem>
 92 |               )}
 93 |             />
 94 |             <FormField
 95 |               control={form.control}
 96 |               name="confirmPassword"
 97 |               render={({ field }) => (
 98 |                 <FormItem>
 99 |                   <FormLabel>{tUi("confirmPassword")}</FormLabel>
100 |                   <FormControl>
101 |                     <Input
102 |                       disabled={isPending}
103 |                       type="password"
104 |                       placeholder={tUi("confirmPassword")}
105 |                       autoComplete="new-password"
106 |                       {...field}
107 |                     />
108 |                   </FormControl>
109 |                   <FormMessage />
110 |                 </FormItem>
111 |               )}
112 |             />
113 |           </div>
114 |           <FormError message={error} />
115 |           <FormSuccess message={success} />
116 |           <Button
117 |             size="lg"
118 |             className="w-full mt-6"
119 |             type="submit"
120 |             disabled={isPending}
121 |           >
122 |             {isPending ? tUi("submitting") : tUi("submit")}
123 |           </Button>
124 |         </form>
125 |       </Form>
126 |     </FormWrapper>
127 |   )
128 | }


--------------------------------------------------------------------------------
/app/[locale]/(root)/(auth)/_components/new-verification-form.tsx:
--------------------------------------------------------------------------------
 1 | "use client"
 2 | 
 3 | import { useCallback, useEffect, useState } from "react"
 4 | import { useSearchParams } from "next/navigation"
 5 | import { useTranslations } from "next-intl"
 6 | import { newVerification } from "@/lib/actions/auth/new-verification"
 7 | 
 8 | import { FormError } from "@/components/shared/form/form-error"
 9 | import { FormSuccess } from "@/components/shared/form/form-success"
10 | import { FormWrapper } from "@/components/shared/form/form-wrapper"
11 | import { Spinner } from "@/components/shared/spinner"
12 | 
13 | export const NewVerificationForm = () => {
14 |   const searchParams = useSearchParams()
15 |   const [error, setError] = useState<string | undefined>("")
16 |   const [success, setSuccess] = useState<string | undefined>("")
17 |   
18 |   const tUi = useTranslations("NewVerificationForm.ui")
19 |   const tError = useTranslations("Common.error")
20 | 
21 |   const token = searchParams.get("token")
22 | 
23 |   const onSubmit = useCallback(() => {
24 |     // console.log(token)
25 |     if (success || error) return
26 | 
27 |     if (!token) {
28 |       setError(tError("missingToken"))
29 |       return
30 |     }
31 | 
32 |     newVerification(token)
33 |       .then((data) => {
34 |         if (data?.error) {
35 |           setError(data.error)
36 |         } else if (data?.success) {
37 |           setSuccess(data.success)
38 |         }
39 |       })
40 |       .catch(() => setError(tError("generic")))
41 |   }, [token, success, error, tError])
42 | 
43 |   useEffect(() => {
44 |     onSubmit()
45 |   }, [onSubmit])
46 | 
47 |   return (
48 |     <FormWrapper
49 |       headerLabel={tUi("header")}
50 |       backButtonLabel={tUi("backButton")}
51 |       backButtonHref="/signin"
52 |     >
53 |       <div className="flex items-center w-full justify-center">
54 |         {!success && !error && (
55 |           <Spinner />
56 |         )}
57 |         <FormSuccess message={success} />
58 |         {!success && (
59 |           <FormError message={error} />
60 |         )}
61 |       </div>
62 |     </FormWrapper>
63 |   )
64 | }


--------------------------------------------------------------------------------
/app/[locale]/(root)/(auth)/_components/reset-form.tsx:
--------------------------------------------------------------------------------
  1 | "use client"
  2 | 
  3 | import { useState, useTransition } from "react"
  4 | import { useForm } from "react-hook-form"
  5 | import { useTranslations } from "next-intl"
  6 | import { zodResolver } from "@hookform/resolvers/zod"
  7 | import {
  8 |   ResetPasswordFormValues,
  9 |   getResetPasswordFormSchema
 10 | } from "@/lib/validations/auth"
 11 | import { resetPassword } from "@/lib/actions/auth/reset-password"
 12 | 
 13 | import { Button } from "@/components/ui/button"
 14 | import {
 15 |   Form,
 16 |   FormControl,
 17 |   FormField,
 18 |   FormItem,
 19 |   FormLabel,
 20 |   FormMessage,
 21 | } from "@/components/ui/form"
 22 | import { Input } from "@/components/ui/input"
 23 | import { FormError } from "@/components/shared/form/form-error"
 24 | import { FormSuccess } from "@/components/shared/form/form-success"
 25 | import { FormWrapper } from "@/components/shared/form/form-wrapper"
 26 | 
 27 | export const ResetForm = () => {
 28 |   const [error, setError] = useState<string | undefined>("")
 29 |   const [success, setSuccess] = useState<string | undefined>("")
 30 |   const [isPending, startTransition] = useTransition()
 31 | 
 32 |   const tUi = useTranslations("ResetForm.ui")
 33 |   const tValidation = useTranslations("ResetForm.validation")
 34 |   const tError = useTranslations("Common.error")
 35 | 
 36 |   const form = useForm<ResetPasswordFormValues>({
 37 |     resolver: zodResolver(getResetPasswordFormSchema(tValidation)),
 38 |     defaultValues: {
 39 |       email: ""
 40 |     }
 41 |   })
 42 | 
 43 |   async function onSubmit(values: ResetPasswordFormValues) {
 44 |     // console.log(values)
 45 |     setError("")
 46 |     setSuccess("")
 47 | 
 48 |     startTransition(() => {
 49 |       resetPassword(values)
 50 |         .then((data) => {
 51 |           if (data?.error) {
 52 |             setError(data.error)
 53 |           } else if (data?.success) {
 54 |             setSuccess(data.success)
 55 |           }
 56 |         })
 57 |         .catch(() => setError(tError("generic")))
 58 |     })
 59 |   }
 60 | 
 61 |   return (
 62 |     <FormWrapper
 63 |       headerLabel={tUi("header")}
 64 |       backButtonLabel={tUi("backButton")}
 65 |       backButtonHref="/signin"
 66 |     >
 67 |       <Form {...form}>
 68 |         <form onSubmit={form.handleSubmit(onSubmit)} className="w-full">
 69 |           <div className="space-y-4">
 70 |             <FormField
 71 |               control={form.control}
 72 |               name="email"
 73 |               render={({ field }) => (
 74 |                 <FormItem>
 75 |                   <FormLabel>{tUi("email")}</FormLabel>
 76 |                   <FormControl>
 77 |                     <Input
 78 |                       disabled={isPending}
 79 |                       placeholder="mail@example.com"
 80 |                       autoComplete="email"
 81 |                       {...field}
 82 |                     />
 83 |                   </FormControl>
 84 |                   <FormMessage />
 85 |                 </FormItem>
 86 |               )}
 87 |             />
 88 |           </div>
 89 |           <FormError message={error} />
 90 |           <FormSuccess message={success} />
 91 |           <Button
 92 |             size="lg"
 93 |             className="w-full mt-6"
 94 |             type="submit"
 95 |             disabled={isPending}
 96 |           >
 97 |             {isPending ? tUi("submitting") : tUi("submit")}
 98 |           </Button>
 99 |         </form>
100 |       </Form>
101 |     </FormWrapper>
102 |   )
103 | }


--------------------------------------------------------------------------------
/app/[locale]/(root)/(auth)/_components/signin-form.tsx:
--------------------------------------------------------------------------------
  1 | "use client"
  2 | 
  3 | import { useState, useTransition } from "react"
  4 | import { useSearchParams } from "next/navigation"
  5 | import { useForm } from "react-hook-form"
  6 | import { useTranslations } from "next-intl"
  7 | import { Link } from "@/i18n/routing"
  8 | import { zodResolver } from "@hookform/resolvers/zod"
  9 | import {
 10 |   SignInFormValues,
 11 |   getSignInFormSchema
 12 | } from "@/lib/validations/auth"
 13 | import { signInWithCredentials } from "@/lib/actions/auth/signin-with-credentials"
 14 | 
 15 | import { Button } from "@/components/ui/button"
 16 | import {
 17 |   Form,
 18 |   FormControl,
 19 |   FormField,
 20 |   FormItem,
 21 |   FormLabel,
 22 |   FormMessage,
 23 | } from "@/components/ui/form"
 24 | import { Input } from "@/components/ui/input"
 25 | import { FormError } from "@/components/shared/form/form-error"
 26 | import { FormSuccess } from "@/components/shared/form/form-success"
 27 | import { FormWrapper } from "@/components/shared/form/form-wrapper"
 28 | 
 29 | export const SignInForm = () => {
 30 |   const searchParams = useSearchParams()
 31 |   const callbackUrl = searchParams.get("callbackUrl")
 32 |   const [error, setError] = useState<string | undefined>("")
 33 |   const [success, setSuccess] = useState<string | undefined>("")
 34 |   const [showTwoFactor, setShowTwoFactor] = useState(false)
 35 |   const [isPending, startTransition] = useTransition()
 36 | 
 37 |   const tUi = useTranslations("SignInForm.ui")
 38 |   const tValidation = useTranslations("SignInForm.validation")
 39 |   const tError = useTranslations("Common.error")
 40 | 
 41 |   const form = useForm<SignInFormValues>({
 42 |     resolver: zodResolver(getSignInFormSchema(tValidation)),
 43 |     defaultValues: {
 44 |       email: "",
 45 |       password: "",
 46 |       code: "",
 47 |     }
 48 |   })
 49 | 
 50 |   async function onSubmit(values: SignInFormValues) {
 51 |     // console.log(values)
 52 |     setError("")
 53 |     setSuccess("")
 54 | 
 55 |     startTransition(() => {
 56 |       signInWithCredentials(values, callbackUrl)
 57 |         .then((data) => {
 58 |           if (data?.error) {
 59 |             setError(data.error)
 60 |           } else if (data?.success) {
 61 |             setSuccess(data.success)
 62 |           } else if (data?.url) {
 63 |             window.location.assign(data?.url)
 64 |           }
 65 | 
 66 |           if (data?.twoFactor) {
 67 |             setShowTwoFactor(true)
 68 |           }
 69 |         })
 70 |         .catch(() => setError(tError("generic")))
 71 |     })
 72 |   }
 73 | 
 74 |   return (
 75 |     <FormWrapper
 76 |       headerLabel={tUi("header")}
 77 |       backButtonLabel={tUi("backButton")}
 78 |       backButtonHref="/signup"
 79 |       showSocial
 80 |     >
 81 |       <Form {...form}>
 82 |         <form onSubmit={form.handleSubmit(onSubmit)} className="w-full">
 83 |           <div className="space-y-4">
 84 |             {showTwoFactor && (
 85 |               <FormField
 86 |                 control={form.control}
 87 |                 name="code"
 88 |                 render={({ field }) => (
 89 |                   <FormItem>
 90 |                     <FormLabel>{tUi("code")}</FormLabel>
 91 |                     <FormControl>
 92 |                       <Input
 93 |                         disabled={isPending}
 94 |                         placeholder="123456"
 95 |                         autoComplete="one-time-code"
 96 |                         {...field}
 97 |                       />
 98 |                     </FormControl>
 99 |                     <FormMessage />
100 |                   </FormItem>
101 |                 )}
102 |               />
103 |             )}
104 |             {!showTwoFactor && (
105 |             <>
106 |               <FormField
107 |                 control={form.control}
108 |                 name="email"
109 |                 render={({ field }) => (
110 |                   <FormItem>
111 |                     <FormLabel>{tUi("email")}</FormLabel>
112 |                     <FormControl>
113 |                       <Input
114 |                         disabled={isPending}
115 |                         placeholder="mail@example.com"
116 |                         autoComplete="email"
117 |                         {...field}
118 |                       />
119 |                     </FormControl>
120 |                     <FormMessage />
121 |                   </FormItem>
122 |                 )}
123 |               />
124 |               <FormField
125 |                 control={form.control}
126 |                 name="password"
127 |                 render={({ field }) => (
128 |                   <FormItem>
129 |                     <FormLabel>{tUi("password")}</FormLabel>
130 |                     <FormControl>
131 |                       <Input
132 |                         disabled={isPending}
133 |                         type="password"
134 |                         placeholder={tUi("password")}
135 |                         autoComplete="current-password"
136 |                         {...field}
137 |                       />
138 |                     </FormControl>
139 |                     <Button
140 |                       size="sm"
141 |                       variant="link"
142 |                       asChild
143 |                       className="px-0 font-normal"
144 |                     >
145 |                       <Link href="/reset">
146 |                         {tUi("resetLink")}
147 |                       </Link>
148 |                     </Button>
149 |                     <FormMessage />
150 |                   </FormItem>
151 |                 )}
152 |               />
153 |             </>
154 |           )}
155 |           </div>
156 |           <FormError message={error} />
157 |           <FormSuccess message={success} />
158 |           <Button
159 |             size="lg"
160 |             className="w-full mt-6"
161 |             type="submit"
162 |             disabled={isPending}
163 |           >
164 |             {isPending ? tUi("submitting") : showTwoFactor ? tUi("confirm") : tUi("submit")}
165 |           </Button>
166 |         </form>
167 |       </Form>
168 |     </FormWrapper>
169 |   )
170 | }


--------------------------------------------------------------------------------
/app/[locale]/(root)/(auth)/_components/signup-form.tsx:
--------------------------------------------------------------------------------
  1 | "use client"
  2 | 
  3 | import { useState, useTransition } from "react"
  4 | import { useForm } from "react-hook-form"
  5 | import { useTranslations } from "next-intl"
  6 | import { zodResolver } from "@hookform/resolvers/zod"
  7 | import { 
  8 |   SignUpFormValues,
  9 |   getSignUpFormSchema
 10 |  } from "@/lib/validations/auth"
 11 | import { signUpWithCredentials } from "@/lib/actions/auth/signup-with-credentials"
 12 | 
 13 | import { Button } from "@/components/ui/button"
 14 | import {
 15 |   Form,
 16 |   FormControl,
 17 |   FormField,
 18 |   FormItem,
 19 |   FormLabel,
 20 |   FormMessage,
 21 | } from "@/components/ui/form"
 22 | import { Input } from "@/components/ui/input"
 23 | import { FormError } from "@/components/shared/form/form-error"
 24 | import { FormSuccess } from "@/components/shared/form/form-success"
 25 | import { FormWrapper } from "@/components/shared/form/form-wrapper"
 26 | 
 27 | export const SignUpForm = () => {
 28 |   const [error, setError] = useState<string | undefined>("")
 29 |   const [success, setSuccess] = useState<string | undefined>("")
 30 |   const [isPending, startTransition] = useTransition()
 31 | 
 32 |   const tUi = useTranslations("SignUpForm.ui")
 33 |   const tValidation = useTranslations("SignUpForm.validation")
 34 |   const tError = useTranslations("Common.error")
 35 |   
 36 |   const form = useForm<SignUpFormValues>({
 37 |     resolver: zodResolver(getSignUpFormSchema(tValidation)),
 38 |     defaultValues: {
 39 |       name: "",
 40 |       email: "",
 41 |       password: "",
 42 |       confirmPassword: "",
 43 |     }
 44 |   })
 45 | 
 46 |   async function onSubmit(values: SignUpFormValues) {
 47 |     // console.log(values)
 48 |     setError("")
 49 |     setSuccess("")
 50 | 
 51 |     startTransition(() => {
 52 |       signUpWithCredentials(values)
 53 |         .then((data) => {
 54 |           if (data?.error) {
 55 |             setError(data.error)
 56 |           } else if (data?.success) {
 57 |             setSuccess(data.success)
 58 |           }
 59 |         })
 60 |         .catch(() => setError(tError("generic")))
 61 |     })
 62 |   }
 63 | 
 64 |   return (
 65 |     <FormWrapper
 66 |       headerLabel={tUi("header")}
 67 |       backButtonLabel={tUi("backButton")}
 68 |       backButtonHref="/signin"
 69 |       showSocial
 70 |     >
 71 |       <Form {...form}>
 72 |         <form onSubmit={form.handleSubmit(onSubmit)} className="w-full">
 73 |           <div className="space-y-4">
 74 |             <FormField
 75 |               control={form.control}
 76 |               name="name"
 77 |               render={({ field }) => (
 78 |                 <FormItem>
 79 |                   <FormLabel>{tUi("name")}</FormLabel>
 80 |                   <FormControl>
 81 |                     <Input
 82 |                       disabled={isPending}
 83 |                       placeholder={tUi("name")}
 84 |                       autoComplete="username"
 85 |                       {...field}
 86 |                     />
 87 |                   </FormControl>
 88 |                   <FormMessage />
 89 |                 </FormItem>
 90 |               )}
 91 |             />
 92 |             <FormField
 93 |               control={form.control}
 94 |               name="email"
 95 |               render={({ field }) => (
 96 |                 <FormItem>
 97 |                   <FormLabel>{tUi("email")}</FormLabel>
 98 |                   <FormControl>
 99 |                     <Input
100 |                       disabled={isPending}
101 |                       placeholder="mail@example.com"
102 |                       autoComplete="email"
103 |                       {...field}
104 |                     />
105 |                   </FormControl>
106 |                   <FormMessage />
107 |                 </FormItem>
108 |               )}
109 |             />
110 |             <FormField
111 |               control={form.control}
112 |               name="password"
113 |               render={({ field }) => (
114 |                 <FormItem>
115 |                   <FormLabel>{tUi("password")}</FormLabel>
116 |                   <FormControl>
117 |                     <Input
118 |                       disabled={isPending}
119 |                       type="password"
120 |                       placeholder={tUi("password")}
121 |                       autoComplete="new-password"
122 |                       {...field}
123 |                     />
124 |                   </FormControl>
125 |                   <FormMessage />
126 |                 </FormItem>
127 |               )}
128 |             />
129 |             <FormField
130 |               control={form.control}
131 |               name="confirmPassword"
132 |               render={({ field }) => (
133 |                 <FormItem>
134 |                   <FormLabel>{tUi("confirmPassword")}</FormLabel>
135 |                   <FormControl>
136 |                     <Input
137 |                       disabled={isPending}
138 |                       type="password"
139 |                       placeholder={tUi("confirmPassword")}
140 |                       autoComplete="new-password"
141 |                       {...field}
142 |                     />
143 |                   </FormControl>
144 |                   <FormMessage />
145 |                 </FormItem>
146 |               )}
147 |             />
148 |           </div>
149 |           <FormError message={error} />
150 |           <FormSuccess message={success} />
151 |           <Button
152 |             size="lg"
153 |             className="w-full mt-6"
154 |             type="submit"
155 |             disabled={isPending}
156 |           >
157 |             {isPending ? tUi("submitting") : tUi("submit")}
158 |           </Button>
159 |         </form>
160 |       </Form>
161 |     </FormWrapper>
162 |   )
163 | }


--------------------------------------------------------------------------------
/app/[locale]/(root)/(auth)/error/page.tsx:
--------------------------------------------------------------------------------
 1 | "use client"
 2 | 
 3 | import { ErrorCard } from "../_components/error-card"
 4 | 
 5 | const AuthErrorPage = () => {
 6 |   return (
 7 |     <section>
 8 |       <ErrorCard />
 9 |     </section>
10 |   )
11 | }
12 | 
13 | export default AuthErrorPage


--------------------------------------------------------------------------------
/app/[locale]/(root)/(auth)/layout.tsx:
--------------------------------------------------------------------------------
 1 | const AuthLayout = ({
 2 |   children
 3 | }: {
 4 |   children: React.ReactNode
 5 | }) => {
 6 |   return (
 7 |     <div className="h-full flex items-center justify-center">
 8 |       {children}
 9 |     </div>
10 |   )
11 | }
12 | 
13 | export default AuthLayout


--------------------------------------------------------------------------------
/app/[locale]/(root)/(auth)/new-password/page.tsx:
--------------------------------------------------------------------------------
 1 | import { NewPasswordForm } from "../_components/new-password-form"
 2 | 
 3 | const NewPasswordPage = () => {
 4 |   return (
 5 |     <section className="w-full">
 6 |       <NewPasswordForm />
 7 |     </section>
 8 |    )
 9 | }
10 |  
11 | export default NewPasswordPage


--------------------------------------------------------------------------------
/app/[locale]/(root)/(auth)/new-verification/page.tsx:
--------------------------------------------------------------------------------
 1 | import { NewVerificationForm } from "../_components/new-verification-form"
 2 | 
 3 | const NewVerificationPage = () => {
 4 |   return (
 5 |     <section className="w-full">
 6 |       <NewVerificationForm />
 7 |     </section>
 8 |    )
 9 | }
10 |  
11 | export default NewVerificationPage


--------------------------------------------------------------------------------
/app/[locale]/(root)/(auth)/reset/page.tsx:
--------------------------------------------------------------------------------
 1 | import { ResetForm } from "../_components/reset-form"
 2 | 
 3 | const ResetPage = () => {
 4 |   return (
 5 |     <section className="w-full">
 6 |       <ResetForm />
 7 |     </section>
 8 |   )
 9 | }
10 |  
11 | export default ResetPage


--------------------------------------------------------------------------------
/app/[locale]/(root)/(auth)/signin/page.tsx:
--------------------------------------------------------------------------------
 1 | import { SignInForm } from "../_components/signin-form"
 2 | 
 3 | const SignInPage = () => {
 4 |   return (
 5 |     <section className="w-full">
 6 |       <SignInForm />
 7 |     </section>
 8 |   )
 9 | }
10 | 
11 | export default SignInPage


--------------------------------------------------------------------------------
/app/[locale]/(root)/(auth)/signup/page.tsx:
--------------------------------------------------------------------------------
 1 | import { SignUpForm } from "../_components/signup-form"
 2 | 
 3 | const SignUpPage = () => {
 4 |   return (
 5 |     <section className="w-full">
 6 |       <SignUpForm />
 7 |     </section>
 8 |   )
 9 | }
10 | 
11 | export default SignUpPage


--------------------------------------------------------------------------------
/app/[locale]/(root)/(protected)/_components/settings-form.tsx:
--------------------------------------------------------------------------------
  1 | "use client"
  2 | 
  3 | import { useState, useTransition } from "react"
  4 | import { useForm } from "react-hook-form"
  5 | import { useTranslations } from "next-intl"
  6 | import { zodResolver } from "@hookform/resolvers/zod"
  7 | import { useSession } from "next-auth/react"
  8 | import { UserRole, UserProvider } from "@/lib/database/types"
  9 | import {
 10 |   SettingsFormValues,
 11 |   getSettingsFormSchema
 12 | } from "@/lib/validations/auth"
 13 | import { settings } from "@/lib/actions/auth/settings"
 14 | 
 15 | import {
 16 |   Card,
 17 |   CardContent,
 18 |   CardHeader
 19 | } from "@/components/ui/card"
 20 | import {
 21 |   Form,
 22 |   FormControl,
 23 |   FormField,
 24 |   FormItem,
 25 |   FormLabel,
 26 |   FormMessage,
 27 |   FormDescription,
 28 | } from "@/components/ui/form"
 29 | import { Input } from "@/components/ui/input"
 30 | import { Button } from "@/components/ui/button"
 31 | import { Switch } from "@/components/ui/switch"
 32 | import { FormError } from "@/components/shared/form/form-error"
 33 | import { FormSuccess } from "@/components/shared/form/form-success"
 34 | import { Skeleton } from "@/components/ui/skeleton"
 35 | 
 36 | export const SettingsForm = () => {
 37 |   const { data: session, status, update } = useSession({ required: true })
 38 |   const user = session?.user
 39 |   // console.log({user})
 40 | 
 41 |   const [error, setError] = useState<string | undefined>("")
 42 |   const [success, setSuccess] = useState<string | undefined>("")
 43 |   const [isPending, startTransition] = useTransition()
 44 | 
 45 |   const tUi = useTranslations("SettingsForm.ui")
 46 |   const tValidation = useTranslations("SettingsForm.validation")
 47 |   const tError = useTranslations("Common.error")
 48 | 
 49 |   const form = useForm<SettingsFormValues>({
 50 |     resolver: zodResolver(getSettingsFormSchema(tValidation)),
 51 |     defaultValues: {
 52 |       name: user?.name || "",
 53 |       email: user?.email || "",
 54 |       password: "",
 55 |       newPassword: "",
 56 |       role: user?.role || UserRole.USER,
 57 |       isTwoFactorEnabled: user?.isTwoFactorEnabled || false
 58 |     }
 59 |   })
 60 | 
 61 |   async function onSubmit(values: SettingsFormValues) {
 62 |     // console.log(values)
 63 |     setError("")
 64 |     setSuccess("")
 65 | 
 66 |     startTransition(() => {
 67 |       settings(values)
 68 |         .then((data) => {
 69 |           if (data?.error) {
 70 |             setError(data.error)
 71 |           } else if (data?.success) {
 72 |             update()
 73 |             setSuccess(data.success)
 74 |           }
 75 |         })
 76 |         .catch(() => setError(tError("generic")))
 77 |     })
 78 |   }
 79 | 
 80 |   if (status === "loading") {
 81 |     return <SettingsForm.Skeleton />
 82 |   }
 83 | 
 84 |   return (
 85 |     <Card className="w-[350px]">
 86 |       <CardHeader>
 87 |         <p className="text-2xl font-semibold text-center">
 88 |           {tUi("header")}
 89 |         </p>
 90 |       </CardHeader>
 91 |       <CardContent>
 92 |         <Form {...form}>
 93 |           <form onSubmit={form.handleSubmit(onSubmit)} className="w-full">
 94 |             <div className="space-y-4">
 95 |               <FormField
 96 |                 control={form.control}
 97 |                 name="name"
 98 |                 render={({ field }) => (
 99 |                   <FormItem>
100 |                     <FormLabel>{tUi("name")}</FormLabel>
101 |                     <FormControl>
102 |                       <Input
103 |                         disabled={isPending}
104 |                         placeholder={tUi("name")}
105 |                         autoComplete="username"
106 |                         {...field}
107 |                       />
108 |                     </FormControl>
109 |                     <FormMessage />
110 |                   </FormItem>
111 |                 )}
112 |               />
113 |               <FormField
114 |                 control={form.control}
115 |                 name="email"
116 |                 render={({ field }) => (
117 |                   <FormItem>
118 |                     <FormLabel>{tUi("email")}</FormLabel>
119 |                     <FormControl>
120 |                       <Input
121 |                         disabled={isPending || user?.provider !== UserProvider.CREDENTIALS}
122 |                         placeholder="mail@example.com"
123 |                         autoComplete="email"
124 |                         {...field}
125 |                       />
126 |                     </FormControl>
127 |                     <FormMessage />
128 |                   </FormItem>
129 |                 )}
130 |               />
131 |               {user?.provider === UserProvider.CREDENTIALS && (
132 |                 <>
133 |                   <FormField
134 |                     control={form.control}
135 |                     name="password"
136 |                     render={({ field }) => (
137 |                       <FormItem>
138 |                         <FormLabel>{tUi("password")}</FormLabel>
139 |                         <FormControl>
140 |                           <Input
141 |                             disabled={isPending}
142 |                             type="password"
143 |                             placeholder={tUi("password")}
144 |                             autoComplete="current-password"
145 |                             {...field}
146 |                           />
147 |                         </FormControl>
148 |                         <FormMessage />
149 |                       </FormItem>
150 |                     )}
151 |                   />
152 |                   <FormField
153 |                     control={form.control}
154 |                     name="newPassword"
155 |                     render={({ field }) => (
156 |                       <FormItem>
157 |                         <FormLabel>{tUi("newPassword")}</FormLabel>
158 |                         <FormControl>
159 |                           <Input
160 |                             disabled={isPending}
161 |                             type="password"
162 |                             placeholder={tUi("newPassword")}
163 |                             autoComplete="new-password"
164 |                             {...field}
165 |                           />
166 |                         </FormControl>
167 |                         <FormMessage />
168 |                       </FormItem>
169 |                     )}
170 |                   />
171 |                 </>
172 |               )}
173 |               {user?.provider === UserProvider.CREDENTIALS && (
174 |                 <FormField
175 |                 control={form.control}
176 |                 name="isTwoFactorEnabled"
177 |                 render={({ field }) => (
178 |                   <FormItem className="flex flex-row items-center justify-between rounded-lg border p-3 shadow-sm">
179 |                     <div className="space-y-0.5">
180 |                       <FormLabel>{tUi("isTwoFactorEnabled")}</FormLabel>
181 |                       <FormDescription>
182 |                         {tUi("isTwoFactorEnabledDescription")}
183 |                       </FormDescription>
184 |                     </div>
185 |                     <FormControl>
186 |                       <Switch
187 |                         disabled={isPending}
188 |                         checked={field.value}
189 |                         onCheckedChange={field.onChange}
190 |                       />
191 |                     </FormControl>
192 |                   </FormItem>
193 |                 )}
194 |                 />
195 |               )}
196 |             </div>
197 |             <FormError message={error} />
198 |             <FormSuccess message={success} />
199 |             <Button
200 |               size="lg"
201 |               className="w-full my-6"
202 |               type="submit"
203 |               disabled={isPending}
204 |             >
205 |               {isPending ? tUi("submitting") : tUi("submit")}
206 |             </Button>
207 |           </form>
208 |         </Form>
209 |       </CardContent>
210 |     </Card>
211 |   )
212 | }
213 | 
214 | SettingsForm.Skeleton = function SkeletonSettingsForm() {
215 |   return (
216 |     <Card className="w-[350px]">
217 |       <CardHeader>
218 |         <Skeleton className="h-10 w-1/2 mx-auto my-2" />
219 |       </CardHeader>
220 |       <CardContent>
221 |         <div className="space-y-6 my-6">
222 |           <Skeleton className="h-8 w-full" />
223 |           <Skeleton className="h-8 w-full" />
224 |           <Skeleton className="h-8 w-full" />
225 |           <Skeleton className="h-8 w-full" />
226 |         </div>
227 |       </CardContent>
228 |     </Card>
229 |   )
230 | }


--------------------------------------------------------------------------------
/app/[locale]/(root)/(protected)/layout.tsx:
--------------------------------------------------------------------------------
 1 | const ProtectedLayout = ({
 2 |   children
 3 | }: {
 4 |   children: React.ReactNode
 5 | }) => {
 6 |   return ( 
 7 |     <div className="h-full flex flex-col items-center justify-center">
 8 |       {children}
 9 |     </div>
10 |    )
11 | }
12 |  
13 | export default ProtectedLayout


--------------------------------------------------------------------------------
/app/[locale]/(root)/(protected)/settings/page.tsx:
--------------------------------------------------------------------------------
 1 | import { SettingsForm } from "../_components/settings-form"
 2 | 
 3 | const SettingsPage = async() => {
 4 |   return (
 5 |     <section className="w-full">
 6 |       <SettingsForm />
 7 |     </section>
 8 |   )
 9 | }
10 | 
11 | export default SettingsPage
12 | 


--------------------------------------------------------------------------------
/app/[locale]/(root)/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wei30172/nextauth-v5-mongodb-typescript-example/9a5ae3232058d6d22b455e2f3bc26021bf422eb2/app/[locale]/(root)/favicon.ico


--------------------------------------------------------------------------------
/app/[locale]/(root)/globals.css:
--------------------------------------------------------------------------------
 1 | @tailwind base;
 2 |   @tailwind components;
 3 |   @tailwind utilities;
 4 | 
 5 |   html,
 6 |   body,
 7 |   :root {
 8 |     height: 100%;
 9 |   }
10 |   
11 |   @layer base {
12 |     :root {
13 |       --background: 0 0% 100%;
14 |       --foreground: 222.2 84% 4.9%;
15 | 
16 |       --card: 0 0% 100%;
17 |       --card-foreground: 222.2 84% 4.9%;
18 | 
19 |       --popover: 0 0% 100%;
20 |       --popover-foreground: 222.2 84% 4.9%;
21 | 
22 |       --primary: 222.2 47.4% 11.2%;
23 |       --primary-foreground: 210 40% 98%;
24 | 
25 |       --secondary: 210 40% 96.1%;
26 |       --secondary-foreground: 222.2 47.4% 11.2%;
27 | 
28 |       --muted: 210 40% 96.1%;
29 |       --muted-foreground: 215.4 16.3% 46.9%;
30 | 
31 |       --accent: 210 40% 96.1%;
32 |       --accent-foreground: 222.2 47.4% 11.2%;
33 | 
34 |       --destructive: 0 84.2% 60.2%;
35 |       --destructive-foreground: 210 40% 98%;
36 | 
37 |       --border: 214.3 31.8% 91.4%;
38 |       --input: 214.3 31.8% 91.4%;
39 |       --ring: 222.2 84% 4.9%;
40 | 
41 |       --radius: 0.5rem;
42 |     }
43 | 
44 |     .dark {
45 |       --background: 222.2 84% 4.9%;
46 |       --foreground: 210 40% 98%;
47 | 
48 |       --card: 222.2 84% 4.9%;
49 |       --card-foreground: 210 40% 98%;
50 | 
51 |       --popover: 222.2 84% 4.9%;
52 |       --popover-foreground: 210 40% 98%;
53 | 
54 |       --primary: 210 40% 98%;
55 |       --primary-foreground: 222.2 47.4% 11.2%;
56 | 
57 |       --secondary: 217.2 32.6% 17.5%;
58 |       --secondary-foreground: 210 40% 98%;
59 | 
60 |       --muted: 217.2 32.6% 17.5%;
61 |       --muted-foreground: 215 20.2% 65.1%;
62 | 
63 |       --accent: 217.2 32.6% 17.5%;
64 |       --accent-foreground: 210 40% 98%;
65 | 
66 |       --destructive: 0 62.8% 30.6%;
67 |       --destructive-foreground: 210 40% 98%;
68 | 
69 |       --border: 217.2 32.6% 17.5%;
70 |       --input: 217.2 32.6% 17.5%;
71 |       --ring: 212.7 26.8% 83.9%;
72 |     }
73 |   }
74 | 
75 |   @layer base {
76 |     * {
77 |       @apply border-border;
78 |     }
79 |     body {
80 |       @apply bg-background text-foreground;
81 |     }
82 |   }
83 |   
84 |   /* ====== ANIMATION ====== */
85 |   .laoding-animation svg {
86 |     animation: blink-animation 3s infinite both;
87 |   }
88 | 
89 |   @keyframes blink-animation {
90 |     0% { opacity: 1; }
91 |     50% { opacity: 0; }
92 |     100% { opacity: 1; }
93 |   }


--------------------------------------------------------------------------------
/app/[locale]/(root)/layout.tsx:
--------------------------------------------------------------------------------
 1 | import type { Metadata } from "next"
 2 | import { NextIntlClientProvider } from "next-intl"
 3 | import { getMessages } from "next-intl/server"
 4 | import { notFound } from "next/navigation"
 5 | import { Inter } from "next/font/google"
 6 | import { SessionProvider } from "next-auth/react"
 7 | import { Locale, routing } from "@/i18n/routing"
 8 | import { auth } from '@/auth'
 9 | import "./globals.css"
10 | 
11 | import ThemeProvider from "@/providers/theme-provider"
12 | import { Navbar } from "@/components/shared/navbar"
13 | import { Footer } from "@/components/shared/footer"
14 | import { Toaster } from "@/components/ui/toaster"
15 | 
16 | const inter = Inter({ subsets: ["latin"] })
17 | 
18 | export const metadata: Metadata = {
19 |   title: "Nextjs fullstack Authentication",
20 |   description: "Sign-Up and Sign-In with Nextjs",
21 | }
22 | 
23 | export default async function AppLayout({
24 |   children,
25 |   params
26 | }: {
27 |   children: React.ReactNode
28 |   params: { locale: Locale }
29 | }) {
30 |   const { locale } = await params
31 |   if (!routing.locales.includes(locale as Locale)) {
32 |     notFound()
33 |   }
34 |   
35 |   const messages = await getMessages()
36 |   const session = await auth()
37 | 
38 |   // console.log({locale, messages})
39 |   
40 |   return (
41 |     <html suppressHydrationWarning lang={locale}>
42 |       <body className={inter.className}>
43 |         <SessionProvider session={session}>
44 |           <ThemeProvider
45 |             attribute="class"
46 |             defaultTheme="system"
47 |             enableSystem
48 |             disableTransitionOnChange
49 |           >
50 |             <NextIntlClientProvider messages={messages}>
51 |               <Navbar />
52 |               <main className="flex h-full flex-col items-center justify-center">
53 |                 {children}
54 |               </main>
55 |               <Footer />
56 |               <Toaster />
57 |             </NextIntlClientProvider>
58 |           </ThemeProvider>
59 |         </SessionProvider>
60 |       </body>
61 |     </html>
62 |   )
63 | }
64 | 


--------------------------------------------------------------------------------
/app/[locale]/(root)/page.tsx:
--------------------------------------------------------------------------------
 1 | import { useTranslations } from "next-intl"
 2 | 
 3 | export default function Home() {
 4 |   const tUi = useTranslations("HomePage.ui")
 5 | 
 6 |   return (
 7 |     <div>
 8 |       <h1>{tUi("title")}</h1>
 9 |     </div>
10 |   )
11 | }
12 | 


--------------------------------------------------------------------------------
/app/api/auth/[...nextauth]/route.ts:
--------------------------------------------------------------------------------
1 | import { handlers } from "@/auth"
2 | export const { GET, POST } = handlers


--------------------------------------------------------------------------------
/app/api/test/email-preview/route.ts:
--------------------------------------------------------------------------------
 1 | import { NextResponse } from "next/server"
 2 | 
 3 | // api/test/email-preview
 4 | export async function GET(
 5 |   req: Request
 6 | ) {
 7 |   const { searchParams } = new URL(req.url)
 8 |   const name = searchParams.get("name") || "World"
 9 |   const emailHtml = `
10 |     <html>
11 |       <body>
12 |         <h1>Hello, ${name}!</h1>
13 |         <p>This is a test email.</p>
14 |       </body>
15 |     </html>
16 |   `
17 | 
18 |   // const confirmLink = "#"
19 |   // const emailHtml = `
20 |   //   <body style="font-family: Arial, sans-serif; margin: 0; padding: 0; background-color: #f0fdfa;">
21 |   //     <div style="max-width: 600px; margin: 20px auto; padding: 20px; background-color: white; border-radius: 10px; box-shadow: 0 2px 4px rgba(0,0,0,0.1);">
22 |   //       <h1 style="color: #64748b; text-align: center;">Email Confirmation</h1>
23 |   //       <p style="color: #475569; font-size: 18px; text-align: center;">Please click the link below to confirm your email address:</p>
24 |   //       <table style="margin: 20px auto;">
25 |   //         <tr>
26 |   //           <td style="background-color: #64748b; padding: 10px 20px; border-radius: 5px; text-align: center;">
27 |   //             <a href="${confirmLink}" style="font-size: 18px; color: white; text-decoration: none; display: inline-block;">Click here to confirm email</a>
28 |   //           </td>
29 |   //         </tr>
30 |   //       </table>
31 |   //       <p style="color: #475569; text-align: center; margin-top: 20px;">If you did not request this email, please ignore it.</p>
32 |   //     </div>
33 |   //   </body>
34 |   // `
35 | 
36 |   // const confirmLink = "#"
37 |   // const emailHtml = `
38 |   //   <body style="font-family: Arial, sans-serif; margin: 0; padding: 0; background-color: #f0fdfa;">
39 |   //     <div style="max-width: 600px; margin: 20px auto; padding: 20px; background-color: white; border-radius: 10px; box-shadow: 0 2px 4px rgba(0,0,0,0.1);">
40 |   //       <h1 style="color: #64748b; text-align: center;">Password Reset</h1>
41 |   //       <p style="color: #475569; font-size: 18px; text-align: center;">Please click the link below to reset your password:</p>
42 |   //       <table style="margin: 20px auto;">
43 |   //         <tr>
44 |   //           <td style="background-color: #64748b; padding: 10px 20px; border-radius: 5px; text-align: center;">
45 |   //             <a href="${confirmLink}" style="font-size: 18px; color: white; text-decoration: none; display: inline-block;">Click here to reset password</a>
46 |   //           </td>
47 |   //         </tr>
48 |   //       </table>
49 |   //       <p style="color: #475569; text-align: center; margin-top: 20px;">If you did not request this email, please ignore it.</p>
50 |   //     </div>
51 |   //   </body>
52 |   // `
53 | 
54 |   // const token = "123456"
55 |   // const emailHtml = `
56 |   //   <body style="font-family: Arial, sans-serif; margin: 0; padding: 0; background-color: #f0fdfa;">
57 |   //     <div style="max-width: 600px; margin: 20px auto; padding: 20px; background-color: white; border-radius: 10px; box-shadow: 0 2px 4px rgba(0,0,0,0.1);">
58 |   //       <h1 style="color: #64748b; text-align: center;">Two-Factor Authentication</h1>
59 |   //       <p style="color: #475569; font-size: 18px; text-align: center;">Your 2FA code is:</p>
60 |   //       <table style="margin: 20px auto;">
61 |   //         <tr>
62 |   //           <td style="background-color: #64748b; padding: 10px 20px; border-radius: 5px; text-align: center;">
63 |   //             <span style="font-size: 24px; color: white; background-color: #64748b; padding: 10px 20px; border-radius: 5px; text-align: center;">
64 |   //               ${token}
65 |   //             </span>
66 |   //           </td>
67 |   //         </tr>
68 |   //       </table>
69 |   //       <p style="color: #475569; text-align: center; margin-top: 20px;">Please use this code to complete your login.</p>
70 |   //       <p style="color: #64748b; text-align: center; font-size: 14px; margin-top: 10px;">
71 |   //         For your security, never share this code with anyone.
72 |   //       </p>
73 |   //     </div>
74 |   //   </body>
75 |   // `
76 | 
77 |   return new NextResponse(emailHtml, {
78 |     headers: {
79 |       "Content-Type": "text/html"
80 |     }
81 |   })
82 | }


--------------------------------------------------------------------------------
/app/api/twofac/[id]/route.ts:
--------------------------------------------------------------------------------
 1 | import { NextRequest, NextResponse } from "next/server"
 2 | 
 3 | import { authorizeInternalRequest } from "@/middleware/internal-auth"
 4 | import connectDB from "@/lib/database/db"
 5 | import { TwoFactorConfirmation } from "@/lib/database/models/auth.model"
 6 | import { ITwoFactorConfirmation } from "@/lib/database/types"
 7 | 
 8 | // DELETE /api/twofac/:id
 9 | export async function DELETE(_: NextRequest, { params }: { params: { id: string } }) {
10 |   const authError = await authorizeInternalRequest(_)
11 |   if (authError) return authError
12 | 
13 |   await connectDB()
14 | 
15 |   try {
16 |     const confirmation = await TwoFactorConfirmation.findByIdAndDelete(params.id)
17 |     if (!confirmation) return NextResponse.json(null)
18 |     // console.log({confirmation})
19 |     
20 |     return NextResponse.json({
21 |       ...confirmation.toObject(),
22 |       _id: confirmation._id.toString()
23 |     } as ITwoFactorConfirmation)
24 |   } catch (error) {
25 |     return NextResponse.json(null, { status: 500 })
26 |   }
27 | }


--------------------------------------------------------------------------------
/app/api/twofac/user/[userId]/route.ts:
--------------------------------------------------------------------------------
 1 | import { NextRequest, NextResponse } from "next/server"
 2 | 
 3 | import { authorizeInternalRequest } from "@/middleware/internal-auth"
 4 | import connectDB from "@/lib/database/db"
 5 | import { TwoFactorConfirmation } from "@/lib/database/models/auth.model"
 6 | import { ITwoFactorConfirmation } from "@/lib/database/types"
 7 | 
 8 | // GET /api/twofac/user/:userId
 9 | export async function GET(_: NextRequest, { params }: { params: { userId: string } }) {
10 |   const authError = await authorizeInternalRequest(_)
11 |   if (authError) return authError
12 |   
13 |   await connectDB()
14 |   
15 |   try {
16 |     const confirmation = await TwoFactorConfirmation.findOne({ userId: params.userId })
17 |     if (!confirmation) return NextResponse.json(null)
18 |     // console.log({confirmation})
19 |     
20 |     return NextResponse.json({
21 |       ...confirmation.toObject(),
22 |       _id: confirmation._id.toString()
23 |     } as ITwoFactorConfirmation)
24 |   } catch (error) {
25 |     return NextResponse.json(null, { status: 500 })
26 |   }
27 | }


--------------------------------------------------------------------------------
/app/api/user/[id]/route.ts:
--------------------------------------------------------------------------------
 1 | import { NextRequest, NextResponse } from "next/server"
 2 | 
 3 | import { authorizeInternalRequest } from "@/middleware/internal-auth"
 4 | import connectDB from "@/lib/database/db"
 5 | import { User } from "@/lib/database/models/auth.model"
 6 | import { IUser } from "@/lib/database/types"
 7 | 
 8 | // GET /api/user/:id
 9 | export async function GET(req: NextRequest, { params }: { params: { id: string } }) {
10 |   const authError = await authorizeInternalRequest(req)
11 |   if (authError) return authError
12 | 
13 |   await connectDB()
14 |   
15 |   try {
16 |     const user = await User.findById(params.id)
17 |     if (!user) return NextResponse.json(null)
18 |     
19 |     return NextResponse.json({
20 |       ...user.toObject(),
21 |       _id: user._id.toString()
22 |     } as IUser)
23 | 
24 |   } catch (error) {
25 |     return NextResponse.json(null, { status: 500 })
26 |   }
27 | }


--------------------------------------------------------------------------------
/app/api/user/oauth/route.ts:
--------------------------------------------------------------------------------
 1 | import { NextRequest, NextResponse } from "next/server"
 2 | 
 3 | import { authorizeInternalRequest } from "@/middleware/internal-auth"
 4 | import connectDB from "@/lib/database/db"
 5 | import { User } from "@/lib/database/models/auth.model"
 6 | import { IUser } from "@/lib/database/types"
 7 | 
 8 | // PUT /api/user/oauth
 9 | export async function PUT(req: NextRequest) {
10 |   const authError = await authorizeInternalRequest(req)
11 |   if (authError) return authError
12 | 
13 |   await connectDB()
14 |   
15 |   try {
16 |     const { account, profile } = await req.json()
17 |     // console.log({ account, profile })
18 |   
19 |     const existingUser = await User.findOne({ email: profile.email })
20 |     // console.log({existingUser})
21 | 
22 |     if (existingUser) {
23 |       await User.findByIdAndUpdate(existingUser._id, {
24 |         emailVerified: new Date(),
25 |         image: profile.picture
26 |       })
27 |       
28 |       return NextResponse.json({
29 |         ...existingUser.toObject(),
30 |         _id: existingUser._id.toString()
31 |       } as IUser)
32 |     }
33 |   
34 |     const newUser = new User({
35 |       name: profile.name,
36 |       email: profile.email,
37 |       image: profile.picture,
38 |       provider: account.provider,
39 |       emailVerified: new Date()
40 |     })
41 |     
42 |     await newUser.save()
43 |     // console.log({newUser})
44 |   
45 |     return NextResponse.json({
46 |       ...newUser.toObject(),
47 |       _id: newUser._id.toString()
48 |     } as IUser)
49 |   } catch (error) {
50 |     return NextResponse.json(null, { status: 500 })
51 |   }
52 | }


--------------------------------------------------------------------------------
/app/api/user/route.ts:
--------------------------------------------------------------------------------
 1 | import { NextRequest, NextResponse } from "next/server"
 2 | 
 3 | import { authorizeInternalRequest } from "@/middleware/internal-auth"
 4 | import connectDB from "@/lib/database/db"
 5 | import { User } from "@/lib/database/models/auth.model"
 6 | import { IUser } from "@/lib/database/types"
 7 | 
 8 | // GET /api/user?email=xxx
 9 | export async function GET(req: NextRequest) {
10 |   const authError = await authorizeInternalRequest(req)
11 |   if (authError) return authError
12 |   
13 |   await connectDB()
14 |   
15 |   try {
16 |     const email = req.nextUrl.searchParams.get("email")
17 |     if (!email) {
18 |       return NextResponse.json({ error: "Missing email" }, { status: 400 })
19 |     }
20 | 
21 |     const user = await User.findOne({email})
22 |     if (!user) return NextResponse.json(null)
23 | 
24 |     return NextResponse.json({
25 |       ...user.toObject(),
26 |       _id: user._id.toString()
27 |     } as IUser)
28 |     
29 |   } catch (error) {
30 |     return NextResponse.json(null, { status: 500 })
31 |   }
32 | }


--------------------------------------------------------------------------------
/auth.config.ts:
--------------------------------------------------------------------------------
  1 | import bcrypt from "bcryptjs"
  2 | import type { NextAuthConfig } from "next-auth"
  3 | import Credentials from "next-auth/providers/credentials"
  4 | import Google from "next-auth/providers/google"
  5 | 
  6 | import { UserRole, UserProvider } from "@/lib/database/types"
  7 | import { getSignInFormSchema } from "@/lib/validations/auth"
  8 | import { getUserByEmail, getUserById, signInWithOauth } from "@/lib/api-client/user"
  9 | import { fetchConfirmationByUserId, deleteConfirmationById } from "@/lib/api-client/twofac"
 10 | import { routes } from "@/routes"
 11 | import { AuthErrorCode } from "@/constants/auth-error"
 12 | 
 13 | export default {
 14 |   session: { strategy: "jwt" },
 15 |   secret: process.env.AUTH_SECRET,
 16 |   pages: {
 17 |     signIn: routes.defaultSignInPage,
 18 |     error: routes.defaultErrorPage
 19 |   },
 20 |   providers: [
 21 |     Google({
 22 |       clientId: process.env.GOOGLE_CLIENT_ID,
 23 |       clientSecret: process.env.GOOGLE_CLIENT_SECRET
 24 |     }),
 25 |     Credentials({
 26 |       async authorize(credentials) {
 27 |         const validatedFields = getSignInFormSchema().safeParse(credentials)
 28 | 
 29 |         if (validatedFields.success) {
 30 |           const { email, password } = validatedFields.data
 31 | 
 32 |           const existingUser = await getUserByEmail(email)
 33 |           // console.log({existingUser})
 34 | 
 35 |           if (!existingUser || !existingUser.password) return null
 36 | 
 37 |           const passwordsMatch = await bcrypt.compare(
 38 |             password,
 39 |             existingUser.password
 40 |           )
 41 | 
 42 |           existingUser.password = ""
 43 | 
 44 |           // console.log({user})
 45 |           if (passwordsMatch) return existingUser
 46 |         }
 47 |         
 48 |         return null
 49 |       }
 50 |     })
 51 |   ],
 52 |   callbacks: {
 53 |     async signIn({ user, account, profile }) {
 54 |       // console.log({user})
 55 |       // console.log({account, profile})
 56 |       const isOauth = account?.provider && account.provider !== UserProvider.CREDENTIALS
 57 |       const email = profile?.email
 58 | 
 59 |       if (isOauth && email) {
 60 |         const existingUser = await getUserByEmail(email)
 61 | 
 62 |         if (existingUser && existingUser.provider !== account.provider) {
 63 |           return `${routes.defaultErrorPage}?error=${AuthErrorCode.PROVIDER_MISMATCH}`
 64 |         }
 65 | 
 66 |         // TODO: Test profile.email_verified behavior across providers (e.g., Google vs GitHub)
 67 |         if (account.provider === UserProvider.GOOGLE && !profile.email_verified) {
 68 |           return `${routes.defaultErrorPage}?error=${AuthErrorCode.EMAIL_UNVERIFIED}`
 69 |         }
 70 | 
 71 |         return await signInWithOauth({account, profile})
 72 |       }
 73 | 
 74 |       if (account?.provider === UserProvider.CREDENTIALS && user._id) {
 75 |         const existingUser = await getUserById(user._id)
 76 |         // console.log({existingUser})
 77 | 
 78 |         if (!existingUser?.emailVerified) return false
 79 | 
 80 |         if (existingUser?.isTwoFactorEnabled) {
 81 |           const twoFactorConfirmation = await fetchConfirmationByUserId(
 82 |             existingUser._id
 83 |           )
 84 |           if (!twoFactorConfirmation) return false
 85 | 
 86 |           await deleteConfirmationById(twoFactorConfirmation._id)
 87 |         }
 88 |       }
 89 | 
 90 |       return true
 91 |     },
 92 |     async jwt({ token }) {
 93 |       // console.log({token})
 94 |       if (!token.email) return token
 95 | 
 96 |       const existingUser = await getUserByEmail(token.email)
 97 | 
 98 |       if (!existingUser) return token
 99 | 
100 |       // console.log({existingUser})
101 |       token._id = existingUser._id
102 |       token.name = existingUser.name
103 |       token.email = existingUser.email
104 |       token.role = existingUser.role
105 |       token.provider = existingUser.provider
106 |       token.isTwoFactorEnabled = existingUser.isTwoFactorEnabled
107 |       
108 |       return token
109 |     },
110 |     async session({ session, token }) {
111 |       // console.log({session, token})
112 |       if (token._id && session.user) {
113 |         session.user._id = token._id as string
114 |         session.user.name = token.name as string
115 |         session.user.email = token.email as string
116 |         session.user.role = token.role as UserRole
117 |         session.user.provider = token.provider as string
118 |         session.user.isTwoFactorEnabled = token.isTwoFactorEnabled as boolean
119 |       }
120 | 
121 |       return session
122 |     }
123 |   }
124 | } satisfies NextAuthConfig


--------------------------------------------------------------------------------
/auth.ts:
--------------------------------------------------------------------------------
 1 | import NextAuth from "next-auth"
 2 |  
 3 | import authConfig from "@/auth.config"
 4 | 
 5 | export const {
 6 |   handlers,
 7 |   auth,
 8 |   signIn,
 9 |   signOut
10 | } = NextAuth({
11 |   ...authConfig
12 | })


--------------------------------------------------------------------------------
/components.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "$schema": "https://ui.shadcn.com/schema.json",
 3 |   "style": "new-york",
 4 |   "rsc": true,
 5 |   "tsx": true,
 6 |   "tailwind": {
 7 |     "config": "tailwind.config.ts",
 8 |     "css": "app/globals.css",
 9 |     "baseColor": "slate",
10 |     "cssVariables": true,
11 |     "prefix": ""
12 |   },
13 |   "aliases": {
14 |     "components": "@/components",
15 |     "utils": "@/lib/utils"
16 |   }
17 | }


--------------------------------------------------------------------------------
/components/shared/button/back-button.tsx:
--------------------------------------------------------------------------------
 1 | "use client"
 2 | 
 3 | import { Link } from "@/i18n/routing"
 4 | 
 5 | import { Button } from "@/components/ui/button"
 6 | 
 7 | interface BackButtonProps {
 8 |   href: string
 9 |   label: string
10 | }
11 | 
12 | export const BackButton = ({
13 |   href,
14 |   label,
15 | }: BackButtonProps) => {
16 |   return (
17 |     <Button
18 |       variant="link"
19 |       className="w-full"
20 |       size="lg"
21 |       asChild
22 |     >
23 |       <Link href={href}>
24 |         {label}
25 |       </Link>
26 |     </Button>
27 |   )
28 | }


--------------------------------------------------------------------------------
/components/shared/button/locale-select.tsx:
--------------------------------------------------------------------------------
 1 | "use client"
 2 | 
 3 | import { useSearchParams } from "next/navigation"
 4 | import { Locale, routing, usePathname, useRouter } from "@/i18n/routing"
 5 | 
 6 | import {
 7 |   Select,
 8 |   SelectContent,
 9 |   SelectItem,
10 |   SelectTrigger,
11 |   SelectValue,
12 | } from "@/components/ui/select"
13 | 
14 | 
15 | const localeLabelMap: Record<Locale, string> = {
16 |   en: "English",
17 |   zh: "繁體中文",
18 | }
19 | 
20 | export default function LocaleSelect({ value, label }: {
21 |   value: string
22 |   label: string
23 | }) {
24 |   const router = useRouter()
25 |   const pathname = usePathname()
26 |   const searchParams = useSearchParams()
27 | 
28 |   function onSelectChange(nextLocale: string) {
29 |     if (nextLocale !== value) {
30 |       router.replace(
31 |         {
32 |           pathname,
33 |           query: Object.fromEntries(searchParams.entries())
34 |         },
35 |         { locale: nextLocale as Locale }
36 |       )
37 |     }
38 |   }
39 | 
40 |   return (
41 |     <Select value={value} onValueChange={onSelectChange}>
42 |       <SelectTrigger
43 |         className="w-[120px] focus:ring-0 focus:ring-offset-0"
44 |         aria-label={label}
45 |         title={label}
46 |       >
47 |         <SelectValue placeholder="Select locale" />
48 |       </SelectTrigger>
49 |       <SelectContent>
50 |         {routing.locales.map((locale) => (
51 |           <SelectItem key={locale} value={locale}>
52 |             {localeLabelMap[locale as Locale] ?? locale.toUpperCase()}
53 |           </SelectItem>
54 |         ))}
55 |       </SelectContent>
56 |     </Select>
57 |   )
58 | }
59 | 


--------------------------------------------------------------------------------
/components/shared/button/locale-switcher.tsx:
--------------------------------------------------------------------------------
 1 | "use client"
 2 | 
 3 | import { useLocale } from "next-intl"
 4 | 
 5 | import { IoIosGlobe } from "react-icons/io"
 6 | import LocaleSelect from "./locale-select"
 7 | 
 8 | export const LocaleSwitcher = () => {
 9 |   const locale = useLocale()
10 | 
11 |   return (
12 |     <div className="flex items-center gap-2">
13 |       <IoIosGlobe className="h-8 w-8 text-muted-foreground" />
14 |       <LocaleSelect value={locale} label="Select a locale" />
15 |     </div>
16 |   )
17 | }


--------------------------------------------------------------------------------
/components/shared/button/mode-toggle.tsx:
--------------------------------------------------------------------------------
 1 | "use client"
 2 | 
 3 | import { useTheme } from "next-themes"
 4 | 
 5 | import { Button } from "@/components/ui/button"
 6 | import { IoMdMoon } from "react-icons/io"
 7 | import { IoMdSunny } from "react-icons/io"
 8 | 
 9 | export const ModeToggle = () => {
10 |   const { theme, setTheme } = useTheme()
11 | 
12 |   const toggleTheme = () => {
13 |     if (theme === "dark") {
14 |       setTheme("light")
15 |     } else {
16 |       setTheme("dark")
17 |     }
18 |   }
19 | 
20 |   return (
21 |     <Button variant="outline" size="icon" onClick={toggleTheme}>
22 |       <IoMdSunny className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
23 |       <IoMdMoon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
24 |       <span className="sr-only">Toggle theme</span>
25 |     </Button>
26 |   )
27 | }


--------------------------------------------------------------------------------
/components/shared/button/signin-button.tsx:
--------------------------------------------------------------------------------
 1 | "use client"
 2 | 
 3 | import { useRouter } from "next/navigation"
 4 | 
 5 | import { Button } from "@/components/ui/button"
 6 | 
 7 | interface SignInButtonProps {
 8 |   children: React.ReactNode
 9 | }
10 | 
11 | export const SignInButton = ({
12 |   children
13 | }: SignInButtonProps) => {
14 |   const router = useRouter()
15 | 
16 |   const onClick = () => router.push("/signin")
17 | 
18 |   return (
19 |     <Button onClick={onClick} className="w-full">
20 |       {children}
21 |     </Button>
22 |   )
23 | }


--------------------------------------------------------------------------------
/components/shared/button/signout-button.tsx:
--------------------------------------------------------------------------------
 1 | "use client"
 2 | 
 3 | import { logout } from "@/lib/actions/auth/signout"
 4 | import { routes } from "@/routes"
 5 | 
 6 | import { Button } from "@/components/ui/button"
 7 | 
 8 | interface SignOutButtonProps {
 9 |   children: React.ReactNode
10 | }
11 | 
12 | export const SignOutButton = ({
13 |   children
14 | }: SignOutButtonProps) => {
15 |   const handleClick = async() => {
16 |     await logout()
17 |     window.location.assign(routes.defaultLogoutRedirect)
18 |   }
19 | 
20 |   return (
21 |     <Button onClick={handleClick} variant="destructive" className="w-full">
22 |       {children}
23 |     </Button>
24 |   )
25 | }
26 | 


--------------------------------------------------------------------------------
/components/shared/button/social-button.tsx:
--------------------------------------------------------------------------------
 1 | "use client"
 2 | 
 3 | import { login } from "@/lib/actions/auth/signIn"
 4 | import { FcGoogle } from "react-icons/fc"
 5 | import { Button } from "@/components/ui/button"
 6 | 
 7 | export const SocialButton = () => {
 8 |   const onClick = (provider: "google") => login(provider)
 9 | 
10 |   return (
11 |     <div className="flex items-center w-full gap-x-2">
12 |       <Button
13 |         size="lg"
14 |         className="w-full"
15 |         variant="outline"
16 |         onClick={() => onClick("google")}
17 |       >
18 |         <FcGoogle className="h-4 w-4" />
19 |       </Button>
20 |     </div>
21 |   )
22 | }


--------------------------------------------------------------------------------
/components/shared/button/user-button.tsx:
--------------------------------------------------------------------------------
  1 | "use client"
  2 | 
  3 | import { Link } from "@/i18n/routing"
  4 | import { cn } from "@/lib/utils"
  5 | import { usePathname } from "next/navigation"
  6 | import { useCurrentUser } from "@/hooks/use-session"
  7 | import { useTranslations } from "next-intl"
  8 | 
  9 | import { FaRegUserCircle } from "react-icons/fa"
 10 | import { IoMdLogIn, IoMdLogOut } from "react-icons/io"
 11 | import {
 12 |   DropdownMenu,
 13 |   DropdownMenuContent,
 14 |   DropdownMenuItem,
 15 |   DropdownMenuTrigger,
 16 |   DropdownMenuSeparator
 17 | } from "@/components/ui/dropdown-menu"
 18 | import {
 19 |   Avatar,
 20 |   AvatarImage,
 21 |   AvatarFallback,
 22 | } from "@/components/ui/avatar"
 23 | import { SignInButton } from "@/components/shared/button/signin-button"
 24 | import { SignOutButton } from "@/components/shared/button/signout-button"
 25 | 
 26 | interface NavLink {
 27 |   title: string
 28 |   url: string
 29 | }
 30 | 
 31 | interface UserNavLinksProps {
 32 |   userNavLinks: NavLink[]
 33 |   pathName: string
 34 | }
 35 | 
 36 | const UserNavLinks = ({
 37 |   userNavLinks,
 38 |   pathName
 39 | }:  UserNavLinksProps) => (
 40 |   userNavLinks.map((link) => (
 41 |     <DropdownMenuItem key={link.title}>
 42 |       <Link
 43 |         href={link.url}
 44 |         className={cn(
 45 |           "py-2 text-sm transition-colors",
 46 |           pathName === link.url ? "text-black dark:text-white" : "text-muted-foreground"
 47 |         )}
 48 |       >
 49 |         {link.title}
 50 |       </Link>
 51 |     </DropdownMenuItem>
 52 |   ))
 53 | )
 54 | 
 55 | export const AuthLink = ({ isSignedIn = false }: { isSignedIn?: boolean }) => {
 56 |   const tUi = useTranslations("Navbar.ui")
 57 | 
 58 |   return isSignedIn ? (
 59 |     <SignOutButton>
 60 |       <IoMdLogOut className="h-4 w-4 mr-2"/>
 61 |       {tUi("signout")}
 62 |     </SignOutButton>
 63 |   ) : (
 64 |     <SignInButton>
 65 |       <IoMdLogIn className="h-4 w-4 mr-2"/>
 66 |       {tUi("signin")}
 67 |     </SignInButton>
 68 |   )
 69 | }
 70 | 
 71 | export const UserButton = () => {
 72 |   const pathName = usePathname()
 73 |   const user = useCurrentUser()
 74 |   // console.log({user})
 75 | 
 76 |   const tUi = useTranslations("Navbar.ui")
 77 | 
 78 |   const userNavLinks = [
 79 |     { title: tUi("settings"), url: "/settings" }
 80 |   ]
 81 |   
 82 |   return (
 83 |     <DropdownMenu>
 84 |       <DropdownMenuTrigger>
 85 |         <Avatar className="h-8 w-8">
 86 |           <AvatarImage src={user?.image || ""} />
 87 |           <AvatarFallback className="bg-primary-500">
 88 |             <FaRegUserCircle className="h-full w-full"/>
 89 |           </AvatarFallback>
 90 |         </Avatar>
 91 |       </DropdownMenuTrigger>
 92 |       <DropdownMenuContent className="w-40" align="end">
 93 |       {user && (
 94 |       <>
 95 |         <UserNavLinks userNavLinks={userNavLinks} pathName={pathName}/>
 96 |         <DropdownMenuSeparator />
 97 |       </>
 98 |       )}
 99 |         <DropdownMenuItem>
100 |           <AuthLink isSignedIn={!!user} />
101 |         </DropdownMenuItem>
102 |       </DropdownMenuContent>
103 |     </DropdownMenu>
104 |   )
105 | }
106 | 


--------------------------------------------------------------------------------
/components/shared/footer.tsx:
--------------------------------------------------------------------------------
 1 | import { useTranslations } from "next-intl"
 2 | import { Link } from "@/i18n/routing"
 3 | import { footerLinks } from "@/constants/nav-links"
 4 | 
 5 | import { SiAuth0 } from "react-icons/si"
 6 | 
 7 | export const Footer = () => {
 8 |   const tSection = useTranslations("Footer.ui.sections")
 9 |   const tLink = useTranslations("Footer.ui.links")
10 |   
11 |   return (
12 |     <footer className="flex flex-col text-gray-500 text-sm mt-5 border-t border-gray-100">
13 |       <div className="flex flex-wrap justify-center max-sm:flex-col gap-10 px-6 py-10 sm:gap-20">
14 |         {footerLinks.map((section) => (
15 |           <div key={section.sectionKey}>
16 |             <h3 className="pb-2 font-semibold text-gray-900 dark:text-gray-200">
17 |               {tSection(section.sectionKey)}
18 |             </h3>
19 |             <div className="flex flex-col gap-2">
20 |               {section.links.map((link) => (
21 |                 <Link key={link.key} href={link.url} className="md:text-xs">
22 |                   {tLink(link.key)}
23 |                 </Link>
24 |               ))}
25 |             </div>
26 |           </div>
27 |         ))}
28 | 
29 |       </div>
30 |       <div className="flex flex-wrap items-center justify-between border-t border-gray-100 gap-2 px-6 py-2 sm:px-20">
31 |         <div className="flex items-center gap-2">
32 |           <SiAuth0 />
33 |           <p className="text-gray-900 dark:text-gray-200">
34 |             &copy; Web
35 |           </p>
36 |         </div>
37 |         <div className="flex max-sm:flex-col gap-2 sm:gap-4">
38 |           <Link href="/">{tLink("privacy")}</Link>
39 |           <Link href="/">{tLink("terms")}</Link>
40 |         </div>
41 |       </div>
42 |     </footer>
43 |   )
44 | }


--------------------------------------------------------------------------------
/components/shared/form/form-error.tsx:
--------------------------------------------------------------------------------
 1 | import { FiAlertTriangle } from "react-icons/fi"
 2 | 
 3 | interface FormErrorProps {
 4 |   message?: string
 5 | }
 6 | 
 7 | export const FormError = ({
 8 |   message,
 9 | }: FormErrorProps) => {
10 |   if (!message) return null
11 | 
12 |   return (
13 |     <div className="flex items-center text-sm text-red-600 p-3 my-2 border-red-600 bg-red-100 rounded-md">
14 |       <FiAlertTriangle className="h-5 w-5 mr-2 text-red-600" />
15 |       <p>{message}</p>
16 |     </div>
17 |   )
18 | }


--------------------------------------------------------------------------------
/components/shared/form/form-header.tsx:
--------------------------------------------------------------------------------
 1 | interface HeaderProps {
 2 |   label: string
 3 | }
 4 | 
 5 | export const FormHeader = ({
 6 |   label,
 7 | }: HeaderProps) => {
 8 |   return (
 9 |     <div className="w-full flex flex-col gap-y-4 items-center justify-center">
10 |       <p className="text-muted-foreground text-lg">
11 |         {label}
12 |       </p>
13 |     </div>
14 |   )
15 | }


--------------------------------------------------------------------------------
/components/shared/form/form-success.tsx:
--------------------------------------------------------------------------------
 1 | import { RxCheckCircled } from "react-icons/rx"
 2 | 
 3 | interface FormSuccessProps {
 4 |   message?: string
 5 | }
 6 | 
 7 | export const FormSuccess = ({
 8 |   message,
 9 | }: FormSuccessProps) => {
10 |   if (!message) return null
11 | 
12 |   return (
13 |     <div className="flex items-center text-sm text-green-600 p-3 my-2 border-green-600 bg-green-100 rounded-md">
14 |       <RxCheckCircled className="h-5 w-5 mr-2 text-green-600" />
15 |       <p>{message}</p>
16 |     </div>
17 |   )
18 | }


--------------------------------------------------------------------------------
/components/shared/form/form-wrapper.tsx:
--------------------------------------------------------------------------------
 1 | "use client"
 2 | 
 3 | import { 
 4 |   Card,
 5 |   CardContent,
 6 |   CardFooter,
 7 |   CardHeader
 8 | } from "@/components/ui/card"
 9 | import { FormHeader } from "@/components/shared/form/form-header"
10 | import { SocialButton } from "@/components/shared/button/social-button"
11 | import { BackButton } from "@/components/shared/button/back-button"
12 | 
13 | interface FormWrapperProps {
14 |   children: React.ReactNode
15 |   headerLabel: string
16 |   backButtonLabel: string
17 |   backButtonHref: string
18 |   showSocial?: boolean
19 | }
20 | 
21 | export const FormWrapper = ({
22 |   children,
23 |   headerLabel,
24 |   backButtonLabel,
25 |   backButtonHref,
26 |   showSocial
27 | }: FormWrapperProps) => {
28 |   return (
29 |     <Card className="w-[360px] shadow-md">
30 |       <CardHeader>
31 |         <FormHeader label={headerLabel} />
32 |       </CardHeader>
33 |       <CardContent>
34 |         {children}
35 |       </CardContent>
36 |       {showSocial && (
37 |         <CardFooter>
38 |           <SocialButton />
39 |         </CardFooter>
40 |       )}
41 |       <CardFooter>
42 |         <BackButton
43 |           label={backButtonLabel}
44 |           href={backButtonHref}
45 |         />
46 |       </CardFooter>
47 |     </Card>
48 |   )
49 | }


--------------------------------------------------------------------------------
/components/shared/main-nav.tsx:
--------------------------------------------------------------------------------
 1 | "use client"
 2 | 
 3 | import { useState } from "react"
 4 | import { usePathname } from "next/navigation"
 5 | import { useTranslations } from "next-intl"
 6 | import { Link } from "@/i18n/routing"
 7 | import { cn } from "@/lib/utils"
 8 | import { mainNavLinks } from "@/constants/nav-links"
 9 | 
10 | import { AiOutlineMenu } from "react-icons/ai"
11 | 
12 | export const MainNav = () => {
13 |   const tLink = useTranslations("Navbar.ui.links")
14 |   const [menuOpen, setMenuOpen] = useState(false)
15 |   const pathName = usePathname()
16 | 
17 |   return (
18 |     <div className="flex items-center lg:space-x-6 mx-4">
19 |       <button onClick={() => setMenuOpen(!menuOpen)} className="lg:hidden">
20 |         <AiOutlineMenu />
21 |       </button>
22 |       <div className={cn(
23 |         "absolute top-full left-0 w-full border bg-gray-100 dark:bg-gray-900",
24 |         "lg:border-none lg:static lg:flex lg:space-x-6",
25 |         menuOpen ? "block" : "hidden"
26 |       )}>
27 |         {
28 |           mainNavLinks.map((link) => (
29 |             <Link
30 |               key={link.key}
31 |               href={link.url}
32 |               className={cn(
33 |                 "block py-2 px-4 text-sm transition-colors",
34 |                 pathName === link.url ? "text-black dark:text-white" : "text-muted-foreground"
35 |               )}
36 |             >
37 |               {tLink(link.key)}
38 |             </Link>
39 |           ))
40 |         }
41 |       </div>
42 |     </div>
43 |   )
44 | }


--------------------------------------------------------------------------------
/components/shared/navbar.tsx:
--------------------------------------------------------------------------------
 1 | import { Link } from "@/i18n/routing"
 2 | 
 3 | import { SiAuth0 } from "react-icons/si"
 4 | import { MainNav } from "@/components/shared/main-nav"
 5 | import { LocaleSwitcher } from "@/components/shared/button/locale-switcher"
 6 | import { UserButton } from "@/components/shared/button/user-button"
 7 | import { ModeToggle } from "@/components/shared/button/mode-toggle"
 8 | 
 9 | export const Navbar = () => {
10 |   return (
11 |     <header className="w-full fixed z-10 top-0 bg-gray-100 dark:bg-gray-900 border-b border-gray-200">
12 |       <nav className="h-16 px-4 flex items-center">
13 |         <Link href="/">
14 |           <SiAuth0 />
15 |         </Link>
16 |         <MainNav />
17 |         <div className="ml-auto flex items-center space-x-4">
18 |           <LocaleSwitcher />
19 |           <UserButton />
20 |           <ModeToggle />
21 |         </div>
22 |       </nav>
23 |     </header>
24 |   )
25 | }


--------------------------------------------------------------------------------
/components/shared/spinner.tsx:
--------------------------------------------------------------------------------
 1 | import { cva, type VariantProps } from "class-variance-authority"
 2 | import { cn } from "@/lib/utils"
 3 | 
 4 | import { FiLoader } from "react-icons/fi"
 5 | 
 6 | const spinnerVariants = cva(
 7 |   "text-muted-foreground animate-spin",
 8 |   {
 9 |     variants: {
10 |       size: {
11 |         default: "h-6 w-6",
12 |         sm: "h-2 w-2",
13 |         lg: "h-10 w-10"
14 |       }
15 |     },
16 |     defaultVariants: {
17 |       size: "default",
18 |     }
19 |   }
20 | )
21 | 
22 | interface SpinnerProps extends VariantProps<typeof spinnerVariants> {
23 |   className?: string
24 | }
25 | 
26 | export const Spinner = ({ 
27 |   size,
28 |   className
29 | }: SpinnerProps ) => {
30 |   return (
31 |     <FiLoader className={cn(spinnerVariants({ size }), className)} />
32 |   )
33 | }


--------------------------------------------------------------------------------
/components/ui/avatar.tsx:
--------------------------------------------------------------------------------
 1 | "use client"
 2 | 
 3 | import * as React from "react"
 4 | import * as AvatarPrimitive from "@radix-ui/react-avatar"
 5 | 
 6 | import { cn } from "@/lib/utils"
 7 | 
 8 | const Avatar = React.forwardRef<
 9 |   React.ElementRef<typeof AvatarPrimitive.Root>,
10 |   React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>
11 | >(({ className, ...props }, ref) => (
12 |   <AvatarPrimitive.Root
13 |     ref={ref}
14 |     className={cn(
15 |       "relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full",
16 |       className
17 |     )}
18 |     {...props}
19 |   />
20 | ))
21 | Avatar.displayName = AvatarPrimitive.Root.displayName
22 | 
23 | const AvatarImage = React.forwardRef<
24 |   React.ElementRef<typeof AvatarPrimitive.Image>,
25 |   React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
26 | >(({ className, ...props }, ref) => (
27 |   <AvatarPrimitive.Image
28 |     ref={ref}
29 |     className={cn("aspect-square h-full w-full", className)}
30 |     {...props}
31 |   />
32 | ))
33 | AvatarImage.displayName = AvatarPrimitive.Image.displayName
34 | 
35 | const AvatarFallback = React.forwardRef<
36 |   React.ElementRef<typeof AvatarPrimitive.Fallback>,
37 |   React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
38 | >(({ className, ...props }, ref) => (
39 |   <AvatarPrimitive.Fallback
40 |     ref={ref}
41 |     className={cn(
42 |       "flex h-full w-full items-center justify-center rounded-full bg-muted",
43 |       className
44 |     )}
45 |     {...props}
46 |   />
47 | ))
48 | AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName
49 | 
50 | export { Avatar, AvatarImage, AvatarFallback }
51 | 


--------------------------------------------------------------------------------
/components/ui/button.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | import { Slot } from "@radix-ui/react-slot"
 3 | import { cva, type VariantProps } from "class-variance-authority"
 4 | 
 5 | import { cn } from "@/lib/utils"
 6 | 
 7 | const buttonVariants = cva(
 8 |   "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
 9 |   {
10 |     variants: {
11 |       variant: {
12 |         default:
13 |           "bg-primary text-primary-foreground shadow hover:bg-primary/90",
14 |         destructive:
15 |           "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
16 |         outline:
17 |           "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
18 |         secondary:
19 |           "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
20 |         ghost: "hover:bg-accent hover:text-accent-foreground",
21 |         link: "text-primary underline-offset-4 hover:underline",
22 |       },
23 |       size: {
24 |         default: "h-9 px-4 py-2",
25 |         sm: "h-8 rounded-md px-3 text-xs",
26 |         lg: "h-10 rounded-md px-8",
27 |         icon: "h-9 w-9",
28 |       },
29 |     },
30 |     defaultVariants: {
31 |       variant: "default",
32 |       size: "default",
33 |     },
34 |   }
35 | )
36 | 
37 | export interface ButtonProps
38 |   extends React.ButtonHTMLAttributes<HTMLButtonElement>,
39 |     VariantProps<typeof buttonVariants> {
40 |   asChild?: boolean
41 | }
42 | 
43 | const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
44 |   ({ className, variant, size, asChild = false, ...props }, ref) => {
45 |     const Comp = asChild ? Slot : "button"
46 |     return (
47 |       <Comp
48 |         className={cn(buttonVariants({ variant, size, className }))}
49 |         ref={ref}
50 |         {...props}
51 |       />
52 |     )
53 |   }
54 | )
55 | Button.displayName = "Button"
56 | 
57 | export { Button, buttonVariants }
58 | 


--------------------------------------------------------------------------------
/components/ui/card.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | 
 3 | import { cn } from "@/lib/utils"
 4 | 
 5 | const Card = React.forwardRef<
 6 |   HTMLDivElement,
 7 |   React.HTMLAttributes<HTMLDivElement>
 8 | >(({ className, ...props }, ref) => (
 9 |   <div
10 |     ref={ref}
11 |     className={cn(
12 |       "rounded-xl border bg-card text-card-foreground shadow",
13 |       className
14 |     )}
15 |     {...props}
16 |   />
17 | ))
18 | Card.displayName = "Card"
19 | 
20 | const CardHeader = React.forwardRef<
21 |   HTMLDivElement,
22 |   React.HTMLAttributes<HTMLDivElement>
23 | >(({ className, ...props }, ref) => (
24 |   <div
25 |     ref={ref}
26 |     className={cn("flex flex-col space-y-1 p-2", className)}
27 |     {...props}
28 |   />
29 | ))
30 | CardHeader.displayName = "CardHeader"
31 | 
32 | const CardTitle = React.forwardRef<
33 |   HTMLParagraphElement,
34 |   React.HTMLAttributes<HTMLHeadingElement>
35 | >(({ className, ...props }, ref) => (
36 |   <h3
37 |     ref={ref}
38 |     className={cn("font-semibold leading-none tracking-tight", className)}
39 |     {...props}
40 |   />
41 | ))
42 | CardTitle.displayName = "CardTitle"
43 | 
44 | const CardDescription = React.forwardRef<
45 |   HTMLParagraphElement,
46 |   React.HTMLAttributes<HTMLParagraphElement>
47 | >(({ className, ...props }, ref) => (
48 |   <p
49 |     ref={ref}
50 |     className={cn("text-sm text-muted-foreground", className)}
51 |     {...props}
52 |   />
53 | ))
54 | CardDescription.displayName = "CardDescription"
55 | 
56 | const CardContent = React.forwardRef<
57 |   HTMLDivElement,
58 |   React.HTMLAttributes<HTMLDivElement>
59 | >(({ className, ...props }, ref) => (
60 |   <div ref={ref} className={cn("px-6 py-2 pt-0", className)} {...props} />
61 | ))
62 | CardContent.displayName = "CardContent"
63 | 
64 | const CardFooter = React.forwardRef<
65 |   HTMLDivElement,
66 |   React.HTMLAttributes<HTMLDivElement>
67 | >(({ className, ...props }, ref) => (
68 |   <div
69 |     ref={ref}
70 |     className={cn("flex items-center px-6 py-2 pt-0", className)}
71 |     {...props}
72 |   />
73 | ))
74 | CardFooter.displayName = "CardFooter"
75 | 
76 | export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }
77 | 


--------------------------------------------------------------------------------
/components/ui/dialog.tsx:
--------------------------------------------------------------------------------
  1 | "use client"
  2 | 
  3 | import * as React from "react"
  4 | import * as DialogPrimitive from "@radix-ui/react-dialog"
  5 | import { Cross2Icon } from "@radix-ui/react-icons"
  6 | 
  7 | import { cn } from "@/lib/utils"
  8 | 
  9 | const Dialog = DialogPrimitive.Root
 10 | 
 11 | const DialogTrigger = DialogPrimitive.Trigger
 12 | 
 13 | const DialogPortal = DialogPrimitive.Portal
 14 | 
 15 | const DialogClose = DialogPrimitive.Close
 16 | 
 17 | const DialogOverlay = React.forwardRef<
 18 |   React.ElementRef<typeof DialogPrimitive.Overlay>,
 19 |   React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
 20 | >(({ className, ...props }, ref) => (
 21 |   <DialogPrimitive.Overlay
 22 |     ref={ref}
 23 |     className={cn(
 24 |       "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
 25 |       className
 26 |     )}
 27 |     {...props}
 28 |   />
 29 | ))
 30 | DialogOverlay.displayName = DialogPrimitive.Overlay.displayName
 31 | 
 32 | const DialogContent = React.forwardRef<
 33 |   React.ElementRef<typeof DialogPrimitive.Content>,
 34 |   React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
 35 | >(({ className, children, ...props }, ref) => (
 36 |   <DialogPortal>
 37 |     <DialogOverlay />
 38 |     <DialogPrimitive.Content
 39 |       ref={ref}
 40 |       className={cn(
 41 |         "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
 42 |         className
 43 |       )}
 44 |       {...props}
 45 |     >
 46 |       {children}
 47 |       <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
 48 |         <Cross2Icon className="h-4 w-4" />
 49 |         <span className="sr-only">Close</span>
 50 |       </DialogPrimitive.Close>
 51 |     </DialogPrimitive.Content>
 52 |   </DialogPortal>
 53 | ))
 54 | DialogContent.displayName = DialogPrimitive.Content.displayName
 55 | 
 56 | const DialogHeader = ({
 57 |   className,
 58 |   ...props
 59 | }: React.HTMLAttributes<HTMLDivElement>) => (
 60 |   <div
 61 |     className={cn(
 62 |       "flex flex-col space-y-1.5 text-center sm:text-left",
 63 |       className
 64 |     )}
 65 |     {...props}
 66 |   />
 67 | )
 68 | DialogHeader.displayName = "DialogHeader"
 69 | 
 70 | const DialogFooter = ({
 71 |   className,
 72 |   ...props
 73 | }: React.HTMLAttributes<HTMLDivElement>) => (
 74 |   <div
 75 |     className={cn(
 76 |       "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
 77 |       className
 78 |     )}
 79 |     {...props}
 80 |   />
 81 | )
 82 | DialogFooter.displayName = "DialogFooter"
 83 | 
 84 | const DialogTitle = React.forwardRef<
 85 |   React.ElementRef<typeof DialogPrimitive.Title>,
 86 |   React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
 87 | >(({ className, ...props }, ref) => (
 88 |   <DialogPrimitive.Title
 89 |     ref={ref}
 90 |     className={cn(
 91 |       "text-lg font-semibold leading-none tracking-tight",
 92 |       className
 93 |     )}
 94 |     {...props}
 95 |   />
 96 | ))
 97 | DialogTitle.displayName = DialogPrimitive.Title.displayName
 98 | 
 99 | const DialogDescription = React.forwardRef<
100 |   React.ElementRef<typeof DialogPrimitive.Description>,
101 |   React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
102 | >(({ className, ...props }, ref) => (
103 |   <DialogPrimitive.Description
104 |     ref={ref}
105 |     className={cn("text-sm text-muted-foreground", className)}
106 |     {...props}
107 |   />
108 | ))
109 | DialogDescription.displayName = DialogPrimitive.Description.displayName
110 | 
111 | export {
112 |   Dialog,
113 |   DialogPortal,
114 |   DialogOverlay,
115 |   DialogTrigger,
116 |   DialogClose,
117 |   DialogContent,
118 |   DialogHeader,
119 |   DialogFooter,
120 |   DialogTitle,
121 |   DialogDescription,
122 | }
123 | 


--------------------------------------------------------------------------------
/components/ui/dropdown-menu.tsx:
--------------------------------------------------------------------------------
  1 | "use client"
  2 | 
  3 | import * as React from "react"
  4 | import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
  5 | import {
  6 |   CheckIcon,
  7 |   ChevronRightIcon,
  8 |   DotFilledIcon,
  9 | } from "@radix-ui/react-icons"
 10 | 
 11 | import { cn } from "@/lib/utils"
 12 | 
 13 | const DropdownMenu = DropdownMenuPrimitive.Root
 14 | 
 15 | const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger
 16 | 
 17 | const DropdownMenuGroup = DropdownMenuPrimitive.Group
 18 | 
 19 | const DropdownMenuPortal = DropdownMenuPrimitive.Portal
 20 | 
 21 | const DropdownMenuSub = DropdownMenuPrimitive.Sub
 22 | 
 23 | const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup
 24 | 
 25 | const DropdownMenuSubTrigger = React.forwardRef<
 26 |   React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
 27 |   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
 28 |     inset?: boolean
 29 |   }
 30 | >(({ className, inset, children, ...props }, ref) => (
 31 |   <DropdownMenuPrimitive.SubTrigger
 32 |     ref={ref}
 33 |     className={cn(
 34 |       "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent",
 35 |       inset && "pl-8",
 36 |       className
 37 |     )}
 38 |     {...props}
 39 |   >
 40 |     {children}
 41 |     <ChevronRightIcon className="ml-auto h-4 w-4" />
 42 |   </DropdownMenuPrimitive.SubTrigger>
 43 | ))
 44 | DropdownMenuSubTrigger.displayName =
 45 |   DropdownMenuPrimitive.SubTrigger.displayName
 46 | 
 47 | const DropdownMenuSubContent = React.forwardRef<
 48 |   React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
 49 |   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>
 50 | >(({ className, ...props }, ref) => (
 51 |   <DropdownMenuPrimitive.SubContent
 52 |     ref={ref}
 53 |     className={cn(
 54 |       "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
 55 |       className
 56 |     )}
 57 |     {...props}
 58 |   />
 59 | ))
 60 | DropdownMenuSubContent.displayName =
 61 |   DropdownMenuPrimitive.SubContent.displayName
 62 | 
 63 | const DropdownMenuContent = React.forwardRef<
 64 |   React.ElementRef<typeof DropdownMenuPrimitive.Content>,
 65 |   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
 66 | >(({ className, sideOffset = 4, ...props }, ref) => (
 67 |   <DropdownMenuPrimitive.Portal>
 68 |     <DropdownMenuPrimitive.Content
 69 |       ref={ref}
 70 |       sideOffset={sideOffset}
 71 |       className={cn(
 72 |         "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md",
 73 |         "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
 74 |         className
 75 |       )}
 76 |       {...props}
 77 |     />
 78 |   </DropdownMenuPrimitive.Portal>
 79 | ))
 80 | DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName
 81 | 
 82 | const DropdownMenuItem = React.forwardRef<
 83 |   React.ElementRef<typeof DropdownMenuPrimitive.Item>,
 84 |   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
 85 |     inset?: boolean
 86 |   }
 87 | >(({ className, inset, ...props }, ref) => (
 88 |   <DropdownMenuPrimitive.Item
 89 |     ref={ref}
 90 |     className={cn(
 91 |       "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
 92 |       inset && "pl-8",
 93 |       className
 94 |     )}
 95 |     {...props}
 96 |   />
 97 | ))
 98 | DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName
 99 | 
100 | const DropdownMenuCheckboxItem = React.forwardRef<
101 |   React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
102 |   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>
103 | >(({ className, children, checked, ...props }, ref) => (
104 |   <DropdownMenuPrimitive.CheckboxItem
105 |     ref={ref}
106 |     className={cn(
107 |       "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
108 |       className
109 |     )}
110 |     checked={checked}
111 |     {...props}
112 |   >
113 |     <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
114 |       <DropdownMenuPrimitive.ItemIndicator>
115 |         <CheckIcon className="h-4 w-4" />
116 |       </DropdownMenuPrimitive.ItemIndicator>
117 |     </span>
118 |     {children}
119 |   </DropdownMenuPrimitive.CheckboxItem>
120 | ))
121 | DropdownMenuCheckboxItem.displayName =
122 |   DropdownMenuPrimitive.CheckboxItem.displayName
123 | 
124 | const DropdownMenuRadioItem = React.forwardRef<
125 |   React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
126 |   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>
127 | >(({ className, children, ...props }, ref) => (
128 |   <DropdownMenuPrimitive.RadioItem
129 |     ref={ref}
130 |     className={cn(
131 |       "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
132 |       className
133 |     )}
134 |     {...props}
135 |   >
136 |     <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
137 |       <DropdownMenuPrimitive.ItemIndicator>
138 |         <DotFilledIcon className="h-4 w-4 fill-current" />
139 |       </DropdownMenuPrimitive.ItemIndicator>
140 |     </span>
141 |     {children}
142 |   </DropdownMenuPrimitive.RadioItem>
143 | ))
144 | DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName
145 | 
146 | const DropdownMenuLabel = React.forwardRef<
147 |   React.ElementRef<typeof DropdownMenuPrimitive.Label>,
148 |   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
149 |     inset?: boolean
150 |   }
151 | >(({ className, inset, ...props }, ref) => (
152 |   <DropdownMenuPrimitive.Label
153 |     ref={ref}
154 |     className={cn(
155 |       "px-2 py-1.5 text-sm font-semibold",
156 |       inset && "pl-8",
157 |       className
158 |     )}
159 |     {...props}
160 |   />
161 | ))
162 | DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName
163 | 
164 | const DropdownMenuSeparator = React.forwardRef<
165 |   React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
166 |   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
167 | >(({ className, ...props }, ref) => (
168 |   <DropdownMenuPrimitive.Separator
169 |     ref={ref}
170 |     className={cn("-mx-1 my-1 h-px bg-muted", className)}
171 |     {...props}
172 |   />
173 | ))
174 | DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName
175 | 
176 | const DropdownMenuShortcut = ({
177 |   className,
178 |   ...props
179 | }: React.HTMLAttributes<HTMLSpanElement>) => {
180 |   return (
181 |     <span
182 |       className={cn("ml-auto text-xs tracking-widest opacity-60", className)}
183 |       {...props}
184 |     />
185 |   )
186 | }
187 | DropdownMenuShortcut.displayName = "DropdownMenuShortcut"
188 | 
189 | export {
190 |   DropdownMenu,
191 |   DropdownMenuTrigger,
192 |   DropdownMenuContent,
193 |   DropdownMenuItem,
194 |   DropdownMenuCheckboxItem,
195 |   DropdownMenuRadioItem,
196 |   DropdownMenuLabel,
197 |   DropdownMenuSeparator,
198 |   DropdownMenuShortcut,
199 |   DropdownMenuGroup,
200 |   DropdownMenuPortal,
201 |   DropdownMenuSub,
202 |   DropdownMenuSubContent,
203 |   DropdownMenuSubTrigger,
204 |   DropdownMenuRadioGroup,
205 | }
206 | 


--------------------------------------------------------------------------------
/components/ui/form.tsx:
--------------------------------------------------------------------------------
  1 | import * as React from "react"
  2 | import * as LabelPrimitive from "@radix-ui/react-label"
  3 | import { Slot } from "@radix-ui/react-slot"
  4 | import {
  5 |   Controller,
  6 |   ControllerProps,
  7 |   FieldPath,
  8 |   FieldValues,
  9 |   FormProvider,
 10 |   useFormContext,
 11 | } from "react-hook-form"
 12 | 
 13 | import { cn } from "@/lib/utils"
 14 | import { Label } from "@/components/ui/label"
 15 | 
 16 | const Form = FormProvider
 17 | 
 18 | type FormFieldContextValue<
 19 |   TFieldValues extends FieldValues = FieldValues,
 20 |   TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
 21 | > = {
 22 |   name: TName
 23 | }
 24 | 
 25 | const FormFieldContext = React.createContext<FormFieldContextValue>(
 26 |   {} as FormFieldContextValue
 27 | )
 28 | 
 29 | const FormField = <
 30 |   TFieldValues extends FieldValues = FieldValues,
 31 |   TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
 32 | >({
 33 |   ...props
 34 | }: ControllerProps<TFieldValues, TName>) => {
 35 |   return (
 36 |     <FormFieldContext.Provider value={{ name: props.name }}>
 37 |       <Controller {...props} />
 38 |     </FormFieldContext.Provider>
 39 |   )
 40 | }
 41 | 
 42 | const useFormField = () => {
 43 |   const fieldContext = React.useContext(FormFieldContext)
 44 |   const itemContext = React.useContext(FormItemContext)
 45 |   const { getFieldState, formState } = useFormContext()
 46 | 
 47 |   const fieldState = getFieldState(fieldContext.name, formState)
 48 | 
 49 |   if (!fieldContext) {
 50 |     throw new Error("useFormField should be used within <FormField>")
 51 |   }
 52 | 
 53 |   const { id } = itemContext
 54 | 
 55 |   return {
 56 |     id,
 57 |     name: fieldContext.name,
 58 |     formItemId: `${id}-form-item`,
 59 |     formDescriptionId: `${id}-form-item-description`,
 60 |     formMessageId: `${id}-form-item-message`,
 61 |     ...fieldState,
 62 |   }
 63 | }
 64 | 
 65 | type FormItemContextValue = {
 66 |   id: string
 67 | }
 68 | 
 69 | const FormItemContext = React.createContext<FormItemContextValue>(
 70 |   {} as FormItemContextValue
 71 | )
 72 | 
 73 | const FormItem = React.forwardRef<
 74 |   HTMLDivElement,
 75 |   React.HTMLAttributes<HTMLDivElement>
 76 | >(({ className, ...props }, ref) => {
 77 |   const id = React.useId()
 78 | 
 79 |   return (
 80 |     <FormItemContext.Provider value={{ id }}>
 81 |       <div ref={ref} className={cn("space-y-", className)} {...props} />
 82 |     </FormItemContext.Provider>
 83 |   )
 84 | })
 85 | FormItem.displayName = "FormItem"
 86 | 
 87 | const FormLabel = React.forwardRef<
 88 |   React.ElementRef<typeof LabelPrimitive.Root>,
 89 |   React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>
 90 | >(({ className, ...props }, ref) => {
 91 |   const { error, formItemId } = useFormField()
 92 | 
 93 |   return (
 94 |     <Label
 95 |       ref={ref}
 96 |       className={cn(error && className)}
 97 |       htmlFor={formItemId}
 98 |       {...props}
 99 |     />
100 |   )
101 | })
102 | FormLabel.displayName = "FormLabel"
103 | 
104 | const FormControl = React.forwardRef<
105 |   React.ElementRef<typeof Slot>,
106 |   React.ComponentPropsWithoutRef<typeof Slot>
107 | >(({ ...props }, ref) => {
108 |   const { error, formItemId, formDescriptionId, formMessageId } = useFormField()
109 | 
110 |   return (
111 |     <Slot
112 |       ref={ref}
113 |       id={formItemId}
114 |       aria-describedby={
115 |         !error
116 |           ? `${formDescriptionId}`
117 |           : `${formDescriptionId} ${formMessageId}`
118 |       }
119 |       aria-invalid={!!error}
120 |       {...props}
121 |     />
122 |   )
123 | })
124 | FormControl.displayName = "FormControl"
125 | 
126 | const FormDescription = React.forwardRef<
127 |   HTMLParagraphElement,
128 |   React.HTMLAttributes<HTMLParagraphElement>
129 | >(({ className, ...props }, ref) => {
130 |   const { formDescriptionId } = useFormField()
131 | 
132 |   return (
133 |     <p
134 |       ref={ref}
135 |       id={formDescriptionId}
136 |       className={cn("text-[0.8rem] text-muted-foreground", className)}
137 |       {...props}
138 |     />
139 |   )
140 | })
141 | FormDescription.displayName = "FormDescription"
142 | 
143 | const FormMessage = React.forwardRef<
144 |   HTMLParagraphElement,
145 |   React.HTMLAttributes<HTMLParagraphElement>
146 | >(({ className, children, ...props }, ref) => {
147 |   const { error, formMessageId } = useFormField()
148 |   const body = error ? String(error?.message) : children
149 | 
150 |   if (!body) {
151 |     return null
152 |   }
153 | 
154 |   return (
155 |     <p
156 |       ref={ref}
157 |       id={formMessageId}
158 |       className={cn("text-[0.8rem] font-medium text-destructive", className)}
159 |       {...props}
160 |     >
161 |       {body}
162 |     </p>
163 |   )
164 | })
165 | FormMessage.displayName = "FormMessage"
166 | 
167 | export {
168 |   useFormField,
169 |   Form,
170 |   FormItem,
171 |   FormLabel,
172 |   FormControl,
173 |   FormDescription,
174 |   FormMessage,
175 |   FormField,
176 | }
177 | 


--------------------------------------------------------------------------------
/components/ui/input.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | 
 3 | import { cn } from "@/lib/utils"
 4 | 
 5 | export interface InputProps
 6 |   extends React.InputHTMLAttributes<HTMLInputElement> {}
 7 | 
 8 | const Input = React.forwardRef<HTMLInputElement, InputProps>(
 9 |   ({ className, type, ...props }, ref) => {
10 |     return (
11 |       <input
12 |         type={type}
13 |         className={cn(
14 |           "flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
15 |           className
16 |         )}
17 |         ref={ref}
18 |         {...props}
19 |       />
20 |     )
21 |   }
22 | )
23 | Input.displayName = "Input"
24 | 
25 | export { Input }
26 | 


--------------------------------------------------------------------------------
/components/ui/label.tsx:
--------------------------------------------------------------------------------
 1 | "use client"
 2 | 
 3 | import * as React from "react"
 4 | import * as LabelPrimitive from "@radix-ui/react-label"
 5 | import { cva, type VariantProps } from "class-variance-authority"
 6 | 
 7 | import { cn } from "@/lib/utils"
 8 | 
 9 | const labelVariants = cva(
10 |   "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
11 | )
12 | 
13 | const Label = React.forwardRef<
14 |   React.ElementRef<typeof LabelPrimitive.Root>,
15 |   React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &
16 |     VariantProps<typeof labelVariants>
17 | >(({ className, ...props }, ref) => (
18 |   <LabelPrimitive.Root
19 |     ref={ref}
20 |     className={cn(labelVariants(), className)}
21 |     {...props}
22 |   />
23 | ))
24 | Label.displayName = LabelPrimitive.Root.displayName
25 | 
26 | export { Label }
27 | 


--------------------------------------------------------------------------------
/components/ui/select.tsx:
--------------------------------------------------------------------------------
  1 | "use client"
  2 | 
  3 | import * as React from "react"
  4 | import {
  5 |   CaretSortIcon,
  6 |   CheckIcon,
  7 |   ChevronDownIcon,
  8 |   ChevronUpIcon,
  9 | } from "@radix-ui/react-icons"
 10 | import * as SelectPrimitive from "@radix-ui/react-select"
 11 | 
 12 | import { cn } from "@/lib/utils"
 13 | 
 14 | const Select = SelectPrimitive.Root
 15 | 
 16 | const SelectGroup = SelectPrimitive.Group
 17 | 
 18 | const SelectValue = SelectPrimitive.Value
 19 | 
 20 | const SelectTrigger = React.forwardRef<
 21 |   React.ElementRef<typeof SelectPrimitive.Trigger>,
 22 |   React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
 23 | >(({ className, children, ...props }, ref) => (
 24 |   <SelectPrimitive.Trigger
 25 |     ref={ref}
 26 |     className={cn(
 27 |       "flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
 28 |       className
 29 |     )}
 30 |     {...props}
 31 |   >
 32 |     {children}
 33 |     <SelectPrimitive.Icon asChild>
 34 |       <CaretSortIcon className="h-4 w-4 opacity-50" />
 35 |     </SelectPrimitive.Icon>
 36 |   </SelectPrimitive.Trigger>
 37 | ))
 38 | SelectTrigger.displayName = SelectPrimitive.Trigger.displayName
 39 | 
 40 | const SelectScrollUpButton = React.forwardRef<
 41 |   React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,
 42 |   React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>
 43 | >(({ className, ...props }, ref) => (
 44 |   <SelectPrimitive.ScrollUpButton
 45 |     ref={ref}
 46 |     className={cn(
 47 |       "flex cursor-default items-center justify-center py-1",
 48 |       className
 49 |     )}
 50 |     {...props}
 51 |   >
 52 |     <ChevronUpIcon />
 53 |   </SelectPrimitive.ScrollUpButton>
 54 | ))
 55 | SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName
 56 | 
 57 | const SelectScrollDownButton = React.forwardRef<
 58 |   React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,
 59 |   React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>
 60 | >(({ className, ...props }, ref) => (
 61 |   <SelectPrimitive.ScrollDownButton
 62 |     ref={ref}
 63 |     className={cn(
 64 |       "flex cursor-default items-center justify-center py-1",
 65 |       className
 66 |     )}
 67 |     {...props}
 68 |   >
 69 |     <ChevronDownIcon />
 70 |   </SelectPrimitive.ScrollDownButton>
 71 | ))
 72 | SelectScrollDownButton.displayName =
 73 |   SelectPrimitive.ScrollDownButton.displayName
 74 | 
 75 | const SelectContent = React.forwardRef<
 76 |   React.ElementRef<typeof SelectPrimitive.Content>,
 77 |   React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
 78 | >(({ className, children, position = "popper", ...props }, ref) => (
 79 |   <SelectPrimitive.Portal>
 80 |     <SelectPrimitive.Content
 81 |       ref={ref}
 82 |       className={cn(
 83 |         "relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
 84 |         position === "popper" &&
 85 |           "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
 86 |         className
 87 |       )}
 88 |       position={position}
 89 |       {...props}
 90 |     >
 91 |       <SelectScrollUpButton />
 92 |       <SelectPrimitive.Viewport
 93 |         className={cn(
 94 |           "p-1",
 95 |           position === "popper" &&
 96 |             "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
 97 |         )}
 98 |       >
 99 |         {children}
100 |       </SelectPrimitive.Viewport>
101 |       <SelectScrollDownButton />
102 |     </SelectPrimitive.Content>
103 |   </SelectPrimitive.Portal>
104 | ))
105 | SelectContent.displayName = SelectPrimitive.Content.displayName
106 | 
107 | const SelectLabel = React.forwardRef<
108 |   React.ElementRef<typeof SelectPrimitive.Label>,
109 |   React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
110 | >(({ className, ...props }, ref) => (
111 |   <SelectPrimitive.Label
112 |     ref={ref}
113 |     className={cn("px-2 py-1.5 text-sm font-semibold", className)}
114 |     {...props}
115 |   />
116 | ))
117 | SelectLabel.displayName = SelectPrimitive.Label.displayName
118 | 
119 | const SelectItem = React.forwardRef<
120 |   React.ElementRef<typeof SelectPrimitive.Item>,
121 |   React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
122 | >(({ className, children, ...props }, ref) => (
123 |   <SelectPrimitive.Item
124 |     ref={ref}
125 |     className={cn(
126 |       "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
127 |       className
128 |     )}
129 |     {...props}
130 |   >
131 |     <span className="absolute right-2 flex h-3.5 w-3.5 items-center justify-center">
132 |       <SelectPrimitive.ItemIndicator>
133 |         <CheckIcon className="h-4 w-4" />
134 |       </SelectPrimitive.ItemIndicator>
135 |     </span>
136 |     <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
137 |   </SelectPrimitive.Item>
138 | ))
139 | SelectItem.displayName = SelectPrimitive.Item.displayName
140 | 
141 | const SelectSeparator = React.forwardRef<
142 |   React.ElementRef<typeof SelectPrimitive.Separator>,
143 |   React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
144 | >(({ className, ...props }, ref) => (
145 |   <SelectPrimitive.Separator
146 |     ref={ref}
147 |     className={cn("-mx-1 my-1 h-px bg-muted", className)}
148 |     {...props}
149 |   />
150 | ))
151 | SelectSeparator.displayName = SelectPrimitive.Separator.displayName
152 | 
153 | export {
154 |   Select,
155 |   SelectGroup,
156 |   SelectValue,
157 |   SelectTrigger,
158 |   SelectContent,
159 |   SelectLabel,
160 |   SelectItem,
161 |   SelectSeparator,
162 |   SelectScrollUpButton,
163 |   SelectScrollDownButton,
164 | }
165 | 


--------------------------------------------------------------------------------
/components/ui/skeleton.tsx:
--------------------------------------------------------------------------------
 1 | import { cn } from "@/lib/utils"
 2 | 
 3 | function Skeleton({
 4 |   className,
 5 |   ...props
 6 | }: React.HTMLAttributes<HTMLDivElement>) {
 7 |   return (
 8 |     <div
 9 |       className={cn("animate-pulse rounded-md bg-primary/10", className)}
10 |       {...props}
11 |     />
12 |   )
13 | }
14 | 
15 | export { Skeleton }
16 | 


--------------------------------------------------------------------------------
/components/ui/switch.tsx:
--------------------------------------------------------------------------------
 1 | "use client"
 2 | 
 3 | import * as React from "react"
 4 | import * as SwitchPrimitives from "@radix-ui/react-switch"
 5 | 
 6 | import { cn } from "@/lib/utils"
 7 | 
 8 | const Switch = React.forwardRef<
 9 |   React.ElementRef<typeof SwitchPrimitives.Root>,
10 |   React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>
11 | >(({ className, ...props }, ref) => (
12 |   <SwitchPrimitives.Root
13 |     className={cn(
14 |       "peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
15 |       className
16 |     )}
17 |     {...props}
18 |     ref={ref}
19 |   >
20 |     <SwitchPrimitives.Thumb
21 |       className={cn(
22 |         "pointer-events-none block h-4 w-4 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0"
23 |       )}
24 |     />
25 |   </SwitchPrimitives.Root>
26 | ))
27 | Switch.displayName = SwitchPrimitives.Root.displayName
28 | 
29 | export { Switch }
30 | 


--------------------------------------------------------------------------------
/components/ui/toast.tsx:
--------------------------------------------------------------------------------
  1 | "use client"
  2 | 
  3 | import * as React from "react"
  4 | import { Cross2Icon } from "@radix-ui/react-icons"
  5 | import * as ToastPrimitives from "@radix-ui/react-toast"
  6 | import { cva, type VariantProps } from "class-variance-authority"
  7 | 
  8 | import { cn } from "@/lib/utils"
  9 | 
 10 | const ToastProvider = ToastPrimitives.Provider
 11 | 
 12 | const ToastViewport = React.forwardRef<
 13 |   React.ElementRef<typeof ToastPrimitives.Viewport>,
 14 |   React.ComponentPropsWithoutRef<typeof ToastPrimitives.Viewport>
 15 | >(({ className, ...props }, ref) => (
 16 |   <ToastPrimitives.Viewport
 17 |     ref={ref}
 18 |     className={cn(
 19 |       "fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]",
 20 |       className
 21 |     )}
 22 |     {...props}
 23 |   />
 24 | ))
 25 | ToastViewport.displayName = ToastPrimitives.Viewport.displayName
 26 | 
 27 | const toastVariants = cva(
 28 |   "group pointer-events-auto relative flex w-full items-center justify-between space-x-2 overflow-hidden rounded-md border p-4 pr-6 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full",
 29 |   {
 30 |     variants: {
 31 |       variant: {
 32 |         default: "border bg-background text-foreground",
 33 |         destructive:
 34 |           "destructive group border-destructive bg-destructive text-destructive-foreground",
 35 |       },
 36 |     },
 37 |     defaultVariants: {
 38 |       variant: "default",
 39 |     },
 40 |   }
 41 | )
 42 | 
 43 | const Toast = React.forwardRef<
 44 |   React.ElementRef<typeof ToastPrimitives.Root>,
 45 |   React.ComponentPropsWithoutRef<typeof ToastPrimitives.Root> &
 46 |     VariantProps<typeof toastVariants>
 47 | >(({ className, variant, ...props }, ref) => {
 48 |   return (
 49 |     <ToastPrimitives.Root
 50 |       ref={ref}
 51 |       className={cn(toastVariants({ variant }), className)}
 52 |       {...props}
 53 |     />
 54 |   )
 55 | })
 56 | Toast.displayName = ToastPrimitives.Root.displayName
 57 | 
 58 | const ToastAction = React.forwardRef<
 59 |   React.ElementRef<typeof ToastPrimitives.Action>,
 60 |   React.ComponentPropsWithoutRef<typeof ToastPrimitives.Action>
 61 | >(({ className, ...props }, ref) => (
 62 |   <ToastPrimitives.Action
 63 |     ref={ref}
 64 |     className={cn(
 65 |       "inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium transition-colors hover:bg-secondary focus:outline-none focus:ring-1 focus:ring-ring disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive",
 66 |       className
 67 |     )}
 68 |     {...props}
 69 |   />
 70 | ))
 71 | ToastAction.displayName = ToastPrimitives.Action.displayName
 72 | 
 73 | const ToastClose = React.forwardRef<
 74 |   React.ElementRef<typeof ToastPrimitives.Close>,
 75 |   React.ComponentPropsWithoutRef<typeof ToastPrimitives.Close>
 76 | >(({ className, ...props }, ref) => (
 77 |   <ToastPrimitives.Close
 78 |     ref={ref}
 79 |     className={cn(
 80 |       "absolute right-1 top-1 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-1 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600",
 81 |       className
 82 |     )}
 83 |     toast-close=""
 84 |     {...props}
 85 |   >
 86 |     <Cross2Icon className="h-4 w-4" />
 87 |   </ToastPrimitives.Close>
 88 | ))
 89 | ToastClose.displayName = ToastPrimitives.Close.displayName
 90 | 
 91 | const ToastTitle = React.forwardRef<
 92 |   React.ElementRef<typeof ToastPrimitives.Title>,
 93 |   React.ComponentPropsWithoutRef<typeof ToastPrimitives.Title>
 94 | >(({ className, ...props }, ref) => (
 95 |   <ToastPrimitives.Title
 96 |     ref={ref}
 97 |     className={cn("text-sm font-semibold [&+div]:text-xs", className)}
 98 |     {...props}
 99 |   />
100 | ))
101 | ToastTitle.displayName = ToastPrimitives.Title.displayName
102 | 
103 | const ToastDescription = React.forwardRef<
104 |   React.ElementRef<typeof ToastPrimitives.Description>,
105 |   React.ComponentPropsWithoutRef<typeof ToastPrimitives.Description>
106 | >(({ className, ...props }, ref) => (
107 |   <ToastPrimitives.Description
108 |     ref={ref}
109 |     className={cn("text-sm opacity-90", className)}
110 |     {...props}
111 |   />
112 | ))
113 | ToastDescription.displayName = ToastPrimitives.Description.displayName
114 | 
115 | type ToastProps = React.ComponentPropsWithoutRef<typeof Toast>
116 | 
117 | type ToastActionElement = React.ReactElement<typeof ToastAction>
118 | 
119 | export {
120 |   type ToastProps,
121 |   type ToastActionElement,
122 |   ToastProvider,
123 |   ToastViewport,
124 |   Toast,
125 |   ToastTitle,
126 |   ToastDescription,
127 |   ToastClose,
128 |   ToastAction,
129 | }
130 | 


--------------------------------------------------------------------------------
/components/ui/toaster.tsx:
--------------------------------------------------------------------------------
 1 | "use client"
 2 | 
 3 | import {
 4 |   Toast,
 5 |   ToastClose,
 6 |   ToastDescription,
 7 |   ToastProvider,
 8 |   ToastTitle,
 9 |   ToastViewport,
10 | } from "@/components/ui/toast"
11 | import { useToast } from "@/components/ui/use-toast"
12 | 
13 | export function Toaster() {
14 |   const { toasts } = useToast()
15 | 
16 |   const toastStatusColors = {
17 |     success: 'bg-green-500',
18 |     warning: 'bg-yellow-500',
19 |     error: 'bg-red-500'
20 |   }
21 |   
22 |   return (
23 |     <ToastProvider>
24 |       {toasts.map(function ({ id, title, description, action, status, ...props }) {
25 |         const toastClass = `bg-opacity-50 ${
26 |           status ? toastStatusColors[status] : 'bg-blue-500'
27 |         }`
28 |         
29 |         return (
30 |           <Toast key={id} {...props}>
31 |             <div className="grid gap-1">
32 |               {title && <ToastTitle>{title}</ToastTitle>}
33 |               {description && (
34 |                 <ToastDescription>{description}</ToastDescription>
35 |               )}
36 |             </div>
37 |             {action}
38 |             <ToastClose />
39 |           </Toast>
40 |         )
41 |       })}
42 |       <ToastViewport />
43 |     </ToastProvider>
44 |   )
45 | }
46 | 


--------------------------------------------------------------------------------
/components/ui/use-toast.ts:
--------------------------------------------------------------------------------
  1 | "use client"
  2 | 
  3 | // Inspired by react-hot-toast library
  4 | import * as React from "react"
  5 | 
  6 | import type {
  7 |   ToastActionElement,
  8 |   ToastProps,
  9 | } from "@/components/ui/toast"
 10 | 
 11 | const TOAST_LIMIT = 1
 12 | const TOAST_REMOVE_DELAY = 1000000
 13 | 
 14 | type ToasterToast = ToastProps & {
 15 |   id: string
 16 |   title?: React.ReactNode
 17 |   description?: React.ReactNode
 18 |   action?: ToastActionElement
 19 |   status?: 'success' | 'warning' | 'error'
 20 | }
 21 | 
 22 | const actionTypes = {
 23 |   ADD_TOAST: "ADD_TOAST",
 24 |   UPDATE_TOAST: "UPDATE_TOAST",
 25 |   DISMISS_TOAST: "DISMISS_TOAST",
 26 |   REMOVE_TOAST: "REMOVE_TOAST",
 27 | } as const
 28 | 
 29 | let count = 0
 30 | 
 31 | function genId() {
 32 |   count = (count + 1) % Number.MAX_SAFE_INTEGER
 33 |   return count.toString()
 34 | }
 35 | 
 36 | type ActionType = typeof actionTypes
 37 | 
 38 | type Action =
 39 |   | {
 40 |       type: ActionType["ADD_TOAST"]
 41 |       toast: ToasterToast
 42 |     }
 43 |   | {
 44 |       type: ActionType["UPDATE_TOAST"]
 45 |       toast: Partial<ToasterToast>
 46 |     }
 47 |   | {
 48 |       type: ActionType["DISMISS_TOAST"]
 49 |       toastId?: ToasterToast["id"]
 50 |     }
 51 |   | {
 52 |       type: ActionType["REMOVE_TOAST"]
 53 |       toastId?: ToasterToast["id"]
 54 |     }
 55 | 
 56 | interface State {
 57 |   toasts: ToasterToast[]
 58 | }
 59 | 
 60 | const toastTimeouts = new Map<string, ReturnType<typeof setTimeout>>()
 61 | 
 62 | const addToRemoveQueue = (toastId: string) => {
 63 |   if (toastTimeouts.has(toastId)) {
 64 |     return
 65 |   }
 66 | 
 67 |   const timeout = setTimeout(() => {
 68 |     toastTimeouts.delete(toastId)
 69 |     dispatch({
 70 |       type: "REMOVE_TOAST",
 71 |       toastId: toastId,
 72 |     })
 73 |   }, TOAST_REMOVE_DELAY)
 74 | 
 75 |   toastTimeouts.set(toastId, timeout)
 76 | }
 77 | 
 78 | export const reducer = (state: State, action: Action): State => {
 79 |   switch (action.type) {
 80 |     case "ADD_TOAST":
 81 |       return {
 82 |         ...state,
 83 |         toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT),
 84 |       }
 85 | 
 86 |     case "UPDATE_TOAST":
 87 |       return {
 88 |         ...state,
 89 |         toasts: state.toasts.map((t) =>
 90 |           t.id === action.toast.id ? { ...t, ...action.toast } : t
 91 |         ),
 92 |       }
 93 | 
 94 |     case "DISMISS_TOAST": {
 95 |       const { toastId } = action
 96 | 
 97 |       // ! Side effects ! - This could be extracted into a dismissToast() action,
 98 |       // but I'll keep it here for simplicity
 99 |       if (toastId) {
100 |         addToRemoveQueue(toastId)
101 |       } else {
102 |         state.toasts.forEach((toast) => {
103 |           addToRemoveQueue(toast.id)
104 |         })
105 |       }
106 | 
107 |       return {
108 |         ...state,
109 |         toasts: state.toasts.map((t) =>
110 |           t.id === toastId || toastId === undefined
111 |             ? {
112 |                 ...t,
113 |                 open: false,
114 |               }
115 |             : t
116 |         ),
117 |       }
118 |     }
119 |     case "REMOVE_TOAST":
120 |       if (action.toastId === undefined) {
121 |         return {
122 |           ...state,
123 |           toasts: [],
124 |         }
125 |       }
126 |       return {
127 |         ...state,
128 |         toasts: state.toasts.filter((t) => t.id !== action.toastId),
129 |       }
130 |   }
131 | }
132 | 
133 | const listeners: Array<(state: State) => void> = []
134 | 
135 | let memoryState: State = { toasts: [] }
136 | 
137 | function dispatch(action: Action) {
138 |   memoryState = reducer(memoryState, action)
139 |   listeners.forEach((listener) => {
140 |     listener(memoryState)
141 |   })
142 | }
143 | 
144 | type Toast = Omit<ToasterToast, "id">
145 | 
146 | function toast({ ...props }: Toast) {
147 |   const id = genId()
148 | 
149 |   const update = (props: ToasterToast) =>
150 |     dispatch({
151 |       type: "UPDATE_TOAST",
152 |       toast: { ...props, id },
153 |     })
154 |   const dismiss = () => dispatch({ type: "DISMISS_TOAST", toastId: id })
155 | 
156 |   dispatch({
157 |     type: "ADD_TOAST",
158 |     toast: {
159 |       ...props,
160 |       id,
161 |       open: true,
162 |       onOpenChange: (open) => {
163 |         if (!open) dismiss()
164 |       },
165 |     },
166 |   })
167 | 
168 |   return {
169 |     id: id,
170 |     dismiss,
171 |     update,
172 |   }
173 | }
174 | 
175 | function useToast() {
176 |   const [state, setState] = React.useState<State>(memoryState)
177 | 
178 |   React.useEffect(() => {
179 |     listeners.push(setState)
180 |     return () => {
181 |       const index = listeners.indexOf(setState)
182 |       if (index > -1) {
183 |         listeners.splice(index, 1)
184 |       }
185 |     }
186 |   }, [state])
187 | 
188 |   return {
189 |     ...state,
190 |     toast,
191 |     dismiss: (toastId?: string) => dispatch({ type: "DISMISS_TOAST", toastId }),
192 |   }
193 | }
194 | 
195 | export { useToast, toast }
196 | 


--------------------------------------------------------------------------------
/constants/auth-error.ts:
--------------------------------------------------------------------------------
1 | export enum AuthErrorCode {
2 |   ACCESS_DENIED = "AccessDenied",
3 |   PROVIDER_MISMATCH = "ProviderMismatch",
4 |   EMAIL_UNVERIFIED = "EmailUnverified",
5 |   UNKNOWN = "Unknown"
6 | }


--------------------------------------------------------------------------------
/constants/nav-links.ts:
--------------------------------------------------------------------------------
 1 | export const mainNavLinks = [
 2 |   { key: "newArrivals", url: "/" },
 3 |   { key: "bestSellers", url: "/" },
 4 |   { key: "sales", url: "/" },
 5 |   { key: "categories", url: "/" }
 6 | ]
 7 | 
 8 | export const footerLinks = [
 9 |   {
10 |     sectionKey: "shop",
11 |     links: [
12 |       { key: "newArrivals", url: "/" },
13 |       { key: "bestSellers", url: "/" },
14 |       { key: "sales", url: "/" },
15 |       { key: "categories", url: "/" }
16 |     ],
17 |   },
18 |   {
19 |     sectionKey: "support",
20 |     links: [
21 |       { key: "customerService", url: "/" },
22 |       { key: "returns", url: "/" },
23 |       { key: "shipping", url: "/" },
24 |       { key: "sizeGuide", url: "/" }
25 |     ],
26 |   },
27 |   {
28 |     sectionKey: "company",
29 |     links: [
30 |       { key: "aboutUs", url: "/" },
31 |       { key: "careers", url: "/" },
32 |       { key: "blog", url: "/" },
33 |       { key: "affiliate", url: "/" }
34 |     ],
35 |   },
36 |   {
37 |     sectionKey: "socials",
38 |     links: [
39 |       { key: "instagram", url: "/" },
40 |       { key: "twitter", url: "/" },
41 |       { key: "facebook", url: "/" },
42 |       { key: "pinterest", url: "/" }
43 |     ],
44 |   }
45 | ]


--------------------------------------------------------------------------------
/hooks/use-session.ts:
--------------------------------------------------------------------------------
 1 | import { useSession } from "next-auth/react"
 2 | 
 3 | export const useCurrentUser = () => {
 4 |   const session = useSession()
 5 | 
 6 |   return session.data?.user
 7 | }
 8 | 
 9 | export const useCurrentRole = () => {
10 |   const session = useSession()
11 | 
12 |   return session.data?.user?.role
13 | }


--------------------------------------------------------------------------------
/i18n/request.ts:
--------------------------------------------------------------------------------
 1 | import { getRequestConfig } from "next-intl/server"
 2 | import { Locale, routing } from "./routing"
 3 |  
 4 | export default getRequestConfig(async ({ requestLocale }) => {
 5 |   let locale = await requestLocale
 6 |  
 7 |   // Ensure that a valid locale is used
 8 |   if (!locale || !routing.locales.includes(locale as Locale)) {
 9 |     locale = routing.defaultLocale
10 |   }
11 |  
12 |   return {
13 |     locale,
14 |     messages: (await import(`@/messages/${locale}.json`)).default,
15 |   }
16 | })


--------------------------------------------------------------------------------
/i18n/routing.ts:
--------------------------------------------------------------------------------
 1 | import { createNavigation } from "next-intl/navigation"
 2 | import { defineRouting } from "next-intl/routing"
 3 | 
 4 | export const routing = defineRouting({
 5 |   // Supported locales
 6 |   locales: ["en", "zh"],
 7 |   // Default locale
 8 |   defaultLocale: "en",
 9 | })
10 | 
11 | export type Locale = (typeof routing.locales)[number]
12 | export const { Link, redirect, usePathname, useRouter, getPathname } =
13 |   createNavigation(routing)


--------------------------------------------------------------------------------
/lib/actions/auth/new-password.ts:
--------------------------------------------------------------------------------
 1 | "use server"
 2 | 
 3 | import bcrypt from "bcryptjs"
 4 | import { getTranslations } from "next-intl/server"
 5 | 
 6 | import connectDB from "@/lib/database/db"
 7 | import { verifyToken, isTokenError } from "@/lib/token"
 8 | import { User } from "@/lib/database/models/auth.model"
 9 | import { UserProvider } from "@/lib/database/types"
10 | import {
11 |   NewPasswordFormValues,
12 |   getNewPasswordFormSchema
13 | } from "@/lib/validations/auth"
14 | 
15 | export const newPassword = async (
16 |   values: NewPasswordFormValues,
17 |   token?: string | null
18 | ) => {
19 |   const t = await getTranslations("NewPasswordForm.server")
20 |   const tError = await getTranslations("Common.error")
21 | 
22 |   const validatedFields = getNewPasswordFormSchema().safeParse(values)
23 | 
24 |   if (!validatedFields.success) {
25 |     return { error: tError("invalidFields") }
26 |   }
27 | 
28 |   if (!token) {
29 |     return { error: tError("missingToken") }
30 |   }
31 | 
32 |   const res = await verifyToken(token)
33 |   // console.log({res})
34 | 
35 |   if (isTokenError(res)) {
36 |     return { error: tError(`${res.error}`) }
37 |   }
38 | 
39 |   await connectDB()
40 |   
41 |   const existingUser = await User.findOne({email: res.email})
42 | 
43 |   if (!existingUser) {
44 |     return { error: t("error.emailNotFound") }
45 |   }
46 | 
47 |   if (existingUser.provider !== UserProvider.CREDENTIALS) {
48 |     return { error: t("error.emailThirdParty") }
49 |   }
50 |   
51 |   const { newPassword } = validatedFields.data
52 | 
53 |   const salt = await bcrypt.genSalt(10)
54 |   const hashedPassword = await bcrypt.hash(newPassword, salt)
55 | 
56 |   await User.findByIdAndUpdate(existingUser._id,
57 |     { password: hashedPassword }
58 |   )
59 | 
60 |   return { success: t("success.passwordUpdated") }
61 | }


--------------------------------------------------------------------------------
/lib/actions/auth/new-verification.ts:
--------------------------------------------------------------------------------
 1 | "use server"
 2 | 
 3 | import { getTranslations } from "next-intl/server"
 4 | 
 5 | import connectDB from "@/lib/database/db"
 6 | import { verifyToken, isTokenError } from "@/lib/token"
 7 | import { User } from "@/lib/database/models/auth.model"
 8 | 
 9 | export const newVerification = async (token: string) => {
10 |   const t = await getTranslations("NewVerificationForm.server")
11 |   const tError = await getTranslations("Common.error")
12 | 
13 |   const res = await verifyToken(token)
14 |   // console.log({res})
15 | 
16 |   if (isTokenError(res)) {
17 |     return { error: tError(`${res.error}`) }
18 |   }
19 |   
20 |   await connectDB()
21 | 
22 |   const existingUser =await User.findOne({
23 |     $or: [{email: res.email}, {emailPendingVerification: res.email}]
24 |   })
25 | 
26 |   if (!existingUser) {
27 |     return { error: t("error.emailNotFound") }
28 |   }
29 | 
30 |   // Check if the token corresponds to a pending email update
31 |   if (existingUser.emailPendingVerification === res.email) {
32 |     // This is for updating an existing user's email
33 |     await User.findByIdAndUpdate(existingUser._id, {
34 |       email: res.email, // Update the main email to the new one
35 |       emailVerified: new Date(), // Mark the new email as verified
36 |       emailPendingVerification: null // Clear the pending email field
37 |     })
38 | 
39 |     return { success: t("success.emailUpdated") }
40 |   }
41 | 
42 |   if (!existingUser.emailVerified) {
43 |     // This is for new user email verification
44 |     await User.findByIdAndUpdate(existingUser._id, {
45 |       emailVerified: new Date(), // Mark email as verified
46 |       email: res.email
47 |     })
48 | 
49 |     return { success: t("success.emailVerified") }
50 |   }
51 | 
52 |   return { error: t("error.invalidRequest") }
53 | }
54 | 


--------------------------------------------------------------------------------
/lib/actions/auth/reset-password.ts:
--------------------------------------------------------------------------------
 1 | "use server"
 2 | 
 3 | import { getTranslations } from "next-intl/server"
 4 | 
 5 | import connectDB from "@/lib/database/db"
 6 | import { User } from "@/lib/database/models/auth.model"
 7 | import { UserProvider } from "@/lib/database/types"
 8 | import {
 9 |   ResetPasswordFormValues,
10 |   getResetPasswordFormSchema
11 | } from "@/lib/validations/auth"
12 | import { generateToken } from "@/lib/token"
13 | import { sendPasswordResetEmail } from "@/lib/mail/nodemailer"
14 | 
15 | export const resetPassword = async (
16 |   values: ResetPasswordFormValues
17 | ) => {
18 |   const t = await getTranslations("ResetForm.server")
19 |   const tError = await getTranslations("Common.error")
20 | 
21 |   const validatedFields = getResetPasswordFormSchema().safeParse(values)
22 | 
23 |   if (!validatedFields.success) {
24 |     return { error: tError("invalidFields") }
25 |   }
26 |   
27 |   const { email } = validatedFields.data
28 |   
29 |   await connectDB()
30 | 
31 |   const existingUser = await User.findOne({email})
32 | 
33 |   if (!existingUser) {
34 |     return { error: t("error.emailNotFound") }
35 |   }
36 | 
37 |   if (existingUser.provider !== UserProvider.CREDENTIALS) {
38 |     return { error: t("error.emailThirdParty") }
39 |   }
40 |   
41 |   const passwordResetToken = await generateToken({email})
42 |   // console.log({passwordResetToken})
43 | 
44 |   await sendPasswordResetEmail(
45 |     email,
46 |     passwordResetToken
47 |   )
48 | 
49 |   return { success: t("success.resetSent") }
50 | }


--------------------------------------------------------------------------------
/lib/actions/auth/settings.ts:
--------------------------------------------------------------------------------
 1 | "use server"
 2 | 
 3 | import bcrypt from "bcryptjs"
 4 | import { getTranslations } from "next-intl/server"
 5 | 
 6 | import { currentUser } from "@/lib/session"
 7 | import connectDB from "@/lib/database/db"
 8 | import { User } from "@/lib/database/models/auth.model"
 9 | import { UserProvider } from "@/lib/database/types"
10 | import { SettingsFormValues } from "@/lib/validations/auth"
11 | import { generateToken } from "@/lib/token"
12 | import { sendVerificationEmail } from "@/lib/mail/nodemailer"
13 | import { cleanEmptyStrings } from "@/lib/utils"
14 | 
15 | export const settings = async (
16 |   values: SettingsFormValues
17 | ) => {
18 |   const t = await getTranslations("SettingsForm.server")
19 |   const tError = await getTranslations("Common.error")
20 | 
21 |   const user = await currentUser()
22 |   // console.log({user})
23 | 
24 |   if (!user) {
25 |     return { error: tError("unauthorized") }
26 |   }
27 | 
28 |   await connectDB()
29 | 
30 |   const existingUser = await User.findById(user._id)
31 |   // console.log({existingUser})
32 | 
33 |   if (!existingUser) {
34 |     return { error: tError("unauthorized") }
35 |   }
36 | 
37 |   if (user.provider !== UserProvider.CREDENTIALS) {
38 |     values.email = undefined
39 |     values.password = undefined
40 |     values.newPassword = undefined
41 |     values.isTwoFactorEnabled = undefined
42 |   }
43 |   
44 |   if (values.email && values.email !== user.email) {
45 |     const dbUser = await User.findOne({email: values.email})
46 | 
47 |     if (dbUser && dbUser._id !== user._id) {
48 |       return { error: t("error.emailInUse") }
49 |     }
50 | 
51 |     const verificationToken = await generateToken({email:values.email})
52 |     // console.log({verificationToken})
53 |     
54 |     await sendVerificationEmail(
55 |       values.email,
56 |       verificationToken
57 |     )
58 | 
59 |     await User.findByIdAndUpdate(user._id, {
60 |       emailPendingVerification: values.email,
61 |       emailVerified: null
62 |     })
63 |     
64 |     return { success: t("success.verificationSent") }
65 |   }
66 | 
67 |   if (values.password && values.newPassword && existingUser.password) {
68 |     const passwordsMatch = await bcrypt.compare(
69 |       values.password,
70 |       existingUser.password
71 |     )
72 | 
73 |     if (!passwordsMatch) {
74 |       return { error: t("error.incorrectPassword") }
75 |     }
76 | 
77 |     const salt = await bcrypt.genSalt(10)
78 |     const hashedPassword = await bcrypt.hash(values.newPassword, salt)
79 | 
80 |     values.password = hashedPassword
81 |     values.newPassword = undefined
82 |   }
83 | 
84 |   const cleanedValues = cleanEmptyStrings(values)
85 | 
86 |   await User.findByIdAndUpdate(user._id, cleanedValues)
87 | 
88 |   return { success: t("success.settingsUpdated") }
89 | }


--------------------------------------------------------------------------------
/lib/actions/auth/signIn.ts:
--------------------------------------------------------------------------------
 1 | "use server"
 2 | 
 3 | import { signIn } from "@/auth"
 4 | import { routes } from "@/routes"
 5 | 
 6 | export const login = async (provider: string) => {
 7 |   await signIn(provider, {
 8 |     callbackUrl: routes.defaultLoginRedirect
 9 |   })
10 | }


--------------------------------------------------------------------------------
/lib/actions/auth/signin-with-credentials.ts:
--------------------------------------------------------------------------------
  1 | "use server"
  2 | 
  3 | import { AuthError } from "next-auth"
  4 | import { getTranslations } from "next-intl/server"
  5 | 
  6 | import { signIn } from "@/auth"
  7 | import { routes } from "@/routes"
  8 | import connectDB from "@/lib/database/db"
  9 | import { User, TwoFactorToken, TwoFactorConfirmation } from "@/lib/database/models/auth.model"
 10 | import {
 11 |   SignInFormValues,
 12 |   getSignInFormSchema
 13 | } from "@/lib/validations/auth"
 14 | import { generateToken, generateCode } from "@/lib/token"
 15 | import { sendVerificationEmail, sendTwoFactorTokenEmail } from "@/lib/mail/nodemailer"
 16 | 
 17 | export const signInWithCredentials = async (
 18 |   values: SignInFormValues,
 19 |   callbackUrl?: string | null
 20 | ) => {
 21 |   // console.log({callbackUrl})
 22 |   const t = await getTranslations("SignInForm.server")
 23 |   const tError = await getTranslations("Common.error")
 24 |   
 25 |   const validatedFields = getSignInFormSchema().safeParse(values)
 26 | 
 27 |   if (!validatedFields.success) {
 28 |     return { error: tError("invalidFields") }
 29 |   }
 30 |   
 31 |   const { email, password, code } = validatedFields.data
 32 | 
 33 |   await connectDB()
 34 | 
 35 |   const existingUser = await User.findOne({email})
 36 |   // console.log({existingUser})
 37 |   
 38 |   if (!existingUser || !existingUser.email || !existingUser.password) {
 39 |     return { error: t("error.invalidCredentials") }
 40 |   }
 41 | 
 42 |   if (!existingUser.emailVerified) {
 43 |     const verificationToken = await generateToken({email: existingUser.email})
 44 |     // console.log({verificationToken})
 45 | 
 46 |     await sendVerificationEmail(
 47 |       existingUser.email,
 48 |       verificationToken
 49 |     )
 50 | 
 51 |     return { success: t("success.confirmationSent") }
 52 |   }
 53 | 
 54 |   if (existingUser.isTwoFactorEnabled && existingUser.email) {
 55 |     if (code) {
 56 |       const twoFactorToken = await TwoFactorToken.findOne({
 57 |         email: existingUser.email
 58 |       })
 59 | 
 60 |       if (!twoFactorToken || twoFactorToken.token !== code) {
 61 |         return { error: t("error.invalidCode") }
 62 |       }
 63 | 
 64 |       const hasExpired = new Date(twoFactorToken.expires) < new Date()
 65 | 
 66 |       await TwoFactorToken.findByIdAndDelete(twoFactorToken._id)
 67 | 
 68 |       if (hasExpired) {
 69 |         return { error: t("error.codeExpired") }
 70 |       }
 71 | 
 72 |       const existingConfirmation = await TwoFactorConfirmation.findOne({userId: existingUser._id})
 73 | 
 74 |       if (existingConfirmation) {
 75 |         await TwoFactorConfirmation.findByIdAndDelete(existingConfirmation._id)
 76 |       }
 77 | 
 78 |       const twoFactorConfirmation = new TwoFactorConfirmation({
 79 |         userId: existingUser._id
 80 |       })
 81 |       await twoFactorConfirmation.save()
 82 |     } else {
 83 |       const twoFactorToken = await generateCode(existingUser.email)
 84 |       // console.log({twoFactorToken})
 85 | 
 86 |       await sendTwoFactorTokenEmail(
 87 |         existingUser.email,
 88 |         twoFactorToken
 89 |       )
 90 | 
 91 |       return { twoFactor: true }
 92 |     }
 93 |   }
 94 | 
 95 |   try {
 96 |     await signIn("credentials", {
 97 |       email,
 98 |       password,
 99 |       redirect:false
100 |     })
101 |     return { url: callbackUrl || routes.defaultLoginRedirect }
102 |   } catch (error) {
103 |     if (error instanceof AuthError) {
104 |       switch (error.type) {
105 |         case "CredentialsSignin":
106 |           return { error: t("error.invalidCredentials") }
107 |         default:
108 |           return { error: tError("actionFailed") }
109 |       }
110 |     }
111 | 
112 |     throw error
113 |   }
114 | }


--------------------------------------------------------------------------------
/lib/actions/auth/signout.ts:
--------------------------------------------------------------------------------
 1 | "use server"
 2 | 
 3 | import { signOut } from "@/auth"
 4 | import { routes } from "@/routes"
 5 | 
 6 | export const logout = async () => {
 7 |   await signOut({
 8 |     redirect: false
 9 |   })
10 | }
11 | 


--------------------------------------------------------------------------------
/lib/actions/auth/signup-with-credentials.ts:
--------------------------------------------------------------------------------
 1 | "use server"
 2 | 
 3 | import bcrypt from "bcryptjs"
 4 | import { getTranslations } from "next-intl/server"
 5 | 
 6 | import connectDB from "@/lib/database/db"
 7 | import { User } from "@/lib/database/models/auth.model"
 8 | import { UserProvider } from "@/lib/database/types"
 9 | import { 
10 |   SignUpFormValues,
11 |   getSignUpFormSchema
12 |  } from "@/lib/validations/auth"
13 | import { generateToken } from "@/lib/token"
14 | import { sendVerificationEmail } from "@/lib/mail/nodemailer"
15 | 
16 | export const signUpWithCredentials = async (
17 |   values: SignUpFormValues
18 | ) => {
19 |   const t = await getTranslations("SignUpForm.server")
20 |   const tError = await getTranslations("Common.error")
21 |   
22 |   const validatedFields = getSignUpFormSchema().safeParse(values)
23 | 
24 |   if (!validatedFields.success) {
25 |     return { error: tError("invalidFields") }
26 |   }
27 |   
28 |   const { email, password, name } = validatedFields.data
29 | 
30 |   await connectDB()
31 |   
32 |   const existingUser = await User.findOne({email})
33 |   if (existingUser) {
34 |     const error = existingUser.provider === UserProvider.CREDENTIALS 
35 |       ? t("error.emailExists")
36 |       : t("error.emailThirdParty")
37 |     return { error }
38 |   }
39 |   
40 |   const salt = await bcrypt.genSalt(10)
41 |   const hashedPassword = await bcrypt.hash(password, salt)
42 | 
43 |   const user = new User({ name, email, password: hashedPassword })
44 |   await user.save()
45 | 
46 |   const verificationToken = await generateToken({email})
47 |   // console.log({verificationToken})
48 | 
49 |   await sendVerificationEmail(
50 |     email,
51 |     verificationToken
52 |   )
53 |   
54 |   return { success: t("success.confirmationSent") }
55 | }


--------------------------------------------------------------------------------
/lib/api-client/twofac.ts:
--------------------------------------------------------------------------------
 1 | import { internalApiFetcher } from "@/lib/fetcher"
 2 | import { ITwoFactorConfirmation } from "@/lib/database/types"
 3 | 
 4 | export const fetchConfirmationByUserId = async (
 5 |   userId: string
 6 | ): Promise<ITwoFactorConfirmation | null> => {
 7 |   try {
 8 |     const confirmation = await internalApiFetcher<ITwoFactorConfirmation>({
 9 |       endpoint: `api/twofac/user/${userId}`,
10 |       options: { method: "GET" }
11 |     })
12 |     // console.log({confirmation})
13 |     return confirmation ?? null
14 |   } catch {
15 |     return null
16 |   }
17 | }
18 | 
19 | export const deleteConfirmationById = async (id: string) => {
20 |   await internalApiFetcher<void>({
21 |     endpoint: `api/twofac/${id}`,
22 |     options: { method: "DELETE" }
23 |   })
24 | }


--------------------------------------------------------------------------------
/lib/api-client/user.ts:
--------------------------------------------------------------------------------
 1 | import { Account, Profile } from "next-auth"
 2 | import { internalApiFetcher } from "@/lib/fetcher"
 3 | import { IUser } from "@/lib/database/types"
 4 | 
 5 | export const getUserByEmail = async (email: string): Promise<IUser | null> => {
 6 |   try {
 7 |     const user = await internalApiFetcher<IUser>({
 8 |       endpoint: `api/user?email=${encodeURIComponent(email)}`,
 9 |       options: { method: "GET" }
10 |     })
11 |     // console.log({user})
12 | 
13 |     return user ?? null
14 |   } catch {
15 |     return null
16 |   }
17 | }
18 | 
19 | export const getUserById = async (id: string): Promise<IUser | null> => {
20 |   try {
21 |     const user = await internalApiFetcher<IUser>({
22 |       endpoint: `api/user/${id}`,
23 |       options: { method: "GET" }
24 |     })
25 |     // console.log({user})
26 |     
27 |     return user ?? null
28 |   } catch {
29 |     return null
30 |   }
31 | }
32 | 
33 | interface SignInWithOauthParams {
34 |   account: Account
35 |   profile: Profile & { picture?: string }
36 | }
37 | 
38 | export const signInWithOauth = async (
39 |   params: SignInWithOauthParams
40 | ): Promise<boolean> => {
41 |   const { account, profile } = params
42 |   // console.log({account, profile})
43 | 
44 |   try {
45 |     const user = await internalApiFetcher<IUser>({
46 |       endpoint: "api/user/oauth",
47 |       options: {
48 |         method: "PUT",
49 |         body: JSON.stringify({account, profile})
50 |       }
51 |     })
52 |     // console.log({user})
53 | 
54 |     return !!user
55 |   } catch {
56 |     return false
57 |   }
58 | }


--------------------------------------------------------------------------------
/lib/database/db.ts:
--------------------------------------------------------------------------------
 1 | import mongoose from "mongoose"
 2 | 
 3 | const connectDB = async () => {
 4 |   if (mongoose.connections[0].readyState) {
 5 |     console.log("🚀 Already connected to database.")
 6 |     return true
 7 |   }
 8 | 
 9 |   if (!process.env.MONGODB_URI) {
10 |     console.error("🔴 MONGODB_URI is not defined.")
11 |     return false
12 |   }
13 |   
14 |   try {
15 |     await mongoose.connect(process.env.MONGODB_URI)
16 |     console.log("🚀 Successfully connected to MongoDB.")
17 |     return true
18 |   } catch (error) {
19 |     console.error("🔴 Failed to connect to MongoDB:", error)
20 |     return false
21 |   }
22 | }
23 | 
24 | export default connectDB


--------------------------------------------------------------------------------
/lib/database/models/auth.model.ts:
--------------------------------------------------------------------------------
  1 | import mongoose from "mongoose"
  2 | import { UserRole, UserProvider } from "@/lib/database/types"
  3 | 
  4 | export const userSchema = new mongoose.Schema({
  5 |   name: {
  6 |     type: String,
  7 |     required: true
  8 |   },
  9 |   email: {
 10 |     type: String,
 11 |     unique: true,
 12 |     required: true
 13 |   },
 14 |   password: {
 15 |     type: String
 16 |   },
 17 |   image: {
 18 |     type: String
 19 |   },
 20 |   role: {
 21 |     type: String,
 22 |     enum: Object.values(UserRole),
 23 |     default: UserRole.USER
 24 |   },
 25 |   provider: {
 26 |     type: String,
 27 |     enum: Object.values(UserProvider),
 28 |     default: UserProvider.CREDENTIALS
 29 |   },
 30 |   emailVerified: {
 31 |     type: Date
 32 |   },
 33 |   isTwoFactorEnabled: {
 34 |     type: Boolean,
 35 |     default: false
 36 |   },
 37 |   emailPendingVerification: {
 38 |     type: String,
 39 |   }
 40 | }, { timestamps: true })
 41 | 
 42 | const User = mongoose.models?.User || mongoose.model("User", userSchema)
 43 | 
 44 | const verificationTokenSchema = new mongoose.Schema({
 45 |   email: {
 46 |     type: String,
 47 |     required: true
 48 |   },
 49 |   token: {
 50 |     type: String,
 51 |     unique: true,
 52 |     required: true
 53 |   },
 54 |   expires: {
 55 |     type: Date,
 56 |     required: true
 57 |   }
 58 | })
 59 | 
 60 | const VerificationToken = mongoose.models?.VerificationToken || mongoose.model("VerificationToken", verificationTokenSchema)
 61 | 
 62 | 
 63 | const passwordResetTokenSchema = new mongoose.Schema({
 64 |   email: {
 65 |     type: String,
 66 |     required: true
 67 |   },
 68 |   token: {
 69 |     type: String,
 70 |     unique: true,
 71 |     required: true
 72 |   },
 73 |   expires: {
 74 |     type: Date,
 75 |     required: true
 76 |   }
 77 | })
 78 | 
 79 | const PasswordResetToken = mongoose.models?.PasswordResetToken || mongoose.model("PasswordResetToken", passwordResetTokenSchema)
 80 | 
 81 | 
 82 | const twoFactorTokenSchema = new mongoose.Schema({
 83 |   email: {
 84 |     type: String,
 85 |     required: true
 86 |   },
 87 |   token: {
 88 |     type: String,
 89 |     unique: true,
 90 |     required: true
 91 |   },
 92 |   expires: {
 93 |     type: Date,
 94 |     required: true
 95 |   }
 96 | })
 97 | 
 98 | const TwoFactorToken = mongoose.models?.TwoFactorToken || mongoose.model("TwoFactorToken", twoFactorTokenSchema)
 99 | 
100 | 
101 | export const twoFactorConfirmationSchema = new mongoose.Schema({
102 |   userId: {
103 |     type: mongoose.Schema.Types.ObjectId,
104 |     ref: 'User',
105 |     unique: true,
106 |     required: true
107 |   }
108 | })
109 | 
110 | const TwoFactorConfirmation = mongoose.models?.TwoFactorConfirmation || mongoose.model("TwoFactorConfirmation", twoFactorConfirmationSchema)
111 | 
112 | 
113 | export { User, VerificationToken, PasswordResetToken, TwoFactorToken, TwoFactorConfirmation }


--------------------------------------------------------------------------------
/lib/database/services/create-one.ts:
--------------------------------------------------------------------------------
 1 | import { Model } from "mongoose"
 2 | 
 3 | export const createOne = async <T>(model: Model<T>, data: Partial<T>) => {
 4 |   try {
 5 |     const created = await model.create(data)
 6 |     return { success: true, data: created }
 7 |   } catch (error) {
 8 |     console.error("Create error:", error)
 9 |     return { success: false, error }
10 |   }
11 | }


--------------------------------------------------------------------------------
/lib/database/services/index.ts:
--------------------------------------------------------------------------------
1 | export * from "./create-one"
2 | export * from "./update-model-field"


--------------------------------------------------------------------------------
/lib/database/services/update-model-field.ts:
--------------------------------------------------------------------------------
 1 | import { Model, FilterQuery, UpdateQuery } from "mongoose"
 2 | 
 3 | interface UpdateFieldOptions<T> {
 4 |   model: Model<T>
 5 |   filter: FilterQuery<T>
 6 |   field: keyof T
 7 |   value: T[keyof T]
 8 | }
 9 | 
10 | export const updateModelField = async <T>({
11 |   model,
12 |   filter,
13 |   field,
14 |   value
15 | }: UpdateFieldOptions<T>) => {
16 |   try {
17 |     const update: UpdateQuery<T> = {
18 |       $set: { [field]: value } as Partial<T>
19 |     }
20 |     
21 |     const result = await model.updateMany(filter, update)
22 | 
23 |     console.log(`Updated field "${String(field)}" with value:`, value)
24 |     console.log("Matched:", result.matchedCount)
25 |     console.log("Modified:", result.modifiedCount)
26 | 
27 |     return { success: true, result }
28 |   } catch (error) {
29 |     console.error(`Error updating field "${String(field)}":`, error)
30 |     return { success: false, error }
31 |   }
32 | }


--------------------------------------------------------------------------------
/lib/database/types.ts:
--------------------------------------------------------------------------------
 1 | export enum UserRole {
 2 |   ADMIN = "admin",
 3 |   USER = "user"
 4 | }
 5 | 
 6 | export enum UserProvider {
 7 |   GOOGLE = "google",
 8 |   CREDENTIALS = "credentials"
 9 | }
10 | 
11 | 
12 | export interface IUser {
13 |   _id: string
14 |   name: string
15 |   email: string
16 |   password?: string
17 |   image?: string
18 |   role: UserRole
19 |   provider: UserProvider
20 |   emailVerified: Date
21 |   isTwoFactorEnabled: boolean
22 |   emailPendingVerification?: string
23 |   createdAt: Date
24 |   updatedAt: Date
25 | }
26 | 
27 | export interface ITwoFactorConfirmation {
28 |   _id: string
29 |   userId: string
30 | }


--------------------------------------------------------------------------------
/lib/fetcher.ts:
--------------------------------------------------------------------------------
  1 | import { SignJWT } from "jose"
  2 | 
  3 | interface FetcherOptions extends RequestInit {
  4 |   baseUrl?: string
  5 | }
  6 | 
  7 | export interface ApiError {
  8 |   error: string
  9 |   status: number
 10 | }
 11 | 
 12 | export const fetcher = async <T>(
 13 |   endpoint: string,
 14 |   options: FetcherOptions = {}
 15 | ): Promise<T> => {
 16 |   const { baseUrl = "", headers: customHeaders, ...restOptions } = options
 17 | 
 18 |   const headers = {
 19 |     "Content-Type": "application/json",
 20 |     ...customHeaders
 21 |   }
 22 | 
 23 |   try {
 24 |     const response = await fetch(`${baseUrl}/${endpoint}`, {
 25 |       ...restOptions,
 26 |       headers
 27 |     })
 28 | 
 29 |     if (!response.ok) {
 30 |       const errorData = await response.json()
 31 |       throw new Error(errorData.error || "An error occurred during the request.")
 32 |     }
 33 | 
 34 |     return await response.json() as T
 35 | 
 36 |   } catch (error) {
 37 |     // console.error("Error in fetcher:", error)
 38 |     throw new Error((error as Error).message || "Failed to fetch data.")
 39 |   }
 40 | }
 41 | 
 42 | export type AuthStrategy = "internal-key" | "bearer"
 43 | 
 44 | interface InternalApiFetcherProps {
 45 |   endpoint: string
 46 |   options?: RequestInit
 47 |   authStrategy?: AuthStrategy // default: "internal-key"
 48 |   serviceName?: string // for bearer token payload
 49 | }
 50 | 
 51 | // Generates headers for internal API auth based on strategy
 52 | const generateInternalAuthHeaders = async (
 53 |   strategy: AuthStrategy,
 54 |   serviceName: string
 55 | ): Promise<Record<string, string>> => {
 56 |   if (strategy === "internal-key") {
 57 |     return {
 58 |       "x-internal-key": process.env.INTERNAL_API_KEY!
 59 |     }
 60 |   }
 61 | 
 62 |   const secret = new TextEncoder().encode(process.env.NEXT_PUBLIC_INTERNAL_API_SECRET!)
 63 | 
 64 |   const token = await new SignJWT({ service: serviceName })
 65 |     .setProtectedHeader({ alg: "HS256" })
 66 |     .setExpirationTime("10m")
 67 |     .sign(secret)
 68 | 
 69 |   return {
 70 |     Authorization: `Bearer ${token}`
 71 |   }
 72 | }
 73 | 
 74 | // For APIs that return JSON (default)
 75 | export const internalApiFetcher = async <T>({
 76 |   endpoint,
 77 |   options,
 78 |   authStrategy = "internal-key",
 79 |   serviceName = "internal-service"
 80 | }: InternalApiFetcherProps) => {
 81 |   const authHeaders = await generateInternalAuthHeaders(authStrategy, serviceName)
 82 | 
 83 |   const headers: Record<string, string> = {
 84 |     ...(options?.headers as Record<string, string>),
 85 |     ...authHeaders
 86 |   }
 87 | 
 88 |   return fetcher<T>(endpoint, {
 89 |     ...options,
 90 |     headers,
 91 |     baseUrl: process.env.NEXT_PUBLIC_APP_URL
 92 |   })
 93 | }
 94 | 
 95 | // For APIs that return stream/blob/raw Response
 96 | export const rawInternalApiFetcher = async ({
 97 |   endpoint,
 98 |   options,
 99 |   authStrategy = "internal-key",
100 |   serviceName = "internal-service"
101 | }: InternalApiFetcherProps): Promise<Response> => {
102 |   const authHeaders = await generateInternalAuthHeaders(authStrategy, serviceName)
103 | 
104 |   const headers: Record<string, string> = {
105 |     ...(options?.headers as Record<string, string>),
106 |     ...authHeaders
107 |   }
108 | 
109 |   return fetch(`${process.env.NEXT_PUBLIC_APP_URL}/${endpoint}`, {
110 |     ...options,
111 |     headers
112 |   })
113 | }
114 | 
115 | // External API
116 | interface ExternalApiFetcherProps {
117 |   apiUrl: string
118 |   endpoint: string
119 |   options?: RequestInit
120 | }
121 | 
122 | export const externalApiFetcher = <T>({
123 |   apiUrl,
124 |   endpoint,
125 |   options
126 | }: ExternalApiFetcherProps) => {
127 |   return fetcher<T>(endpoint, {
128 |     ...options,
129 |     baseUrl: apiUrl
130 |   })
131 | }


--------------------------------------------------------------------------------
/lib/mail/nodemailer.ts:
--------------------------------------------------------------------------------
  1 | import { getTranslations } from "next-intl/server"
  2 | import nodemailer from "nodemailer"
  3 | 
  4 | const baseURL = process.env.NEXT_PUBLIC_APP_URL
  5 | const emailUser = process.env.EMAIL_USER
  6 | const emailPass = process.env.EMAIL_PASSWORD
  7 | 
  8 | const transporter = nodemailer.createTransport({
  9 |   service: "gmail",
 10 |   auth: { user: emailUser, pass: emailPass }
 11 | })
 12 | 
 13 | export const sendVerificationEmail = async (
 14 |   email: string, 
 15 |   token: string
 16 | ) => {
 17 |   const tEmail = await getTranslations("Email.verification")
 18 |   const confirmLink = `${baseURL}/new-verification?token=${token}`
 19 | 
 20 |   const mailOptions = {
 21 |     from: emailUser,
 22 |     to: email,
 23 |     subject: tEmail("subject"),
 24 |     // html: `<p>Click <a href="${confirmLink}">here</a> to confirm email.</p>`
 25 |     html: `
 26 |       <body style="font-family: Arial, sans-serif; margin: 0; padding: 0; background-color: #f0fdfa;">
 27 |         <div style="max-width: 600px; margin: 20px auto; padding: 20px; background-color: white; border-radius: 10px; box-shadow: 0 2px 4px rgba(0,0,0,0.1);">
 28 |           <h1 style="color: #64748b; text-align: center;">${tEmail("title")}</h1>
 29 |           <p style="color: #475569; font-size: 18px; text-align: center;">${tEmail("description")}</p>
 30 |           <table style="margin: 20px auto;">
 31 |             <tr>
 32 |               <td style="background-color: #64748b; padding: 10px 20px; border-radius: 5px; text-align: center;">
 33 |                 <a href="${confirmLink}" style="font-size: 18px; color: white; text-decoration: none; display: inline-block;">${tEmail("button")}</a>
 34 |               </td>
 35 |             </tr>
 36 |           </table>
 37 |           <p style="color: #475569; text-align: center; margin-top: 20px;">${tEmail("ignoreNote")}</p>
 38 |         </div>
 39 |       </body>
 40 |     `
 41 |   }
 42 |   
 43 |   await transporter.sendMail(mailOptions)
 44 | }
 45 | 
 46 | export const sendPasswordResetEmail = async (
 47 |   email: string, 
 48 |   token: string
 49 | ) => {
 50 |   const tEmail = await getTranslations("Email.reset")
 51 |   const resetLink = `${baseURL}/new-password?token=${token}`
 52 | 
 53 |   const mailOptions = {
 54 |     from: emailUser,
 55 |     to: email,
 56 |     subject: tEmail("subject"),
 57 |     // html: `<p>Click <a href="${resetLink}">here</a> to reset password.</p>`
 58 |     html: `
 59 |       <body style="font-family: Arial, sans-serif; margin: 0; padding: 0; background-color: #f0fdfa;">
 60 |         <div style="max-width: 600px; margin: 20px auto; padding: 20px; background-color: white; border-radius: 10px; box-shadow: 0 2px 4px rgba(0,0,0,0.1);">
 61 |           <h1 style="color: #64748b; text-align: center;">${tEmail("title")}</h1>
 62 |           <p style="color: #475569; font-size: 18px; text-align: center;">${tEmail("description")}</p>
 63 |           <table style="margin: 20px auto;">
 64 |             <tr>
 65 |               <td style="background-color: #64748b; padding: 10px 20px; border-radius: 5px; text-align: center;">
 66 |                 <a href="${resetLink}" style="font-size: 18px; color: white; text-decoration: none; display: inline-block;">${tEmail("button")}</a>
 67 |               </td>
 68 |             </tr>
 69 |           </table>
 70 |           <p style="color: #475569; text-align: center; margin-top: 20px;">${tEmail("ignoreNote")}</p>
 71 |         </div>
 72 |       </body>
 73 |     `
 74 |   }
 75 | 
 76 |   await transporter.sendMail(mailOptions)
 77 | }
 78 | 
 79 | export const sendTwoFactorTokenEmail = async (
 80 |   email: string,
 81 |   token: string
 82 | ) => {
 83 |   const tEmail = await getTranslations("Email.2fa")
 84 | 
 85 |   const mailOptions = {
 86 |     from: emailUser,
 87 |     to: email,
 88 |     subject: tEmail("subject"),
 89 |     // html: `<p>Your 2FA code: ${token}</p>`
 90 |     html: `
 91 |       <body style="font-family: Arial, sans-serif; margin: 0; padding: 0; background-color: #f0fdfa;">
 92 |         <div style="max-width: 600px; margin: 20px auto; padding: 20px; background-color: white; border-radius: 10px; box-shadow: 0 2px 4px rgba(0,0,0,0.1);">
 93 |           <h1 style="color: #64748b; text-align: center;">${tEmail("title")}</h1>
 94 |           <p style="color: #475569; font-size: 18px; text-align: center;">${tEmail("description")}</p>
 95 |           <table style="margin: 20px auto;">
 96 |             <tr>
 97 |               <td style="background-color: #64748b; padding: 10px 20px; border-radius: 5px; text-align: center;">
 98 |                 <span style="font-size: 24px; color: white; background-color: #64748b; padding: 10px 20px; border-radius: 5px; text-align: center;">
 99 |                   ${token}
100 |                 </span>
101 |               </td>
102 |             </tr>
103 |           </table>
104 |           <p style="color: #475569; text-align: center; margin-top: 20px;">${tEmail("loginNote")}</p>
105 |           <p style="color: #64748b; text-align: center; font-size: 14px; margin-top: 10px;">
106 |             ${tEmail("securityNote")}
107 |           </p>
108 |         </div>
109 |       </body>
110 |     `
111 |   }
112 | 
113 |   await transporter.sendMail(mailOptions)
114 | }


--------------------------------------------------------------------------------
/lib/mail/resend.ts:
--------------------------------------------------------------------------------
 1 | import { Resend } from "resend"
 2 | 
 3 | const resend = new Resend(process.env.RESEND_API_KEY)
 4 | 
 5 | const baseURL = process.env.NEXT_PUBLIC_APP_URL
 6 | 
 7 | const emailURL = process.env.RESEND_EMAIL_URL
 8 | // TODO: Only send emails to the "Resend" registered email if a domain is set and purchased.
 9 | 
10 | export const sendVerificationEmail = async (
11 |   email: string, 
12 |   token: string
13 | ) => {
14 |   const confirmLink = `${baseURL}/new-verification?token=${token}`
15 | 
16 |   await resend.emails.send({
17 |     from: `${emailURL}`, 
18 |     to: email,
19 |     subject: "Confirm your email",
20 |     html: `<p>Click <a href="${confirmLink}">here</a> to confirm email.</p>`
21 |   })
22 | }
23 | 
24 | export const sendPasswordResetEmail = async (
25 |   email: string, 
26 |   token: string
27 | ) => {
28 |   const resetLink = `${baseURL}/new-password?token=${token}`
29 | 
30 |   await resend.emails.send({
31 |     from: `${emailURL}`,
32 |     to: email,
33 |     subject: "Reset your password",
34 |     html: `<p>Click <a href="${resetLink}">here</a> to reset password.</p>`
35 |   })
36 | }
37 | 
38 | export const sendTwoFactorTokenEmail = async (
39 |   email: string,
40 |   token: string
41 | ) => {
42 |   await resend.emails.send({
43 |     from: `${emailURL}`,
44 |     to: email,
45 |     subject: "2FA Code",
46 |     html: `<p>Your 2FA code: ${token}.</p>`
47 |   })
48 | }


--------------------------------------------------------------------------------
/lib/session.ts:
--------------------------------------------------------------------------------
 1 | import { auth } from "@/auth"
 2 | 
 3 | export const currentUser = async () => {
 4 |   const session = await auth()
 5 | 
 6 |   return session?.user
 7 | }
 8 | 
 9 | export const currentRole = async () => {
10 |   const session = await auth()
11 | 
12 |   return session?.user?.role
13 | }


--------------------------------------------------------------------------------
/lib/token.ts:
--------------------------------------------------------------------------------
 1 | import jwt, { JwtPayload, TokenExpiredError } from "jsonwebtoken"
 2 | import crypto from "crypto"
 3 | 
 4 | import connectDB from "@/lib/database/db"
 5 | import { TwoFactorToken } from "@/lib/database/models/auth.model"
 6 | 
 7 | export interface IPayload extends JwtPayload {
 8 |   email: string
 9 | }
10 | 
11 | export interface IError {
12 |   error: string
13 | }
14 | 
15 | export const isTokenError = (res: IPayload | IError): res is IError => {
16 |   return (res as IError).error !== undefined
17 | }
18 | 
19 | export const generateToken = async (payload: { email: string }, expiresIn: string = "1h") => {
20 |   return jwt.sign(payload, process.env.TOKEN_SECRET!,{ expiresIn }) // jwt.io
21 | }
22 | 
23 | export const verifyToken = async (token: string): Promise<IPayload | IError> => {
24 |   try {
25 |     const decoded = jwt.verify(token, process.env.TOKEN_SECRET!) as IPayload
26 |     return decoded
27 |   } catch (error) {
28 |     if (error instanceof TokenExpiredError) {
29 |       return { error: "tokenExpired" }
30 |     } else {
31 |       return { error: "tokenInvalid" }
32 |     }
33 |   }
34 | }
35 | 
36 | export const generateCode = async (email: string) => {
37 |   const token = crypto.randomInt(100000, 1000000).toString() // generate a six-digit random number
38 |   // console.log({token})
39 |   const expires = new Date(new Date().getTime() + 5 * 60 * 1000) // 5 mins
40 | 
41 |   await connectDB()
42 | 
43 |   await TwoFactorToken.deleteOne({ email })
44 | 
45 |   const twoFactorToken = new TwoFactorToken({
46 |     email,
47 |     token,
48 |     expires
49 |   })
50 | 
51 |   await twoFactorToken.save()
52 | 
53 |   return token
54 | }


--------------------------------------------------------------------------------
/lib/utils.ts:
--------------------------------------------------------------------------------
 1 | import { type ClassValue, clsx } from "clsx"
 2 | import { twMerge } from "tailwind-merge"
 3 | 
 4 | export const cn = (...inputs: ClassValue[]) => twMerge(clsx(inputs))
 5 | 
 6 | export const cleanEmptyStrings = <T extends Record<string, any>>(obj: T): T => {
 7 |   const result = { ...obj }
 8 | 
 9 |   for (const key of Object.keys(result) as (keyof T)[]) {
10 |     const value = result[key]
11 |     if (typeof value === "string" && value.trim() === "") {
12 |       result[key] = undefined as any
13 |     }
14 |   }
15 | 
16 |   return result
17 | }
18 | 


--------------------------------------------------------------------------------
/lib/validations/auth.ts:
--------------------------------------------------------------------------------
  1 | import * as z from "zod"
  2 | import { UserRole } from "@/lib/database/types"
  3 | 
  4 | export function getSignInFormSchema(t?: (key: string) => string) {
  5 |   return z
  6 |     .object({
  7 |       email: z
  8 |         .string()
  9 |         .min(1, t?.("email.required") || "Email is required")
 10 |         .email(t?.("email.invalid") || "Invalid email"),
 11 |       password: z
 12 |         .string()
 13 |         .min(1, t?.("password.required") || "Password is required")
 14 |         .min(8, t?.("password.invalid") || "Password must be 8+ characters"),
 15 |         code: z.string().optional()
 16 |     })
 17 | }
 18 | export type SignInFormValues = z.infer<ReturnType<typeof getSignInFormSchema>>
 19 | 
 20 | export function getSignUpFormSchema(t?: (key: string) => string) {
 21 |   return z
 22 |     .object({
 23 |       name: z
 24 |         .string()
 25 |         .min(1, t?.("name.required") || "Username is required")
 26 |         .max(50, t?.("name.invalid") || "Username must be less than 50 characters"),
 27 |       email: z
 28 |         .string()
 29 |         .min(1, t?.("email.required") || "Email is required")
 30 |         .email(t?.("email.invalid") || "Invalid email"),
 31 |       password: z
 32 |         .string()
 33 |         .min(1, t?.("password.required") || "Password is required")
 34 |         .min(8, t?.("password.invalid") || "Password must be 8+ characters"),
 35 |       confirmPassword: z
 36 |         .string()
 37 |         .min(1, t?.("confirmPassword.required") || "Password confirmation is required")
 38 |     })
 39 |     .refine((data) => data.password === data.confirmPassword, {
 40 |       path: ["confirmPassword"],
 41 |       message: t?.("confirmPassword.invalid") || "Password do not match"
 42 |     })
 43 | }
 44 | export type SignUpFormValues = z.infer<ReturnType<typeof getSignUpFormSchema>>
 45 | 
 46 | export function getResetPasswordFormSchema(t?: (key: string) => string) {
 47 |   return z
 48 |     .object({
 49 |       email: z
 50 |         .string()
 51 |         .min(1, t?.("email.required") || "Email is required")
 52 |         .email(t?.("email.invalid") || "Invalid email")
 53 |     })
 54 | }
 55 | export type ResetPasswordFormValues = z.infer<ReturnType<typeof getResetPasswordFormSchema>>
 56 | 
 57 | export function getNewPasswordFormSchema(t?: (key: string) => string) {
 58 |   return z
 59 |     .object({
 60 |       newPassword: z
 61 |         .string()
 62 |         .min(1, t?.("newPassword.required") || "Password is required")
 63 |         .min(8, t?.("newPassword.invalid") || "Password must be 8+ characters"),
 64 |       confirmPassword: z
 65 |         .string()
 66 |         .min(1, t?.("confirmPassword.required") || "Password confirmation is required")
 67 |     })
 68 |     .refine((data) => data.newPassword === data.confirmPassword, {
 69 |       path: ["confirmPassword"],
 70 |       message: t?.("confirmPassword.invalid") || "Passwords do not match"
 71 |     })
 72 | }
 73 | export type NewPasswordFormValues = z.infer<ReturnType<typeof getNewPasswordFormSchema>>
 74 | 
 75 | const validatePassword = (t?: (key: string) => string) =>
 76 |   z
 77 |     .string()
 78 |     .refine((val) => val === "" || val.length >= 8, {
 79 |       message: t?.("password.invalid") || "Password must be 8+ characters if provided"
 80 |     })
 81 | 
 82 | export function getSettingsFormSchema(t?: (key: string) => string) {
 83 |   return z
 84 |     .object({
 85 |       name: z.string().optional(),
 86 |       email: z.string().email(t?.("email.invalid") || "Invalid email").optional(),
 87 |       password: validatePassword(t).optional(),
 88 |       newPassword: validatePassword(t).optional(),
 89 |       role: z.nativeEnum(UserRole),
 90 |       isTwoFactorEnabled: z.boolean().optional()
 91 |     })
 92 |     .refine(
 93 |       (data) => !(data.newPassword && !data.password),
 94 |       {
 95 |         path: ["password"],
 96 |         message:
 97 |           t?.("password.required") ||
 98 |           "To change password, enter current one."
 99 |       }
100 |     )
101 |     .refine(
102 |       (data) => !(data.password && !data.newPassword),
103 |       {
104 |         path: ["newPassword"],
105 |         message:
106 |           t?.("newPassword.required") ||
107 |           "To change password, enter new password."
108 |       }
109 |     )
110 | }
111 | export type SettingsFormValues = z.infer<ReturnType<typeof getSettingsFormSchema>>


--------------------------------------------------------------------------------
/messages/en.json:
--------------------------------------------------------------------------------
  1 | {
  2 |   "HomePage": {
  3 |     "ui": {
  4 |       "title": "Welcome to the Home Page"
  5 |     }
  6 |   },
  7 |   "Navbar": {
  8 |     "ui": {
  9 |       "signin": "Sign In",
 10 |       "signout": "Sign Out",
 11 |       "settings": "Settings",
 12 |       "links": {
 13 |         "newArrivals": "New Arrivals",
 14 |         "bestSellers": "Best Sellers",
 15 |         "sales": "Sales",
 16 |         "categories": "Categories"
 17 |       }
 18 |     }
 19 |   },
 20 |   "Footer": {
 21 |     "ui": {
 22 |       "sections": {
 23 |         "shop": "Shop",
 24 |         "support": "Support",
 25 |         "company": "Company",
 26 |         "socials": "Socials"
 27 |       },
 28 |       "links": {
 29 |         "newArrivals": "New Arrivals",
 30 |         "bestSellers": "Best Sellers",
 31 |         "sales": "Sales",
 32 |         "categories": "Categories",
 33 |         "customerService": "Customer Service",
 34 |         "returns": "Returns & Exchanges",
 35 |         "shipping": "Shipping Information",
 36 |         "sizeGuide": "Size Guide",
 37 |         "aboutUs": "About Us",
 38 |         "careers": "Careers",
 39 |         "blog": "Blog",
 40 |         "affiliate": "Affiliate Program",
 41 |         "instagram": "Instagram",
 42 |         "twitter": "Twitter",
 43 |         "facebook": "Facebook",
 44 |         "pinterest": "Pinterest",
 45 |         "privacy": "Privacy Notice",
 46 |         "terms": "Conditions of Use"
 47 |       }
 48 |     }
 49 |   },
 50 |   "ErrorCard": {
 51 |     "ui": {
 52 |       "headerUnknownError": "Oops! Something went wrong",
 53 |       "headerAccessDenied": "Invalid Login Information",
 54 |       "headerProviderMismatch": "Login Conflict",
 55 |       "headerEmailUnverified": "Email Not Verified",
 56 |       "backButton": "Back to sign in",
 57 |       "unknownError": "An unexpected error occurred. Please try again later.",
 58 |       "accessDenied": "Your login information is incorrect. Please check your login details.",
 59 |       "providerMismatch": "This account is already registered with a different sign-in method.",
 60 |       "emailUnverified": "Please verify your email address before signing in."
 61 |     }
 62 |   },
 63 |   "SignInForm": {
 64 |     "ui": {
 65 |       "header": "Welcome back",
 66 |       "backButton": "Don't have an account?",
 67 |       "resetLink": "Forgot password?",
 68 |       "code": "Two Factor Code",
 69 |       "email": "Email",
 70 |       "password": "Password",
 71 |       "submitting": "Submitting...",
 72 |       "confirm": "Confirm",
 73 |       "submit": "Sign In"
 74 |     },
 75 |     "validation": {
 76 |       "email": {
 77 |         "required": "Email is required",
 78 |         "invalid": "Invalid email"
 79 |       },
 80 |       "password": {
 81 |         "required": "Password is required",
 82 |         "invalid": "Password must be 8+ characters"
 83 |       }
 84 |     },
 85 |     "server": {
 86 |       "success": {
 87 |         "confirmationSent": "A confirmation email has been sent."
 88 |       },
 89 |       "error": {
 90 |         "emailNotFound": "This email is not registered.",
 91 |         "invalidCode": "Invalid verification code.",
 92 |         "codeExpired": "The verification code has expired.",
 93 |         "invalidCredentials": "Incorrect email or password."
 94 |       }
 95 |     }
 96 |   },
 97 |   "SignUpForm": {
 98 |     "ui": {
 99 |       "header": "Create an account",
100 |       "backButton": "Already have an account?",
101 |       "name": "Username",
102 |       "email": "Email",
103 |       "password": "Password",
104 |       "confirmPassword": "Confirm password",
105 |       "submitting": "Submitting...",
106 |       "submit": "Sign Up"
107 |     },
108 |     "validation": {
109 |       "name": {
110 |         "required": "Username is required",
111 |         "invalid": "Username must be less than 50 characters"
112 |       },
113 |       "email": {
114 |         "required": "Email is required",
115 |         "invalid": "Invalid email"
116 |       },
117 |       "password": {
118 |         "required": "Password is required",
119 |         "invalid": "Password must be 8+ characters"
120 |       },
121 |       "confirmPassword": {
122 |         "required": "Password confirmation is required",
123 |         "invalid": "Password do not match"
124 |       }
125 |     },
126 |     "server": {
127 |       "success": {
128 |         "confirmationSent": "A confirmation email has been sent."
129 |       },
130 |       "error": {
131 |         "emailExists": "This email is already registered.",
132 |         "emailThirdParty": "This email has already been used for third-party login."
133 |       }
134 |     }
135 |   },
136 |   "ResetForm": {
137 |     "ui": {
138 |       "header": "Forgot your password?",
139 |       "backButton": "Back to sign in",
140 |       "email": "Email",
141 |       "submitting": "Sending...",
142 |       "submit": "Send reset email"
143 |     },
144 |     "validation": {
145 |       "email": {
146 |         "required": "Email is required",
147 |         "invalid": "Invalid email"
148 |       }
149 |     },
150 |     "server": {
151 |       "success": {
152 |         "resetSent": "Reset email sent."
153 |       },
154 |       "error": {
155 |         "emailNotFound": "This email is not registered.",
156 |         "emailThirdParty": "This email has already been used for third-party login."
157 |       }
158 |     }
159 |   },
160 |   "NewPasswordForm": {
161 |     "ui": {
162 |       "header": "Reset your password",
163 |       "backButton": "Back to sign in",
164 |       "newPassword": "New Password",
165 |       "confirmPassword": "Confirm Password",
166 |       "submitting": "Resetting...",
167 |       "submit": "Reset Password"
168 |     },
169 |     "validation": {
170 |       "newPassword": {
171 |         "required": "Password is required",
172 |         "invalid": "Password must be 8+ characters"
173 |       },
174 |       "confirmPassword": {
175 |         "required": "Password confirmation is required",
176 |         "invalid": "Passwords do not match"
177 |       }
178 |     },
179 |     "server": {
180 |       "success": {
181 |         "passwordUpdated": "Password updated successfully."
182 |       },
183 |       "error": {
184 |         "emailNotFound": "This email is not registered.",
185 |         "emailThirdParty": "This email has already been used for third-party login."
186 |       }
187 |     }
188 |   },
189 |   "SettingsForm": {
190 |     "ui": {
191 |       "header": "Account Settings",
192 |       "name": "Username",
193 |       "email": "Email",
194 |       "password": "Current Password",
195 |       "newPassword": "New Password",
196 |       "isTwoFactorEnabled": "Two Factor Authentication",
197 |       "isTwoFactorEnabledDescription": "Enable two factor authentication",
198 |       "submitting": "Saving...",
199 |       "submit": "Save Changes"
200 |     },
201 |     "validation": {
202 |       "email": {
203 |         "invalid": "Invalid email"
204 |       },
205 |       "password": {
206 |         "required": "To change password, enter current one.",
207 |         "invalid": "Password must be 8+ characters if provided"
208 |       },
209 |       "newPassword": {
210 |         "required": "To change password, enter new password.",
211 |         "invalid": "Password must be 8+ characters if provided"
212 |       }
213 |     },
214 |     "server": {
215 |       "success": {
216 |         "verificationSent": "Verification email sent.",
217 |         "settingsUpdated": "Settings updated successfully."
218 |       },
219 |       "error": {
220 |         "emailInUse": "This email is already in use.",
221 |         "incorrectPassword": "Incorrect password."
222 |       }
223 |     }
224 |   },
225 |   "NewVerificationForm": {
226 |     "ui": {
227 |       "header": "Confirming your email verification",
228 |       "backButton": "Back to sign in"
229 |     },
230 |     "server": {
231 |       "success": {
232 |         "emailUpdated": "Your email has been updated and verified.",
233 |         "emailVerified": "Your email has been verified successfully."
234 |       },
235 |       "error": {
236 |         "emailNotFound": "This email is not registered.",
237 |         "invalidRequest": "Invalid verification request."
238 |       }
239 |     }
240 |   },
241 |   "Common": {
242 |     "error": {
243 |       "missingToken": "Missing token.",
244 |       "tokenExpired": "The token has expired.",
245 |       "tokenInvalid": "The token is invalid.",
246 |       "unauthorized": "You are not authorized to perform this action.",
247 |       "invalidFields": "One or more fields are invalid.",
248 |       "actionFailed": "The action could not be completed. Please try again.",
249 |       "generic": "Something went wrong. Please try again later."
250 |     }
251 |   },
252 |   "Email": {
253 |     "verification": {
254 |       "subject": "Confirm your email",
255 |       "title": "Email Confirmation",
256 |       "description": "Please click the link below to confirm your email address:",
257 |       "button": "Click here to confirm email",
258 |       "ignoreNote": "If you did not request this email, please ignore it."
259 |     },
260 |     "reset": {
261 |       "subject": "Reset your password",
262 |       "title": "Password Reset",
263 |       "description": "Please click the link below to reset your password:",
264 |       "button": "Click here to reset password",
265 |       "ignoreNote": "If you did not request this email, please ignore it."
266 |     },
267 |     "2fa": {
268 |       "subject": "Your Two-Factor Authentication Code",
269 |       "title": "Two-Factor Authentication",
270 |       "description": "Your 2FA code is:",
271 |       "loginNote": "Please use this code to complete your login.",
272 |       "securityNote": "For your security, never share this code with anyone."
273 |     }
274 |   }
275 | }


--------------------------------------------------------------------------------
/messages/zh.json:
--------------------------------------------------------------------------------
  1 | {
  2 |   "HomePage": {
  3 |     "ui": {
  4 |       "title": "歡迎來到首頁"
  5 |     }
  6 |   },
  7 |   "Navbar": {
  8 |     "ui": {
  9 |       "signin": "登入",
 10 |       "signout": "登出",
 11 |       "settings": "帳戶設定",
 12 |       "links": {
 13 |         "newArrivals": "新品上市",
 14 |         "bestSellers": "熱銷商品",
 15 |         "sales": "特價專區",
 16 |         "categories": "商品分類"
 17 |       }
 18 |     }
 19 |   },
 20 |   "Footer": {
 21 |     "ui": {
 22 |       "sections": {
 23 |         "shop": "購物",
 24 |         "support": "支援",
 25 |         "company": "公司",
 26 |         "socials": "社群"
 27 |       },
 28 |       "links": {
 29 |         "newArrivals": "新品上市",
 30 |         "bestSellers": "熱銷商品",
 31 |         "sales": "特價專區",
 32 |         "categories": "商品分類",
 33 |         "customerService": "顧客服務",
 34 |         "returns": "退換貨服務",
 35 |         "shipping": "運送資訊",
 36 |         "sizeGuide": "尺寸指南",
 37 |         "aboutUs": "關於我們",
 38 |         "careers": "人才招募",
 39 |         "blog": "部落格",
 40 |         "affiliate": "聯盟行銷計畫",
 41 |         "instagram": "Instagram",
 42 |         "twitter": "Twitter",
 43 |         "facebook": "Facebook",
 44 |         "pinterest": "Pinterest",
 45 |         "privacy": "隱私權聲明",
 46 |         "terms": "使用條款"
 47 |       }
 48 |     }
 49 |   },
 50 |   "ErrorCard": {
 51 |     "ui": {
 52 |       "headerUnknownError": "哎呀！發生了一些問題",
 53 |       "headerAccessDenied": "錯誤的登入資訊",
 54 |       "headerProviderMismatch": "登入衝突",
 55 |       "headerEmailUnverified": "電子郵件尚未驗證",
 56 |       "backButton": "返回登入頁",
 57 |       "unknownError": "發生未知錯誤，請稍後再試。",
 58 |       "accessDenied": "登入資訊有誤，請確認帳號和密碼。",
 59 |       "providerMismatch": "此帳號已透過其他登入方式註冊。",
 60 |       "emailUnverified": "請先完成電子郵件驗證後再登入。"
 61 |     }
 62 |   },
 63 |   "SignInForm": {
 64 |     "ui": {
 65 |       "header": "歡迎回來",
 66 |       "backButton": "尚未註冊帳號",
 67 |       "resetLink": "忘記密碼",
 68 |       "code": "驗證碼",
 69 |       "email": "電子郵件",
 70 |       "password": "密碼",
 71 |       "submitting": "登入中...",
 72 |       "confirm": "確認",
 73 |       "submit": "登入"
 74 |     },
 75 |     "validation": {
 76 |       "email": {
 77 |         "required": "電子郵件為必填",
 78 |         "invalid": "電子郵件格式不正確"
 79 |       },
 80 |       "password": {
 81 |         "required": "密碼為必填",
 82 |         "invalid": "密碼長度至少 8 個字元"
 83 |       }
 84 |     },
 85 |     "server": {
 86 |       "success": {
 87 |         "confirmationSent": "已寄出確認信件。"
 88 |       },
 89 |       "error": {
 90 |         "emailNotFound": "該電子郵件尚未註冊。",
 91 |         "invalidCode": "驗證碼錯誤。",
 92 |         "codeExpired": "驗證碼已過期。",
 93 |         "invalidCredentials": "電子郵件或密碼錯誤。"
 94 |       }
 95 |     }
 96 |   },
 97 |   "SignUpForm": {
 98 |     "ui": {
 99 |       "header": "建立帳號",
100 |       "backButton": "已經註冊帳號",
101 |       "name": "使用者名稱",
102 |       "email": "電子郵件",
103 |       "password": "密碼",
104 |       "confirmPassword": "確認密碼",
105 |       "submitting": "註冊中...",
106 |       "submit": "註冊"
107 |     },
108 |     "validation": {
109 |       "name": {
110 |         "required": "使用者名稱為必填",
111 |         "invalid": "使用者名稱長度需小於 50 個字元"
112 |       },
113 |       "email": {
114 |         "required": "電子郵件為必填",
115 |         "invalid": "電子郵件格式不正確"
116 |       },
117 |       "password": {
118 |         "required": "密碼為必填",
119 |         "invalid": "密碼長度至少 8 個字元"
120 |       },
121 |       "confirmPassword": {
122 |         "required": "請再次輸入密碼",
123 |         "invalid": "密碼不一致"
124 |       }
125 |     },
126 |     "server": {
127 |       "success": {
128 |         "confirmationSent": "已寄出確認郵件。"
129 |       },
130 |       "error": {
131 |         "emailExists": "該電子郵件已註冊。",
132 |         "emailThirdParty": "該電子郵件已用於第三方登入。"
133 |       }
134 |     }
135 |   },
136 |   "ResetForm": {
137 |     "ui": {
138 |       "header": "忘記密碼？",
139 |       "backButton": "返回登入頁",
140 |       "email": "電子郵件",
141 |       "submitting": "發送中...",
142 |       "submit": "發送重設郵件"
143 |     },
144 |     "validation": {
145 |       "email": {
146 |         "required": "請輸入電子郵件",
147 |         "invalid": "電子郵件格式不正確"
148 |       }
149 |     },
150 |     "server": {
151 |       "success": {
152 |         "resetSent": "已發送密碼重設郵件。"
153 |       },
154 |       "error": {
155 |         "emailNotFound": "該電子郵件尚未註冊。",
156 |         "emailThirdParty": "該電子郵件已用於第三方登入。"
157 |       }
158 |     }
159 |   },
160 |   "NewPasswordForm": {
161 |     "ui": {
162 |       "header": "重設您的密碼",
163 |       "backButton": "返回登入頁",
164 |       "newPassword": "新密碼",
165 |       "confirmPassword": "確認密碼",
166 |       "submitting": "重設中...",
167 |       "submit": "重設密碼"
168 |     },
169 |     "validation": {
170 |       "newPassword": {
171 |         "required": "請輸入新密碼",
172 |         "invalid": "密碼長度至少需 8 個字元"
173 |       },
174 |       "confirmPassword": {
175 |         "required": "請確認新密碼",
176 |         "invalid": "兩次輸入的密碼不一致"
177 |       }
178 |     },
179 |     "server": {
180 |       "success": {
181 |         "passwordUpdated": "密碼已成功更新。"
182 |       },
183 |       "error": {
184 |         "emailNotFound": "該電子郵件尚未註冊。",
185 |         "emailThirdParty": "該電子郵件已用於第三方登入。"
186 |       }
187 |     }
188 |   },
189 |   "SettingsForm": {
190 |     "ui": {
191 |       "header": "帳號設定",
192 |       "name": "使用者名稱",
193 |       "email": "電子郵件",
194 |       "password": "目前密碼",
195 |       "newPassword": "新密碼",
196 |       "isTwoFactorEnabled": "雙重驗證",
197 |       "isTwoFactorEnabledDescription": "啟用雙重驗證",
198 |       "submitting": "儲存中...",
199 |       "submit": "儲存變更"
200 |     },
201 |     "validation": {
202 |       "email": {
203 |         "invalid": "電子郵件格式不正確"
204 |       },
205 |       "password": {
206 |         "required": "請輸入目前的密碼以修改密碼",
207 |         "invalid": "如需修改密碼，原密碼至少需 8 個字元"
208 |       },
209 |       "newPassword": {
210 |         "required": "請輸入新密碼以完成修改",
211 |         "invalid": "新密碼至少需 8 個字元"
212 |       }
213 |     },
214 |     "server": {
215 |       "success": {
216 |         "verificationSent": "已發送驗證信件。",
217 |         "settingsUpdated": "帳號資料已更新。"
218 |       },
219 |       "error": {
220 |         "emailInUse": "該電子郵件已被使用。",
221 |         "incorrectPassword": "密碼不正確。"
222 |       }
223 |     }
224 |   },
225 |   "NewVerificationForm": {
226 |     "ui": {
227 |       "header": "電子郵件驗證",
228 |       "backButton": "返回登入頁"
229 |     },
230 |     "server": {
231 |       "success": {
232 |         "emailUpdated": "您的電子郵件已更新並完成驗證。",
233 |         "emailVerified": "電子郵件驗證成功。"
234 |       },
235 |       "error": {
236 |         "emailNotFound": "該電子郵件尚未註冊。",
237 |         "invalidRequest": "驗證請求無效。"
238 |       }
239 |     }
240 |   },
241 |   "Common": {
242 |     "error": {
243 |       "missingToken": "缺少驗證令牌。",
244 |       "tokenExpired": "驗證碼已過期。",
245 |       "tokenInvalid": "驗證碼無效。",
246 |       "unauthorized": "您沒有執行此操作的權限。",
247 |       "invalidFields": "欄位填寫有誤。",
248 |       "actionFailed": "操作失敗，請稍後再試一次。",
249 |       "generic": "發生錯誤，請稍後重試。"
250 |     }
251 |   },
252 |   "Email": {
253 |     "verification": {
254 |       "subject": "請確認您的電子郵件",
255 |       "title": "電子郵件確認",
256 |       "description": "請點選下方連結以驗證您的電子郵件：",
257 |       "button": "點此確認電子郵件",
258 |       "ignoreNote": "如果您未申請此操作，請忽略此信件。"
259 |     },
260 |     "reset": {
261 |       "subject": "重設您的密碼",
262 |       "title": "密碼重設",
263 |       "description": "請點選下方連結以重設您的密碼：",
264 |       "button": "點此重設密碼",
265 |       "ignoreNote": "如果您未申請此操作，請忽略此信件。"
266 |     },
267 |     "2fa": {
268 |       "subject": "您的二階段驗證碼",
269 |       "title": "二階段驗證",
270 |       "description": "您的驗證碼如下：",
271 |       "loginNote": "請使用此驗證碼完成登入。",
272 |       "securityNote": "為了您的帳戶安全，請勿與任何人分享驗證碼。"
273 |     }
274 |   }
275 | }


--------------------------------------------------------------------------------
/middleware.ts:
--------------------------------------------------------------------------------
 1 | import { NextResponse, type NextFetchEvent, type NextRequest } from "next/server"
 2 | import NextAuth from "next-auth"
 3 | import authConfig from "@/auth.config"
 4 | import { chain } from "@/middleware/chain"
 5 | import { withAuthMiddleware } from "@/middleware/with-auth-middleware"
 6 | import { withIntlMiddleware } from "@/middleware/with-Intl-middleware"
 7 | 
 8 | // Create a chain function
 9 | const baseMiddleware = chain(withAuthMiddleware, withIntlMiddleware)
10 | 
11 | // Use NextAuth to generate auth middleware wrapper
12 | const { auth: withAuthWrapper } = NextAuth(authConfig)
13 | 
14 | const middleware = withAuthWrapper(async (req: NextRequest) => {
15 |   const res = NextResponse.next()
16 |   const event = {} as NextFetchEvent
17 |   return await baseMiddleware(req, event, res)
18 | })
19 | 
20 | export default middleware
21 | 
22 | export const config = {
23 |   matcher: ["/((?!api|_next/static|_next/image|images|favicon.ico).*)"]
24 | }


--------------------------------------------------------------------------------
/middleware/chain.ts:
--------------------------------------------------------------------------------
 1 | import { NextResponse, type NextRequest, type NextFetchEvent } from "next/server"
 2 | 
 3 | export type Middleware = (
 4 |   req: NextRequest & { auth?: unknown },
 5 |   event?: NextFetchEvent,
 6 |   res?: NextResponse
 7 | ) => Promise<NextResponse> | NextResponse
 8 | 
 9 | export function chain(...middlewares: Middleware[]): Middleware {
10 |   return async (req, event, res = NextResponse.next()) => {
11 |     let response = res
12 | 
13 |     for (const middleware of middlewares) {
14 |       response = await middleware(req, event, response)
15 | 
16 |       // Early exit if a redirect or rewrite has occurred
17 |       if (response.headers.get("X-Middleware-Next") === null) {
18 |         return response
19 |       }
20 |     }
21 | 
22 |     return response
23 |   }
24 | }


--------------------------------------------------------------------------------
/middleware/internal-auth.ts:
--------------------------------------------------------------------------------
 1 | import { JWTPayload, jwtVerify } from "jose"
 2 | import { NextRequest, NextResponse } from "next/server"
 3 | 
 4 | const INTERNAL_KEY = process.env.INTERNAL_API_KEY!
 5 | const BEARER_SECRET = new TextEncoder().encode(process.env.INTERNAL_API_SECRET!)
 6 | 
 7 | interface VerifiedBearerPayload {
 8 |   service: string
 9 | }
10 | 
11 | export const verifyInternalKey = (req: NextRequest): boolean => {
12 |   const key = req.headers.get("x-internal-key")
13 |   return !!key && key === INTERNAL_KEY
14 | }
15 | 
16 | export const verifyBearerToken = async (req: NextRequest): Promise<VerifiedBearerPayload | null> => {
17 |   const authHeader = req.headers.get("authorization")?.trim()
18 |   if (!authHeader) return null
19 | 
20 |   const [scheme, token] = authHeader.split(" ")
21 |   if (scheme !== "Bearer" || !token) return null
22 |   
23 |   try {
24 |     const { payload } = await jwtVerify(token, BEARER_SECRET)
25 | 
26 |     if (typeof (payload as JWTPayload).service === "string") {
27 |       return payload as unknown as VerifiedBearerPayload
28 |     }
29 | 
30 |     return null
31 |   } catch (err) {
32 |     console.error("[JWT_VERIFY_FAIL]", (err as Error).message)
33 |     return null
34 |   }
35 | }
36 | 
37 | export const authorizeInternalRequest = async (
38 |   req: NextRequest,
39 |   allowedServices?: string[]
40 | ): Promise<NextResponse | null> => {
41 |   const isValidKey = verifyInternalKey(req)
42 |   const payload = await verifyBearerToken(req)
43 | 
44 |   if (isValidKey) return null
45 | 
46 |   if (payload) {
47 |     if (allowedServices && !allowedServices.includes(payload.service)) {
48 |       console.warn(`[SERVICE_NOT_ALLOWED] service=${payload.service}`)
49 |       return NextResponse.json({ error: "Service not allowed" }, { status: 403 })
50 |     }
51 |     return null
52 |   }
53 | 
54 |   return NextResponse.json({ error: "Unauthorized" }, { status: 401 })
55 | }


--------------------------------------------------------------------------------
/middleware/with-Intl-middleware.ts:
--------------------------------------------------------------------------------
 1 | import { NextFetchEvent, NextRequest, NextResponse } from "next/server"
 2 | import createMiddleware from "next-intl/middleware"
 3 | import { routing } from "@/i18n/routing"
 4 | import type { Middleware } from "./chain"
 5 | 
 6 | // Create i18n middleware
 7 | const intl = createMiddleware(routing)
 8 | 
 9 | export const withIntlMiddleware: Middleware = async (
10 |   req: NextRequest,
11 |   _event?: NextFetchEvent,
12 |   _res?: NextResponse
13 | ): Promise<NextResponse> => {
14 |   return intl(req)
15 | }


--------------------------------------------------------------------------------
/middleware/with-auth-middleware.ts:
--------------------------------------------------------------------------------
 1 | import { NextResponse } from "next/server"
 2 | 
 3 | import { routes } from "@/routes"
 4 | import { routing } from "@/i18n/routing"
 5 | import type { Middleware } from "./chain"
 6 | 
 7 | // Remove locale prefix from pathname
 8 | const normalizePathname = (pathname: string): string => {
 9 |   const localePattern = routing.locales.join("|")
10 |   const regex = new RegExp(`^\\/(${localePattern})(?=\\/|$)`)
11 |   const normalized = pathname.replace(regex, "")
12 |   return normalized === "" ? "/" : normalized
13 | }
14 | 
15 | export const withAuthMiddleware: Middleware = async (req, _event, _res) => {
16 |   const res = _res ?? NextResponse.next()
17 | 
18 |   const { nextUrl, auth } = req
19 |   const isLoggedIn = !!auth
20 |   // console.log({isLoggedIn})
21 |   const pathname = normalizePathname(nextUrl.pathname)
22 |   // console.log({pathname})
23 |   
24 |   const isPublic = routes.public.includes(pathname)
25 |   const isAuthRoute = routes.auth.includes(pathname)
26 |   const defaultRedirect = new URL(routes.defaultLoginRedirect, nextUrl)
27 | 
28 |   // Already logged in → redirect away from /signin, /signup
29 |   if (isAuthRoute && isLoggedIn) {
30 |     return NextResponse.redirect(defaultRedirect)
31 |   }
32 | 
33 |   // Not logged in → redirect protected routes to /signin
34 |   if (!isPublic && !isLoggedIn && !isAuthRoute) {
35 |     const callbackUrl = pathname + (nextUrl.search || "")
36 |     const encoded = encodeURIComponent(callbackUrl)
37 |     return NextResponse.redirect(new URL(`/signin?callbackUrl=${encoded}`, nextUrl))
38 |   }
39 | 
40 |   return res
41 | }


--------------------------------------------------------------------------------
/next.config.mjs:
--------------------------------------------------------------------------------
 1 | import createNextIntlPlugin from "next-intl/plugin"
 2 | const withNextIntl = createNextIntlPlugin()
 3 | 
 4 | /** @type {import("next").NextConfig} */
 5 | const nextConfig = {
 6 |   experimental: {
 7 |     esmExternals: "loose",
 8 |     serverComponentsExternalPackages: ["mongoose"]
 9 |   }
10 | }
11 | 
12 | export default withNextIntl(nextConfig)
13 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "nextauth-v5-mongodb-fullstack-app",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "dev": "next dev",
 7 |     "build": "next build",
 8 |     "start": "next start",
 9 |     "lint": "next lint"
10 |   },
11 |   "dependencies": {
12 |     "@hookform/resolvers": "^3.3.4",
13 |     "@radix-ui/react-avatar": "^1.0.4",
14 |     "@radix-ui/react-dialog": "^1.0.5",
15 |     "@radix-ui/react-dropdown-menu": "^2.0.6",
16 |     "@radix-ui/react-icons": "^1.3.0",
17 |     "@radix-ui/react-label": "^2.0.2",
18 |     "@radix-ui/react-select": "^2.0.0",
19 |     "@radix-ui/react-slot": "^1.0.2",
20 |     "@radix-ui/react-switch": "^1.0.3",
21 |     "@radix-ui/react-toast": "^1.1.5",
22 |     "bcryptjs": "^2.4.3",
23 |     "class-variance-authority": "^0.7.0",
24 |     "clsx": "^2.1.0",
25 |     "jose": "^6.0.11",
26 |     "jsonwebtoken": "^9.0.2",
27 |     "mongoose": "^8.3.3",
28 |     "next": "14.2.1",
29 |     "next-auth": "^5.0.0-beta.16",
30 |     "next-intl": "^4.0.2",
31 |     "next-themes": "^0.3.0",
32 |     "nodemailer": "^6.9.13",
33 |     "react": "^18",
34 |     "react-dom": "^18",
35 |     "react-hook-form": "^7.51.3",
36 |     "react-icons": "^5.1.0",
37 |     "resend": "^3.2.0",
38 |     "tailwind-merge": "^2.2.2",
39 |     "tailwindcss-animate": "^1.0.7",
40 |     "uuid": "^9.0.1",
41 |     "zod": "^3.22.5"
42 |   },
43 |   "devDependencies": {
44 |     "@types/bcryptjs": "^2.4.6",
45 |     "@types/jsonwebtoken": "^9.0.6",
46 |     "@types/node": "^20",
47 |     "@types/nodemailer": "^6.4.15",
48 |     "@types/react": "^18",
49 |     "@types/react-dom": "^18",
50 |     "@types/uuid": "^9.0.8",
51 |     "eslint": "^8",
52 |     "eslint-config-next": "14.2.1",
53 |     "postcss": "^8",
54 |     "tailwindcss": "^3.4.1",
55 |     "typescript": "^5"
56 |   }
57 | }
58 | 


--------------------------------------------------------------------------------
/postcss.config.mjs:
--------------------------------------------------------------------------------
1 | /** @type {import('postcss-load-config').Config} */
2 | const config = {
3 |   plugins: {
4 |     tailwindcss: {},
5 |   },
6 | };
7 | 
8 | export default config;
9 | 


--------------------------------------------------------------------------------
/providers/theme-provider.tsx:
--------------------------------------------------------------------------------
1 | "use client"
2 | 
3 | import * as React from "react"
4 | import { ThemeProvider as NextThemesProvider } from "next-themes"
5 | import { type ThemeProviderProps } from "next-themes/dist/types"
6 | 
7 | export default function ThemeProvider({ children, ...props }: ThemeProviderProps) {
8 |   return <NextThemesProvider {...props}>{children}</NextThemesProvider>
9 | }


--------------------------------------------------------------------------------
/public/next.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 394 80"><path fill="#000" d="M262 0h68.5v12.7h-27.2v66.6h-13.6V12.7H262V0ZM149 0v12.7H94v20.4h44.3v12.6H94v21h55v12.6H80.5V0h68.7zm34.3 0h-17.8l63.8 79.4h17.9l-32-39.7 32-39.6h-17.9l-23 28.6-23-28.6zm18.3 56.7-9-11-27.1 33.7h17.8l18.3-22.7z"/><path fill="#000" d="M81 79.3 17 0H0v79.3h13.6V17l50.2 62.3H81Zm252.6-.4c-1 0-1.8-.4-2.5-1s-1.1-1.6-1.1-2.6.3-1.8 1-2.5 1.6-1 2.6-1 1.8.3 2.5 1a3.4 3.4 0 0 1 .6 4.3 3.7 3.7 0 0 1-3 1.8zm23.2-33.5h6v23.3c0 2.1-.4 4-1.3 5.5a9.1 9.1 0 0 1-3.8 3.5c-1.6.8-3.5 1.3-5.7 1.3-2 0-3.7-.4-5.3-1s-2.8-1.8-3.7-3.2c-.9-1.3-1.4-3-1.4-5h6c.1.8.3 1.6.7 2.2s1 1.2 1.6 1.5c.7.4 1.5.5 2.4.5 1 0 1.8-.2 2.4-.6a4 4 0 0 0 1.6-1.8c.3-.8.5-1.8.5-3V45.5zm30.9 9.1a4.4 4.4 0 0 0-2-3.3 7.5 7.5 0 0 0-4.3-1.1c-1.3 0-2.4.2-3.3.5-.9.4-1.6 1-2 1.6a3.5 3.5 0 0 0-.3 4c.3.5.7.9 1.3 1.2l1.8 1 2 .5 3.2.8c1.3.3 2.5.7 3.7 1.2a13 13 0 0 1 3.2 1.8 8.1 8.1 0 0 1 3 6.5c0 2-.5 3.7-1.5 5.1a10 10 0 0 1-4.4 3.5c-1.8.8-4.1 1.2-6.8 1.2-2.6 0-4.9-.4-6.8-1.2-2-.8-3.4-2-4.5-3.5a10 10 0 0 1-1.7-5.6h6a5 5 0 0 0 3.5 4.6c1 .4 2.2.6 3.4.6 1.3 0 2.5-.2 3.5-.6 1-.4 1.8-1 2.4-1.7a4 4 0 0 0 .8-2.4c0-.9-.2-1.6-.7-2.2a11 11 0 0 0-2.1-1.4l-3.2-1-3.8-1c-2.8-.7-5-1.7-6.6-3.2a7.2 7.2 0 0 1-2.4-5.7 8 8 0 0 1 1.7-5 10 10 0 0 1 4.3-3.5c2-.8 4-1.2 6.4-1.2 2.3 0 4.4.4 6.2 1.2 1.8.8 3.2 2 4.3 3.4 1 1.4 1.5 3 1.5 5h-5.8z"/></svg>


--------------------------------------------------------------------------------
/public/vercel.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 283 64"><path fill="black" d="M141 16c-11 0-19 7-19 18s9 18 20 18c7 0 13-3 16-7l-7-5c-2 3-6 4-9 4-5 0-9-3-10-7h28v-3c0-11-8-18-19-18zm-9 15c1-4 4-7 9-7s8 3 9 7h-18zm117-15c-11 0-19 7-19 18s9 18 20 18c6 0 12-3 16-7l-8-5c-2 3-5 4-8 4-5 0-9-3-11-7h28l1-3c0-11-8-18-19-18zm-10 15c2-4 5-7 10-7s8 3 9 7h-19zm-39 3c0 6 4 10 10 10 4 0 7-2 9-5l8 5c-3 5-9 8-17 8-11 0-19-7-19-18s8-18 19-18c8 0 14 3 17 8l-8 5c-2-3-5-5-9-5-6 0-10 4-10 10zm83-29v46h-9V5h9zM37 0l37 64H0L37 0zm92 5-27 48L74 5h10l18 30 17-30h10zm59 12v10l-3-1c-6 0-10 4-10 10v15h-9V17h9v9c0-5 6-9 13-9z"/></svg>


--------------------------------------------------------------------------------
/routes.ts:
--------------------------------------------------------------------------------
 1 | export const routes = {
 2 |   public: [
 3 |     "/",
 4 |     "/new-verification"
 5 |   ],
 6 |   auth: [
 7 |     "/signin",
 8 |     "/signup",
 9 |     "/reset",
10 |     "/new-password",
11 |     "/error"
12 |   ],
13 |   defaultSignInPage: "/signin",
14 |   defaultErrorPage: "/error",
15 |   defaultLoginRedirect: "/settings",
16 |   defaultLogoutRedirect: "/signin"
17 | }


--------------------------------------------------------------------------------
/tailwind.config.ts:
--------------------------------------------------------------------------------
 1 | import type { Config } from "tailwindcss"
 2 | 
 3 | const config = {
 4 |   darkMode: ["class"],
 5 |   content: [
 6 |     './pages/**/*.{ts,tsx}',
 7 |     './components/**/*.{ts,tsx}',
 8 |     './app/**/*.{ts,tsx}',
 9 |     './src/**/*.{ts,tsx}',
10 | 	],
11 |   prefix: "",
12 |   theme: {
13 |     container: {
14 |       center: true,
15 |       padding: "2rem",
16 |       screens: {
17 |         "2xl": "1400px",
18 |       },
19 |     },
20 |     extend: {
21 |       colors: {
22 |         border: "hsl(var(--border))",
23 |         input: "hsl(var(--input))",
24 |         ring: "hsl(var(--ring))",
25 |         background: "hsl(var(--background))",
26 |         foreground: "hsl(var(--foreground))",
27 |         primary: {
28 |           DEFAULT: "hsl(var(--primary))",
29 |           foreground: "hsl(var(--primary-foreground))",
30 |         },
31 |         secondary: {
32 |           DEFAULT: "hsl(var(--secondary))",
33 |           foreground: "hsl(var(--secondary-foreground))",
34 |         },
35 |         destructive: {
36 |           DEFAULT: "hsl(var(--destructive))",
37 |           foreground: "hsl(var(--destructive-foreground))",
38 |         },
39 |         muted: {
40 |           DEFAULT: "hsl(var(--muted))",
41 |           foreground: "hsl(var(--muted-foreground))",
42 |         },
43 |         accent: {
44 |           DEFAULT: "hsl(var(--accent))",
45 |           foreground: "hsl(var(--accent-foreground))",
46 |         },
47 |         popover: {
48 |           DEFAULT: "hsl(var(--popover))",
49 |           foreground: "hsl(var(--popover-foreground))",
50 |         },
51 |         card: {
52 |           DEFAULT: "hsl(var(--card))",
53 |           foreground: "hsl(var(--card-foreground))",
54 |         },
55 |       },
56 |       borderRadius: {
57 |         lg: "var(--radius)",
58 |         md: "calc(var(--radius) - 2px)",
59 |         sm: "calc(var(--radius) - 4px)",
60 |       },
61 |       keyframes: {
62 |         "accordion-down": {
63 |           from: { height: "0" },
64 |           to: { height: "var(--radix-accordion-content-height)" },
65 |         },
66 |         "accordion-up": {
67 |           from: { height: "var(--radix-accordion-content-height)" },
68 |           to: { height: "0" },
69 |         },
70 |       },
71 |       animation: {
72 |         "accordion-down": "accordion-down 0.2s ease-out",
73 |         "accordion-up": "accordion-up 0.2s ease-out",
74 |       },
75 |     },
76 |   },
77 |   plugins: [require("tailwindcss-animate")],
78 | } satisfies Config
79 | 
80 | export default config


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "lib": ["dom", "dom.iterable", "esnext"],
 4 |     "allowJs": true,
 5 |     "skipLibCheck": true,
 6 |     "strict": true,
 7 |     "noEmit": true,
 8 |     "esModuleInterop": true,
 9 |     "module": "esnext",
10 |     "moduleResolution": "bundler",
11 |     "resolveJsonModule": true,
12 |     "isolatedModules": true,
13 |     "jsx": "preserve",
14 |     "incremental": true,
15 |     "plugins": [
16 |       {
17 |         "name": "next"
18 |       }
19 |     ],
20 |     "paths": {
21 |       "@/*": ["./*"]
22 |     }
23 |   },
24 |   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
25 |   "exclude": ["node_modules"]
26 | }
27 | 


--------------------------------------------------------------------------------
/types/next-auth.d.ts:
--------------------------------------------------------------------------------
 1 | import { UserRole } from "@/lib/database/types"
 2 | import NextAuth, {type DefaultSession, type User as NextAuthUser } from "next-auth"
 3 | 
 4 | export interface ExtendedUser extends NextAuthUser {
 5 |   _id: string,
 6 |   role: UserRole,
 7 |   provider: string
 8 |   isTwoFactorEnabled: boolean
 9 | }
10 | 
11 | declare module "next-auth" {
12 |   interface User extends Partial<ExtendedUser> {}
13 |   interface Session {
14 |     user: ExtendedUser & DefaultSession["user"]
15 |   }
16 | }


--------------------------------------------------------------------------------