├── .eslintrc.json
├── app
    ├── favicon.ico
    ├── page.tsx
    ├── api
    │   └── auth
    │   │   ├── [...nextauth]
    │   │       └── route.ts
    │   │   └── verify-email
    │   │       └── route.ts
    ├── (auth)
    │   ├── register
    │   │   └── page.tsx
    │   ├── layout.tsx
    │   └── login
    │   │   └── page.tsx
    ├── (protected)
    │   ├── dashboard
    │   │   └── page.tsx
    │   └── admin
    │   │   └── page.tsx
    ├── layout.tsx
    └── globals.css
├── next.config.mjs
├── postcss.config.mjs
├── lib
    ├── utils.ts
    ├── db.ts
    ├── mail.ts
    └── zod.ts
├── components.json
├── components
    ├── logout-button.tsx
    ├── button-social.tsx
    ├── ui
    │   ├── label.tsx
    │   ├── input.tsx
    │   ├── button.tsx
    │   └── form.tsx
    ├── form-register.tsx
    └── form-login.tsx
├── .env copy
├── types
    └── next-auth.d.ts
├── .gitignore
├── public
    ├── vercel.svg
    └── next.svg
├── tsconfig.json
├── package.json
├── prisma
    └── schema.prisma
├── auth.ts
├── README.md
├── middleware.ts
├── tailwind.config.ts
├── actions
    └── auth-action.ts
└── auth.config.ts


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


--------------------------------------------------------------------------------
/app/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bluuweb/example-next-auth-v5/HEAD/app/favicon.ico


--------------------------------------------------------------------------------
/app/page.tsx:
--------------------------------------------------------------------------------
1 | const HomePage = () => {
2 |   return <div>HomePage</div>;
3 | };
4 | export default HomePage;
5 | 


--------------------------------------------------------------------------------
/next.config.mjs:
--------------------------------------------------------------------------------
1 | /** @type {import('next').NextConfig} */
2 | const nextConfig = {};
3 | 
4 | export default nextConfig;
5 | 


--------------------------------------------------------------------------------
/app/api/auth/[...nextauth]/route.ts:
--------------------------------------------------------------------------------
1 | import { handlers } from "@/auth"; // Referring to the auth.ts we just created
2 | export const { GET, POST } = handlers;
3 | 


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------
/app/(auth)/register/page.tsx:
--------------------------------------------------------------------------------
1 | import FormRegister from "@/components/form-register";
2 | 
3 | const RegisterPage = () => {
4 |   return <FormRegister />;
5 | };
6 | export default RegisterPage;
7 | 


--------------------------------------------------------------------------------
/lib/utils.ts:
--------------------------------------------------------------------------------
1 | import { type ClassValue, clsx } from "clsx"
2 | import { twMerge } from "tailwind-merge"
3 | 
4 | export function cn(...inputs: ClassValue[]) {
5 |   return twMerge(clsx(inputs))
6 | }
7 | 


--------------------------------------------------------------------------------
/app/(auth)/layout.tsx:
--------------------------------------------------------------------------------
1 | const AuthLayout = ({
2 |   children,
3 | }: Readonly<{
4 |   children: React.ReactNode;
5 | }>) => {
6 |   return <div className="grid place-items-center min-h-screen">{children}</div>;
7 | };
8 | export default AuthLayout;
9 | 


--------------------------------------------------------------------------------
/components.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "$schema": "https://ui.shadcn.com/schema.json",
 3 |   "style": "default",
 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/logout-button.tsx:
--------------------------------------------------------------------------------
 1 | "use client";
 2 | 
 3 | import { Button } from "@/components/ui/button";
 4 | import { signOut } from "next-auth/react";
 5 | 
 6 | const LogoutButton = () => {
 7 |   const handleClick = async () => {
 8 |     await signOut({
 9 |       callbackUrl: "/login",
10 |     });
11 |   };
12 | 
13 |   return <Button onClick={handleClick}>LogOut</Button>;
14 | };
15 | export default LogoutButton;
16 | 


--------------------------------------------------------------------------------
/.env copy:
--------------------------------------------------------------------------------
 1 | # 🔥 ESTE ARCHIVO DEBE LLAMARSE .env 🔥
 2 | # 🔥 NO OLVIDAR AGREGAR EL ARCHIVO .env AL .gitignore 🔥
 3 | AUTH_SECRET=""
 4 | 
 5 | DATABASE_URL="postgresql://postgres:root@localhost:5432/auth_yt?schema=public"
 6 | 
 7 | AUTH_RESEND_KEY=""
 8 | 
 9 | NEXTAUTH_URL="http://localhost:3000"
