Email Authentication and Verification in Next.js 14 With Next Auth and Prisma

npx create-next-app@latest blog_nextjs_auth

Would you like to use TypeScript?  No / Yes
Would you like to use ESLint?  No / Yes
Would you like to use Tailwind CSS?  No / Yes
Would you like to use `src/` directory?  No / Yes
Would you like to use App Router? (recommended)  No / Yes
Would you like to customize the default import alias (@/*)?  No / Yes

npm install

npm run dev

npm install prisma --save-dev

npm install @next-auth/prisma-adapter

npm install @next-auth/prisma-adapter --legacy-peer-deps

npx prisma init

// prisma/schema.prisma

// This is your Prisma schema file,
// learn more about it in the docs: https://pris.ly/d/prisma-schema

// Generate the Prisma Client in JavaScript
generator client {
  provider = "prisma-client-js"
}

// This block of code defines the database connection. The database is a PostgreSQL database. 
// The database connection URL will be read from an environment variable named `DATABASE_URL`.
datasource db {
  provider = "postgresql"
  url      = env("DATABASE_URL")
}

// This block of code defines a User model
model User {
  id              String    @id @default(cuid()) // primary key with CUID
  name            String    @db.VarChar(255) // varchar
  email           String    @unique @db.VarChar(255) // email must be unique
  emailVerifiedAt DateTime? // optional DateTime
  emailVerifToken String?   @db.VarChar(255)
  password        String    @db.VarChar(255)
  createdAt       DateTime  @default(now())
  updatedAt       DateTime  @updatedAt
}

# psql -U <username>
psql -U postgres

CREATE DATABASE blog_nextjs_auth;

// .env
DATABASE_URL="postgresql://<username>:<password>@localhost:5432/ blog_nextjs_auth?schema=public"

npx prisma db push

npm install zod

npm install bcryptjs @types/bcryptjs

npm install nodemailer @types/nodemailer

npm install nodemailer @types/nodemailer --legacy-peer-deps

npm install next-auth@beta

openssl rand -base64 32

# .env

# Defining the secret key used for authentication
AUTH_SECRET=8eQxIlc/uM9b8+0dG4RZz1UGIVLziD/qo6/pqajFovE=

// src/auth.config.ts

// Importing necessary types from NextAuth for configuration
import type { NextAuthConfig } from 'next-auth';

// Creating the configuration object for NextAuth
export const authConfig = {
  trustHost: true,
  
  // Defining custom pages to tailor the authentication experience. Here, we redirect the default sign-in page to '/login'.
  pages: {
    signIn: '/login',
  },
  
  // Configuring callbacks for handling authorization logic during authentication flow.
  callbacks: {
    authorized({ auth, request: { nextUrl } }) {
      // Checking if the user is logged in
      const isLoggedIn = !!auth?.user;
      
      // Determining if the user is currently on the dashboard
      const isOnDashboard = nextUrl.pathname.startsWith('/member');
      
      // Handling authorization logic based on user status and location
      if (isOnDashboard) {
        // Redirecting unauthenticated users to the login page when attempting to access dashboard-related pages
        if (isLoggedIn) return true;
        return false;
      } else if (isLoggedIn) {
        // Redirecting authenticated users to the dashboard if they attempt to access authentication-related pages like login/signup
        const isOnAuth = nextUrl.pathname === '/login' || nextUrl.pathname === '/signup';
        if (isOnAuth) return Response.redirect(new URL('/member', nextUrl));
        return true;
      }
      // Allowing access for other scenarios
      return true;
    },
  },
  
  // Placeholder array for authentication providers. We initialize it as empty for now, adding providers when required.
  providers: [], // We start with an empty array, adding providers as needed
  
} satisfies NextAuthConfig; 

// src/auth.ts

// Importing necessary modules and types
import NextAuth from 'next-auth';
import Credentials from 'next-auth/providers/credentials';
import { authConfig } from './auth.config';
import { z } from 'zod';
import type { User } from '@prisma/client';
import bcrypt from 'bcryptjs'
import { findUserByEmail } from './actions/auth';

// Function to fetch a user by email from the database
async function getUser(email: string): Promise<User | null> {
    try {
        return await findUserByEmail(email);
    } catch (error) {
        console.error('Failed to fetch user:', error);
        throw new Error('Failed to fetch user.');
    }
}

// Destructuring NextAuth functions and configuration from the returned object
export const { handlers: { GET, POST }, auth, signIn, signOut } = NextAuth({
    ...authConfig, // Merging with the previously defined NextAuth configuration

    // Defining authentication providers, in this case, using credentials (email and password)
    providers: [
        Credentials({
            async authorize(credentials) {
                // Parsing and validating incoming credentials using Zod
                const parsedCredentials = z
                    .object({ email: z.string().email(), password: z.string().min(6) })
                    .safeParse(credentials);

                if (parsedCredentials.success) {
                    const { email, password } = parsedCredentials.data;
                    const user = await getUser(email);
                    
                    // If user exists, compare hashed passwords
                    if (!user) return null;
                    const passwordsMatch = await bcrypt.compare(password, user.password);

                    // If passwords match, return the user
                    if (passwordsMatch) return user;
                }

                // If credentials are invalid, log and return null
                console.log('Invalid credentials');
                return null;
            },
        }),
    ],
});

// src/middleware.ts

// Importing NextAuth and the authentication configuration
import NextAuth from 'next-auth';
import { authConfig } from './auth.config';

// Exporting the authentication middleware using NextAuth and the provided configuration
export default NextAuth(authConfig).auth;

// Additional configuration for the middleware
export const config = {
  // Defining a matcher to specify routes where the middleware should be applied
  matcher: ['/((?!api|_next/static|_next/image|.*\\.png$).*)'],
};

// src/app/api/auth/[...nextauth]/route.ts

// Importing NextAuth handlers for GET and POST requests
export { GET, POST } from '@/auth';

// src/app/layout.tsx

import type { Metadata } from "next";
import { Inter } from "next/font/google";
import "./globals.css"; 
import Providers from "./providers"; // We bring in the Provider component that we will create later for session capture

const inter = Inter({ subsets: ["latin"] });

export const metadata: Metadata = {
  title: "Create Next App",
  description: "Generated by create next app",
};

// Now, let's build our Root Layout component
export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  // This Root Layout serves as the canvas for our application's visual structure
  return (
    <html lang="en">
      <body className={inter.className}>
        <main className="flex min-h-screen flex-col items-center justify-between p-24">
          <div className="z-10 items-center font-mono text-sm lg:flex">
            {/* Now, let's provide context with our Providers component */}
            <Providers>
              {children}
            </Providers>
          </div>
        </main>
      </body>
    </html>
  );
}