10 | 
11 | # Credenciales de autenticación video #02
12 | AUTH_GOOGLE_ID=
13 | AUTH_GOOGLE_SECRET=
14 | 
15 | AUTH_GITHUB_ID=
16 | AUTH_GITHUB_SECRET=


--------------------------------------------------------------------------------
/types/next-auth.d.ts:
--------------------------------------------------------------------------------
 1 | import { DefaultSession } from "next-auth";
 2 | import "next-auth/jwt";
 3 | 
 4 | declare module "next-auth" {
 5 |   interface Session {
 6 |     user: {
 7 |       role?: string;
 8 |     } & DefaultSession["user"];
 9 |   }
10 | 
11 |   interface User {
12 |     role?: string;
13 |   }
14 | }
15 | 
16 | declare module "next-auth/jwt" {
17 |   interface JWT {
18 |     role?: string;
19 |   }
20 | }
21 | 


--------------------------------------------------------------------------------
/lib/db.ts:
--------------------------------------------------------------------------------
 1 | import { PrismaClient } from "@prisma/client";
 2 | 
 3 | const prismaClientSingleton = () => {
 4 |   return new PrismaClient();
 5 | };
 6 | 
 7 | declare const globalThis: {
 8 |   prismaGlobal: ReturnType<typeof prismaClientSingleton>;
 9 | } & typeof global;
10 | 
11 | export const db = globalThis.prismaGlobal ?? prismaClientSingleton();
12 | 
13 | if (process.env.NODE_ENV !== "production") globalThis.prismaGlobal = db;
14 | 


--------------------------------------------------------------------------------
/app/(protected)/dashboard/page.tsx:
--------------------------------------------------------------------------------
 1 | import { auth } from "@/auth";
 2 | import LogoutButton from "@/components/logout-button";
 3 | 
 4 | export default async function DashboardPage() {
 5 |   const session = await auth();
 6 | 
 7 |   if (!session) {
 8 |     return <div>Not authenticated</div>;
 9 |   }
10 | 
11 |   return (
12 |     <div className="container">
13 |       <pre>{JSON.stringify(session, null, 2)}</pre>
14 |       <LogoutButton />
15 |     </div>
16 |   );
17 | }
18 | 


--------------------------------------------------------------------------------
/components/button-social.tsx:
--------------------------------------------------------------------------------
 1 | "use client";
 2 | 
 3 | import { Button } from "@/components/ui/button";
 4 | import { signIn } from "next-auth/react";
 5 | 
 6 | interface ButtonSocialProps {
 7 |   children: React.ReactNode;
 8 |   provider: string;
 9 | }
10 | 
11 | const ButtonSocial = ({ children, provider }: ButtonSocialProps) => {
12 |   const handleClick = async () => {
13 |     await signIn(provider);
14 |   };
15 | 
16 |   return <Button onClick={handleClick}>{children}</Button>;
17 | };
18 | export default ButtonSocial;
19 | 


--------------------------------------------------------------------------------
/app/(auth)/login/page.tsx:
--------------------------------------------------------------------------------
 1 | import FormLogin from "@/components/form-login";
 2 | 
 3 | const LoginPage = ({
 4 |   searchParams,
 5 | }: {
 6 |   searchParams: { verified: string; error: string };
 7 | }) => {
 8 |   const isVerified = searchParams.verified === "true";
 9 |   const OAuthAccountNotLinked = searchParams.error === "OAuthAccountNotLinked";
10 | 
11 |   return (
12 |     <FormLogin
13 |       isVerified={isVerified}
14 |       OAuthAccountNotLinked={OAuthAccountNotLinked}
15 |     />
16 |   );
17 | };
18 | export default LoginPage;
19 | 


--------------------------------------------------------------------------------
/app/(protected)/admin/page.tsx:
--------------------------------------------------------------------------------
 1 | import { auth } from "@/auth";
 2 | import LogoutButton from "@/components/logout-button";
 3 | 
 4 | const AdminPage = async () => {
 5 |   const session = await auth();
 6 | 
 7 |   console.log(session);
 8 | 
 9 |   if (session?.user?.role !== "admin") {
10 |     return <div>You are not admin</div>;
11 |   }
12 | 
13 |   return (
14 |     <div className="container">
15 |       <pre>{JSON.stringify(session, null, 2)}</pre>
16 |       <LogoutButton />
17 |     </div>
18 |   );
19 | };
20 | export default AdminPage;
21 | 


--------------------------------------------------------------------------------
/.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 | .env
31 | 
32 | # vercel
33 | .vercel
34 | 
35 | # typescript
36 | *.tsbuildinfo
37 | next-env.d.ts
38 | 


--------------------------------------------------------------------------------
/app/layout.tsx:
--------------------------------------------------------------------------------
 1 | import type { Metadata } from "next";
 2 | import { Inter } from "next/font/google";
 3 | import "./globals.css";
 4 | 
 5 | const inter = Inter({ subsets: ["latin"] });
 6 | 
 7 | export const metadata: Metadata = {
 8 |   title: "Create Next App",
 9 |   description: "Generated by create next app",
10 | };
11 | 
12 | export default function RootLayout({
13 |   children,
14 | }: Readonly<{
15 |   children: React.ReactNode;
16 | }>) {
17 |   return (
18 |     <html lang="en">
19 |       <body className={inter.className}>{children}</body>
20 |     </html>
21 |   );
22 | }
23 | 


--------------------------------------------------------------------------------
/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>


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------
/lib/mail.ts:
--------------------------------------------------------------------------------
 1 | import { Resend } from "resend";
 2 | 
 3 | const resend = new Resend(process.env.AUTH_RESEND_KEY);
 4 | 
 5 | export const sendEmailVerification = async (email: string, token: string) => {
 6 |   try {
 7 |     await resend.emails.send({
 8 |       from: "NextAuth js <onboarding@resend.dev>",
 9 |       to: email,
10 |       subject: "Verify your email",
11 |       html: `
12 |         <p>Click the link below to verify your email</p>
13 |         <a href="${process.env.NEXTAUTH_URL}/api/auth/verify-email?token=${token}">Verify email</a>
14 |       `,
15 |     });
16 | 
17 |     return {
18 |       success: true,
19 |     };
20 |   } catch (error) {
21 |     console.log(error);
22 |     return {
23 |       error: true,
24 |     };
25 |   }
26 | };
27 | 


--------------------------------------------------------------------------------
/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/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-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 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 | 


--------------------------------------------------------------------------------
/lib/zod.ts:
--------------------------------------------------------------------------------
 1 | import { object, string } from "zod";
 2 | 
 3 | export const loginSchema = object({
 4 |   email: string({ required_error: "Email is required" })
 5 |     .min(1, "Email is required")
 6 |     .email("Invalid email"),
 7 |   password: string({ required_error: "Password is required" })
 8 |     .min(1, "Password is required")
 9 |     .min(6, "Password must be more than 6 characters")
10 |     .max(32, "Password must be less than 32 characters"),
11 | });
12 | 
13 | export const registerSchema = object({
14 |   email: string({ required_error: "Email is required" })
15 |     .min(1, "Email is required")
16 |     .email("Invalid email"),
17 |   password: string({ required_error: "Password is required" })
18 |     .min(1, "Password is required")
19 |     .min(6, "Password must be more than 6 characters")
20 |     .max(32, "Password must be less than 32 characters"),
21 |   name: string({ required_error: "Name is required" })
22 |     .min(1, "Name is required")
23 |     .max(32, "Name must be less than 32 characters"),
24 | });
25 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "nextauth-yt",
 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 |     "@auth/prisma-adapter": "^2.4.1",
13 |     "@hookform/resolvers": "^3.6.0",
14 |     "@prisma/client": "^5.16.1",
15 |     "@radix-ui/react-label": "^2.1.0",
16 |     "@radix-ui/react-slot": "^1.1.0",
17 |     "bcryptjs": "^2.4.3",
18 |     "class-variance-authority": "^0.7.0",
19 |     "clsx": "^2.1.1",
20 |     "lucide-react": "^0.400.0",
21 |     "nanoid": "^5.0.7",
22 |     "next": "14.2.4",
23 |     "next-auth": "^5.0.0-beta.19",
24 |     "react": "^18",
25 |     "react-dom": "^18",
26 |     "react-hook-form": "^7.52.0",
27 |     "react-icons": "^5.2.1",
28 |     "resend": "^3.4.0",
29 |     "tailwind-merge": "^2.3.0",
30 |     "tailwindcss-animate": "^1.0.7",
31 |     "zod": "^3.23.8"
32 |   },
33 |   "devDependencies": {
34 |     "@types/bcryptjs": "^2.4.6",
35 |     "@types/node": "^20",
36 |     "@types/react": "^18",
37 |     "@types/react-dom": "^18",
38 |     "eslint": "^8",
39 |     "eslint-config-next": "14.2.4",
40 |     "postcss": "^8",
41 |     "prisma": "^5.16.1",
42 |     "tailwindcss": "^3.4.1",
43 |     "typescript": "^5"
44 |   }
45 | }
46 | 


--------------------------------------------------------------------------------
/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>


--------------------------------------------------------------------------------
/prisma/schema.prisma:
--------------------------------------------------------------------------------
 1 | datasource db {
 2 |   provider = "postgresql"
 3 |   url      = env("DATABASE_URL")
 4 | }
 5 | 
 6 | generator client {
 7 |   provider = "prisma-client-js"
 8 | }
 9 | 