// src/app/providers.tsx

// We start with the 'use client' pragma for clarity, emphasizing the client-side nature of this code.
'use client'

// Importing necessary modules and components
import { SessionProvider } from "next-auth/react"
import { ReactNode } from "react"

// Defining Props interface for the Providers component
interface ProvidersProps {
    children: ReactNode,
}

// Our Providers component encapsulates the SessionProvider to manage user sessions
export default function Providers({ children }: ProvidersProps) {
    return (
        <SessionProvider>
            {children}
        </SessionProvider>
    )
}

// src/app/signup/page.tsx

// Importing the Sign-Up Form component
import Form from "@/components/signup/form";

export default function SignUp() {
    return (
        // Rendering the Sign-Up Form component
        <Form />
    );
}

// src/components/signup/form.tsx

// Ensuring client-side code
'use client';

// Importing necessary modules and components
import Link from "next/link";
import { signUp } from "@/actions/auth";
import { useFormState } from "react-dom";
import SignupButton from "./signup-button";

export default function Form() {
    // Using useFormState to manage the form state and handle sign-up actions
    const [formState, action] = useFormState(signUp, {
        errors: {},
    });

    // Rendering the sign-up form
    return (
        <div className="space-y-3 items-center">
            <form action={action}>
                <div className="flex-1 rounded-lg bg-gray-50 px-6 pb-4 pt-8">
                    <h1 className='mb-3 text-2xl'>
                        Sign Up Now!
                    </h1>
                    <div className="w-full mb-4">
                        {/* Email Input */}
                        <div>
                            <label
                                className="mb-3 mt-5 block text-xs font-medium text-gray-900"
                                htmlFor="email"
                            >
                                Email
                            </label>
                            <input
                                className="peer block w-full rounded-md border border-gray-200 py-[9px] px-3 text-sm outline-2 placeholder:text-gray-500"
                                placeholder="Enter your email"
                                type="email"
                                id="email"
                                name="email"
                                defaultValue=''
                            />
                            {/* Displaying email errors if any */}
                            {formState?.errors.email
                                && <div className="text-sm text-red-500">
                                    {formState.errors.email.join(', ')}
                                </div>
                            }
                        </div>
                        {/* Password Input */}
                        <div>
                            <label
                                className="mb-3 mt-5 block text-xs font-medium text-gray-900"
                                htmlFor="password"
                            >
                                Password
                            </label>
                            <input
                                className="peer block w-full rounded-md border border-gray-200 py-[9px] px-3 text-sm outline-2 placeholder:text-gray-500"
                                placeholder="Enter your password"
                                type="password"
                                id="password"
                                name="password"
                                defaultValue=''
                            />
                            {/* Displaying password errors if any */}
                            {formState?.errors.password
                                && <div className="text-sm text-red-500">
                                    {formState.errors.password.join(', ')}
                                </div>
                            }
                        </div>
                        {/* Name Input */}
                        <div>
                            <label
                                className="mb-3 mt-5 block text-xs font-medium text-gray-900"
                                htmlFor="name"
                            >
                                Name
                            </label>
                            <input
                                className="peer block w-full rounded-md border border-gray-200 py-[9px] px-3 text-sm outline-2 placeholder:text-gray-500"
                                placeholder="Enter your name"
                                type="text"
                                id="name"
                                name="name"
                                defaultValue=''
                            />
                        </div>
                        {/* Displaying name errors if any */}
                        {formState?.errors.name
                            && <div className="text-sm text-red-500">
                                {formState.errors.name.join(', ')}
                            </div>
                        }
                    </div>
                    {/* Including the SignupButton component */}
                    <SignupButton />
                    <div className='mt-4 text-center'>
                        {/* Providing a link to the login page */}
                        Already have an account?&nbsp;
                        <Link className='underline' href='/login'>Login</Link>
                    </div>
                </div>
            </form>
        </div>
    );
}