10 | enum Role {
11 |   user
12 |   admin
13 | }
14 | 
15 | model User {
16 |   id            String    @id @default(cuid())
17 |   name          String?
18 |   email         String    @unique
19 |   password      String?
20 |   emailVerified DateTime?
21 |   image         String?
22 |   role          Role      @default(user)
23 | 
24 |   accounts Account[]
25 | 
26 |   createdAt DateTime @default(now())
27 |   updatedAt DateTime @updatedAt
28 | }
29 | 
30 | model Account {
31 |   userId            String
32 |   type              String
33 |   provider          String
34 |   providerAccountId String
35 |   refresh_token     String?
36 |   access_token      String?
37 |   expires_at        Int?
38 |   token_type        String?
39 |   scope             String?
40 |   id_token          String?
41 |   session_state     String?
42 | 
43 |   createdAt DateTime @default(now())
44 |   updatedAt DateTime @updatedAt
45 | 
46 |   user User @relation(fields: [userId], references: [id], onDelete: Cascade)
47 | 
48 |   @@id([provider, providerAccountId])
49 | }
50 | 
51 | model VerificationToken {
52 |   identifier String   @unique
53 |   token      String
54 |   expires    DateTime
55 | 
56 |   @@id([identifier])
57 | }
58 | 


--------------------------------------------------------------------------------
/auth.ts:
--------------------------------------------------------------------------------
 1 | import NextAuth from "next-auth";
 2 | 
 3 | import { PrismaAdapter } from "@auth/prisma-adapter";
 4 | 
 5 | import authConfig from "@/auth.config";
 6 | import { db } from "@/lib/db";
 7 | 
 8 | export const { handlers, signIn, signOut, auth } = NextAuth({
 9 |   adapter: PrismaAdapter(db),
10 |   ...authConfig,
11 |   session: { strategy: "jwt" },
12 |   callbacks: {
13 |     // jwt() se ejecuta cada vez que se crea o actualiza un token JWT.
14 |     // Aquí es donde puedes agregar información adicional al token.
15 |     jwt({ token, user }) {
16 |       if (user) {
17 |         token.role = user.role;
18 |       }
19 |       return token;
20 |     },
21 |     // session() se utiliza para agregar la información del token a la sesión del usuario,
22 |     // lo que hace que esté disponible en el cliente.
23 |     session({ session, token }) {
24 |       if (session.user) {
25 |         session.user.role = token.role;
26 |       }
27 |       return session;
28 |     },
29 |   },
30 |   events: {
31 |     // El evento linkAccount se dispara cuando una cuenta (proveedor OAuth: GitHub, Google, Facebook, etc.)  se vincula a un usuario existente en tu base de datos.
32 |     async linkAccount({ user }) {
33 |       await db.user.update({
34 |         where: { id: user.id },
35 |         data: {
36 |           emailVerified: new Date(),
37 |         },
38 |       });
39 |     },
40 |   },
41 |   pages: {
42 |     signIn: "/login",
43 |   },
44 | });
45 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | 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).
 2 | 
 3 | ## Getting Started
 4 | 
 5 | First, run the development server:
 6 | 
 7 | ```bash
 8 | npm run dev
 9 | # or
10 | yarn dev
11 | # or
12 | pnpm dev
13 | # or
14 | bun dev
15 | ```
16 | 
17 | Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
18 | 
19 | You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
20 | 
21 | This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
22 | 
23 | ## Learn More
24 | 
25 | To learn more about Next.js, take a look at the following resources:
26 | 
27 | - [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
28 | - [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
29 | 
30 | You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
31 | 
32 | ## Deploy on Vercel
33 | 
34 | 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.
35 | 
36 | Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
37 | 


--------------------------------------------------------------------------------
/middleware.ts:
--------------------------------------------------------------------------------
 1 | import NextAuth from "next-auth";
 2 | import { NextResponse } from "next/server";
 3 | import authConfig from "./auth.config";
 4 | 
 5 | const { auth } = NextAuth(authConfig);
 6 | 
 7 | const publicRoutes = ["/", "/prices"];
 8 | const authRoutes = ["/login", "/register"];
 9 | const apiAuthPrefix = "/api/auth";
10 | 
11 | export default auth((req) => {
12 |   const { nextUrl } = req;
13 |   const isLoggedIn = !!req.auth;
14 | 
15 |   console.log({ isLoggedIn, path: nextUrl.pathname });
16 | 
17 |   // Permitir todas las rutas de API de autenticación
18 |   if (nextUrl.pathname.startsWith(apiAuthPrefix)) {
19 |     return NextResponse.next();
20 |   }
21 | 
22 |   // Permitir acceso a rutas públicas sin importar el estado de autenticación
23 |   if (publicRoutes.includes(nextUrl.pathname)) {
24 |     return NextResponse.next();
25 |   }
26 | 
27 |   // Redirigir a /dashboard si el usuario está logueado y trata de acceder a rutas de autenticación
28 |   if (isLoggedIn && authRoutes.includes(nextUrl.pathname)) {
29 |     return NextResponse.redirect(new URL("/dashboard", nextUrl));
30 |   }
31 | 
32 |   // Redirigir a /login si el usuario no está logueado y trata de acceder a una ruta protegida
33 |   if (
34 |     !isLoggedIn &&
35 |     !authRoutes.includes(nextUrl.pathname) &&
36 |     !publicRoutes.includes(nextUrl.pathname)
37 |   ) {
38 |     return NextResponse.redirect(new URL("/login", nextUrl));
39 |   }
40 | 
41 |   return NextResponse.next();
42 | });
43 | 
44 | export const config = {
45 |   matcher: ["/((?!.*\\..*|_next).*)", "/", "/(api|trpc)(.*)"],
46 | };
47 | 


--------------------------------------------------------------------------------
/app/api/auth/verify-email/route.ts:
--------------------------------------------------------------------------------
 1 | import { db } from "@/lib/db";
 2 | import { redirect } from "next/navigation";
 3 | import { type NextRequest } from "next/server";
 4 | 
 5 | export async function GET(request: NextRequest) {
 6 |   const searchParams = request.nextUrl.searchParams;
 7 |   const token = searchParams.get("token");
 8 | 
 9 |   if (!token) {
10 |     return new Response("Token not found", { status: 400 });
11 |   }
12 | 
13 |   // verificar si existe un token en la base de datos
14 |   const verifyToken = await db.verificationToken.findFirst({
15 |     where: {
16 |       token,
17 |     },
18 |   });
19 | 
20 |   if (!verifyToken) {
21 |     return new Response("Token not found", { status: 400 });
22 |   }
23 | 
24 |   // verificar si el token ya expiró
25 |   if (verifyToken.expires < new Date()) {
26 |     return new Response("Token expired", { status: 400 });
27 |   }
28 | 
29 |   // verificar si el email ya esta verificado
30 |   const user = await db.user.findUnique({
31 |     where: {
32 |       email: verifyToken.identifier,
33 |     },
34 |   });
35 | 
36 |   if (user?.emailVerified) {
37 |     return new Response("Email already verified", { status: 400 });
38 |   }
39 | 
40 |   // marcar el email como verificado
41 |   await db.user.update({
42 |     where: {
43 |       email: verifyToken.identifier,
44 |     },
45 |     data: {
46 |       emailVerified: new Date(),
47 |     },
48 |   });
49 | 
50 |   // eliminar el token
51 |   await db.verificationToken.delete({
52 |     where: {
53 |       identifier: verifyToken.identifier,
54 |     },
55 |   });
56 | 
57 |   // return Response.json({ token });
58 |   redirect("/login?verified=true");
59 | }
60 | 


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


--------------------------------------------------------------------------------
/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 ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
 9 |   {
10 |     variants: {
11 |       variant: {
12 |         default: "bg-primary text-primary-foreground hover:bg-primary/90",
13 |         destructive:
14 |           "bg-destructive text-destructive-foreground hover:bg-destructive/90",
15 |         outline:
16 |           "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
17 |         secondary:
18 |           "bg-secondary text-secondary-foreground hover:bg-secondary/80",
19 |         ghost: "hover:bg-accent hover:text-accent-foreground",
20 |         link: "text-primary underline-offset-4 hover:underline",
21 |       },
22 |       size: {
23 |         default: "h-10 px-4 py-2",
24 |         sm: "h-9 rounded-md px-3",
25 |         lg: "h-11 rounded-md px-8",
26 |         icon: "h-10 w-10",
27 |       },
28 |     },
29 |     defaultVariants: {
30 |       variant: "default",
31 |       size: "default",
32 |     },
33 |   }
34 | )
35 | 
36 | export interface ButtonProps
37 |   extends React.ButtonHTMLAttributes<HTMLButtonElement>,
38 |     VariantProps<typeof buttonVariants> {
39 |   asChild?: boolean
40 | }
41 | 
42 | const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
43 |   ({ className, variant, size, asChild = false, ...props }, ref) => {
44 |     const Comp = asChild ? Slot : "button"
45 |     return (
46 |       <Comp
47 |         className={cn(buttonVariants({ variant, size, className }))}
48 |         ref={ref}
49 |         {...props}
50 |       />
51 |     )
52 |   }
53 | )
54 | Button.displayName = "Button"
55 | 
56 | export { Button, buttonVariants }
57 | 


--------------------------------------------------------------------------------
/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


--------------------------------------------------------------------------------
/actions/auth-action.ts:
--------------------------------------------------------------------------------
 1 | "use server";
 2 | 
 3 | import { signIn } from "@/auth";
 4 | import { db } from "@/lib/db";
 5 | import { loginSchema, registerSchema } from "@/lib/zod";
 6 | import bcrypt from "bcryptjs";
 7 | import { AuthError } from "next-auth";
 8 | import { z } from "zod";
 9 | 
10 | export const loginAction = async (values: z.infer<typeof loginSchema>) => {
11 |   try {
12 |     await signIn("credentials", {
13 |       email: values.email,
14 |       password: values.password,
15 |       redirect: false,
16 |     });
17 |     return { success: true };
18 |   } catch (error) {
19 |     if (error instanceof AuthError) {
20 |       return { error: error.cause?.err?.message };
21 |     }
22 |     return { error: "error 500" };
23 |   }
24 | };
25 | 
26 | export const registerAction = async (
27 |   values: z.infer<typeof registerSchema>
28 | ) => {
29 |   try {
30 |     const { data, success } = registerSchema.safeParse(values);
31 |     if (!success) {
32 |       return {
33 |         error: "Invalid data",
34 |       };
35 |     }
36 | 
37 |     // verificar si el usuario ya existe
38 |     const user = await db.user.findUnique({
39 |       where: {
40 |         email: data.email,
41 |       },
42 |       include: {
43 |         accounts: true, // Incluir las cuentas asociadas
44 |       },
45 |     });
46 | 
47 |     if (user) {
48 |       // Verificar si tiene cuentas OAuth vinculadas
49 |       const oauthAccounts = user.accounts.filter(
50 |         (account) => account.type === "oauth"
51 |       );
52 |       if (oauthAccounts.length > 0) {
53 |         return {
54 |           error:
55 |             "To confirm your identity, sign in with the same account you used originally.",
56 |         };
57 |       }
58 |       return {
59 |         error: "User already exists",
60 |       };
61 |     }
62 | 
63 |     // hash de la contraseña
64 |     const passwordHash = await bcrypt.hash(data.password, 10);
65 | 
66 |     // crear el usuario
67 |     await db.user.create({
68 |       data: {
69 |         email: data.email,
70 |         name: data.name,
71 |         password: passwordHash,
72 |       },
73 |     });
74 | 
75 |     await signIn("credentials", {
76 |       email: data.email,
77 |       password: data.password,
78 |       redirect: false,
79 |     });
80 | 
81 |     return { success: true };
82 |   } catch (error) {
83 |     if (error instanceof AuthError) {
84 |       return { error: error.cause?.err?.message };
85 |     }
86 |     return { error: "error 500" };
87 |   }
88 | };
89 | 