// src/components/signup/signup-button.tsx

// Ensuring client-side code
'use client';

// Importing the useFormStatus hook
import { useFormStatus } from "react-dom";

// Sign-Up Button Component
export default function SignupButton() {
    // Using useFormStatus hook to track the status of the form
    const { pending } = useFormStatus();

    // Rendering the Sign-Up button with dynamic styling
    return (
        // The disabled attribute is dynamically set based on the pending state, preventing multiple form submissions.
        <button className="bg-gray-200 py-2 rounded w-full disabled:bg-slate-50 disabled:text-slate-500" disabled={pending ? true : false}>
            {/* Displaying "Sign Up" or "Sign Up ..." based on the form status */}
            Sign Up {pending ? '...' : ''}
        </button>
    );
}

// src/db/index.ts

// Importing the PrismaClient from @prisma/client
import { PrismaClient } from '@prisma/client';

// Defining a function to create a singleton instance of PrismaClient
const prismaClientSingleton = () => {
    return new PrismaClient();
};

// Extending the global namespace to include the PrismaClient instance
declare global {
    var prisma: undefined | ReturnType<typeof prismaClientSingleton>;
}

// Creating a global instance of PrismaClient or using the existing one
export const db = globalThis.prisma ?? prismaClientSingleton();

// Setting the global Prisma instance if not in production
if (process.env.NODE_ENV !== 'production') globalThis.prisma = db;

// src/actions/auth.ts

// Ensuring server-side code
'use server';

// Importing necessary modules and components
import { signIn, signOut } from '@/auth';
import { db } from '@/db';
import type { User } from '@prisma/client';
import { AuthError } from 'next-auth';
import { z } from 'zod';
import bcryptjs from 'bcryptjs';
import nodemailer from 'nodemailer';
import { randomBytes } from 'crypto';
import { redirect } from 'next/navigation';
import { EmailNotVerifiedError } from '@/errors';