--------------------------------------------------------------------------------
/auth.config.ts:
--------------------------------------------------------------------------------
 1 | import { db } from "@/lib/db";
 2 | import { loginSchema } from "@/lib/zod";
 3 | import bcrypt from "bcryptjs";
 4 | import { nanoid } from "nanoid";
 5 | import type { NextAuthConfig } from "next-auth";
 6 | import Credentials from "next-auth/providers/credentials";
 7 | import { sendEmailVerification } from "./lib/mail";
 8 | 
 9 | import GitHub from "next-auth/providers/github";
10 | import Google from "next-auth/providers/google";
11 | 
12 | // Notice this is only an object, not a full Auth.js instance
13 | export default {
14 |   providers: [
15 |     Google,
16 |     GitHub,
17 |     Credentials({
18 |       authorize: async (credentials) => {
19 |         const { data, success } = loginSchema.safeParse(credentials);
20 | 
21 |         if (!success) {
22 |           throw new Error("Invalid credentials");
23 |         }
24 | 
25 |         // verificar si existe el usuario en la base de datos
26 |         const user = await db.user.findUnique({
27 |           where: {
28 |             email: data.email,
29 |           },
30 |         });
31 | 
32 |         if (!user || !user.password) {
33 |           throw new Error("No user found");
34 |         }
35 | 
36 |         // verificar si la contraseña es correcta
37 |         const isValid = await bcrypt.compare(data.password, user.password);
38 | 
39 |         if (!isValid) {
40 |           throw new Error("Incorrect password");
41 |         }
42 | 
43 |         // verificación de email
44 |         if (!user.emailVerified) {
45 |           const verifyTokenExits = await db.verificationToken.findFirst({
46 |             where: {
47 |               identifier: user.email,
48 |             },
49 |           });
50 | 
51 |           // si existe un token, lo eliminamos
52 |           if (verifyTokenExits?.identifier) {
53 |             await db.verificationToken.delete({
54 |               where: {
55 |                 identifier: user.email,
56 |               },
57 |             });
58 |           }
59 | 
60 |           const token = nanoid();
61 | 
62 |           await db.verificationToken.create({
63 |             data: {
64 |               identifier: user.email,
65 |               token,
66 |               expires: new Date(Date.now() + 1000 * 60 * 60 * 24),
67 |             },
68 |           });
69 | 
70 |           // enviar email de verificación
71 |           await sendEmailVerification(user.email, token);
72 | 
73 |           throw new Error("Please check Email send verification");
74 |         }
75 | 
76 |         return user;
77 |       },
78 |     }),
79 |   ],
80 | } satisfies NextAuthConfig;
81 | 