// Authenticating function for sign-in
export async function authenticate(prevState: string | undefined, formData: FormData) {
  try {
    await isUsersEmailVerified(formData.get('email') as string);
    await signIn('credentials', formData);
  } catch (error) {
    // Handling authentication errors
    if (error instanceof AuthError) {
      switch (error.type) {
        case 'CredentialsSignin':
          return 'Invalid credentials.';
        default:
          return 'Something went wrong.';
      }
    }

    // Handling email verification errors
    if (error instanceof EmailNotVerifiedError) {
      return error?.message;
    }

    // Throwing other unexpected errors
    throw error;
  }
}

// Defining the schema for sign-up form validation
const signUpSchema = z.object({
  name: z.string().min(3).max(255),
  email: z.string().email(),
  password: z.string().min(3).max(255),
});

// Interface for the sign-up form state
interface SignUpFormState {
  errors: {
    name?: string[];
    email?: string[];
    password?: string[];
    _form?: string[];
  };
}

// Sign-up function handling form validation and user creation
export async function signUp(formState: SignUpFormState, formData: FormData): Promise<SignUpFormState> {
  // validate the sign up form
  const result = signUpSchema.safeParse({
    name: formData.get('name'),
    email: formData.get('email'),
    password: formData.get('password'),
  });

  // returns a validation error if the payload does not match our validation rules
  if (!result.success) {
    return {
      errors: result.error.flatten().fieldErrors,
    };
  }

  // make sure the user does not enter a registered email
  const isEmailExists = await findUserByEmail(result.data.email);

  if (isEmailExists) {
    return {
      errors: {
        email: ['Email already exists'],
      },
    };
  }

  const hashed = await generatePasswordHash(result.data.password);

  const verificationToken = generateEmailVerificationToken();

  let user: User;
  try {
    // create user data
    user = await db.user.create({
      data: {
        name: result.data.name,
        email: result.data.email,
        password: hashed,
        emailVerifToken: verificationToken,
      },
    });
  } catch (error: unknown) {
    // Handling database creation errors
    if (error instanceof Error) {
      return {
        errors: {
          _form: [error.message],
        },
      };
    } else {
      return {
        errors: {
          _form: ['Something went wrong'],
        },
      };
    }
  }

  // Sending email verification
  await sendVerificationEmail(result.data.email, verificationToken);

  // Redirecting to the email verification page
  redirect(`/email/verify/send?email=${result.data.email}&verification_sent=1`);
}

// Function to handle user logout
export async function logout() {
  return await signOut();
}

// Function to find a user by email in the database
export const findUserByEmail = async (email: string) => {
  return await db.user.findFirst({
    where: {
      email,
    },
  });
};

// Function to generate a hashed password
const generatePasswordHash = async (password: string) => {
  // generates a random salt. A salt is a random value used in the hashing process to ensure 
  // that even if two users have the same password, their hashed passwords will be different. 
  // The 10 in the function call represents the cost factor, which determines how much 
  // computational work is needed to compute the hash.
  const salt = await bcryptjs.genSalt(10);
  return bcryptjs.hash(password, salt);
};

// Function to generate an email verification token
const generateEmailVerificationToken = () => {
  // generates a buffer containing 32 random bytes. 
  // The 32 indicates the number of bytes to generate, and it is commonly used 
  // for creating secure tokens or identifiers.
  return randomBytes(32).toString('hex');
};

// Function to send a verification email
const sendVerificationEmail = async (email: string, token: string) => {
  // nodemailer configuration. make sure to replace this with your native email provider in production.
  // we will use mailtrap in this tutorial, so make sure you have the correct configuration in your .env
  const transporter: nodemailer.Transporter = nodemailer.createTransport({
    host: process.env.MAIL_HOST,
    port: Number(process.env.EMAIL_PORT) || 0,
    auth: {
      user: process.env.MAIL_USERNAME,
      pass: process.env.MAIL_PASSWORD,
    },
  });

  // the content of the email
  const emailData = {
    from: '"Blog Nextjs Auth" <verification@test.com>',
    to: email,
    subject: 'Email Verification',
    html: `
      <p>Click the link below to verify your email:</p>
      <a href="http://localhost:3000/email/verify?email=${email}&token=${token}">Verify Email</a>
    `,
  };

  try {
    // send the email
    await transporter.sendMail(emailData);
  } catch (error) {
    console.error('Failed to send email:', error);
    throw error;
  }
};

// Function to resend email verification
export const resendVerificationEmail = async (email: string) => {
  const emailVerificationToken = generateEmailVerificationToken();

  try {
    // update email verification token
    await db.user.update({
      where: { email },
      data: { emailVerifToken: emailVerificationToken },
    });

    // send the verification link along with the token
    await sendVerificationEmail(email, emailVerificationToken);
  } catch (error) {
    return 'Something went wrong.';
  }

  return 'Email verification sent.';
};

// Function to verify a user's email
export const verifyEmail = (email: string) => {
  return db.user.update({
    where: { email },
    data: {
      emailVerifiedAt: new Date(),
      emailVerifToken: null,
    },
  });
};

// Function to check if a user's email is verified
export const isUsersEmailVerified = async (email: string) => {
  const user = await db.user.findFirst({
    where: { email },
  });

  // if the user doesn't exist then it's none of the function's business
  if (!user) return true;

  // if the emailVerifiedAt value is null then raise the EmailNotVerifiedError error
  if (!user?.emailVerifiedAt) throw new EmailNotVerifiedError(`EMAIL_NOT_VERIFIED:${email}`);

  return true;
};

// src/errors/index.ts

// Defining a custom error class for email not verified scenarios
// the class extends the built-in Error class to create a custom error type. 
// This allows us to distinguish and handle errors related to email verification separately 
// from other types of errors.
export class EmailNotVerifiedError extends Error {
    constructor(message: string) {
        super(message);
        this.name = "EmailNotVerifiedError";
    }
}

# .env

MAIL_HOST=smtp.mailtrap.io
MAIL_PORT=587
MAIL_USERNAME=mailtrap-username
MAIL_PASSWORD=mailtrap-password

// src/app/email/verify/send/page.tsx

// Importing the Form component responsible for email verification initiation
import Form from "@/components/email/verify/send/form";

// Importing the Suspense component from React for asynchronous operations
import { Suspense } from "react";

export default function Send() {
  return (
    <div className="flex flex-col">
      <div className="mb-4">Please verify your email first.</div>
      
      {/* Using Suspense for asynchronous loading */}
      <Suspense>
        {/* Rendering the Form component for email verification initiation */}
        <Form />
      </Suspense>
    </div>
  );
}

// src/components/email/verify/send/form.tsx
'use client'

// Importing necessary hooks and components
import { useFormState } from "react-dom";
import ResendButton from "./resend-button";
import { useSearchParams } from "next/navigation";
import { resendVerificationEmail } from "@/actions/auth";

export default function Form() {
    // Accessing search parameters from the URL
    const searchParams = useSearchParams()

    // Extracting email and verification_sent status from search parameters
    const email = searchParams.get('email')
    const verificationSent = Boolean(searchParams.get('verification_sent'))

    // Obtaining form state and action using useFormState hook
    const [formState, action] = useFormState(resendVerificationEmail.bind(null, email!), undefined);

    // Rendering the Email Verification Initiation Form
    return (
        <>
            {/* Displaying formState message if available */}
            {!!formState && (
                <div className="text-blue-500 mb-4">{formState}</div>
            )}

            {/* Displaying a success message if verification link has been sent */}
            {!!verificationSent && (
                <div className="text-green-500 mb-4">A verification link has been sent to your email.</div>
            )}

            {/* Rendering the form with the ResendButton component */}
            <div>
                <form action={action}>
                    <ResendButton />
                </form>
            </div>
        </>
    )
}

// src/components/email/verify/send/resend-button.tsx

// Importing the useFormStatus hook
import { useFormStatus } from "react-dom"