--------------------------------------------------------------------------------
/components/form-register.tsx:
--------------------------------------------------------------------------------
  1 | "use client";
  2 | 
  3 | import { registerSchema } from "@/lib/zod";
  4 | import { zodResolver } from "@hookform/resolvers/zod";
  5 | import { useForm } from "react-hook-form";
  6 | import { z } from "zod";
  7 | 
  8 | import { registerAction } from "@/actions/auth-action";
  9 | import { Button } from "@/components/ui/button";
 10 | import {
 11 |   Form,
 12 |   FormControl,
 13 |   FormField,
 14 |   FormItem,
 15 |   FormLabel,
 16 |   FormMessage,
 17 | } from "@/components/ui/form";
 18 | import { Input } from "@/components/ui/input";
 19 | import { useRouter } from "next/navigation";
 20 | import { useState, useTransition } from "react";
 21 | 
 22 | const FormRegister = () => {
 23 |   const [error, setError] = useState<string | null>(null);
 24 |   const [isPending, startTransition] = useTransition();
 25 |   const router = useRouter();
 26 | 
 27 |   const form = useForm<z.infer<typeof registerSchema>>({
 28 |     resolver: zodResolver(registerSchema),
 29 |     defaultValues: {
 30 |       email: "",
 31 |       password: "",
 32 |       name: "",
 33 |     },
 34 |   });
 35 | 
 36 |   async function onSubmit(values: z.infer<typeof registerSchema>) {
 37 |     setError(null);
 38 |     startTransition(async () => {
 39 |       const response = await registerAction(values);
 40 |       if (response.error) {
 41 |         setError(response.error);
 42 |       } else {
 43 |         router.push("/dashboard");
 44 |       }
 45 |     });
 46 |   }
 47 | 
 48 |   return (
 49 |     <div className="max-w-52">
 50 |       <h1>Register</h1>
 51 |       <Form {...form}>
 52 |         <form
 53 |           onSubmit={form.handleSubmit(onSubmit)}
 54 |           className="space-y-8"
 55 |         >
 56 |           <FormField
 57 |             control={form.control}
 58 |             name="name"
 59 |             render={({ field }) => (
 60 |               <FormItem>
 61 |                 <FormLabel>Name</FormLabel>
 62 |                 <FormControl>
 63 |                   <Input
 64 |                     placeholder="Name"
 65 |                     type="text"
 66 |                     {...field}
 67 |                   />
 68 |                 </FormControl>
 69 |                 <FormMessage />
 70 |               </FormItem>
 71 |             )}
 72 |           />
 73 |           <FormField
 74 |             control={form.control}
 75 |             name="email"
 76 |             render={({ field }) => (
 77 |               <FormItem>
 78 |                 <FormLabel>Email</FormLabel>
 79 |                 <FormControl>
 80 |                   <Input
 81 |                     placeholder="email"
 82 |                     type="email"
 83 |                     {...field}
 84 |                   />
 85 |                 </FormControl>
 86 |                 <FormMessage />
 87 |               </FormItem>
 88 |             )}
 89 |           />
 90 |           <FormField
 91 |             control={form.control}
 92 |             name="password"
 93 |             render={({ field }) => (
 94 |               <FormItem>
 95 |                 <FormLabel>Password</FormLabel>
 96 |                 <FormControl>
 97 |                   <Input
 98 |                     placeholder="password"
 99 |                     type="password"
100 |                     {...field}
101 |                   />
102 |                 </FormControl>
103 |                 <FormMessage />
104 |               </FormItem>
105 |             )}
106 |           />
107 |           {error && <FormMessage>{error}</FormMessage>}
108 |           <Button
109 |             type="submit"
110 |             disabled={isPending}
111 |           >
112 |             Submit
113 |           </Button>
114 |         </form>
115 |       </Form>
116 |     </div>
117 |   );
118 | };
119 | export default FormRegister;
120 | 