// Defining the Resend Verification Button component
export default function ResendButton() {
    // Obtaining pending status from useFormStatus hook
    const { pending } = useFormStatus()

    // Rendering the Resend Verification Button
    return (
        <button
            type="submit"
            className="bg-white py-2 px-4 rounded disabled:bg-slate-50 disabled:text-slate-500"
            disabled={pending ? true : false}
        >
            {/* Displaying dynamic text based on pending status */}
            Send verification link {pending ? '...' : ''}
        </button>
    )
}

// src/app/email/verify/page.tsx

// Import the VerifyEmail component from the specified path
import VerifyEmail from "@/components/email/verify/verify-email";

// Import the Suspense component from React
import { Suspense } from "react";

// Define the Verify function component
export default function Verify() {
  return (
    // Wrap the VerifyEmail component in a Suspense component.
    // The Suspense component is used to handle asynchronous data loading in React applications.
    // When a component needs to fetch data from an external source (e.g., an API call), 
    // it can be wrapped in Suspense
    <Suspense>
      <div className='flex flex-col'>
        {/* Render the VerifyEmail component */}
        <VerifyEmail />
      </div>
    </Suspense>
  )
}

// src/components/email/verify/verify-email.tsx
'use client'

// Importing necessary actions and components
import { findUserByEmail, verifyEmail } from "@/actions/auth"
import Link from "next/link"
import { useSearchParams } from "next/navigation"
import { useEffect, useState } from "react"

// Defining the Email Verification Component
export default function VerifyEmail() {
    // Accessing search parameters from the URL
    const searchParams = useSearchParams()

    // Extracts the email and token from the search parameters of the verification link URL
    // Here's an example link:
    // http://localhost:3000/email/verify?email=member@test.com&token=73b03a02ae3a2fcdd38a2a06df75b0abd26ca7aca5da7fb079200d118b1b0564
    const email = searchParams.get('email')
    const token = searchParams.get('token')

    // State for managing loading state and result message
    const [isLoading, setIsLoading] = useState(true)
    const [result, setResult] = useState('Error verifying your email')

    // Effect hook for handling email verification process
    useEffect(() => {
        const emailVerification = async () => {
            try {
                // Checking if required fields are present
                if (!email || !token) {
                    throw new Error('Missing required fields');
                }

                // Finding user by email in the database
                const user = await findUserByEmail(email);
                if (!user) {
                    throw new Error('Invalid verification token');
                }

                // Validating the verification token
                if (token !== user.emailVerifToken) {
                    throw new Error('Invalid verification token');
                }

                // Updating user verification status in the database
                await verifyEmail(user.email)

                // Updating result message and indicating loading completion
                setResult('Email verified successfully. Please relogin.')
                setIsLoading(false)
            } catch (error) {
                console.error('Error verifying email:', error);
            }
        }

        // Initiating the email verification process
        emailVerification()
    }, [email, token])

    // Rendering the Email Verification Component
    return (
        <>
            {/* Displaying loading or result message */}
            <div className='mb-4'>{isLoading ? 'Please wait ...' : result}</div>
            
            {/* Navigation link back to the login page */}
            <div className='my-3'>
                <Link href='/login' className='bg-white py-3 px-2 rounded'>Back to Login</Link>
            </div>
        </>
    )
}

// src/app/login/page.tsx

// Importing the login form component
import Form from "@/components/login/form";

// Defining the asynchronous function for login page initialization
export default async function LoginPage() {
  return (
    // Rendering the login form component
    <Form />
  );
}

// src/components/login/form.tsx
'use client'

// Importing necessary dependencies
import Link from "next/link";
import { useFormState } from "react-dom";
import { authenticate } from '@/actions/auth';
import LoginButton from "./login-button";
import { redirect, useSearchParams } from "next/navigation";

// Defining the Login Form Component
export default function Form() {
    // Obtaining form state and action from useFormState hook
    const [formState, action] = useFormState(authenticate, undefined);

    // Handling email verification redirection
    // remember isUsersEmailVerified function in server action
    if (formState?.startsWith('EMAIL_NOT_VERIFIED')) {
        // extract the email
        redirect(`/email/verify/send?email=${formState.split(':')[1]}`)
    }

    // Rendering the Login Form JSX content
    return (
        <div className="space-y-3 items-center">
            <form action={action}>
                <div className="flex-1 rounded-lg bg-gray-50 px-6 pb-4 pt-8">
                    <h1 className='mb-3 text-2xl'>
                        Please log in to continue.
                    </h1>
                    <div className="w-full mb-4">
                        {/* Email Input Field */}
                        <div>
                            <label
                                className="mb-3 mt-5 block text-xs font-medium text-gray-900"
                                htmlFor="email"
                            >
                                Email
                            </label>
                            <input
                                className="peer block w-full rounded-md border border-gray-200 py-[9px] px-3 text-sm outline-2 placeholder:text-gray-500"
                                id="email"
                                type="email"
                                name="email"
                                placeholder="Enter your email address"
                                required
                            />
                        </div>
                        {/* Password Input Field */}
                        <div>
                            <label
                                className="mb-3 mt-5 block text-xs font-medium text-gray-900"
                                htmlFor="password"
                            >
                                Password
                            </label>
                            <input
                                className="peer block w-full rounded-md border border-gray-200 py-[9px] px-3 text-sm outline-2 placeholder:text-gray-500"
                                id="password"
                                type="password"
                                name="password"
                                placeholder="Enter password"
                                required
                                minLength={6}
                            />
                        </div>
                        {/* Displaying form state error */}
                        {formState && (
                            <div className="text-sm text-red-500">
                                {formState}
                            </div>
                        )}
                    </div>
                    {/* Login Button */}
                    <LoginButton />
                    {/* Link to Signup Page */}
                    <div className='mt-4 text-center'>
                        Don&apos;t have an account?&nbsp;
                        <Link className='underline' href='/signup'>Sign Up</Link>
                    </div>
                </div>
            </form>
        </div>
    )
}

// src/components/login/login-button.tsx
'use client'

// Importing necessary dependencies
import { useFormStatus } from "react-dom"

// Defining the Login Button Component
export default function LoginButton() {
    // Obtaining form status, especially pending status, from useFormStatus hook
    const { pending } = useFormStatus()

    // Rendering the Login Button JSX content
    // renders a button with conditional styling and text based on the pending status. 
    // If pending, it displays '...' after 'Login'.
    return <button type="submit" className="bg-gray-200 py-2 rounded w-full disabled:bg-slate-50 disabled:text-slate-500" disabled={pending ? true : false}>
        Login {pending ? '...' : ''}
    </button>
}

// src/app/member/page.tsx
'use client'

// Importing necessary dependencies
import { useSession } from "next-auth/react";
import { logout } from "@/actions/auth";
import Link from "next/link";

// Defining the Member Dashboard Component
export default function Dashboard() {
    // Using useSession hook to obtain user session information
    const { data: session, status } = useSession()

    // Rendering the Member Dashboard JSX content
    return (
        <div className="flex flex-col">
            <div className="mb-4">
                {/* Displays Member Area information using sessions from useSession */}
                <p>Member Area</p>
                <p>Signed in as&nbsp;
                    {status === 'authenticated'
                        ? session?.user?.email
                        : '...'
                    }
                </p>
                {/* Link to Member Settings Page */}
                <Link className="underline" href='/member/settings'>Settings</Link>
            </div>
            {/* Logout Form */}
            {/* We have created the action in src\actions\auth.ts */}
            <form action={logout}>
                {/* Logout Button */}
                <button disabled={status === 'loading' ? true : false} className="flex h-[48px] grow items-center justify-center gap-2 rounded-md bg-gray-50 p-3 text-sm font-medium hover:bg-sky-100 hover:text-blue-600 md:flex-none md:justify-start md:p-2 md:px-3 disabled:bg-slate-50 disabled:text-slate-500">
                    Sign Out {status === 'loading' ? '...' : ''}
                </button>
            </form>
        </div>
    );
}

// src/app/member/settings/page.tsx

// Defining the Member Settings Page Component
export default function Settings() {
    // Rendering the Member Settings Page JSX content
    return (
        <div>Settings Page</div>
    )
}