--------------------------------------------------------------------------------
/components/form-login.tsx:
--------------------------------------------------------------------------------
  1 | "use client";
  2 | 
  3 | import { loginSchema } from "@/lib/zod";
  4 | import { zodResolver } from "@hookform/resolvers/zod";
  5 | import { useForm } from "react-hook-form";
  6 | import { z } from "zod";
  7 | 
  8 | import { loginAction } from "@/actions/auth-action";
  9 | import { Button } from "@/components/ui/button";
 10 | import {
 11 |   Form,
 12 |   FormControl,
 13 |   FormField,
 14 |   FormItem,
 15 |   FormLabel,
 16 |   FormMessage,
 17 | } from "@/components/ui/form";
 18 | import { Input } from "@/components/ui/input";
 19 | import { useRouter } from "next/navigation";
 20 | import { useState, useTransition } from "react";
 21 | 
 22 | import { FaGithub, FaGoogle } from "react-icons/fa6";
 23 | import ButtonSocial from "./button-social";
 24 | 
 25 | interface FormLoginProps {
 26 |   isVerified: boolean;
 27 |   OAuthAccountNotLinked: boolean;
 28 | }
 29 | 
 30 | const FormLogin = ({ isVerified, OAuthAccountNotLinked }: FormLoginProps) => {
 31 |   const [error, setError] = useState<string | null>(null);
 32 |   const [isPending, startTransition] = useTransition();
 33 |   const router = useRouter();
 34 | 
 35 |   const form = useForm<z.infer<typeof loginSchema>>({
 36 |     resolver: zodResolver(loginSchema),
 37 |     defaultValues: {
 38 |       email: "",
 39 |       password: "",
 40 |     },
 41 |   });
 42 | 
 43 |   async function onSubmit(values: z.infer<typeof loginSchema>) {
 44 |     setError(null);
 45 |     startTransition(async () => {
 46 |       const response = await loginAction(values);
 47 |       if (response.error) {
 48 |         setError(response.error);
 49 |       } else {
 50 |         router.push("/dashboard");
 51 |       }
 52 |     });
 53 |   }
 54 | 
 55 |   return (
 56 |     <div className="max-w-52">
 57 |       <h1 className="mb-5 text-center text-2xl">Login</h1>
 58 |       {isVerified && (
 59 |         <p className="text-center text-green-500 mb-5 text-sm">
 60 |           Email verified, you can now login
 61 |         </p>
 62 |       )}
 63 |       {OAuthAccountNotLinked && (
 64 |         <p className="text-center text-red-500 mb-5 text-sm">
 65 |           To confirm your identity, sign in with the same account you used
 66 |           originally.
 67 |         </p>
 68 |       )}
 69 |       <Form {...form}>
 70 |         <form
 71 |           onSubmit={form.handleSubmit(onSubmit)}
 72 |           className="space-y-8"
 73 |         >
 74 |           <FormField
 75 |             control={form.control}
 76 |             name="email"
 77 |             render={({ field }) => (
 78 |               <FormItem>
 79 |                 <FormLabel>Email</FormLabel>
 80 |                 <FormControl>
 81 |                   <Input
 82 |                     placeholder="email"
 83 |                     type="email"
 84 |                     {...field}
 85 |                   />
 86 |                 </FormControl>
 87 |                 <FormMessage />
 88 |               </FormItem>
 89 |             )}
 90 |           />
 91 |           <FormField
 92 |             control={form.control}
 93 |             name="password"
 94 |             render={({ field }) => (
 95 |               <FormItem>
 96 |                 <FormLabel>Password</FormLabel>
 97 |                 <FormControl>
 98 |                   <Input
 99 |                     placeholder="password"
100 |                     type="password"
101 |                     {...field}
102 |                   />
103 |                 </FormControl>
104 |                 <FormMessage />
105 |               </FormItem>
106 |             )}
107 |           />
108 |           {error && <FormMessage>{error}</FormMessage>}
109 |           <Button
110 |             type="submit"
111 |             disabled={isPending}
112 |           >
113 |             Submit
114 |           </Button>
115 |         </form>
116 |       </Form>
117 |       <div className="mt-5 space-y-4">
118 |         <ButtonSocial provider="github">
119 |           <FaGithub className="mr-2 h-4 w-4" />
120 |           <span>Sign in with Github</span>
121 |         </ButtonSocial>
122 |         <ButtonSocial provider="google">
123 |           <FaGoogle className="mr-2 h-4 w-4" />
124 |           <span>Sign in with Google</span>
125 |         </ButtonSocial>
126 |       </div>
127 |     </div>
128 |   );
129 | };
130 | export default FormLogin;
131 | 


--------------------------------------------------------------------------------
/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-2", 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 && "text-destructive", 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-sm 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-sm 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 | 


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