DEV Community: Daanish2003

Google oneTap login using Better_Auth, nextjs, prisma, shadcn

Daanish2003 — Thu, 05 Dec 2024 16:29:53 +0000

In this guide, we’ll implement Google One Tap Login in a modern web application using Better_Auth, Next.js, Prisma, and Shadcn. Google One Tap enables users to log in with minimal interaction, creating a seamless and user-friendly authentication experience. By the end of this tutorial, your application will support Google One Tap login, providing fast, secure, and passwordless authentication.

Tech Stack

Here’s the technology stack we’ll be using:

Better_Auth v1: A lightweight and extensible TypeScript authentication library.
Next.js: A powerful React framework for building server-rendered applications.
Prisma: A modern ORM for efficient and type-safe database interaction.
ShadCN: A utility-first component library for rapid UI development.
TailwindCSS: A popular CSS framework for building modern user interfaces.
Resend: A reliable email service for sending OTPs.

Prerequisites

Before proceeding, ensure you have the following ready:

Node.js (LTS version) installed.
A package manager like npm, yarn, or pnpm (we'll use pnpm in this guide).
A PostgreSQL database instance (local or hosted, such as Supabase or PlanetScale).
- If you're working locally, Docker is a great way to set this up.
Familiarity with TypeScript, Next.js, and Prisma.

Cloning the Starter Project:

This guide builds upon functionality such as Email-Password Authentication and Email Verification. You can:

Start from scratch by following these guides:
Or, clone the starter project:

git clone -b feat-magiclink https://github.com/Daanish2003/better_auth_nextjs.git

Navigate to the project directory and install dependencies:

pnpm install

Setup

1. Configure the `.env` File

Create a .env file in the root of your project and add these configurations:

# Authentication settings
BETTER_AUTH_SECRET="your-secret-key" # Replace with a secure key
BETTER_AUTH_URL="http://localhost:3000"
NEXT_PUBLIC_APP_URL="http://localhost:3000"

# Database settings
POSTGRES_PASSWORD="your-password"
POSTGRES_USER="your-username"
DATABASE_URL="postgresql://your-username:your-password@localhost:5432/mydb?schema=public"

# Resend API Key
RESEND_API_KEY="your-resend-api-key"

If you're using Docker for PostgreSQL, start the container:

docker compose up -d

Step 1: Get the ClientID for Google One Tap Login

Go to the Google Cloud Console.
Navigate to Credentials > Create Credentials > OAuth 2.0 Client IDs.
Under Authorized JavaScript Origins, set the following:
- For local development: http://localhost:3000 and http://localhost
- For production: Use your application's domain, e.g., https://example.com.
Scroll down to the Authorized Redirect URIs section and ensure you have a redirect URL configured, even if not directly used by Google One Tap, such as:
- Local: http://localhost:3000/api/auth/callback/google
- Production: https://example.com/api/auth/callback/google.
Save the OAuth Client ID and Client Secret for later use.

Step 2: Setup Environment Variable

Open your .env file in your project folder and paste the google client ID in it

NEXT_PUBLIC_GOOGLE_CLIENT_ID="your-google-client-id"

Step 3: Update auth.ts and auth-client.ts file

Open auth.ts file in your project folder and add oneTap() function in the plugin array.

import { betterAuth } from "better-auth";
import { oneTap } from "better-auth/plugins"

export const auth = betterAuth({
  appName: "better_auth_nextjs",
    plugins: [
      //other plugins
      oneTap()
    ]
});

Then, Open auth-client.ts file in your project folder and add oneTapClient() function in the plugin array

// src/lib/auth-client.ts
import { passkeyClient, twoFactorClient } from "better-auth/plugins";
import { anonymousClient, magicLinkClient, oneTapClient, usernameClient } from "better-auth/client/plugins"
import { createAuthClient } from "better-auth/react";

export const authClient = createAuthClient({
    baseURL: process.env.NEXT_PUBLIC_APP_URL,
    plugins: [
        // other plugins
        oneTapClient({
             // pass in the client ID of google from .env
             clientId: process.env.NEXT_PUBLIC_GOOGLE_CLIENT_ID as string
        })
    ]
})

export const {
    signIn,
    signOut,
    signUp,
    useSession
} = authClient;

Step 4: Create a `oneTapCall()`function

Create a file named one-tap.ts inside the folder /helpers/auth/ and paste the code from below

import { authClient } from "@/lib/auth-client";

export const oneTapCall = async () => {
  try {
    await authClient.oneTap({
      callbackURL: '/', // redirect '/' route after login
      cancelOnTapOutside: true, // cancel oneTap when user Taps outside the oneTap component
      context: "signin", // signin or signup or use
      autoSelect: true, // auto select the account to be true
    });
  } catch(error) {
    console.log(error)
  }
};

Step 5: Call the function inside signIn Component:

Open sign-in.tsxfile in your project folder and call the oneTapCall() function inside useEffect() hook

"use client";
// other imports
import { oneTapCall } from "./one-tap";

const SignIn = () => {
    // handle states for signin

     // use useEffect hook call oneTap function wherever page reloads
    useEffect(() => {
       oneTapCall()
    }, [])

    // other function and logic of signIn component

    return (
        {/* SignIn Form */}
    );
};

export default SignIn;

Step 6: Run your application:

Start your development server:

pnpm dev

Navigate to your sign-in route and test the Magic Link Authentication flow. Enter your email, receive the magic link, and log in seamlessly by clicking the link.

At the top right corner of the page you will see the oneTap login option by google

Conclusion

Congratulations! 🎉 You’ve successfully implemented Magic Link Authentication in your application using Better_Auth, Next.js, Prisma, Resend, Shadcn, and TailwindCSS. This secure, user-friendly feature eliminates the need for traditional passwords, allowing users to authenticate effortlessly via a one-time email link.

With this modern authentication method, your app offers:

Enhanced User Experience: Simplified, password-free login flow.
Improved Security: Reduced risk of password theft and account compromise.
Modern Standards: Aligning with the latest trends in authentication.

Your application is now equipped to provide a seamless and secure login experience, meeting the demands of today's users while ensuring robust security practices.

Magic link authentication using Better_Auth, Next.js, Shadcn, Prisma Resend, Tailwindcss

Daanish2003 — Thu, 05 Dec 2024 12:39:59 +0000

In this guide, we will implement Magic Link Authentication for a modern web application using a secure and developer-friendly stack. This feature enables users to authenticate by clicking a unique, one-time link sent to their email, eliminating the need for traditional passwords. By the end of this tutorial, your application will provide a seamless and secure login experience using magic links, ensuring both user convenience and robust authentication practices.

Tech Stack

Here’s the technology stack we’ll be using:

Better_Auth v1: A lightweight and extensible TypeScript authentication library.
Next.js: A powerful React framework for building server-rendered applications.
Prisma: A modern ORM for efficient and type-safe database interaction.
ShadCN: A utility-first component library for rapid UI development.
TailwindCSS: A popular CSS framework for building modern user interfaces.
Resend: A reliable email service for sending OTPs.

Prerequisites

Before proceeding, ensure you have the following ready:

Node.js (LTS version) installed.
A package manager like npm, yarn, or pnpm (we'll use pnpm in this guide).
A PostgreSQL database instance (local or hosted, such as Supabase or PlanetScale).
- If you're working locally, Docker is a great way to set this up.
Familiarity with TypeScript, Next.js, and Prisma.

Cloning the Starter Project:

This guide builds upon functionality such as Email-Password Authentication and Email Verification. You can:

Start from scratch by following these guides:
- Email-Password Guide
- Email Verification Guide
Or, clone the starter project:

git clone -b feat-anonymous-1 https://github.com/Daanish2003/better_auth_nextjs.git

Navigate to the project directory and install dependencies:

pnpm install

Setup

1. Configure the `.env` File

Create a .env file in the root of your project and add these configurations:

# Authentication settings
BETTER_AUTH_SECRET="your-secret-key" # Replace with a secure key
BETTER_AUTH_URL="http://localhost:3000"
NEXT_PUBLIC_APP_URL="http://localhost:3000"

# Database settings
POSTGRES_PASSWORD="your-password"
POSTGRES_USER="your-username"
DATABASE_URL="postgresql://your-username:your-password@localhost:5432/mydb?schema=public"

# Resend API Key
RESEND_API_KEY="your-resend-api-key"

If you're using Docker for PostgreSQL, start the container:

docker compose up -d

Step 1: Update `auth.ts` file and `auth-client.ts` file

Open auth.ts file in your project repository and then add the magic link plugin to the plugin array of betterAuth.

Note: Resend has been already setup at Email verification blog. If you want to integrate Resend please visit Resend or visit my pervious blog Email Verification Guide blog to setup

// src/lib/auth.ts

import { magicLink } from "better-auth/plugins"

export const auth = betterAuth({
   appName: "better_auth_nextjs",
   // other provider options
   plugins: [
      // other plugin options
      magicLink({
      disableSignUp: true, // Disable using magic link at signup
      sendMagicLink: async ({email, url}) => {
        await resend.emails.send({
          from: "Acme <onboarding@resend.dev>",
          to: email,
          subject: "Magic Link",
          html: `Click the link to login into your account: ${url}`,
        });
      }
    }),
   ]
})

Then open the auth-client.ts file and update the code by adding the magicLinkClient() in your plugin array.

// src/lib/auth-client.ts
// other imports
import { magicLinkClient} from "better-auth/client/plugins"
import { createAuthClient } from "better-auth/react";

export const authClient = createAuthClient({
    baseURL: process.env.NEXT_PUBLIC_APP_URL,
    plugins: [
        // other plugins
        magicLinkClient(),
    ]
})

export const {
    signIn,
    signOut,
    signUp,
    useSession
} = authClient;

Step 2: Update the `login-schema.ts` file

open login-schema.ts file in your project folder and update the schema file with following code below

// helpers/zod/login-schema.ts
import { z } from "zod";

// This schema file is used for both login using traditional signin (email/username + password)
// And Magic link signin using only email

// Schema for traditional sign-in (email/username + password)
const TraditionalSignInSchema = z.object({
  emailOrUsername: z
    .string()
    .min(1, "Email or Username is required")
    .refine(
      (value) => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value) || value.length >= 3,
      {
        message: "Must be a valid email or username",
      }
    ),
  password: z.string().nonempty("Password is required"),
});

// Schema for magic link sign-in (email only)
const MagicLinkSignInSchema = z.object({
  emailOrUsername: z
    .string()
    .min(1, "Email is required")
    .email("Must be a valid email"),
});
// Combined schema for dynamic sign-in
const SignInSchema = z.union([TraditionalSignInSchema, MagicLinkSignInSchema]);
export default SignInSchema;

Step 3: Update the sign-in component

Open sign-in.tsx file in your project and update the whole component with below code

// components/auth/sign-in.tsx
"use client";

import React, { useState } from "react";
import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import { z } from "zod";
import { useRouter } from "next/navigation";
import Link from "next/link";

import CardWrapper from "../card-wrapper";
import FormError from "../form-error";
import { FormSuccess } from "../form-success";
import { FcGoogle } from "react-icons/fc";
import { FaGithub } from "react-icons/fa";

import SocialButton from "./social-button";
import { useAuthState } from "@/hooks/useAuthState";
import { signIn } from "@/lib/auth-client";

import {
    Form,
    FormControl,
    FormField,
    FormItem,
    FormLabel,
    FormMessage,
} from "../ui/form";
import { Input } from "../ui/input";
import { Button } from "../ui/button";
import AnonymousButton from "./anonymos-button";

// Import the schemas (adjusted to match likely export)
import SignInSchema from "@/helpers/zod/login-schema";
import { Mail, Mailbox } from "lucide-react";
import { requestOTP } from "@/helpers/auth/request-otp";

const SignIn = () => {
    // State to manage the current sign-in method (traditional vs magic link)
    const [signInMethod, setSignInMethod] = useState<'traditional' | 'magicLink'>('traditional');

    // Router instance for navigation
    const router = useRouter();

    // Authentication state hooks for managing feedback and loading state
    const { 
        error, 
        success, 
        loading, 
        setSuccess, 
        setError, 
        setLoading, 
        resetState 
    } = useAuthState();

    // Extract schema options for traditional and magic link sign-in methods
    const TraditionalSignInSchema = SignInSchema.options[0];
    const MagicLinkSignInSchema = SignInSchema.options[1];

    // Dynamically determine the current schema based on the selected sign-in method
    const currentSchema = signInMethod === 'traditional' 
        ? TraditionalSignInSchema 
        : MagicLinkSignInSchema;

    // Initialize form handling with the appropriate schema and default values
    const form = useForm<z.infer<typeof currentSchema>>({
        resolver: zodResolver(currentSchema),
        defaultValues: {
            emailOrUsername: "",
            ...(signInMethod === 'traditional' ? { password: "" } : {}),
        },
    });

    // Form submission handler
    const onSubmit = async (values: z.infer<typeof currentSchema>) => {
        resetState(); // Reset any existing error or success messages
        setLoading(true); // Indicate that a request is in progress

        try {
            if (signInMethod === 'magicLink') {
                // Handle magic link sign-in
                await signIn.magicLink(
                    { email: values.emailOrUsername },
                    {
                        onRequest: () => setLoading(true),
                        onResponse: () => setLoading(false),
                        onSuccess: () => {
                            setSuccess("A magic link has been sent to your email.");
                        },
                        onError: (ctx) => {
                            setError(ctx.error.message || "Failed to send magic link.");
                        },
                    }
                );
            } else {
                // Handle traditional sign-in
                const signInValues = values as z.infer<typeof TraditionalSignInSchema>;

                // Determine if the input is an email or username
                const isEmail = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(signInValues.emailOrUsername);

                if (isEmail) {
                    // Email-based login
                    await signIn.email(
                        { 
                            email: signInValues.emailOrUsername, 
                            password: signInValues.password 
                        },
                        {
                            onRequest: () => setLoading(true),
                            onResponse: () => setLoading(false),
                            onSuccess: async(ctx) => {
                                // Handle two-factor authentication if required
                                if(ctx.data.twoFactorRedirect) {
                                    const response = await requestOTP();
                                    if(response?.data) {
                                        setSuccess("OTP has been sent to your email");
                                        router.push("/two-factor");
                                    } else if (response?.error) {
                                        setError(response.error.message);
                                    }
                                } else {
                                    setSuccess("Logged in successfully.");
                                    router.replace("/");
                                }
                            },
                            onError: (ctx) => {
                                setError(
                                    ctx.error.message || "Email login failed. Please try again."
                                );
                            },
                        }
                    );
                } else {
                    // Username-based login
                    await signIn.username(
                        { 
                            username: signInValues.emailOrUsername, 
                            password: signInValues.password 
                        },
                        {
                            onRequest: () => setLoading(true),
                            onResponse: () => setLoading(false),
                            onSuccess: async(ctx) => {
                                // Handle two-factor authentication if required
                                if(ctx.data.twoFactorRedirect) {
                                    const response = await requestOTP();
                                    if(response?.data) {
                                        setSuccess("OTP has been sent to your email");
                                        router.push("/two-factor");
                                    } else if (response?.error) {
                                        setError(response.error.message);
                                    }
                                } else {
                                    setSuccess("Logged in successfully.");
                                    router.replace("/");
                                }
                            },
                            onError: (ctx) => {
                                setError(
                                    ctx.error.message || "Username login failed. Please try again."
                                );
                            },
                        }
                    );
                }
            }
        } catch (err) {
            console.error(err);
            setError("Something went wrong. Please try again.");
        } finally {
            setLoading(false); // Reset loading state
        }
    };

    return (
        <CardWrapper
            cardTitle="Sign In"
            cardDescription="Enter your details below to login to your account"
            cardFooterDescription="Don't have an account?"
            cardFooterLink="/signup"
            cardFooterLinkTitle="Sign up"
        >
            <Form {...form}>
                <form className="space-y-4" onSubmit={form.handleSubmit(onSubmit)}>
                    {/* Email or Username Field */}
                    <FormField
                        control={form.control}
                        name="emailOrUsername"
                        render={({ field }) => (
                            <FormItem>
                                <FormLabel>
                                    {signInMethod === 'magicLink' ? 'Email' : 'Email or Username'}
                                </FormLabel>
                                <FormControl>
                                    <Input
                                        disabled={loading}
                                        type="text"
                                        placeholder={
                                            signInMethod === 'magicLink'
                                                ? "Enter your email"
                                                : "Enter email or username"
                                        }
                                        {...field}
                                    />
                                </FormControl>
                                <FormMessage />
                            </FormItem>
                        )}
                    />

                    {/* Password Field (only for traditional sign-in) */}
                    {signInMethod === 'traditional' && (
                        <FormField
                            control={form.control}
                            name="password"
                            render={({ field }) => (
                                <FormItem>
                                    <FormLabel>Password</FormLabel>
                                    <FormControl>
                                        <Input
                                            disabled={loading}
                                            type="password"
                                            placeholder="********"
                                            {...field}
                                        />
                                    </FormControl>
                                    <FormMessage />
                                    <Link
                                        href="/forgot-password"
                                        className="text-xs underline ml-60"
                                    >
                                        Forgot Password?
                                    </Link>
                                </FormItem>
                            )}
                        />
                    )}

                    {/* Error & Success Messages */}
                    <FormError message={error} />
                    <FormSuccess message={success} />

                    {/* Submit Button */}
                    <Button disabled={loading} type="submit" className="w-full">
                        {signInMethod === 'magicLink' ? "Send Magic Link" : "Login"}
                    </Button>

                    {/* Social Buttons */}
                    <div className="flex justify-between mt-4">
                        <SocialButton provider="google" icon={<FcGoogle />} label="" />
                        <SocialButton provider="github" icon={<FaGithub />} label="" />
                        <Button
                            type="button"
                            className="w-20"
                            onClick={() => setSignInMethod(
                                signInMethod === 'traditional' ? 'magicLink' : 'traditional'
                            )}
                        >
                            {signInMethod === 'traditional'
                                ? <Mailbox />
                                : <Mail />}
                        </Button>
                        <AnonymousButton />
                    </div>
                </form>
            </Form>
        </CardWrapper>
    );
};

export default SignIn;

Step 4: Run your application:

Start your development server:

pnpm dev

Navigate to your sign-in route and try login using magic link

Conclusion

Congratulations! 🎉 You’ve successfully implemented Magic Link Authentication in your application. This secure and user-friendly feature allows users to log in effortlessly using a one-time email link, removing the need for traditional passwords. By offering a seamless and password-free authentication experience, your app is now more accessible and secure, catering to modern user expectations while maintaining robust security standards.

Blog Links:

Anonymous Login using BetterAuth: https://dev.to/daanish2003/anonymous-login-using-betterauth-nextjs-prisma-shadcn-5334

Username and Password auth using BetterAuth: https://dev.to/daanish2003/username-and-password-authentication-with-betterauth-nextjs-prisma-shadcn-and-tailwindcss-1hc6

Two Factor Authentication using BetterAuth: https://dev.to/daanish2003/two-factor-authentication-using-betterauth-nextjs-prisma-shadcn-and-resend-1b5p

Forgot and ResetPassword using BetterAuth: https://dev.to/daanish2003/forgot-and-reset-password-using-betterauth-nextjs-and-resend-ilj

Email Verification Blog: https://dev.to/daanish2003/email-verification-using-betterauth-nextjs-and-resend-37gn

Email And Password with Better_Auth: https://dev.to/daanish2003/email-and-password-auth-using-betterauth-nextjs-prisma-shadcn-and-tailwindcss-hgc

OAuth Blog: https://dev.to/daanish2003/oauth-using-betterauth-nextjs-prisma-shadcn-and-tailwindcss-45bp

Reference Links:

Better_Auth Docs: https://www.better-auth.com/

pnpm Docs: https://pnpm.io/

Docker Docs: https://docs.docker.com/

Prisma Docs: https://www.prisma.io/docs/getting-started

Shadcn Docs: https://ui.shadcn.com/

Next.js Docs: https://nextjs.org/

Tailwindcss Docs: https://tailwindcss.com/

Github repository: https://github.com/Daanish2003/better_auth_nextjs

Guest login using better_auth, nextjs, prisma, shadcn

Daanish2003 — Thu, 05 Dec 2024 09:43:51 +0000

In this guide, we will implement Anonymous Login for a modern web application using a secure and developer-friendly stack. This feature will allow users to interact with your app without requiring immediate registration or authentication. By the end of this tutorial, your application will support seamless anonymous sessions that can be converted to authenticated accounts, providing an enhanced user experience while maintaining security and scalability.

Tech Stack

Here’s the technology stack we’ll be using:

Better_Auth v1: A lightweight and extensible TypeScript authentication library.
Next.js: A powerful React framework for building server-rendered applications.
Prisma: A modern ORM for efficient and type-safe database interaction.
ShadCN: A utility-first component library for rapid UI development.
TailwindCSS: A popular CSS framework for building modern user interfaces.
Resend: A reliable email service for sending OTPs.

Prerequisites

Before proceeding, ensure you have the following ready:

Node.js (LTS version) installed.
A package manager like npm, yarn, or pnpm (we'll use pnpm in this guide).
A PostgreSQL database instance (local or hosted, such as Supabase or PlanetScale).
- If you're working locally, Docker is a great way to set this up.
Familiarity with TypeScript, Next.js, and Prisma.

Cloning the Starter Project:

This guide builds upon functionality such as Email-Password Authentication and Email Verification. You can:

Start from scratch by following these guides:
- Email-Password Guide
- Email Verification Guide
Or, clone the starter project:

git clone -b feat-username https://github.com/Daanish2003/better_auth_nextjs.git

Navigate to the project directory and install dependencies:

pnpm install

Setup

1. Configure the `.env` File

Create a .env file in the root of your project and add these configurations:

# Authentication settings
BETTER_AUTH_SECRET="your-secret-key" # Replace with a secure key
BETTER_AUTH_URL="http://localhost:3000"
NEXT_PUBLIC_APP_URL="http://localhost:3000"

# Database settings
POSTGRES_PASSWORD="your-password"
POSTGRES_USER="your-username"
DATABASE_URL="postgresql://your-username:your-password@localhost:5432/mydb?schema=public"

# Resend API Key
RESEND_API_KEY="your-resend-api-key"

If you're using Docker for PostgreSQL, start the container:

docker compose up -d

Step 1: Update `schema.prisma` file

Open schema.prismafile in your project folder and then update the usermodel in schema by adding the isAnonymouscolumn with optional type string to it.

model User {
  id               String      @id @default(cuid())
  name             String
  email            String
  emailVerified    Boolean     @default(false)
  image            String?
  createdAt        DateTime    @default(now())
  updatedAt        DateTime    @updatedAt
  twoFactorEnabled Boolean     @default(false)
  username         String?
  // Add anonymous column to user model
  isAnonymous      Boolean?
  Session          Session[]
  Account          Account[]
  TwoFactor        TwoFactor[] // if you implemented 2FA add this column

  @@unique([email])
  @@map("user")
}

Then, Generate and migrate the prisma file using command below

pnpx prisma generate
pnpx prisma migrate dev --name anonymous

Step 2: Update `auth.ts` and `auth-client.ts`file

Open auth.ts file in your project repository and then add the anonymous() plugin into plugin array of betterAuth function.

// src/lib/auth.ts
import { betterAuth } from "better-auth"
import { username } from "better-auth/plugins"

const auth = betterAuth({
    // other config options
    plugins: [ 
        // other plugins
        anonymous({
         // optional to add this
         emailDomainName: "exmaple.com" // Adding the email domain name to user
         //Note: user model, account model and session model is automatically transfer when user signup using their email. 
// There is no need to transfer the user, account, session model table data. 
// If you have other data of user then use the option below to transfer the data
         onLinkAccount: () => {
         // if you want transfer the guest users all the data like preference, carts, or items  after login. Please use this option to update data in your database
}
        }) 
    ] 
})

Then, Open auth-client.ts file in your project repository and add anonymousClient() plugin function to the array of plugins

// src/lib/auth-client.ts
import { createAuthClient } from "better-auth/client"
import { anonymousClient } from "better-auth/client/plugins"

export const authClient = createAuthClient({
    baseURL: process.env.NEXT_PUBLIC_APP_URL,
    plugins: [ 
         // other plugin options
        anonymousClient() 
    ] 
})

export const {
    signIn,
    signOut,
    signUp,
    useSession
} = authClient;

Step 4: Create `anonymous-button` Component

Create a anonymous-button.tsx inside the components/auth/ folder and paste the code from below

// src/components/auth/anonymous-button.tsx
import React from 'react'
import { Button } from '../ui/button'
import { User } from 'lucide-react'
import { authClient } from '@/lib/auth-client'
import { useAuthState } from '@/hooks/useAuthState'
import { useRouter } from 'next/navigation'

const AnonymousButton = () => {
    const router = useRouter();
    // handler error, success, and loading state
    const {setSuccess, setError, setLoading, resetState } = useAuthState();
    const handleSignInAnonymous = async () => {
        try {
            await authClient.signIn.anonymous({
                fetchOptions: {
                    onSuccess: () => {
                        setSuccess("LoggedIn successfully")
                        router.replace('/')
                    },
                    onError: (ctx) => setError(ctx.error.message),
                    onRequest: () => {
                        resetState()
                        setLoading(true)
                    },
                    onResponse: () => setLoading(true)
                }
            })

        } catch(error) {
            console.log(error)
            setError("Something went wrong")
        }

    }
  return (
    <Button className='w-28' onClick={handleSignInAnonymous}>
        <User />
        Guest
    </Button>
  )
}
export default AnonymousButton

This Component handles the logic of anonymous login

Step 5: Update SignIn component and Signup component

SignUp Component:

// src/components/auth/sign-up.tsx
"use client"

// other imports
import AnonymousButton from "./anonymos-button";

const SignUp = () => {

    // Other functions and logics 

    return (
        <CardWrapper
            cardTitle='SignUp'
            cardDescription='Create an new account'
            cardFooterLink='/signin'
            cardFooterDescription='Already have an account?'
            cardFooterLinkTitle='Signin'
        >
            <Form {...form}>
                 <form className='space-y-4' onSubmit={form.handleSubmit(onSubmit)}> 
                 {/* FormFields example: Email, password and other*/} 
                 {/* Add the Anonymous login button below inside the form*/}
                 <AnonymousButton />
                 </form>
            </Form>
        </CardWrapper>
    )
}

export default SignUp

Add AnonymousButton component to SignUp:

By clicking the anonymous button user were able to login anonymously

SignIn Component

// components/auth/sign-in.tsx

"use client";

// other imports
import AnonymousButton from "./anonymos-button";

const SignIn = () => {
    // other function

    return (
        <CardWrapper
            cardTitle="Sign In"
            cardDescription="Enter your email or username below to login to your account"
            cardFooterDescription="Don't have an account?"
            cardFooterLink="/signup"
            cardFooterLinkTitle="Sign up"
        >
            <Form {...form}>
                <form className="space-y-4" onSubmit={form.handleSubmit(onSubmit)}>
                    {/* Email or Username Field */}
                    {/* All other exisitng formfields like password and form message */}
                    {/* Add Anonynous button here */}
                    <AnonymousButton />
                </form>
            </Form>
        </CardWrapper>
    );
};

export default SignIn;

Add AnonymousButton to SignIn:

By clicking the anonymous button user were able to login anonymously

Step 6: Run your application:

Start your development server:

pnpm dev

Navigate to your sign-up route and sign-in route and try login anonymously

Conclusion

Congratulations! 🎉 You’ve successfully implemented Anonymous Login in your application. With this feature, users can explore and interact with your app without the need for immediate registration, enhancing accessibility and user engagement. Moreover, by enabling a smooth transition from anonymous sessions to authenticated accounts, your app ensures both flexibility and security for its users.

Blog Links:

Username and Password auth using BetterAuth: https://dev.to/daanish2003/username-and-password-authentication-with-betterauth-nextjs-prisma-shadcn-and-tailwindcss-1hc6

Two Factor Authentication using BetterAuth: https://dev.to/daanish2003/two-factor-authentication-using-betterauth-nextjs-prisma-shadcn-and-resend-1b5p

Forgot and ResetPassword using BetterAuth: https://dev.to/daanish2003/forgot-and-reset-password-using-betterauth-nextjs-and-resend-ilj

Email Verification Blog: https://dev.to/daanish2003/email-verification-using-betterauth-nextjs-and-resend-37gn

Email And Password with Better_Auth: https://dev.to/daanish2003/email-and-password-auth-using-betterauth-nextjs-prisma-shadcn-and-tailwindcss-hgc

OAuth Blog: https://dev.to/daanish2003/oauth-using-betterauth-nextjs-prisma-shadcn-and-tailwindcss-45bp

Reference Links:

Better_Auth Docs: https://www.better-auth.com/

pnpm Docs: https://pnpm.io/

Docker Docs: https://docs.docker.com/

Prisma Docs: https://www.prisma.io/docs/getting-started

Shadcn Docs: https://ui.shadcn.com/

Next.js Docs: https://nextjs.org/

Tailwindcss Docs: https://tailwindcss.com/

Github repository: https://github.com/Daanish2003/better_auth_nextjs

Username and Password Authentication with Better_Auth, Next.js, Prisma, Shadcn, and TailwindCSS

Daanish2003 — Thu, 05 Dec 2024 01:53:26 +0000

In this guide, we will implement Username and Password Authentication for a modern web application using a robust and secure stack of tools. This feature will complement existing Email and Password Authentication in the application. By the end of this tutorial, your app will allow users to log in with either their username or email, with optional OTP-based Two-Factor Authentication (2FA) for enhanced security.

Tech Stack

Here’s the technology stack we’ll be using:

Better_Auth v1: A lightweight and extensible TypeScript authentication library.
Next.js: A powerful React framework for building server-rendered applications.
Prisma: A modern ORM for efficient and type-safe database interaction.
ShadCN: A utility-first component library for rapid UI development.
TailwindCSS: A popular CSS framework for building modern user interfaces.
Resend: A reliable email service for sending OTPs.

Prerequisites

Before proceeding, ensure you have the following ready:

Node.js (LTS version) installed.
A package manager like npm, yarn, or pnpm (we'll use pnpm in this guide).
A PostgreSQL database instance (local or hosted, such as Supabase or PlanetScale).
- If you're working locally, Docker is a great way to set this up.
Familiarity with TypeScript, Next.js, and Prisma.

Cloning the Starter Project:

This guide builds upon functionality such as Email-Password Authentication and Email Verification. You can:

Start from scratch by following these guides:
- Email-Password Guide
- Email Verification Guide
Or, clone the starter project:

git clone -b feat-two-factor https://github.com/Daanish2003/better_auth_nextjs.git

Navigate to the project directory and install dependencies:

pnpm install

Setup

1. Configure the `.env` File

Create a .env file in the root of your project and add these configurations:

# Authentication settings
BETTER_AUTH_SECRET="your-secret-key" # Replace with a secure key
BETTER_AUTH_URL="http://localhost:3000"
NEXT_PUBLIC_APP_URL="http://localhost:3000"

# Database settings
POSTGRES_PASSWORD="your-password"
POSTGRES_USER="your-username"
DATABASE_URL="postgresql://your-username:your-password@localhost:5432/mydb?schema=public"

# Resend API Key
RESEND_API_KEY="your-resend-api-key"

If you're using Docker for PostgreSQL, start the container:

docker compose up -d

Note:

Before we move on to implementing username and password authentication in your full stack application. I would like to inform you that in this blog we will implementing username and password authentication with existing Email and password authentication. So that user could able login using either email or username.

Step 1: Update `schema.prisma` file

Open schema.prismafile in your project folder and then update the usermodel in schema by adding the username column with optional type string to it.

model User {
  id               String      @id @default(cuid())
  name             String
  email            String
  emailVerified    Boolean     @default(false)
  image            String?
  createdAt        DateTime    @default(now())
  updatedAt        DateTime    @updatedAt
  twoFactorEnabled Boolean     @default(false)
  // Add only username column with type of string and ignore other columns if you already implemented user model
  username         String?
  isAnonymous      Boolean?
  Session          Session[]
  Account          Account[]
  TwoFactor        TwoFactor[] // if you implemented 2FA add this column

  @@unique([email])
  @@map("user")
}

Then, Generate and migrate the prisma file using command below

pnpx prisma generate
pnpx prisma migrate dev --name username

Step 2: Update `auth.ts` and `auth-client.ts`file

Open auth.ts file in your project repository and then add the username()plugin into plugin array of betterAuth function.

// src/lib/auth.ts
import { betterAuth } from "better-auth"
import { username } from "better-auth/plugins"

const auth = betterAuth({
    // other config options
    plugins: [ 
        // other plugins
        username() 
    ] 
})

Then, Open auth-client.ts file in your project repository and add usernameClient() plugin function to the array of plugins

// src/lib/auth-client.ts
import { createAuthClient } from "better-auth/client"
import { usernameClient } from "better-auth/client/plugins"

export const authClient = createAuthClient({
    baseURL: process.env.NEXT_PUBLIC_APP_URL,
    plugins: [ 
        usernameClient() 
    ] 
})

export const {
    signIn,
    signOut,
    signUp,
    useSession
} = authClient;

Step 3: Update `login-schema.ts` and `signup-schema.ts` file

Open login-schema.tsfile in your project repository and update the schema with following code below.

// src/helpers/zod/login-schema.ts
import { z } from "zod";

const LoginSchema = z
  .object({
    // checks if the input given by the user is email or username
    emailOrUsername: z
      .string()
      .min(1, { message: "Email or username is required" }),
    password: z
      .string()
      .min(8, { message: "Password must be at least 8 characters long" })
      .max(20, { message: "Password must be at most 20 characters long" }),
  })
  .refine(
    (data) =>
      // checks if the email or username is valid
      /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(data.emailOrUsername) || /^[a-zA-Z0-9_.]+$/.test(data.emailOrUsername),
    {
      message: "Provide a valid email or username",
      path: ["emailOrUsername"],
    }
  );

export default LoginSchema

Then, Open the signup-schema.ts file in your project repository and added the username field and its type in zod schema.

// src/helpers/zod/signup-schema.ts
export const SignupSchema = z
  .object({
    name: z
      .string()
      .min(2, { message: "Minimum 2 characters are required" })
      .max(20, { message: "Maximum of 20 characters are allowed" }),
    email: z
      .string()
      .email({ message: "Invalid email address" })
      .min(1, { message: "Email is required" }),
    password: z
      .string()
      .min(8, { message: "Password must be at least 8 characters long" })
      .max(20, { message: "Password must be at most 20 characters long" }),
    // Added the username field to check its type 
    username: z
      .string()
      .min(3, { message: "Username must be at least 3 characters long" })
      .max(25, { message: "Username must be at most 25 characters long" })
      .regex(/^[a-zA-Z0-9_.]+$/, { message: "Username can only contain letters, numbers, underscores, and dots" }),
  })

Step 4: Create `generateUsername` file

Create a generate-username.ts inside the helper/auth/ folder and paste the code from below

// helpers/auth/generate-username.ts
export const generateUsername = (name: string) => {
    const randomNumbers = Math.floor(1000 + Math.random() * 9000); // Generate a random 4-digit number
    return `${name.replace(/\s+/g, '').toLowerCase()}${randomNumbers}`;
};

GenerateUsernamefunction is used to generate random username from the given name of the user.

Step 5: Update SignIn component and Signup component

SignUp Component:

// src/components/auth/sign-in.tsx
"use client"
import React from 'react'
import CardWrapper from '../card-wrapper'
import FormError from '../form-error'
import { FormSuccess } from '../form-success'
import { FcGoogle } from 'react-icons/fc'
import SocialButton from './social-button'
import { FaGithub } from 'react-icons/fa'
import { useAuthState } from '@/hooks/useAuthState'
import { useForm } from 'react-hook-form'
import { zodResolver } from '@hookform/resolvers/zod'
import { z } from 'zod'
import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from '../ui/form'
import { Input } from '../ui/input'
import { Button } from '../ui/button'
import { SignupSchema } from '@/helpers/zod/signup-schema'
import { signUp } from '@/lib/auth-client'
import { generateUsername } from '@/helpers/auth/generate-username'

const SignUp = () => {
    const { error, success, loading, setLoading, setError, setSuccess, resetState } = useAuthState();

    const form = useForm<z.infer<typeof SignupSchema>>({
        resolver: zodResolver(SignupSchema),
        defaultValues: {
            name: '',
            email: '',
            password: '',
            username: '', // Added username field
        }
    })

    const onSubmit = async (values: z.infer<typeof SignupSchema>) => {
        try {
            await signUp.email({
                name: values.name,
                email: values.email,
                password: values.password,
                username: values.username, // Add the username fields
                callbackURL: '/'
            }, {
                onResponse: () => {
                    setLoading(false)
                },
                onRequest: () => {
                    resetState()
                    setLoading(true)
                },
                onSuccess: () => {
                    setSuccess("Verification link has been sent to your mail")
                },
                onError: (ctx) => {
                    setError(ctx.error.message);
                },
            });
        } catch (error) {
            console.error(error)
            setError("Something went wrong")
        }

    }

    return (
        <CardWrapper
            cardTitle='SignUp'
            cardDescription='Create an new account'
            cardFooterLink='/signin'
            cardFooterDescription='Already have an account?'
            cardFooterLinkTitle='Signin'
        >
            <Form {...form}>
                 {/* Make changes to only name field of the form*/}
                <form className='space-y-4' onSubmit={form.handleSubmit(onSubmit)}>
                    <FormField
                        control={form.control}
                        name="name"
                        render={({ field }) => (
                            <FormItem>
                                <FormLabel>Name</FormLabel>
                                <FormControl>
                                    <Input
                                        disabled={loading}
                                        type="text"
                                        placeholder='john'
                                        {...field} 
                                        onChange={(e) => {
                                            field.onChange(e); // Update form state
                                            const username = generateUsername(e.target.value);
                                            form.setValue('username', username); // Auto-fill username
                                        }}
                                        />
                                </FormControl>
                                <FormMessage />
                            </FormItem>
                        )}
                    />
                    {/* All other exisitng formfields like email and password */}
                </form>
            </Form>
        </CardWrapper>
    )
}

export default SignUp

Add username logic to SignUp:

Auto-generate usernames based on the user's name.

SignIn Component

"use client";

import React from "react";
import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import { z } from "zod";
import { useRouter } from "next/navigation";
import Link from "next/link";

import CardWrapper from "../card-wrapper";
import FormError from "../form-error";
import { FormSuccess } from "../form-success";
import { FcGoogle } from "react-icons/fc";
import { FaGithub } from "react-icons/fa";

import SocialButton from "./social-button";
import LoginSchema from "@/helpers/zod/login-schema";
import { useAuthState } from "@/hooks/useAuthState";
import { signIn } from "@/lib/auth-client";
import { requestOTP } from "@/helpers/auth/request-otp";

import {
    Form,
    FormControl,
    FormField,
    FormItem,
    FormLabel,
    FormMessage,
} from "../ui/form";
import { Input } from "../ui/input";
import { Button } from "../ui/button";

const SignIn = () => {
    const router = useRouter();
    // handles error, success, loading and resetState of a form
    const { error, success, loading, setSuccess, setError, setLoading, resetState } = useAuthState();

    const form = useForm<z.infer<typeof LoginSchema>>({
        resolver: zodResolver(LoginSchema),
        defaultValues: {
            emailOrUsername: "", // update the field email to emailOrUsername
            password: "",
        },
    });

    // Check if the value is an email
    const isEmail = (value: string) => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value);

    const onSubmit = async (values: z.infer<typeof LoginSchema>) => {
        const { emailOrUsername, password } = values;

        // Determine if the input is an email or username
        const isEmailInput = isEmail(emailOrUsername);

        try {
            // resetState of a form after resubmit
            resetState();
            setLoading(true);

            if (isEmailInput) {
              // if user has given email and its true then signin using email and password
              // also send 2FA code to the user's email, if enabled
                await signIn.email(
                    { email: emailOrUsername, password },
                    {
                        onRequest: () => setLoading(true),
                        onResponse: () => setLoading(false),
                        onSuccess: async (ctx) => {
                            if (ctx.data.twoFactorRedirect) {
                                const res = await requestOTP(); // request otp for 2fa
                                if (res?.data) {
                                    setSuccess("OTP has been sent to your email");
                                    router.push("two-factor");
                                } else if (res?.error) {
                                    setError(res.error.message);
                                }
                            } else { // if didn't enable 2FA show loggedIn message
                                setSuccess("Logged in successfully");
                                router.replace("/");
                            }
                        },
                        onError: (ctx) => {
                            const errorMessage =
                                ctx.error.status === 403
                                    ? "Please verify your email address"
                                    : ctx.error.message;
                            setError(errorMessage);
                        },
                    }
                );
            } else {
                // if user has given username then signin using username and password
                // also send 2FA code to the user's email, if enabled
                await signIn.username(
                    { username: emailOrUsername, password },
                    {
                        onRequest: () => setLoading(true),
                        onResponse: () => setLoading(false),
                        onSuccess: async (ctx) => {
                            if (ctx.data.twoFactorRedirect) {
                                const res = await requestOTP();
                                if (res?.data) {
                                    setSuccess("OTP has been sent to your email");
                                    router.push("two-factor");
                                } else if (res?.error) {
                                    setError(res.error.message);
                                }
                            } else {
                                setSuccess("Logged in successfully");
                                router.replace("/");
                            }
                        },
                        onError: (ctx) => {
                            const errorMessage =
                                ctx.error.status === 403
                                    ? "Please verify your email address"
                                    : ctx.error.message;
                            setError(errorMessage);
                        },
                    }
                );
            }
        } catch (err) { // catch the error
            console.error(err);
            setError("Something went wrong. Please try again.");
        } finally { // set the loading to false after submitting the form
            setLoading(false);
        }
    };

    return (
        <CardWrapper
            cardTitle="Sign In"
            {/* change the cardDescription for email to email or password */}
            cardDescription="Enter your email or username below to login to your account"
            cardFooterDescription="Don't have an account?"
            cardFooterLink="/signup"
            cardFooterLinkTitle="Sign up"
        >
            <Form {...form}>
                <form className="space-y-4" onSubmit={form.handleSubmit(onSubmit)}>
                    {/* Email or Username Field */}
                    <FormField
                        control={form.control}
                        name="emailOrUsername"
                        render={({ field }) => (
                            <FormItem>
                                <FormLabel>Email or Username</FormLabel>
                                <FormControl>
                                    <Input
                                        disabled={loading}
                                        type="text" // update the type from email to text
                                        placeholder="Enter email or username" // update the placeholder
                                        {...field}
                                    />
                                </FormControl>
                                <FormMessage />
                            </FormItem>
                        )}
                    />
                    {/* All other exisitng formfields like password and form message */}
                </form>
            </Form>
        </CardWrapper>
    );
};

export default SignIn;

Enable login with username or email in SignIn:

Update the email field to emailOrUsername.
Use a utility function to determine whether the input is an email or username.

Step 6: Run your application:

Start your development server:

pnpm dev

Navigate to your sign-up route and sign-in route and try sign-up the user first with email, name and password and then try using using email or username.

Conclusion

Congratulations! 🎉 You’ve successfully implemented a Username and Password Authentication system in your application. Your users can now log in with either their email or username, making the experience more flexible and user-friendly.

Blog Links:

Two Factor Authentication using BetterAuth: https://dev.to/daanish2003/two-factor-authentication-using-betterauth-nextjs-prisma-shadcn-and-resend-1b5p

Forgot and ResetPassword using BetterAuth: https://dev.to/daanish2003/forgot-and-reset-password-using-betterauth-nextjs-and-resend-ilj

Email Verification Blog: https://dev.to/daanish2003/email-verification-using-betterauth-nextjs-and-resend-37gn

Email And Password with Better_Auth: https://dev.to/daanish2003/email-and-password-auth-using-betterauth-nextjs-prisma-shadcn-and-tailwindcss-hgc

OAuth Blog: https://dev.to/daanish2003/oauth-using-betterauth-nextjs-prisma-shadcn-and-tailwindcss-45bp

Reference Links:

Better_Auth Docs: https://www.better-auth.com/

pnpm Docs: https://pnpm.io/

Docker Docs: https://docs.docker.com/

Prisma Docs: https://www.prisma.io/docs/getting-started

Shadcn Docs: https://ui.shadcn.com/

Next.js Docs: https://nextjs.org/

Tailwindcss Docs: https://tailwindcss.com/

Github repository: https://github.com/Daanish2003/better_auth_nextjs

Two-Factor Authentication Using Better_Auth, Next.js, Prisma, ShadCN, and Resend

Daanish2003 — Fri, 29 Nov 2024 11:28:14 +0000

In this guide, we will set up Two-Factor Authentication (2FA) for a modern web application. Using a powerful stack of tools and frameworks, you'll implement a robust and secure email-based 2FA system seamlessly integrated into your full-stack application.

By the end of this guide, you'll have a fully functional system that enables users to verify their identity using a one-time password (OTP) for enhanced security.

Tech Stack

Here’s the technology stack we’ll be using:

Better_Auth v1: A lightweight and extensible TypeScript authentication library.
Next.js: A powerful React framework for building server-rendered applications.
Prisma: A modern ORM for efficient and type-safe database interaction.
ShadCN: A utility-first component library for rapid UI development.
TailwindCSS: A popular CSS framework for building modern user interfaces.
Resend: A reliable email service for sending OTPs.

Prerequisites

Before proceeding, ensure you have the following ready:

Node.js (LTS version) installed.
A package manager like npm, yarn, or pnpm (we'll use pnpm in this guide).
A PostgreSQL database instance (local or hosted, such as Supabase or PlanetScale).
- If you're working locally, Docker is a great way to set this up.
Familiarity with TypeScript, Next.js, and Prisma.

Cloning the Starter Project:

This guide builds upon existing functionality, including email-password authentication and email verification. You can either start from scratch by referring to the EmailPassword guide and Email Verification guide or clone the project with the following command:

git clone -b feat-reset-password https://github.com/Daanish2003/better_auth_nextjs.git

Navigate to the project directory and install dependencies:

pnpm install

Configure the `.env` File

Create a .env file in the root of your project and add the following configuration:

# Authentication settings
BETTER_AUTH_SECRET="your-secret-key" # Replace with a secure key
BETTER_AUTH_URL="http://localhost:3000"
NEXT_PUBLIC_APP_URL="http://localhost:3000"

# Database settings
POSTGRES_PASSWORD="your-password"
POSTGRES_USER="your-username"
DATABASE_URL="postgresql://your-username:your-password@localhost:5432/mydb?schema=public"

# Resend API Key
RESEND_API_KEY="your-resend-api-key"

If you're using Docker for PostgreSQL, run:

docker compose up -d

Step 1: Install ShadCN Components

ShadCN simplifies UI development with pre-built, customizable components. Install the required components:

pnpx shadcn@latest add dialog switch input-otp

Step 2: Update Prisma Schema

Extend the prisma/schema.prisma file to include a TwoFactor model for 2FA data:

model User {
  // note just update it don't replace it
  twoFactor  TwoFactor[] // Add the twoFactor column to user table
}

model TwoFactor {
  id          String @id @default(cuid())
  secret      String
  backupCodes String
  userId      String
  user        User   @relation(fields: [userId], references: [id], onDelete: Cascade)

  @@map("twoFactor")
}

Run the following commands to update the database schema:

pnpm prisma generate
pnpm prisma migrate dev --name add-two-factor

Step 3: Integrate 2FA Using Better_Auth

Backend Configuration

Update lib/auth.ts to include the twoFactor plugin:

import { betterAuth } from "better-auth";
import { twoFactor } from "better-auth/plugins";

// Configure the authentication module
export const auth = betterAuth({
  // Additional authentication options can go here

  // Register plugins for enhanced functionality
  plugins: [
    // Two-Factor Authentication (2FA) plugin configuration
    twoFactor({
      // Configuration options for OTP (One-Time Password) handling
      otpOptions: {
        /**
         * Defines how OTPs are sent to users.
         * In this case, we are using the Resend service to send OTP emails.
         * 
         * @param user - The user object containing user details like email.
         * @param otp - The one-time password to be sent to the user.
         */
        async sendOTP({ user, otp }) {
          await resend.emails.send({
            from: 'Acme <onboarding@resend.dev>', // Sender email and display name
            to: user.email, // Recipient's email address
            subject: "Two-Factor Authentication (2FA)", // Email subject
            html: `Your OTP is <b>${otp}</b>`, // Email content with the OTP
          });
        },
      },

      // Bypass OTP verification during 2FA setup (for a smoother user experience)
      skipVerificationOnEnable: true,
    }),
  ],
});

Frontend Configuration

In lib/auth-client.ts, add the 2FA client plugin:

import { createAuthClient } from "better-auth/client";
import { twoFactorClient } from "better-auth/plugins";

// Create an instance of the authentication client
export const authClient = createAuthClient({
  // The base URL of the application
  baseURL: process.env.NEXT_PUBLIC_APP_URL, 
  /**
   * Explanation of `baseURL`:
   * - Used to define the base API endpoint for authentication requests.
   * - The value is fetched from an environment variable (`NEXT_PUBLIC_APP_URL`) 
   *   to maintain flexibility across different environments (e.g., development, staging, production).
   */

  // Register plugins to extend the functionality of the authentication client
  plugins: [
    twoFactorClient(), 
    /**
     * `twoFactorClient` Plugin:
     * - Enables support for Two-Factor Authentication (2FA) on the client side.
     * - Handles 2FA-related tasks, such as requesting OTP verification.
     */
  ],
});

Step 4: Build the UI for 2FA

Create Zod Validation Schema

Create a password-schema.ts file under src/helpers/zod/:

import { z } from "zod";

// Define a schema for validating password input
export const PasswordSchema = z.object({
  password: z
    .string() // Ensures the input is a string
    .min(8, { message: "Password must be at least 8 characters long" }) 
    /**
     * Validates that the password has a minimum length of 8 characters.
     * Custom error message provided to guide the user.
     */
    .max(20, { message: "Password must be at most 20 characters long" }),
    /**
     * Validates that the password does not exceed 20 characters.
     * Ensures user-friendly error messaging for invalid input.
     */
});

Add Settings Component

Add the Settings component under components/auth to handle enabling/disabling 2FA. Use the code provided earlier.

"use client";

import React, { useState } from "react";
import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger } from "../ui/dialog";
import { Button } from "../ui/button";
import { Card, CardDescription, CardHeader, CardTitle } from "../ui/card";
import { Switch } from "../ui/switch";
import { authClient, useSession } from "@/lib/auth-client";
import { Input } from "../ui/input";
import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "../ui/form";
import { useForm } from "react-hook-form";
import { PasswordSchema } from "@/helpers/zod/password-schema";
import { zodResolver } from "@hookform/resolvers/zod";
import { z } from "zod";
import { FormSuccess } from "../form-success";
import FormError from "../form-error";
import { useAuthState } from "@/hooks/useAuthState";
import { Settings as UserSettings } from "lucide-react";

const Settings = () => {
  const { data } = useSession(); // Fetch session data to check if 2FA is enabled
  const [open, setOpen] = useState<boolean>(false); // Manages the dialog open/close state
  const { error, success, loading, setLoading, setSuccess, setError, resetState } = useAuthState();

  // React Hook Form setup for password validation
  const form = useForm<z.infer<typeof PasswordSchema>>({
    resolver: zodResolver(PasswordSchema), // Resolves validation rules using Zod
    defaultValues: {
      password: "", // Default value for the password field
    },
  });

  // If two-factor authentication status is unknown, do not render the component
  if (data?.user.twoFactorEnabled === null) {
    return null;
  }

  /**
   * Handles form submission for enabling/disabling two-factor authentication.
   * @param values - The form data, including the user's password
   */
  const onSubmit = async (values: z.infer<typeof PasswordSchema>) => {
    if (data?.user.twoFactorEnabled === false) {
      // Enable 2FA
      await authClient.twoFactor.enable(
        { password: values.password },
        {
          onRequest: () => {
            resetState();
            setLoading(true); // Show loading state during request
          },
          onResponse: () => {
            setLoading(false); // Stop loading after response
          },
          onSuccess: () => {
            setSuccess("Enabled two-factor authentication"); // Success message
            setTimeout(() => {
              setOpen(false); // Close dialog
              resetState();
              form.reset(); // Clear form fields
            }, 1000); // Delay to allow user to see the success message
          },
          onError: (ctx) => {
            setError(ctx.error.message); // Display error message
          },
        }
      );
    }

    if (data?.user.twoFactorEnabled === true) {
      // Disable 2FA
      await authClient.twoFactor.disable(
        { password: values.password },
        {
          onRequest: () => {
            resetState();
            setLoading(true); // Show loading state during request
          },
          onResponse: () => {
            setLoading(false); // Stop loading after response
          },
          onSuccess: () => {
            setSuccess("Disabled two-factor authentication"); // Success message
            setTimeout(() => {
              setOpen(false); // Close dialog
              resetState();
              form.reset(); // Clear form fields
            }, 1000);
          },
          onError: (ctx) => {
            setError(ctx.error.message); // Display error message
          },
        }
      );
    }
  };

  return (
    <>
      {/* Main settings dialog */}
      <Dialog>
        <DialogTrigger asChild>
          <Button variant={"default"}>
            <UserSettings />
          </Button>
        </DialogTrigger>
        <DialogContent>
          <DialogHeader>
            <DialogTitle>Settings</DialogTitle>
            <DialogDescription>Make changes to your settings here</DialogDescription>
          </DialogHeader>
          <Card>
            <CardHeader className="p-4 flex flex-row justify-between">
              <div>
                <CardTitle className="text-sm">Enable 2FA</CardTitle>
                <CardDescription className="text-xs">
                  Toggle to enable or disable two-factor authentication
                </CardDescription>
              </div>
              {/* Toggle switch for enabling/disabling 2FA */}
              <Switch
                checked={data?.user.twoFactorEnabled}
                onCheckedChange={() => {
                  setOpen(true);
                }}
              />
            </CardHeader>
          </Card>
        </DialogContent>
      </Dialog>

      {/* Dialog for password confirmation */}
      <Dialog
        open={open}
        onOpenChange={() => {
          setOpen(false);
        }}
      >
        <DialogContent>
          <DialogHeader>
            <DialogTitle>Confirm Selection</DialogTitle>
            <DialogDescription>Please enter your password to confirm the action</DialogDescription>
          </DialogHeader>
          <Form {...form}>
            <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
              <FormField
                control={form.control}
                name="password"
                render={({ field }) => (
                  <FormItem>
                    <FormLabel>Password</FormLabel>
                    <FormControl>
                      <Input
                        disabled={loading}
                        type="password"
                        placeholder="********"
                        {...field}
                      />
                    </FormControl>
                    <FormMessage />
                  </FormItem>
                )}
              />
              {/* Feedback messages */}
              <FormSuccess message={success} />
              <FormError message={error} />
              <Button
                type="submit"
                className="w-full mt-4"
                disabled={loading}
              >
                Submit
              </Button>
            </form>
          </Form>
        </DialogContent>
      </Dialog>
    </>
  );
};

export default Settings;

Update `app/page.tsx`

To integrate the Settings and SignOut components into the homepage navigation, update the app/page.tsx file as shown below:

import Settings from "@/components/auth/settings";
import SignOut from "@/components/auth/sign-out";

export default function Home() {
  return (
    <nav className="flex items-center h-16 border-b px-12 justify-between">
      {/* Application title */}
      <span className="font-bold text-xl">Auth</span>
      {/* Right section with actions */}
      <div className="flex gap-x-2">
        {/* Sign-out button */}
        <SignOut />
        {/* Settings dropdown */}
        <Settings />
      </div>
    </nav>
  );
}

Implement OTP Input Component

Customize input-otp.tsx for user-friendly OTP entry. Add your desired styles and logic for the OTP slots.

"use client"

import * as React from "react"
import { OTPInput, OTPInputContext } from "input-otp"
import { Dot } from "lucide-react"

import { cn } from "@/lib/utils"

const InputOTP = React.forwardRef<
  React.ElementRef<typeof OTPInput>,
  React.ComponentPropsWithoutRef<typeof OTPInput>
>(({ className, containerClassName, ...props }, ref) => (
  <OTPInput
    ref={ref}
    containerClassName={cn(
      "flex items-center gap-2 has-[:disabled]:opacity-50 justify-center", // Added justify-center to className
      containerClassName
    )}
    className={cn("disabled:cursor-not-allowed", className)}
    {...props}
  />
))
InputOTP.displayName = "InputOTP"

const InputOTPGroup = React.forwardRef<
  React.ElementRef<"div">,
  React.ComponentPropsWithoutRef<"div">
>(({ className, ...props }, ref) => (
  // Added the gap-x-3 for space between the slots
  <div ref={ref} className={cn("flex items-center gap-x-3", className)} {...props} />
))
InputOTPGroup.displayName = "InputOTPGroup"

const InputOTPSlot = React.forwardRef<
  React.ElementRef<"div">,
  React.ComponentPropsWithoutRef<"div"> & { index: number }
>(({ index, className, ...props }, ref) => {
  const inputOTPContext = React.useContext(OTPInputContext)
  const { char, hasFakeCaret, isActive } = inputOTPContext.slots[index]

  return (
  {/*Removed first:rounded-l-md last:rounded-r-md first:border-l*/}
  {/*Added border rounded-md*/}
  {/*Changed h-10 to h-12*/}
    <div
      ref={ref}
      className={cn(
        "relative flex h-12 w-10 items-center justify-center border border-y border-r border-input text-sm transition-all rounded-md",
        isActive && "z-10 ring-2 ring-ring ring-offset-background",
        className
      )}
      {...props}
    >
      {char}
      {hasFakeCaret && (
        <div className="pointer-events-none absolute inset-0 flex items-center justify-center">
          <div className="h-4 w-px animate-caret-blink bg-foreground duration-1000" />
        </div>
      )}
    </div>
  )
})
InputOTPSlot.displayName = "InputOTPSlot"

const InputOTPSeparator = React.forwardRef<
  React.ElementRef<"div">,
  React.ComponentPropsWithoutRef<"div">
>(({ ...props }, ref) => (
  <div ref={ref} role="separator" {...props}>
    <Dot />
  </div>
))
InputOTPSeparator.displayName = "InputOTPSeparator"

export { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator }

Create a `requestOTP` Helper Component

Create a requestOTP.tsfile inside the helpers/auth/ and paste the code inside it

import { authClient } from "@/lib/auth-client";

// Interface for the response returned by the OTP request
interface OTPResponse {
  data?: { status: boolean } | null; // Holds response data indicating the OTP request status
  error?: { message: string }; // Holds error details if the request fails
}

// Type alias for a successful response structure
type SuccessResponse = Pick<OTPResponse, "data">;

/**
 * Sends a request to generate and send a one-time password (OTP).
 *
 * @returns {Promise<OTPResponse>} - A promise resolving to either the response data or an error object.
 */
export const requestOTP = async (): Promise<OTPResponse> => {
  try {
    // Send OTP request using the authClient's two-factor authentication module
    const response: SuccessResponse = await authClient.twoFactor.sendOtp();

    // Return the successful response object
    return response;
  } catch (error: unknown) {
    console.error("Error requesting OTP:", error);

    // Return an error object with a user-friendly message
    return {
      error: { message: "Failed to request OTP. Please try again." },
    };
  }
};

Create Two-Factor Verification Component

Create a TwoFactor component for OTP verification. Refer to the implementation provided earlier.

"use client";

import React from "react";
import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import { z } from "zod";
import { useRouter } from "next/navigation";

import CardWrapper from "../card-wrapper";
import { Form, FormField, FormItem, FormLabel, FormMessage } from "../ui/form";
import { InputOTP, InputOTPGroup, InputOTPSlot } from "../ui/input-otp";
import { REGEXP_ONLY_DIGITS } from "input-otp";
import FormError from "../form-error";
import { Button } from "../ui/button";
import { FormSuccess } from "../form-success";

import { authClient } from "@/lib/auth-client";
import { twoFactorSchema } from "@/helpers/zod/two-factor-schema";
import { useAuthState } from "@/hooks/useAuthState";
import { requestOTP } from "@/helpers/auth/request-otp";

const TwoFactor: React.FC = () => {
    const router = useRouter();
    const {
        error, // Stores error message if any process fails
        success, // Stores success message if a process succeeds
        loading, // Indicates whether an operation is in progress
        setSuccess, // Sets the success message
        setError, // Sets the error message
        setLoading, // Toggles the loading state
        resetState, // Resets all success, error, and loading states
    } = useAuthState();

    const form = useForm<z.infer<typeof twoFactorSchema>>({
        mode: "onBlur", // Triggers validation on blur
        resolver: zodResolver(twoFactorSchema), // Uses Zod schema for validation
        defaultValues: { code: "" }, // Initializes the OTP code as an empty string
    });

    /**
     * Requests a new OTP to be sent to the user's email.
     */
    const handleResendOTP = async () => {
        resetState(); // Clear previous error/success messages
        setLoading(true); // Start loading state

        try {
            const response = await requestOTP(); // Makes a request to send OTP

            if (response?.data) {
                setSuccess("OTP has been sent to your email."); // Notify user on success
            } else if (response?.error) {
                setError(response.error.message); // Show error message if request fails
            }
        } catch (err) {
            console.error("Error requesting OTP:", err);
            setError("Something went wrong. Please try again."); // Catch unexpected errors
        } finally {
            setLoading(false); // End loading state
        }
    };

    /**
     * Handles the submission of the OTP code for verification.
     * @param values - The form values containing the OTP code.
     */
    const handleSubmit = async (values: z.infer<typeof twoFactorSchema>) => {
        resetState(); // Clear previous error/success messages
        setLoading(true); // Start loading state

        try {
            // Verify OTP using Better_Auth client
            await authClient.twoFactor.verifyOtp(
                { code: values.code }, // Pass the entered OTP code
                {
                    onRequest: () => setLoading(true), // Start loading when request begins
                    onResponse: () => setLoading(false), // End loading after response
                    onSuccess: () => {
                        setSuccess("OTP validated successfully."); // Notify user of success
                        router.replace("/"); // Redirect to the homepage
                    },
                    onError: (ctx) => setError(ctx.error.message), // Show error message if verification fails
                }
            );
        } catch (err) {
            console.error("Error verifying OTP:", err);
            setError("Unable to verify OTP. Please try again."); // Catch unexpected errors
        } finally {
            setLoading(false); // End loading state
        }
    };

    return (
        <CardWrapper
            cardTitle="Two-Factor Authentication"
            cardDescription="Verify your identity with a one-time password." // Instructional text
            cardFooterDescription="Entered the wrong email?" // Text for footer message
            cardFooterLink="/login" // Link to the login page
            cardFooterLinkTitle="Login" // Footer link text
        >
            <Form {...form}>
                <form onSubmit={form.handleSubmit(handleSubmit)}>
                    {/* Form field for entering the OTP */}
                    <FormField
                        control={form.control}
                        name="code"
                        render={({ field }) => (
                            <FormItem>
                                <FormLabel>One-Time Password</FormLabel>
                                {/* OTP Input field accepting only digits */}
                                <InputOTP
                                    maxLength={6} // Maximum of 6 digits
                                    pattern={REGEXP_ONLY_DIGITS} // Allows only numeric input
                                    {...field}
                                    disabled={loading} // Disables input during loading
                                >
                                    <InputOTPGroup>
                                        {Array.from({ length: 6 }).map((_, index) => (
                                            <InputOTPSlot key={index} index={index} />
                                        ))}
                                    </InputOTPGroup>
                                </InputOTP>
                                <FormMessage />
                            </FormItem>
                        )}
                    />
                    {/* Button for resending the OTP */}
                    <Button
                        onClick={handleResendOTP}
                        variant="link"
                        className="text-xs underline ml-60" // Align to the right
                        disabled={loading} // Disabled during loading
                    >
                        Resend OTP
                    </Button>
                    <FormError message={error} /> {/* Displays error messages */}
                    <FormSuccess message={success} /> {/* Displays success messages */}
                    {/* Button to submit the OTP */}
                    <Button
                        type="submit"
                        disabled={loading} // Disabled during loading
                        className="w-full mt-4" // Full-width button with margin
                    >
                        Verify
                    </Button>
                </form>
            </Form>
        </CardWrapper>
    );
};

export default TwoFactor;

Create `TwoFactorPage`

Create a folder named two-factor inside /app/(auth)/ folder and then create page.tsx and import two-factor component inside page.tsx

import TwoFactor from '@/components/auth/two-factor'
import React from 'react'
const TwoFactorPage = () => {
  return (
    <TwoFactor />
  )
}
export default TwoFactorPage

Step 5: Run Your Application

Now that your setup is complete, it's time to test your implementation. Follow these steps to verify the two-factor authentication system:

Start the development server:
```
pnpm dev
```
Access your application at http://localhost:3000/signin.
Sign In:

Log into your account using your email and password.
Enable Two-Factor Authentication (2FA):
- Navigate to Settings in your account dashboard.
- Toggle the Enable 2FA option.
- Enter your password to confirm and enable two-factor authentication.
Test the Logout and Login Flow:
- Log out of your account.
- Try logging back in with your email and password.
- Check your email for the OTP sent as part of the 2FA process.
Validate OTP:
- Enter the OTP in the provided input field on the 2FA page.
- Verify that the system accepts the OTP and logs you into your account successfully.
Disable Two-Factor Authentication (2FA):
- Navigate to Settings in your account dashboard.
- Toggle the Disable 2FA option.
- Enter your password to confirm and enable two-factor authentication.

ScreenShots:

Conclusion

Congratulations! 🎉 You’ve successfully implemented Two-Factor Authentication using Better_Auth, Next.js, Prisma, ShadCN, and Resend. This setup provides an extra layer of security to your application, enhancing user trust and safeguarding their accounts.

Feel free to explore additional features, such as backup codes or app-based OTPs, to further strengthen your 2FA system.

Happy coding!

Reference Links:

Forgot and ResetPassword using BetterAuth: https://dev.to/daanish2003/forgot-and-reset-password-using-betterauth-nextjs-and-resend-ilj

Email Verification Blog: https://dev.to/daanish2003/email-verification-using-betterauth-nextjs-and-resend-37gn

Email And Password with Better_Auth: https://dev.to/daanish2003/email-and-password-auth-using-betterauth-nextjs-prisma-shadcn-and-tailwindcss-hgc

OAuth Blog: https://dev.to/daanish2003/oauth-using-betterauth-nextjs-prisma-shadcn-and-tailwindcss-45bp

Better_Auth Docs: https://www.better-auth.com/

pnpm Docs: https://pnpm.io/

Docker Docs: https://docs.docker.com/

Prisma Docs: https://www.prisma.io/docs/getting-started

Shadcn Docs: https://ui.shadcn.com/

Next.js Docs: https://nextjs.org/

Tailwindcss Docs: https://tailwindcss.com/

Github repository: https://github.com/Daanish2003/better_auth_nextjs

Forgot and Reset Password using better_auth, nextjs and resend

Daanish2003 — Thu, 28 Nov 2024 12:10:17 +0000

In this blog we will dive into setting up forgot and reset password in a mordern web application. By leveraging a robust stack of tools and frameworks, you'll create a seamless and secure email verification system integrated into your full-stack application.

By the end of this guide, you'll have a functional system that allows user to create new password if they forgot their password

Tech Stack

Here’s what we’ll use:

Better_Auth v1: A lightweight, extensible TypeScript authentication library.
Next.js: A React framework for building server-rendered applications.
Prisma: A modern ORM for efficient database interaction.
Shadcn: A utility-first component library for rapid UI development.
TailwindCSS: A popular utility-first CSS framework.
Resend: A popular service for sending emails

Prerequisites

Before proceeding, ensure you have the following ready:

Node.js (LTS version) installed.
A package manager like npm, yarn, or pnpm (we'll use pnpm in this guide).
A PostgreSQL database instance (local or hosted, such as Supabase or PlanetScale).
- If you're working locally, Docker is a great way to set this up.
Familiarity with TypeScript, Next.js, and Prisma.

Cloning the Starter Project:

Note: This project is continuation of EmailPassword auth and Email verification. If want to build from stratch please visit EmailPassword blog and Email verification blog or could just clone the branch of the repository

git clone -b feat-email-verification https://github.com/Daanish2003/better_auth_nextjs.git

Navigate into the folder and install all the dependencies

pnpm install

Add .env file

# General authentication settings
BETTER_AUTH_SECRET="your-secret-key" # Replace with your own secure key or generate one using "pnpm dlx auth secret"
BETTER_AUTH_URL="http://localhost:3000" # Base URL of your app during local development
NEXT_PUBLIC_APP_URL="http://localhost:3000" # Public-facing base URL of your app
#.env
POSTGRES_PASSWORD="your-password"
POSTGRES_USER="your-username"
DATABASE_URL="postgresql://your-username:your-password@localhost:5432/mydb?schema=public"
RESEND_API_KEY="your-resend-api-key"

Run the docker if you have docker locally

docker compose up -d

Step 1: Update `auth.ts` file

Open src/lib/auth.ts and configure sendResetPassword

export const auth = betterAuth({
  // other options
  emailAndPassword: {
    enabled: true,
    autoSignIn: true,
    minPasswordLength: 8,
    maxPasswordLength: 20,
    requireEmailVerification: true,
    // it sends the reset password token using resend to your email
    sendResetPassword: async ({ user, url }) => {
      await resend.emails.send({
        from: "Acme <onboarding@resend.dev>",
        to: user.email,
        subject: "Reset your password",
        html: `Click the link to reset your password: ${url}`,
      });
    },
  },
  // other options
})

Step 2: Create Schema for validation for forgot and reset password

Create a file named forgot-password-schema.tsx inside the folder src/helpers/zod

paste the code inside the file

import { z } from "zod";

export const ForgotPasswordSchema = z.object({
    email: z
    .string() // string type
    .email({message: "Invalid type"}) // checks if the input given by the user is email
    .min(1, {message: "Email is required"}), // checks if the email field is empty or not 
})

Then create another file named reset-password-schema.tsx inside the same folder src/helpers/zod

import { z } from "zod";

export const ResetPasswordSchema = z.object({
    password: z
    .string() // check if it is string type
    .min(8, { message: "Password must be at least 8 characters long" }) // checks for character length
    .max(20, { message: "Password must be at most 20 characters long" }),
  confirmPassword: z
    .string()
    .min(8, { message: "Password must be at least 8 characters long" })
    .max(20, { message: "Password must be at most 20 characters long" }),
}).refine((data) => data.password === data.confirmPassword, {
    message: "Passwords do not match",
    path: ["confirmPassword"],

    // checks if the password and confirm password are equal
});

Step 3: Create UI components for forgot and reset password

Create a component named forgot-password.tsx inside the component folder or any other location.

Paste the code inside of it

"use client"
import { useForm } from 'react-hook-form'
import CardWrapper from '../card-wrapper'
import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from '../ui/form'
import { z } from 'zod'
import { zodResolver } from '@hookform/resolvers/zod'
import { Input } from '../ui/input'
import { Button } from '../ui/button'
import FormError from '../form-error'
import { FormSuccess } from '../form-success'
import { useAuthState } from '@/hooks/useAuthState'
import { authClient } from '@/lib/auth-client'
import { ForgotPasswordSchema } from '@/helpers/zod/forgot-password-schema'

const ForgotPassword = () => {
  const { error, success, loading, setError, setSuccess, setLoading, resetState } = useAuthState()

  const form = useForm<z.infer<typeof ForgotPasswordSchema>>({
    resolver: zodResolver(ForgotPasswordSchema),
    defaultValues: {
      email: '',
    }
  })

  const onSubmit = async (values: z.infer<typeof ForgotPasswordSchema>) => {
    try {
        // Call the authClient's forgetPassword method, passing the email and a redirect URL.
        await authClient.forgetPassword({
        email: values.email, // Email to which the reset password link should be sent.
        redirectTo: "/reset-password" // URL to redirect the user after resetting the password.
      }, {
        // Lifecycle hooks to handle different stages of the request.
        onResponse: () => {
          setLoading(false)
        },
        onRequest: () => {
          resetState()
          setLoading(true)
        },
        onSuccess: () => {
          setSuccess("Reset password link has been sent")
        },
        onError: (ctx) => {
          setError(ctx.error.message);
        },
      });

    } catch (error) { // catch the error
      console.log(error)
      setError("Something went wrong")
    }
  }

  return (
    <CardWrapper
      cardTitle='Forgot Password'
      cardDescription='Enter your email to send link to reset password'
      cardFooterDescription="Remember your password?"
      cardFooterLink='/signin'
      cardFooterLinkTitle='Signin'
    >
      <Form {...form}>
        <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
          <FormField
            control={form.control}
            name="email"
            render={({ field }) => (
              <FormItem>
                <FormLabel>Email</FormLabel>
                <FormControl>
                  <Input
                    disabled={loading}
                    type="email"
                    placeholder='example@gmail.com'
                    {...field}
                  />
                </FormControl>
                <FormMessage />
              </FormItem>
            )}
          />
          <FormError message={error} />
          <FormSuccess message={success} />
          <Button disabled={loading} type="submit" className='w-full'>Submit</Button>
        </form>
      </Form>

    </CardWrapper>
  )
}

export default ForgotPassword

Then Create an another component named reset-password.tsx inside the component folder or any other location.

Paste the code inside of it

"use client"
import React from 'react'
import { Button } from '../ui/button'
import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from '../ui/form'
import { useForm } from 'react-hook-form'
import { z } from 'zod'
import { zodResolver } from '@hookform/resolvers/zod'
import { Input } from '../ui/input'
import { useRouter } from 'next/navigation'
import CardWrapper from '../card-wrapper'
import FormError from '../form-error'
import { FormSuccess } from '../form-success'
import { ResetPasswordSchema } from '@/helpers/zod/reset-password-schema'
import { authClient } from '@/lib/auth-client'
import { useAuthState } from '@/hooks/useAuthState'

const ResetPassword = () => {
    const router = useRouter()
    const { error, success, loading, setError, setLoading, setSuccess, resetState } = useAuthState()

    const form = useForm<z.infer<typeof ResetPasswordSchema>>({
        resolver: zodResolver(ResetPasswordSchema),
        defaultValues: {
            password: '',
            confirmPassword: ''
        }
    })

    const onSubmit = async (values: z.infer<typeof ResetPasswordSchema>) => {
        try {
            // Call the authClient's reset password method, passing the email and a redirect URL.
            await authClient.resetPassword({
                newPassword: values.password, // new password given by user
            }, {
                onResponse: () => {
                    setLoading(false)
                },
                onRequest: () => {
                    resetState()
                    setLoading(true)
                },
                onSuccess: () => {
                    setSuccess("New password has been created")
                    router.replace('/signin')
                },
                onError: (ctx) => {
                    setError(ctx.error.message);
                },
            });
        } catch (error) { // catches the error
            console.log(error)
            setError("Something went wrong")
        }

    }

    return (
        <CardWrapper
            cardTitle='Reset Password'
            cardDescription='create a new password'
            cardFooterLink='/signin'
            cardFooterDescription='Remember your password?'
            cardFooterLinkTitle='Signin'
        >
            <Form {...form}>
                <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
                    <FormField
                        control={form.control}
                        name="password"
                        render={({ field }) => (
                            <FormItem>
                                <FormLabel>Password</FormLabel>
                                <FormControl>
                                    <Input
                                        disabled={loading}
                                        type="password"
                                        placeholder='************'
                                        {...field} />
                                </FormControl>
                                <FormMessage />
                            </FormItem>
                        )}
                    />
                    <FormField
                        control={form.control}
                        name="confirmPassword"
                        render={({ field }) => (
                            <FormItem>
                                <FormLabel>Confirm Password</FormLabel>
                                <FormControl>
                                    <Input
                                        disabled={loading}
                                        type="password"
                                        placeholder='*************'
                                        {...field}
                                    />
                                </FormControl>
                                <FormMessage />
                            </FormItem>
                        )}
                    />
                    <FormError message={error} />
                    <FormSuccess message={success} />
                    <Button type="submit" className="w-full" disabled={loading}>Submit</Button>
                </form>
            </Form>
        </CardWrapper>
    )
}

export default ResetPassword

Explanation:

UI and Form Utilities:
- Components like CardWrapper, Form, Input, and Button are used to construct the form UI.
- FormError and FormSuccess display error or success messages.
Form Handling:
- useForm from react-hook-form handles form state and validation.
- zodResolver integrates Zod schema validation with React Hook Form.
Authentication Utilities:
- useAuthState manages the error, success, and loading states for the authentication process.
- authClient facilitates server-side password reset requests.
Schema:
- ResetPasswordSchema and ForgotPasswordSchemadefines the expected shape of the form data (email or password) and validation rules using Zod.

Step 4: Create a `page.tsx`file for both `forgot-password` and `reset-password`

Create a folder named forgot-password and reset-password inside the src/app/(auth)/ and create page.tsx file inside of it.

Import the Forgot Password and Reset Password component

// app/(auth)/forgot-password/page.tsx
import ForgotPassword from '@/components/auth/forgot-password'
import React from 'react'

const ForgotPasswordPage = () => {
  return (
    <ForgotPassword />
  )
}

export default ForgotPasswordPage

// app/(auth)/reset-password/page.tsx
import ResetPassword from '@/components/auth/reset-password'
import React from 'react'

const ResetPasswordPage = () => {
  return (
    <ResetPassword />
  )
}

export default ResetPasswordPage

Step 4: Update `Signin`component

Open the sign-in.tsx file and then update with following code

// components/auth/sign-in.tsx
<FormField
    control={form.control}
    name="password"
    render={({ field }) => (
    <FormItem>
     <FormLabel>Password</FormLabel>
     <FormControl>
      <Input
        disabled={loading}
        type="password"
        placeholder="********"
        {...field}
         >
         </FormControl>
         <FormMessage />
         // Just add link below so user could redirect to forgot-password-url
         <Link href="/forgot-password" className="text-xs underline ml-60">
           Forgot Password?
          </Link>
                            </FormItem>
                        )}
                    />

Add the Link component below the Form Message component

Step 5: Run Your Application

Start your development server:

pnpm dev

Access your application at http://localhost:3000/forgot-password to test forgot-password.
Check your inbox for the reset-password link.
Log in at http://localhost:3000/signin once new password is created.

Final Thoughts

Congratulations! You have successfully integrating Forgot Password and Reset Password into your application, providing users with a seamless and secure authentication experience. 🎉

If you enjoyed this blog, please consider following and supporting me! Your encouragement motivates me to create more helpful content for you. 😊

Reference Links:

Email Verification Blog: https://dev.to/daanish2003/email-verification-using-betterauth-nextjs-and-resend-37gn

Email And Password with Better_Auth: https://dev.to/daanish2003/email-and-password-auth-using-betterauth-nextjs-prisma-shadcn-and-tailwindcss-hgc

OAuth Blog: https://dev.to/daanish2003/oauth-using-betterauth-nextjs-prisma-shadcn-and-tailwindcss-45bp

Better_Auth Docs: https://www.better-auth.com/

pnpm Docs: https://pnpm.io/

Docker Docs: https://docs.docker.com/

Prisma Docs: https://www.prisma.io/docs/getting-started

Shadcn Docs: https://ui.shadcn.com/

Next.js Docs: https://nextjs.org/

Tailwindcss Docs: https://tailwindcss.com/

Github repository: https://github.com/Daanish2003/better_auth_nextjs

Email verification using better_auth, nextjs and resend

Daanish2003 — Wed, 27 Nov 2024 14:42:01 +0000

In this blog, we'll dive into setting up email verification in a modern web application. By leveraging a robust stack of tools and frameworks, you'll create a seamless and secure email verification system integrated into your full-stack application.

By the end of this guide, you'll have a functional system that validates users via email before granting access to their accounts.

Tech Stack

Here’s what we’ll use:

Better_Auth v1: A lightweight, extensible TypeScript authentication library.
Next.js: A React framework for building server-rendered applications.
Prisma: A modern ORM for efficient database interaction.
Shadcn: A utility-first component library for rapid UI development.
TailwindCSS: A popular utility-first CSS framework.

Prerequisites

Before proceeding, ensure you have the following ready:

Node.js (LTS version) installed.
A package manager like npm, yarn, or pnpm (we'll use pnpm in this guide).
A PostgreSQL database instance (local or hosted, such as Supabase or PlanetScale).
- If you're working locally, Docker is a great way to set this up.
Familiarity with TypeScript, Next.js, and Prisma.

Note:

This blog is the continuation of Email and Password Auth If you want to follow along please first visit: Email and Password Auth using Better_Auth or you could clone the branch of the repository from the command below to follow along.

Clone Repo:

git clone -b feat-email-password-auth https://github.com/Daanish2003/better_auth_nextjs.git

Install Dependencies:

pnpm install

Run the docker if you have docker locally:

docker compose up -d

Step 1: Setting up `Resend` service

Resend is a service for sending transactional emails like password resets and email verifications.

Install the Resend SDK

Add the Resend package to your project:

pnpm add resend

Get Your Resend API Key

Visit Resend.
Log in or create an account.
Navigate to API Keys and create a new key.
Add the API key to your .env file:

RESEND_API_KEY=your-api-key-here

Create a Helper for Resend

Organize your code by creating a reusable helper for Resend.

Create a folder src/helpers/email/.
Add a file named resend.ts:

import { Resend } from "resend";

export const resend = new Resend(process.env.RESEND_API_KEY);

Step 2: Integrate Email verification with `Better_Auth`

Better_Auth provides native support for email verification.

Update the `auth.ts` File

Open src/lib/auth.ts and configure email verification:

// auth.ts
import prisma from "@/db";
import { resend } from "@/helpers/email/resend";
import { betterAuth } from "better-auth";
import { prismaAdapter } from "better-auth/adapters/prisma";

export const auth = betterAuth({
  appName: "better_auth_nextjs",
  database: prismaAdapter(prisma, {
    provider: "postgresql",
  }),
  emailAndPassword: {
    enabled: true,
    autoSignIn: true,
    minPasswordLength: 8,
    maxPasswordLength: 20,
    requireEmailVerification: true, //It does not allow user to login without email verification [!code highlight]
  },
emailVerification: {
    sendOnSignUp: true, // Automatically sends a verification email at signup
    autoSignInAfterVerification: true, // Automatically signIn the user after verification
    sendVerificationEmail: async ({ user, url }) => {
      await resend.emails.send({
        from: "Acme <onboarding@resend.dev>", // You could add your custom domain
        to: user.email, // email of the user to want to end
        subject: "Email Verification", // Main subject of the email
        html: `Click the link to verify your email: ${url}`, // Content of the email
        // you could also use "React:" option for sending the email template and there content to user
      });
    },
  },
// ignore this if your not adding OAuth
  socialProviders: {
    google: {
      clientId: process.env.GOOGLE_CLIENT_ID!,
      clientSecret: process.env.GOOGLE_CLIENT_SECRET!,
      redirectURI: process.env.BETTER_AUTH_URL + "/api/auth/callback/google",
    },
    github: {
      clientId: process.env.GITHUB_CLIENT_ID!,
      clientSecret: process.env.GITHUB_CLIENT_SECRET!,
      redirectURI: process.env.BETTER_AUTH_URL + "/api/auth/callback/github",
    },
  },
});

Explanation:

sendVerificationEmail: This function is triggered when email verification starts. It accepts a data object with the following properties:
- user: The user object containing the email address.
- url: The verification URL the user must click to verify their email.

Step 3: Update UI Components

To handle the email verification workflow, we’ll update the sign-in and sign-up components.

Update the `SignIn` Component

Navigate to src/components/auth/sign-in.tsx and use this code:

// components/auth/sign-in.tsx
"use client"
import React from 'react'
import CardWrapper from '../card-wrapper'
import FormError from '../form-error'
import { FormSuccess } from '../form-success'
import { FcGoogle } from 'react-icons/fc'
import SocialButton from './social-button'
import { FaGithub } from 'react-icons/fa'
import { useAuthState } from '@/hooks/useAuthState'
import LoginSchema from '@/helpers/zod/login-schema'
import { useForm } from 'react-hook-form'
import { zodResolver } from '@hookform/resolvers/zod'
import { z } from 'zod'
import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from '../ui/form'
import { Input } from '../ui/input'
import { Button } from '../ui/button'
import { signIn } from '@/lib/auth-client'
import { useRouter } from 'next/navigation'

const SignIn = () => {
    const router = useRouter()
    const { error, success, loading, setSuccess, setError, setLoading, resetState } = useAuthState();

    const form = useForm<z.infer<typeof LoginSchema>>({
        resolver: zodResolver(LoginSchema),
        defaultValues: {
            email: '',
            password: '',
        }
    })

    const onSubmit = async (values: z.infer<typeof LoginSchema>) => {
        try {
          await signIn.email({
            email: values.email,
            password: values.password
          }, {
            onResponse: () => {
              setLoading(false)
            },
            onRequest: () => {
              resetState()
              setLoading(true)
            },
            onSuccess: () => {
                setSuccess("LoggedIn successfully")
                router.replace('/')
            },
// changes were made on onError option
            onError: (ctx) => {
                /* Whenever user tried to signin but email is not verified it catches the error and display the error */
                if(ctx.error.status === 403) {
                    setError("Please verify your email address")
                }
                /* handles other error */
              setError(ctx.error.message);
            },
          });
        } catch (error) {
          console.log(error)
          setError("Something went wrong")
        }
      }

    return (
        <CardWrapper
            cardTitle='Sign In'
            cardDescription='Enter your email below to login to your account'
            cardFooterDescription="Don't have an account?"
            cardFooterLink='/signup'
            cardFooterLinkTitle='Sign up'
        >
            <Form {...form}>
                <form className='space-y-4' onSubmit={form.handleSubmit(onSubmit)}>
                    <FormField
                        control={form.control}
                        name="email"
                        render={({ field }) => (
                            <FormItem>
                                <FormLabel>Email</FormLabel>
                                <FormControl>
                                    <Input
                                        disabled={loading}
                                        type="email"
                                        placeholder='example@gmail.com'
                                        {...field}
                                    />
                                </FormControl>
                                <FormMessage />
                            </FormItem>
                        )}
                    />
                    <FormField
                        control={form.control}
                        name="password"
                        render={({ field }) => (
                            <FormItem>
                                <FormLabel>Password</FormLabel>
                                <FormControl>
                                    <Input
                                        disabled={loading}
                                        type="password"
                                        placeholder='********'
                                        {...field}
                                    />
                                </FormControl>
                                <FormMessage />
                            </FormItem>

                        )}
                    />
                    <FormError message={error} />
                    <FormSuccess message={success} />
                     // ignore this if your not adding OAuth into your app
                    <Button disabled={loading} type="submit" className='w-full'>Login</Button>
                    <div className='flex gap-x-2'>
                        <SocialButton provider="google" icon={<FcGoogle />} label="Sign in with Google" />
                        <SocialButton provider="github" icon={<FaGithub />} label="Sign in with GitHub" />
                    </div>
                </form>
            </Form>
        </CardWrapper>
    )
}

export default SignIn

Update the `SignUp` Component

Similarly, update src/components/auth/sign-up.tsx:

// components/auth/sign-up.tsx
"use client"
import React from 'react'
import CardWrapper from '../card-wrapper'
import FormError from '../form-error'
import { FormSuccess } from '../form-success'
import { FcGoogle } from 'react-icons/fc'
import SocialButton from './social-button'
import { FaGithub } from 'react-icons/fa'
import { useAuthState } from '@/hooks/useAuthState'
import { useForm } from 'react-hook-form'
import { zodResolver } from '@hookform/resolvers/zod'
import { z } from 'zod'
import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from '../ui/form'
import { Input } from '../ui/input'
import { Button } from '../ui/button'
import { SignupSchema } from '@/helpers/zod/signup-schema'
import { signUp } from '@/lib/auth-client'

const SignUp = () => {
    const { error, success, loading, setLoading, setError, setSuccess, resetState } = useAuthState();

    const form = useForm<z.infer<typeof SignupSchema>>({
        resolver: zodResolver(SignupSchema),
        defaultValues: {
            name: '',
            email: '',
            password: '',
        }
    })

    const onSubmit = async (values: z.infer<typeof SignupSchema>) => {
        try {
            await signUp.email({
                name: values.name,
                email: values.email,
                password: values.password,
                callbackURL:'/' // redirect the user after email is verified
            }, {
                onResponse: () => {
                    setLoading(false)
                },
                onRequest: () => {
                    resetState()
                    setLoading(true)
                },
                onSuccess: () => {
                    // setSuccess("User has been created")
                    // router.replace('/')
                    setSuccess("Verification link has been sent to your mail")
                },
                onError: (ctx) => {
                    setError(ctx.error.message);
                },
            });
        } catch (error) {
            console.error(error)
            setError("Something went wrong")
        }

    }

    return (
        <CardWrapper
        cardTitle='SignUp'
        cardDescription='Create an new account'
        cardFooterLink='/login'
        cardFooterDescription='Already have an account?'
        cardFooterLinkTitle='Login'
        >
            <Form {...form}>
                <form className='space-y-4' onSubmit={form.handleSubmit(onSubmit)}>
                <FormField
                        control={form.control}
                        name="name"
                        render={({ field }) => (
                            <FormItem>
                                <FormLabel>Name</FormLabel>
                                <FormControl>
                                    <Input
                                        disabled={loading}
                                        type="text"
                                        placeholder='john'
                                        {...field} />
                                </FormControl>
                                <FormMessage />
                            </FormItem>
                        )}
                    />
                    <FormField
                        control={form.control}
                        name="email"
                        render={({ field }) => (
                            <FormItem>
                                <FormLabel>Email</FormLabel>
                                <FormControl>
                                    <Input
                                        disabled={loading}
                                        type="email"
                                        placeholder='example@gmail.com'
                                        {...field}
                                    />
                                </FormControl>
                                <FormMessage />
                            </FormItem>
                        )}
                    />
                    <FormField
                        control={form.control}
                        name="password"
                        render={({ field }) => (
                            <FormItem>
                                <FormLabel>Password</FormLabel>
                                <FormControl>
                                    <Input
                                        disabled={loading}
                                        type="password"
                                        placeholder='********'
                                        {...field}
                                    />
                                </FormControl>
                                <FormMessage />
                            </FormItem>

                        )}
                    />
                    <FormError message={error} />
                    <FormSuccess message={success} />
                     //ignore this if your not adding Oauth
                    <Button disabled={loading} type="submit" className='w-full'>Submit</Button>
                    <div className='flex gap-x-2'>
                        <SocialButton provider="google" icon={<FcGoogle />} label="Sign in with Google" />
                        <SocialButton provider="github" icon={<FaGithub />} label="Sign in with GitHub" />
                    </div>
                </form>
            </Form>
        </CardWrapper>
    )
}

export default SignUp

Step 4: Run Your Application

Start your development server:

pnpm dev

Access your application at http://localhost:3000/signup to test sign-up.
Check your inbox for the verification email.
Log in at http://localhost:3000/signin once verified.

Final Thoughts

Congratulations! You have successfully integrated Email verification into your application, providing users with a seamless and secure authentication experience. 🎉

If you enjoyed this blog, please consider following and supporting me! Your encouragement motivates me to create more helpful content for you. 😊

Reference Links:

Email And Password with Better_Auth: https://dev.to/daanish2003/email-and-password-auth-using-betterauth-nextjs-prisma-shadcn-and-tailwindcss-hgc

OAuth Blog: https://dev.to/daanish2003/oauth-using-betterauth-nextjs-prisma-shadcn-and-tailwindcss-45bp

Better_Auth Docs: https://www.better-auth.com/

pnpm Docs: https://pnpm.io/

Docker Docs: https://docs.docker.com/

Prisma Docs: https://www.prisma.io/docs/getting-started

Shadcn Docs: https://ui.shadcn.com/

Next.js Docs: https://nextjs.org/

Tailwindcss Docs: https://tailwindcss.com/

Github repository: https://github.com/Daanish2003/better_auth_nextjs

Email and Password auth using Better_Auth, nextjs, prisma, shadcn and tailwindcss

Daanish2003 — Tue, 26 Nov 2024 13:11:52 +0000

In this blog post, we'll explore how to set up email and password authentication in a modern web application using a powerful stack that ensures efficiency, scalability, and developer productivity. By the end, you'll have a working email and password system integrated into a full-stack application.

Tech Stack:

Better_Auth v1: A lightweight and extensible authentication library for TypeScript.
Next.js: A React framework for building server-rendered web applications.
Prisma: A modern ORM for database management.
Shadcn: A utility-first component library.
TailwindCSS: A popular utility-first CSS framework.

Prerequisites:

Before we begin, make sure you have the following tools installed:

Node.js (LTS version)
npm, yarn, or pnpm (package managers)
A PostgreSQL database instance (local or hosted, such as Supabase or PlanetScale). I'll be using Docker for local development
Basic knowledge of TypeScript, Next.js, and Prisma.

Step 1: Setting up your Next.js project

Create a New Project Directory:

Begin by creating a folder for your project and navigating into it via the terminal. Use the following commands:

mkdir better_auth_nextjs_oauth
cd better_auth_nextjs_oauth

Install Next.js in the Directory:

Initialize a new Next.js project within the folder using the command below. You can use your preferred package manager (e.g., npm, yarn, or pnpm). For this guide, we'll use pnpm.

pnpx create-next-app@latest .

💡Tip: If you don't have pnpm installed, visit pnpm.io and follow the instructions for your operating system.

Configure the Project Options:

Follow the prompts displayed in the terminal to configure your project. You will be asked to make selections such as enabling TypeScript, which is recommended for better type safety and development experience.

Use the arrow keys to navigate through the options and choose according to your preferences.

Step 2: Installing Dependencies

Install the necessary packages for the tech stack by running the following commands:

pnpm add better-auth@latest
pnpm add -D prisma
pnpm add @prisma/client
pnpm install react-icons --save
pnpm add oslo
pnpm add zod

To install shadcn-ui, a utility-first component library, run the following command:

pnpm dlx shadcn@latest init

This will set up shadcn-ui in your project, allowing you to start using its components right away.

When prompted, choose from the available options to customize your shadcn-ui setup. Follow the instructions in the terminal to select the components and configurations that best suit your project needs.

To add reusable components from shadcn-ui, you can use the following command:

pnpx shadcn@latest add button card form input label

Step 3: Setting Up the Database (Local or Cloud)

Option 1: Local Development with Docker:

💡Tip: If you're using a cloud-based database provider like Neon or PlanetScale, you can skip this step and proceed to configure your database connection directly through their provided URLs.

Create a `docker-compose.yml` File

To set up a PostgreSQL database using Docker, create a docker-compose.yml file in your project’s root directory. This file will define the configuration for your database container.

Here's an example configuration for the docker-compose.yml file:

# docker-compose.yml
version: '3.9'
services:
  db:
    container_name: BETTER_AUTH_NEXTJS_OAUTH
    image: postgres:17-alpine
    restart: always
    ports:
      - 5432:5432
    volumes:
      - postgres-data:/var/lib/postgresql/data
    environment:
      - POSTGRES_PASSWORD=${POSTGRES_PASSWORD}
      - POSTGRES_USER=${POSTGRES_USER}
      - POSTGRES_DB=OAUTH
volumes:
  postgres-data:

This configuration sets up a PostgreSQL container with a persistent volume and environment variables for your database credentials.

Set Up Environment Variables for the Database

Create a .env file in the root of your project and define the necessary environment variables for your database connection. Here's an example configuration:

//.env
POSTGRES_PASSWORD="your_password_here"
POSTGRES_USER="your_username_here"
DATABASE_URL="postgresql://your_username_here:your_password_here@localhost:5432/mydb?schema=public"

Replace your_password_here and your_username_here with your own PostgreSQL credentials.
DATABASE_URL should point to your local database or a cloud database if you are using a provider.

Run the Docker Container

Once you’ve configured the docker-compose.yml file and set up the environment variables, you can start the Docker container by running the following command:

docker compose up -d

This command will start the PostgreSQL container in detached mode (-d), ensuring your database is up and running in the background. You can now proceed with the rest of the setup in your Next.js application.

If you ever need to stop the container, you can use:

docker compose down

Option 2: Using a Hosted Database

If you're using a cloud database provider (such as Neon, PlanetScale, or others), you can skip the local Docker setup. Instead, simply copy the provided Database URL from your cloud provider and add it to your .env file.

For example:

# .env
DATABASE_URL="postgresql://username:password@host:port/database_name?sslmode=require"

Ensure that the DATABASE_URL contains the correct connection details such as your:

username
password
host (database server URL)
port (usually 5432 for PostgreSQL)
database_name

Once you've added the correct URL, your application will be able to connect to the hosted database seamlessly.

Step 4: Setting Up Prisma

Initialize Prisma CLI

This will create a new prisma folder in your project, containing the schema.prisma file and configuration for Prisma.

pnpm dlx prisma init

This will create a new prisma folder in your project, containing the schema.prisma file and configuration for Prisma.

Configure the Database Connection:

Open the prisma/schema.prisma file and ensure that the DATABASE_URL points to your PostgreSQL database. It should look something like this:

datasource db {
  provider = "postgresql"
  url      = env("DATABASE_URL")
}

generator client {
  provider = "prisma-client-js"
}

Prisma will automatically read the DATABASE_URL from your .env file.

Create a Database Folder

Inside the src directory of your project, create a folder named db. This will house all database-related files.

Create a Database Client File

Inside the db folder, create a file named index.ts. Add the following code to configure and export a singleton instance of the Prisma Client:

// src/db/index.ts
import { PrismaClient } from '@prisma/client'

const prismaClientSingleton = () => {
  return new PrismaClient()
}

declare const globalThis: {
  prismaGlobal: ReturnType<typeof prismaClientSingleton>;
} & typeof global;

const prisma = globalThis.prismaGlobal ?? prismaClientSingleton()

export default prisma

if (process.env.NODE_ENV !== 'production') globalThis.prismaGlobal = prisma

Create Schema for auth

In this step, you'll define a database schema to manage authentication-related data, such as users, sessions, accounts, and verification tokens.

Open the prisma/schema.prisma file in your project.
Replace its contents with the following schema:

// prisma/schema.prisma
generator client {
  provider = "prisma-client-js"
}

datasource db {
  provider = "postgresql"
  url      = env("DATABASE_URL")
}

model User {
  id               String    @id @default(cuid())
  name             String
  email            String
  emailVerified    Boolean   @default(false)
  image            String?
  createdAt        DateTime  @default(now())
  updatedAt        DateTime  @updatedAt
  twoFactorEnabled Boolean   @default(false)
  Session          Session[]
  Account          Account[]

  @@unique([email])
  @@map("user")
}

model Session {
  id        String   @id @default(cuid())
  expiresAt DateTime
  token     String   @unique
  ipAddress String?
  userAgent String?
  userId    String
  user      User     @relation(fields: [userId], references: [id], onDelete: Cascade)
  createdAt DateTime @default(now())
  updatedAt DateTime @updatedAt

  @@map("session")
}

model Account {
  id           String    @id @default(cuid())
  accountId    String
  providerId   String
  userId       String
  user         User      @relation(fields: [userId], references: [id], onDelete: Cascade)
  accessToken  String?
  refreshToken String?
  idToken      String?
  expiresAt    DateTime?
  password     String?
  createdAt    DateTime  @default(now())
  updatedAt    DateTime  @updatedAt

  accessTokenExpiresAt  DateTime?
  refreshTokenExpiresAt DateTime?
  scope                 String?

  @@map("account")
}

model Verification {
  id         String    @id @default(cuid())
  identifier String
  value      String
  expiresAt  DateTime
  createdAt  DateTime? @default(now())
  updatedAt  DateTime? @updatedAt

  @@map("verification")
}

Explanation of the Schema

User: Contains basic user information and manages relationships to Account and Session models.
Session: Tracks user sessions, including tokens, IP addresses, and user agents.
Account: Manages linked OAuth accounts for third-party login providers such as Google or GitHub.
Verification: Handles email or token-based verification (e.g., passwordless login or two-factor authentication).

Generate and Migrate the Prisma Schema

After defining your models in the schema.prisma file, you need to generate the Prisma client and apply the database migrations.

Generate Prisma Client

First, generate the Prisma Client, which provides an API to interact with your database:

pnpx prisma generate

This will generate the necessary client files for accessing the database from your application.

Run Migrations

Apply the migrations to your database by running the following command:

pnpx prisma migrate dev --name auth

This will apply the migration to your database and generate the required tables (e.g., for User, Session, Account, etc.).

Once this setup is complete, Prisma will be ready to use for querying your database in your application.

Step-4: Integrate Better_Auth

Setting Up Environment Variables:

Add the following configuration to your .env file to provide the necessary environment variables for authentication:

# General authentication settings
BETTER_AUTH_SECRET="your-secret-key" # Replace with your own secure key or generate one using "pnpm dlx auth secret"
BETTER_AUTH_URL="http://localhost:3000" # Base URL of your app during local development
NEXT_PUBLIC_APP_URL="http://localhost:3000" # Public-facing base URL of your app

Explanation:

BETTER_AUTH_SECRET: A secret key used by Better_Auth for signing JWTs. You can generate one using pnpm dlx auth secret.
BETTER_AUTH_URL: The base URL for your application (used for redirecting after authentication).
NEXT_PUBLIC_APP_URL: The public URL of your app, which is used for client-side requests.

Setting Up the Authentication Configuration:

Create the auth.ts File

Inside the lib folder of your project, create a file named auth.ts. This file will contain the configuration for Better_Auth.

Add the Following Code

Copy and paste the code below into the auth.ts file:

// auth.ts
import prisma from '@/db';
import {
    betterAuth
} from 'better-auth';
import { prismaAdapter } from 'better-auth/adapters/prisma';

export const auth = betterAuth({
    appName: "better_auth_nextjs",
    database: prismaAdapter(prisma, {
        provider: "postgresql"
    }),
    emailAndPassword: {
        enabled: true,
        autoSignIn: true,
        minPasswordLength: 8,
        maxPasswordLength: 20,
    },
});

Explanation of the Code:

betterAuth: Initializes the authentication library with the following parameters:
appName: Specifies the name of your application. In this case, it is "better_auth_nextjs". This name might be used in logs or display contexts.
database: Connects the Prisma adapter to the PostgreSQL database configured in your Prisma setup. It uses the prismaAdapter method, which links better-auth to your Prisma client (prisma) and ensures it works seamlessly with the PostgreSQL database defined in your .env file.
emailAndPassword: Configures email-and-password authentication with the following settings:
- enabled: true: Enables email-and-password as an authentication method.
- autoSignIn: true: Automatically login the user in after signup.
- minPasswordLength: Sets the minimum password length to 8 characters for added security.
- maxPasswordLength: Sets the maximum password length to 20 characters to avoid excessively long passwords.

Setting Up the Authentication Client

Create the auth-client.ts File

Inside the lib folder, create a new file named auth-client.ts. This file will manage client-side authentication interactions.
Add the Following Code

Paste the code below into the newly created file:

// src/lib/auth-client.ts
import {
    createAuthClient
} from "better-auth/react";

export const authClient = createAuthClient({
    baseURL: process.env.NEXT_PUBLIC_APP_URL,

})

export const {
    signIn,
    signOut,
    signUp,
    useSession
} = authClient;

createAuthClient:
- This function initializes the client-side authentication logic using Better_Auth.
- The baseURL is sourced from the NEXT_PUBLIC_APP_URL environment variable, ensuring compatibility with both local and production environments.
Exported Methods:
- signIn: Initiates the sign-in process for users.
- signOut: Logs the user out.
- signUp: Handles user registration.
- useSession: Retrieves and manages the current user's authentication session.
💡Why This File is Important

The auth-client.ts file abstracts client-side authentication functions, making them reusable and straightforward to integrate into React components. By centralizing the authentication logic, you maintain cleaner code and enhance the maintainability of your project.

Creating an API Route Handler for Authentication

To handle authentication API requests, you'll need to set up a route handler in your application. This will process all requests directed to the /api/auth/* endpoint (or any custom base path you configure).

Create the Route Handler

In your framework's designated directory for API routes (e.g., /app/api/auth for Next.js), create a catch-all route handler to manage authentication requests.
Add the Following Code

For a Next.js application, create a file named route.ts inside the /app/api/auth/[...all] directory and paste the following code:

// /app/api/auth/[...all]/route.ts
import { auth } from "@/lib/auth"; // path to your auth file
import { toNextJsHandler } from "better-auth/next-js";

export const { POST, GET } = toNextJsHandler(auth);

Explanation:

toNextJsHandler:
- Converts the Better_Auth configuration into route handlers compatible with Next.js.
- Automatically sets up handlers for the HTTP methods (e.g., POST and GET) required for authentication.
Catch-All Route (/api/auth/*):
- Ensures that all authentication-related requests (e.g., sign-in, callbacks) are routed through this handler.
- This centralizes your authentication logic for better maintainability.

💡Why This Setup is Necessary

By creating this route handler:

You streamline the handling of authentication-related API requests.
The /api/auth/* endpoint acts as a dedicated entry point for Better_Auth to manage user sessions, social logins, and other auth operations.

Step 5: Create Sign-In Component

Create a Reusable `CardWrapper` Component

To improve modularity and reusability, let's create a CardWrapper component. This component will wrap content inside a styled card layout, making it easy to display various types of content consistently throughout the app.

Here’s the improved version of the CardWrapper component:

// src/components/card-wrapper.tsx
import React from 'react';
import {
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from './ui/card';
import Link from 'next/link';

interface CardWrapperType {
  children: React.ReactNode;
  cardTitle: string;
  cardDescription: string;
  cardFooterLinkTitle?: string;
  cardFooterDescription?: string;
  cardFooterLink?: string;
  className?: string;
}

const CardWrapper = ({
  children,
  cardTitle,
  cardDescription,
  cardFooterLinkTitle = 'Learn More', // Default value
  cardFooterDescription = '',
  cardFooterLink,
  className = '',
}: CardWrapperType) => {
  return (
    <Card className={`w-[400px] relative ${className}`}>
      <CardHeader>
        <CardTitle>{cardTitle}</CardTitle>
        <CardDescription>{cardDescription}</CardDescription>
      </CardHeader>
      <CardContent>{children}</CardContent>
      {cardFooterLink && (
        <CardFooter className="flex items-center justify-center gap-x-1">
          {cardFooterDescription && <span>{cardFooterDescription}</span>}
          <Link href={cardFooterLink} className="underline text-blue-500 hover:text-blue-700">
            {cardFooterLinkTitle}
          </Link>
        </CardFooter>
      )}
    </Card>
  );
};

export default CardWrapper;

Explanation:

Component Structure:
- children: This is the content that will be rendered inside the card.
- cardTitle: The title of the card, which will be prominently displayed at the top.
- cardDescription: A brief description under the title that provides more context for the card.
- cardFooterLink : This is a link for navigating to different page
- cardFooterDescription : A brief description of footer
- cardFooterLinkTitle : Title for footer link
Styling:
- The Card container has utility classes like w-full, max-w-md, mx-auto, bg-white, rounded-lg, and shadow-md to control the width, margin, background color, border radius, and shadow of the card. This ensures the card looks well-aligned, centered, and visually distinct.
- Inside the card header, the CardTitle and CardDescription have additional styling for text size, weight, and color to improve readability and contrast.
Modularity:
- By separating the card layout into its own reusable component (CardWrapper), it becomes easy to reuse this structure throughout the app wherever you need a card with a title and description. This promotes consistency in the design and reduces code duplication.

Create `FormError` and `FormSuccess` Components:

To improve error and success message handling in forms, let's create reusable components for displaying error and success messages.

FormError Component:

The `FormError` component will display error messages with an icon and a      styled container to alert the user.

// app/components/form-error.tsx
import React from 'react'
import { AiFillExclamationCircle } from "react-icons/ai";

type FormErrorProps = {
    message?: string
}

const FormError = ({message}: FormErrorProps) => {
    if (!message) return null
  return (
    <div className="bg-destructive/15 p-3 rounded-md flex items-center gap-x-2 text-sm text-destructive">
        <AiFillExclamationCircle className='w-4 h-4'/>
        {message}
    </div>
  )
}

export default FormError

Explanation:

Props:
- message: A string containing the error message that will be displayed. If no message is provided, the component returns null.
Styling:
- bg-red-100: Light red background for the error message.
- text-red-600: Red text color for visibility and to emphasize the error.
- p-3: Padding inside the message box.
- rounded-md: Rounded corners for a smooth appearance.
- flex items-center gap-x-2: A flex container with horizontal spacing between the icon and the message text.
- The AiFillExclamationCircle icon is used to represent the error visually.
FormSuccess Component:

The FormSuccess component is similar to the FormError, but it's used for success messages.

// app/components/form-success.tsx
import React from 'react'
import { AiFillExclamationCircle } from "react-icons/ai";

type FormErrorProps = {
    message?: string
}

const FormError = ({message}: FormErrorProps) => {
    if (!message) return null
  return (
    <div className="bg-destructive/15 p-3 rounded-md flex items-center gap-x-2 text-sm text-destructive">
        <AiFillExclamationCircle className='w-4 h-4'/>
        {message}
    </div>
  )
}

export default FormError

Explanation:

Props:
- message: A string containing the success message to be displayed. If no message is provided, the component returns null.
Styling:
- bg-green-100: Light green background to indicate success.
- text-green-600: Green text color to match the success color scheme.
- p-3: Padding inside the message box for better spacing.
- rounded-md: Rounded corners for a sleek and modern design.
- flex items-center gap-x-2: Flexbox container with horizontal spacing between the success icon and message text.
- The AiFillCheckCircle icon represents a successful action.

Create the `useAuthState.ts`Hook file

Inside the src folder, create a new folder named hooks and inside hooks folder create a new file named useAuthState.ts . This file contain the hooks which is responsible for handling error, success and loading state and message

import { useState } from 'react';

export const useAuthState = () => {
  const [error, setError] = useState('');
  const [success, setSuccess] = useState('');
  const [loading, setLoading] = useState(false);

  const resetState = () => {
    setError('');
    setSuccess('');
    setLoading(false);
  };

  return { error, setError, success, setSuccess, loading, setLoading, resetState };
};

Explanation:
The useState hook from React is used to manage the component's state variables. Each state variable (e.g., error, success, loading) will be used to track a specific part of the authentication process.

error: Stores error messages (if any) during the authentication process.
- Initial Value: '' (empty string), meaning no error by default.
- Function: setError updates the error message.
success: Stores success messages when an authentication process completes successfully.
- Initial Value: '' (empty string), meaning no success message by default.
- Function: setSuccess updates the success message.
loading: Indicates whether an authentication process (e.g., login, signup) is ongoing.
- Initial Value: false, meaning the process is not loading by default.
- Function: setLoading updates the loading state.
Purpose: Resets all three states (error, success, and loading) to their initial values.
- setError(''): Clears the error message.
- setSuccess(''): Clears the success message.
- setLoading(false): Sets the loading state to false.
Use Case: Typically used to clear all messages and reset the loading state when starting a new authentication flow or when leaving the authentication page.

Create zod scheme for `signin` and `signup`

Inside the srcfolder, create a new folders helpers/zod and then create a new files named signup-schema.tsx and login-schema.tsx .This file is responsible for type check the input values given by the user. If user sends invalid field type it returns the error message.

// src/helpers/zod/signup-schema.ts
import { z } from "zod";
export const SignupSchema = z
  .object({
    name: z
      .string()
      .min(2, { message: "Minimum 2 characters are required" })
      .max(20, { message: "Maximum of 20 characters are allowed" }),
    email: z
      .string()
      .email({ message: "Invalid email address" })
      .min(1, { message: "Email is required" }),
    password: z
      .string()
      .min(8, { message: "Password must be at least 6 characters long" })
      .max(20, { message: "Password must be at most 20 characters long" }),
  })

// src/helpers/zod/login-schema.ts
import { z } from "zod";

const LoginSchema = z.object({
    email: z
    .string()
    .email({message: "Invalid email"})
    .min(1, {message: "Email is required"}),
    password: z
    .string()
    .min(8, {message: "Password must be at least 8 characters long"})
    .max(20, {message: "Password must be at most 20 characters long"}),
})

export default LoginSchema

Explanation:
This imports the z object from the zod library, which provides methods for defining and validating schemas.

name Field
Type: A string. Ensures the name field is a string.
Minimum Length: min(2), meaning the name must have at least 2 characters.
- Custom error message: "Minimum 2 characters are required".
Maximum Length: max(20), meaning the name can have at most 20 characters.
- Custom error message: "Maximum of 20 characters are allowed".
email Field
Type: A string. Ensures the email field is a string.
Email Format: .email(), validates that the string is a properly formatted email address.
- Custom error message: "Invalid email address".
Non-Empty: .min(1), ensures the email field is not empty.
- Custom error message: "Email is required".
password Field
Type: A string. Ensures the password field is a string.
Minimum Length: min(6), enforces a minimum password length of 6 characters.
- Custom error message: "Password must be at least 6 characters long".
Maximum Length: max(64), enforces a maximum password length of 64 characters.
- Custom error message: "Password must be at most 64 characters long".

Create the `sign-in.tsx` file

Inside the components/auth folder, create a new file named sign-in.tsx. This file will contain the component responsible for rendering the sign-in UI and handling the authentication logic.

Here's how to structure your component:

// components/auth/sign-in.tsx
"use client"
import React from 'react'
import CardWrapper from '../card-wrapper'
import FormError from '../form-error'
import { FormSuccess } from '../form-success'
import { FcGoogle } from 'react-icons/fc'
import SocialButton from './social-button'
import { FaGithub } from 'react-icons/fa'
import { useAuthState } from '@/hooks/useAuthState'
import LoginSchema from '@/helpers/zod/login-schema'
import { useForm } from 'react-hook-form'
import { zodResolver } from '@hookform/resolvers/zod'
import { z } from 'zod'
import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from '../ui/form'
import { Input } from '../ui/input'
import { Button } from '../ui/button'
import { signIn } from '@/lib/auth-client'
import { useRouter } from 'next/navigation'

const SignIn = () => {
    const router = useRouter()
    const { error, success, loading, setSuccess, setError, setLoading, resetState } = useAuthState();

    const form = useForm<z.infer<typeof LoginSchema>>({
        resolver: zodResolver(LoginSchema),
        defaultValues: {
            email: '',
            password: '',
        }
    })

    const onSubmit = async (values: z.infer<typeof LoginSchema>) => {
        try {
          await signIn.email({
            email: values.email,
            password: values.password
          }, {
            onResponse: () => {
              setLoading(false)
            },
            onRequest: () => {
              resetState()
              setLoading(true)
            },
            onSuccess: (ctx) => {
                setSuccess("LoggedIn successfully")
                router.replace('/')
            },
            onError: (ctx) => {
              setError(ctx.error.message);
            },
          });
        } catch (error) {
          console.log(error)
          setError("Something went wrong")
        }
      }

    return (
        <CardWrapper
            cardTitle='Sign In'
            cardDescription='Enter your email below to login to your account'
            cardFooterDescription="Don't have an account?"
            cardFooterLink='/signup'
            cardFooterLinkTitle='Sign up'
        >
            <Form {...form}>
                <form className='space-y-4' onSubmit={form.handleSubmit(onSubmit)}>
                    <FormField
                        control={form.control}
                        name="email"
                        render={({ field }) => (
                            <FormItem>
                                <FormLabel>Email</FormLabel>
                                <FormControl>
                                    <Input
                                        disabled={loading}
                                        type="email"
                                        placeholder='example@gmail.com'
                                        {...field}
                                    />
                                </FormControl>
                                <FormMessage />
                            </FormItem>
                        )}
                    />
                    <FormField
                        control={form.control}
                        name="password"
                        render={({ field }) => (
                            <FormItem>
                                <FormLabel>Password</FormLabel>
                                <FormControl>
                                    <Input
                                        disabled={loading}
                                        type="password"
                                        placeholder='********'
                                        {...field}
                                    />
                                </FormControl>
                                <FormMessage />
                            </FormItem>

                        )}
                    />
                    <FormError message={error} />
                    <FormSuccess message={success} />
                    <Button disabled={loading} type="submit" className='w-full'>Login</Button>
                </form>
            </Form>
        </CardWrapper>
    )
}

export default SignIn

Explanation:

State management: The component uses useAuthState for managing error, success, and loading states.
Email and Password sign-in: The onSubmit functions handle authentication with Email and Password respectively. They use the signIn.email method from the auth-client.ts file.
React Hook Form: It uses this library to handler the form check the types using zod
Form feedback: FormError and FormSuccess components display any errors or success messages during the sign-in process.
UI: The Button component is used to create sign-in buttons for GitHub and Google. The buttons are disabled while the sign-in process is in progress

This component will handle the authentication process and provide users with an interface to sign in using their Email and Password.

Create the `sign-up.tsx` file

Inside the components/auth folder, create a new file named sign-up.tsx. This file will contain the component responsible for rendering the sign-up UI and handling the authentication logic.

Here's how to structure your component:

// src/components/auth/sign-up.tsx
// components/auth/sign-up.tsx
"use client"
import React from 'react'
import CardWrapper from '../card-wrapper'
import FormError from '../form-error'
import { FormSuccess } from '../form-success'
import { FcGoogle } from 'react-icons/fc'
import SocialButton from './social-button'
import { FaGithub } from 'react-icons/fa'
import { useAuthState } from '@/hooks/useAuthState'
import { useForm } from 'react-hook-form'
import { zodResolver } from '@hookform/resolvers/zod'
import { z } from 'zod'
import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from '../ui/form'
import { Input } from '../ui/input'
import { Button } from '../ui/button'
import { SignupSchema } from '@/helpers/zod/signup-schema'
import { signUp } from '@/lib/auth-client'
import { useRouter } from 'next/navigation'

const SignUp = () => {
    const router = useRouter()
    const { error, success, loading, setLoading, setError, setSuccess, resetState } = useAuthState();

    const form = useForm<z.infer<typeof SignupSchema>>({
        resolver: zodResolver(SignupSchema),
        defaultValues: {
            name: '',
            email: '',
            password: '',
        }
    })

    const onSubmit = async (values: z.infer<typeof SignupSchema>) => {
        try {
            await signUp.email({
                name: values.name,
                email: values.email,
                password: values.password,
            }, {
                onResponse: () => {
                    setLoading(false)
                },
                onRequest: () => {
                    resetState()
                    setLoading(true)
                },
                onSuccess: () => {
                    setSuccess("User has been created")
                    router.replace('/')
                },
                onError: (ctx) => {
                    setError(ctx.error.message);
                },
            });
        } catch (error) {
            console.error(error)
            setError("Something went wrong")
        }

    }

    return (
        <CardWrapper
        cardTitle='SignUp'
        cardDescription='Create an new account'
        cardFooterLink='/login'
        cardFooterDescription='Already have an account?'
        cardFooterLinkTitle='Login'
        >
            <Form {...form}>
                <form className='space-y-4' onSubmit={form.handleSubmit(onSubmit)}>
                <FormField
                        control={form.control}
                        name="name"
                        render={({ field }) => (
                            <FormItem>
                                <FormLabel>Name</FormLabel>
                                <FormControl>
                                    <Input
                                        disabled={loading}
                                        type="text"
                                        placeholder='john'
                                        {...field} />
                                </FormControl>
                                <FormMessage />
                            </FormItem>
                        )}
                    />
                    <FormField
                        control={form.control}
                        name="email"
                        render={({ field }) => (
                            <FormItem>
                                <FormLabel>Email</FormLabel>
                                <FormControl>
                                    <Input
                                        disabled={loading}
                                        type="email"
                                        placeholder='example@gmail.com'
                                        {...field}
                                    />
                                </FormControl>
                                <FormMessage />
                            </FormItem>
                        )}
                    />
                    <FormField
                        control={form.control}
                        name="password"
                        render={({ field }) => (
                            <FormItem>
                                <FormLabel>Password</FormLabel>
                                <FormControl>
                                    <Input
                                        disabled={loading}
                                        type="password"
                                        placeholder='********'
                                        {...field}
                                    />
                                </FormControl>
                                <FormMessage />
                            </FormItem>

                        )}
                    />
                    <FormError message={error} />
                    <FormSuccess message={success} />
                    <Button disabled={loading} type="submit" className='w-full'>Submit</Button>
                 </form>
            </Form>
        </CardWrapper>
    )
}

export default SignUp

Explanation:

State management: The component uses useAuthState for managing error, success, and loading states.
Email and Password sign-up: The onSubmit functions handle authentication with Email and Password respectively and creates new user in database. They use the signIn.email method from the auth-client.ts file.
React Hook Form: It uses this library to handler the form check the types using zod
Form feedback: FormError and FormSuccess components display any errors or success messages during the sign-in process.
UI: The Button component is used to create sign-in buttons for GitHub and Google. The buttons are disabled while the sign-in process is in progress

This component will handle the authentication process and provide users with an interface to sign in using their Email and Password.

Create `Signout` Button

Inside the src/components/auth folder, create a new file named sign-out.tsx .This file will contain the component responsible for rendering the sign-out user from the app.

"use client"
import React from 'react'
import { Button } from '../ui/button'
import { signOut } from '@/lib/auth-client'
import { useRouter } from 'next/navigation'

const SignOut = () => {
    const router = useRouter()
  return (
    <Button
    onClick={async() => {await signOut({
      fetchOptions: {
        onSuccess: () => {
          router.push("/signin")
        }
      }
    })}}
    >Logout</Button>
  )
}

export default SignOut

Explanation:
The SignOut component provides a simple button for users to log out of their account. It uses an asynchronous function to handle the sign-out process and redirects users to the sign-in page upon successful logout.

Create `page.tsx` and `layout.tsx` for signup and signin page

Create (auth) folder inside the src/app folder and then create a layout.tsx file , signupfolder and signin folder, and then create a page.tsxfile inside the both the folders.

// src/app/(auth)/layout.tsx
import React from 'react'

const AuthLayout = ({children}: {children: React.ReactNode}) => {
  return (
    <div className='flex items-center justify-center w-screen h-screen'>{children}</div>
  )
}

export default AuthLayout

Layout Component: The AuthLayout component wraps the entire sign-in page content (children). This layout is useful for organizing the structure of the page and allows for consistent styling and placement of content.

// /app/(auth)/signin/page.tsx
import SignIn from '@/components/auth/sign-in'
import React from 'react'

const SignInPage = () => {
  return (
    <SignIn />
  )
}

export default SignInPage

The SignIn component from components/auth/sign-in is imported and used to display the sign-in form.

// /app/(auth)/signup/page.tsx
import SignUp from '@/components/auth/sign-up'
import React from 'react'

const SignupPage = () => {
  return (
    <SignUp />
  )
}

export default SignupPage

The SignUp component from components/auth/sign-up is imported and used to display the sign-in form.

// src/app/page.tsx
import SignOut from "@/components/auth/sign-out";

export default function Home() {
  return (
    <SignOut />
  );
}

The SignOut component from components/auth/sign-out is imported and used to display the sign-in form.

Step 6 - Run the Application:

To start your development server and preview your application:

Open your terminal and navigate to your project directory.
Run the following command:

pnpm dev

This command will launch the development server and make your application accessible at http://localhost:3000 by default. You can now test and view your application in the browser.

Once the development server is running, visit the following URL in your browser to access the sign-in page:

http://localhost:3000/signin

This will load the sign-in page of your application, where you can test the OAuth authentication flow.

http://localhost:3000/signup

Congratulations! You have successfully integrated OAuth login into your application, providing users with a seamless and secure authentication experience. 🎉

If you enjoyed this blog, please consider following and supporting me! Your encouragement motivates me to create more helpful content for you. 😊

Reference Links:

OAuth Blog: https://dev.to/daanish2003/oauth-using-betterauth-nextjs-prisma-shadcn-and-tailwindcss-45bp

Better_Auth Docs: https://www.better-auth.com/

pnpm Docs: https://pnpm.io/

Docker Docs: https://docs.docker.com/

Prisma Docs: https://www.prisma.io/docs/getting-started

Shadcn Docs: https://ui.shadcn.com/

Next.js Docs: https://nextjs.org/

Tailwindcss Docs: https://tailwindcss.com/

Github repository: https://github.com/Daanish2003/better_auth_nextjs

OAuth using Better_Auth, nextjs, prisma, shadcn and tailwindcss

Daanish2003 — Mon, 25 Nov 2024 15:53:27 +0000

In this blog post, we'll explore how to set up OAuth authentication in a modern web application using a powerful stack that ensures efficiency, scalability, and developer productivity. By the end, you'll have a working OAuth system integrated into a full-stack application.

Tech Stack:

Better_Auth v1: A lightweight and extensible authentication library for TypeScript.
Next.js: A React framework for building server-rendered web applications.
Prisma: A modern ORM for database management.
Shadcn: A utility-first component library.
TailwindCSS: A popular utility-first CSS framework.

Prerequisites:

Before we begin, make sure you have the following tools installed:

Node.js (LTS version)
npm, yarn, or pnpm (package managers)
A PostgreSQL database instance (local or hosted, such as Supabase or PlanetScale). I'll be using Docker for local development
Basic knowledge of TypeScript, Next.js, and Prisma.

Step 1: Setting up your Next.js project

Create a New Project Directory:

Begin by creating a folder for your project and navigating into it via the terminal. Use the following commands:

mkdir better_auth_nextjs_oauth
cd better_auth_nextjs_oauth

Install Next.js in the Directory:

Initialize a new Next.js project within the folder using the command below. You can use your preferred package manager (e.g., npm, yarn, or pnpm). For this guide, we'll use pnpm.

pnpx create-next-app@latest .

💡Tip: If you don't have pnpm installed, visit pnpm.io and follow the instructions for your operating system.

Configure the Project Options:

Use the arrow keys to navigate through the options and choose according to your preferences.

Step 2: Installing Dependencies

Install the necessary packages for the tech stack by running the following commands:

pnpm add better-auth@latest
pnpm add -D prisma
pnpm add @prisma/client
pnpm install react-icons --save
pnpm add oslo

To install shadcn-ui, a utility-first component library, run the following command:

pnpm dlx shadcn@latest init

This will set up shadcn-ui in your project, allowing you to start using its components right away.

![Image description]](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x3l4jss12ft95ieuoef2.png)
To add reusable components from shadcn-ui, you can use the following command:

pnpx shadcn@latest add button card

Step 3: Setting Up the Database (Local or Cloud)

Option 1: Local Development with Docker:

💡Tip: If you're using a cloud-based database provider like Neon or PlanetScale, you can skip this step and proceed to configure your database connection directly through their provided URLs.

Create a `docker-compose.yml` File

To set up a PostgreSQL database using Docker, create a docker-compose.yml file in your project’s root directory. This file will define the configuration for your database container.

Here's an example configuration for the docker-compose.yml file:

# docker-compose.yml
version: '3.9'
services:
  db:
    container_name: BETTER_AUTH_NEXTJS_OAUTH
    image: postgres:17-alpine
    restart: always
    ports:
      - 5432:5432
    volumes:
      - postgres-data:/var/lib/postgresql/data
    environment:
      - POSTGRES_PASSWORD=${POSTGRES_PASSWORD}
      - POSTGRES_USER=${POSTGRES_USER}
      - POSTGRES_DB=OAUTH
volumes:
  postgres-data:

This configuration sets up a PostgreSQL container with a persistent volume and environment variables for your database credentials.

Set Up Environment Variables for the Database

Create a .env file in the root of your project and define the necessary environment variables for your database connection. Here's an example configuration:

//.env
POSTGRES_PASSWORD="your_password_here"
POSTGRES_USER="your_username_here"
DATABASE_URL="postgresql://your_username_here:your_password_here@localhost:5432/mydb?schema=public"

Replace your_password_here and your_username_here with your own PostgreSQL credentials.
DATABASE_URL should point to your local database or a cloud database if you are using a provider.

Run the Docker Container

Once you’ve configured the docker-compose.yml file and set up the environment variables, you can start the Docker container by running the following command:

docker compose up -d

If you ever need to stop the container, you can use:

docker compose down

Option 2: Using a Hosted Database

For example:

# .env
DATABASE_URL="postgresql://username:password@host:port/database_name?sslmode=require"

Ensure that the DATABASE_URL contains the correct connection details such as your:

username
password
host (database server URL)
port (usually 5432 for PostgreSQL)
database_name

Once you've added the correct URL, your application will be able to connect to the hosted database seamlessly.

Step 4: Setting Up Prisma

Initialize Prisma CLI

This will create a new prisma folder in your project, containing the schema.prisma file and configuration for Prisma.

pnpm dlx prisma init

This will create a new prisma folder in your project, containing the schema.prisma file and configuration for Prisma.

Configure the Database Connection:

Open the prisma/schema.prisma file and ensure that the DATABASE_URL points to your PostgreSQL database. It should look something like this:

datasource db {
  provider = "postgresql"
  url      = env("DATABASE_URL")
}

generator client {
  provider = "prisma-client-js"
}

Prisma will automatically read the DATABASE_URL from your .env file.

Create a Database Folder

Inside the src directory of your project, create a folder named db. This will house all database-related files.

Create a Database Client File

Inside the db folder, create a file named index.ts. Add the following code to configure and export a singleton instance of the Prisma Client:

// src/db/index.ts
import { PrismaClient } from '@prisma/client'

const prismaClientSingleton = () => {
  return new PrismaClient()
}

declare const globalThis: {
  prismaGlobal: ReturnType<typeof prismaClientSingleton>;
} & typeof global;

const prisma = globalThis.prismaGlobal ?? prismaClientSingleton()

export default prisma

if (process.env.NODE_ENV !== 'production') globalThis.prismaGlobal = prisma

Create Schema for auth

In this step, you'll define a database schema to manage authentication-related data, such as users, sessions, accounts, and verification tokens.

Open the prisma/schema.prisma file in your project.
Replace its contents with the following schema:

// prisma/schema.prisma
generator client {
  provider = "prisma-client-js"
}

datasource db {
  provider = "postgresql"
  url      = env("DATABASE_URL")
}

model User {
  id               String    @id @default(cuid())
  name             String
  email            String
  emailVerified    Boolean   @default(false)
  image            String?
  createdAt        DateTime  @default(now())
  updatedAt        DateTime  @updatedAt
  twoFactorEnabled Boolean   @default(false)
  Session          Session[]
  Account          Account[]

  @@unique([email])
  @@map("user")
}

model Session {
  id        String   @id @default(cuid())
  expiresAt DateTime
  token     String   @unique
  ipAddress String?
  userAgent String?
  userId    String
  user      User     @relation(fields: [userId], references: [id], onDelete: Cascade)
  createdAt DateTime @default(now())
  updatedAt DateTime @updatedAt

  @@map("session")
}

model Account {
  id           String    @id @default(cuid())
  accountId    String
  providerId   String
  userId       String
  user         User      @relation(fields: [userId], references: [id], onDelete: Cascade)
  accessToken  String?
  refreshToken String?
  idToken      String?
  expiresAt    DateTime?
  password     String?
  createdAt    DateTime  @default(now())
  updatedAt    DateTime  @updatedAt

  accessTokenExpiresAt  DateTime?
  refreshTokenExpiresAt DateTime?
  scope                 String?

  @@map("account")
}

model Verification {
  id         String    @id @default(cuid())
  identifier String
  value      String
  expiresAt  DateTime
  createdAt  DateTime? @default(now())
  updatedAt  DateTime? @updatedAt

  @@map("verification")
}

Explanation of the Schema

User: Contains basic user information and manages relationships to Account and Session models.
Session: Tracks user sessions, including tokens, IP addresses, and user agents.
Account: Manages linked OAuth accounts for third-party login providers such as Google or GitHub.
Verification: Handles email or token-based verification (e.g., passwordless login or two-factor authentication).

Generate and Migrate the Prisma Schema

After defining your models in the schema.prisma file, you need to generate the Prisma client and apply the database migrations.

Generate Prisma Client

First, generate the Prisma Client, which provides an API to interact with your database:

pnpx prisma generate

This will generate the necessary client files for accessing the database from your application.

Run Migrations

Apply the migrations to your database by running the following command:

pnpx prisma migrate dev --name auth

This will apply the migration to your database and generate the required tables (e.g., for User, Session, Account, etc.).

Once this setup is complete, Prisma will be ready to use for querying your database in your application.

Step-4: Integrate Better_Auth

Setting Up Environment Variables:

Add the following configuration to your .env file to provide the necessary environment variables for authentication:

# General authentication settings
BETTER_AUTH_SECRET="your-secret-key" # Replace with your own secure key or generate one using "pnpm dlx auth secret"
BETTER_AUTH_URL="http://localhost:3000" # Base URL of your app during local development
NEXT_PUBLIC_APP_URL="http://localhost:3000" # Public-facing base URL of your app

# Google OAuth credentials
GOOGLE_CLIENT_ID="your-google-client-id"
GOOGLE_CLIENT_SECRET="your-google-client-secret"

# GitHub OAuth credentials
GITHUB_CLIENT_ID="your-github-client-id"
GITHUB_CLIENT_SECRET="your-github-client-secret"

Explanation:

BETTER_AUTH_SECRET: A secret key used by Better_Auth for signing JWTs. You can generate one using pnpm dlx auth secret.
BETTER_AUTH_URL: The base URL for your application (used for redirecting after authentication).
Google and GitHub OAuth credentials: Replace the placeholders with the actual Client ID and Client Secret you obtain from Google and GitHub developer portals. Ensure the redirect URIs match the paths configured in your OAuth provider’s settings.
NEXT_PUBLIC_APP_URL: The public URL of your app, which is used for client-side requests.

Notes on Obtaining OAuth Credentials:

For Google OAuth

Go to the Google Cloud Console.
Navigate to Credentials > Create Credentials > OAuth 2.0 Client IDs.
Under Authorized Redirect URIs, set the following:
- For local development: http://localhost:3000/api/auth/callback/google
- For production: Use your application's domain, e.g., https://example.com/api/auth/callback/google.
💡⚠️ If you change the base path of your auth routes, update the redirect URI accordingly.

For GitHub OAuth

Visit the GitHub Developer Settings.
Create a new OAuth App under Developer Applications.
Set the following redirect URIs:
- For local development: http://localhost:3000/api/auth/callback/github
- For production: Use your application's domain, e.g., https://example.com/api/auth/callback/github.
💡⚠️ Similar to Google, update the redirect URI if your auth route base path changes.

💡### Why These Redirect URIs Matter

The redirect URIs are critical for OAuth authentication. They specify the exact location where the OAuth provider (Google or GitHub) should send users after they authenticate. Make sure the URIs you provide in the OAuth configuration match exactly with those used in your application; otherwise, the authentication process will fail.

Setting Up the Authentication Configuration:

Create the auth.ts File

Inside the lib folder of your project, create a file named auth.ts. This file will contain the configuration for Better_Auth.
Add the Following Code

Copy and paste the code below into the auth.ts file:

// auth.ts
import prisma from '@/db';
import {
    betterAuth
} from 'better-auth';
import { prismaAdapter } from 'better-auth/adapters/prisma';

export const auth = betterAuth({
    appName: "better_auth_nextjs",
    database: prismaAdapter(prisma, {
        provider: "postgresql"
    }),
    socialProviders: {
        google: {
            clientId: process.env.GOOGLE_CLIENT_ID!,
            clientSecret: process.env.GOOGLE_CLIENT_SECRET!,
            redirectURI: process.env.BETTER_AUTH_URL + "/api/auth/callback/google",
        },
        github: {
            clientId: process.env.GITHUB_CLIENT_ID!,
            clientSecret: process.env.GITHUB_CLIENT_SECRET!,
            redirectURI: process.env.BETTER_AUTH_URL + "/api/auth/callback/github",
        }
    },
});

Explanation of the Code:

betterAuth: Initializes the authentication library with the following parameters:
- appName: Specifies the name of your application.
- database: Connects the Prisma adapter to the PostgreSQL database defined in your .env file.
- socialProviders: Configures Google and GitHub OAuth providers.
Dynamic Redirect URIs:
- The redirectURI dynamically appends the callback path to the base URL (BETTER_AUTH_URL) defined in your environment variables. This ensures compatibility with both local and production environments.

Setting Up the Authentication Client

Create the auth-client.ts File

Inside the lib folder, create a new file named auth-client.ts. This file will manage client-side authentication interactions.
Add the Following Code

Paste the code below into the newly created file:

// src/lib/auth-client.ts
import {
    createAuthClient
} from "better-auth/react";

export const authClient = createAuthClient({
    baseURL: process.env.NEXT_PUBLIC_APP_URL,

})

export const {
    signIn,
    signOut,
    signUp,
    useSession
} = authClient;

Explanation:

createAuthClient:
- This function initializes the client-side authentication logic using Better_Auth.
- The baseURL is sourced from the NEXT_PUBLIC_APP_URL environment variable, ensuring compatibility with both local and production environments.
Exported Methods:
- signIn: Initiates the sign-in process for users.
- signOut: Logs the user out.
- signUp: Handles user registration.
- useSession: Retrieves and manages the current user's authentication session.
💡 Why This File is Important

The auth-client.ts file abstracts client-side authentication functions, making them reusable and straightforward to integrate into React components. By centralizing the authentication logic, you maintain cleaner code and enhance the maintainability of your project.

Creating an API Route Handler for Authentication

Create the Route Handler

In your framework's designated directory for API routes (e.g., /app/api/auth for Next.js), create a catch-all route handler to manage authentication requests.
Add the Following Code

For a Next.js application, create a file named route.ts inside the /app/api/auth/[...all] directory and paste the following code:

// /app/api/auth/[...all]/route.ts
import { auth } from "@/lib/auth"; // path to your auth file
import { toNextJsHandler } from "better-auth/next-js";

export const { POST, GET } = toNextJsHandler(auth);

Explanation:

toNextJsHandler:
- Converts the Better_Auth configuration into route handlers compatible with Next.js.
- Automatically sets up handlers for the HTTP methods (e.g., POST and GET) required for authentication.
Catch-All Route (/api/auth/*):
- Ensures that all authentication-related requests (e.g., sign-in, callbacks) are routed through this handler.
- This centralizes your authentication logic for better maintainability.

💡 Why This Setup is Necessary

By creating this route handler:

You streamline the handling of authentication-related API requests.
The /api/auth/* endpoint acts as a dedicated entry point for Better_Auth to manage user sessions, social logins, and other auth operations.

Step 5: Create Sign-In Component

Create a Reusable `CardWrapper` Component

Here’s the improved version of the CardWrapper component:

import React from 'react'
import { Card, CardContent, CardDescription, cardHeader, CardTitle } from './ui/card'
import Link from 'next/link'

interface CardWrapperType {
    children: React.ReactNode,
    cardTitle: string,
    cardDescription: string
}

const CardWrapper = ({
    children,
    cardTitle,
    cardDescription,
}: CardWrapperType) => {
    return (
        <Card className="w-[400px] relative">
            <CardHeader>
                <CardTitle>{cardTitle}</CardTitle>
                <CardDescription>{cardDescription}</CardDescription>
            </CardHeader>
            <CardContent>
                {children}
            </CardContent>
         </Card>
    )
}

export default CardWrapper

Explanation:

Component Structure:
- children: This is the content that will be rendered inside the card.
- cardTitle: The title of the card, which will be prominently displayed at the top.
- cardDescription: A brief description under the title that provides more context for the card.
Styling:
- The Card container has utility classes like w-full, max-w-md, mx-auto, bg-white, rounded-lg, and shadow-md to control the width, margin, background color, border radius, and shadow of the card. This ensures the card looks well-aligned, centered, and visually distinct.
- Inside the card header, the CardTitle and CardDescription have additional styling for text size, weight, and color to improve readability and contrast.
Modularity:
- By separating the card layout into its own reusable component (CardWrapper), it becomes easy to reuse this structure throughout the app wherever you need a card with a title and description. This promotes consistency in the design and reduces code duplication.

Create `FormError` and `FormSuccess` Components:

To improve error and success message handling in forms, let's create reusable components for displaying error and success messages.

FormError Component:

The `FormError` component will display error messages with an icon and a      styled container to alert the user.

// app/components/form-error.tsx
import React from 'react'
import { AiFillExclamationCircle } from "react-icons/ai";

type FormErrorProps = {
    message?: string
}

const FormError = ({message}: FormErrorProps) => {
    if (!message) return null
  return (
    <div className="bg-destructive/15 p-3 rounded-md flex items-center gap-x-2 text-sm text-destructive">
        <AiFillExclamationCircle className='w-4 h-4'/>
        {message}
    </div>
  )
}

export default FormError

Explanation:

Props:
- message: A string containing the error message that will be displayed. If no message is provided, the component returns null.
Styling:
- bg-red-100: Light red background for the error message.
- text-red-600: Red text color for visibility and to emphasize the error.
- p-3: Padding inside the message box.
- rounded-md: Rounded corners for a smooth appearance.
- flex items-center gap-x-2: A flex container with horizontal spacing between the icon and the message text.
- The AiFillExclamationCircle icon is used to represent the error visually.
FormSuccess Component:

The FormSuccess component is similar to the FormError, but it's used for success messages.

// app/components/form-success.tsx
import React from 'react'
import { AiFillExclamationCircle } from "react-icons/ai";

type FormErrorProps = {
    message?: string
}

const FormError = ({message}: FormErrorProps) => {
    if (!message) return null
  return (
    <div className="bg-destructive/15 p-3 rounded-md flex items-center gap-x-2 text-sm text-destructive">
        <AiFillExclamationCircle className='w-4 h-4'/>
        {message}
    </div>
  )
}

export default FormError

Explanation:

Props:
- message: A string containing the success message to be displayed. If no message is provided, the component returns null.
Styling:
- bg-green-100: Light green background to indicate success.
- text-green-600: Green text color to match the success color scheme.
- p-3: Padding inside the message box for better spacing.
- rounded-md: Rounded corners for a sleek and modern design.
- flex items-center gap-x-2: Flexbox container with horizontal spacing between the success icon and message text.
- The AiFillCheckCircle icon represents a successful action.

Create the `sign-in.tsx` file

Inside the components/auth folder, create a new file named sign-in.tsx. This file will contain the component responsible for rendering the sign-in UI and handling the authentication logic.

Here's how to structure your component:

// components/auth/sign-in.tsx
"use client"
import React, { useEffect, useState } from 'react'
import { Button } from '../ui/button'
import CardWrapper from '../card-wrapper'import { FaGithub } from 'react-icons/fa'
import { FcGoogle } from 'react-icons/fc'
import { signIn } from '@/lib/auth-client'
import FormError from '../form-error'
import { FormSuccess } from '../form-success'
import { useRouter } from 'next/navigation'

const SignIn = () => {
    const router = useRouter()
    const [error, setError] = useState("")
    const [success, setSuccess] = useState("")
    const [loading, setLoading] = useState(false)

    useEffect(() => {
        setError("")
        setSuccess("")
        setLoading(false)
    }, [])

    const githubSignIn = async () => {
        try {
            await signIn.social({
                provider: "github",
                callbackURL: "/"
            }, {
                onResponse: () => {
                    setLoading(false)
                },
                onRequest: () => {
                    setSuccess("")
                    setError("")
                    setLoading(true)
                },
                onSuccess: () => {
                    setSuccess("Your are loggedIn successfully")
                },
                onError: (ctx) => {
                    setError(ctx.error.message)
                }
            })
        } catch (error: unknown) {
            console.log(error)
            setError("Something went wrong")
        }
    }

    const googleSignIn = async () => {
        try {
            await signIn.social({
                provider: "google"
            }, {
                onResponse: () => {
                    setLoading(false)
                },
                onRequest: () => {
                    setSuccess("")
                    setError("")
                    setLoading(true)
                },
                onSuccess: () => {
                    setSuccess("Your are loggedIn successfully")
                    router.replace('/')
                },
                onError: (ctx) => {
                    setError(ctx.error.message)
                }
            })
        } catch (error: unknown) {
            console.error(error)
            setError("Something went wrong")
        }
    }

    return (
        <CardWrapper
            cardTitle='Sign In'
            cardDescription='Enter your email below to login to your account'
        >
            <div className='flex gap-y-2 flex-col'>
                <FormError message={error} />
                <FormSuccess message={success} />
                <Button
                    variant={"outline"}
                    onClick={githubSignIn}
                    disabled={loading}
                >
                    <FaGithub />
                    Sign in With Github
                </Button>
                <Button
                    variant={"outline"}
                    onClick={googleSignIn}
                    disabled={loading}
                >
                    <FcGoogle />
                    Sign in with Google
                </Button>
            </div>
        </CardWrapper>
    )
}

export default SignIn

Explanation:

State management: The component uses useState for managing error, success, and loading states.
OAuth sign-in: The githubSignIn and googleSignIn functions handle authentication with GitHub and Google respectively. They use the signIn.social method from the auth-client.ts file.
Form feedback: FormError and FormSuccess components display any errors or success messages during the sign-in process.
UI: The Button component is used to create sign-in buttons for GitHub and Google. The buttons are disabled while the sign-in process is in progress

This component will handle the authentication process and provide users with an interface to sign in using their Google or GitHub accounts.

Create the `sign-in` folder

Inside the app folder, create a new folder named sign-in. This folder will contain the page and components related to the sign-in process.

Create the `page.tsx` file

Inside the sign-in folder, create a new file named page.tsx. This will be the main page that renders the sign-in component and handles the routing logic

Here's how to structure the page.tsx file:

// /app/signin/page.tsx
import SignIn from '@/components/auth/sign-in'
import React from 'react'

const SignInPage = () => {
  return (
    <SignIn />
  )
}

export default SignInPage

Explanation:

Component Import: The SignIn component from components/auth/sign-in is imported and used to display the sign-in form.
Styling: The min-h-screen, bg-gray-50, flex, justify-center, and items-center utility classes are used to center the sign-in form vertically and horizontally, ensuring a clean and responsive layout. The max-w-md class is applied to restrict the width of the sign-in form to a medium size for better presentation on different screen sizes.

Now, when you navigate to /sign-in in your application, it will render the sign-in page with the form and authentication options.

Create a Layout for the Sign-In Page

To ensure consistency in the design and layout of the sign-in page, you can create a layout.tsx file inside the sign-in folder. This layout will serve as a wrapper for the sign-in page and allow you to manage common elements like headers, footers, or sidebars if needed in the future.

Here’s how to structure the layout.tsx file:

import React from 'react'

const SignupLayout = ({children}: {children: React.ReactNode}) => {
  return (
    <div className='flex items-center justify-center w-screen h-screen'>{children}</div>
  )
}

export default SignupLayout

Explanation:

Layout Component: The SignInLayout component wraps the entire sign-in page content (children). This layout is useful for organizing the structure of the page and allows for consistent styling and placement of content.
Styling: The layout applies utility classes like min-h-screen, bg-gray-50, flex, justify-center, and items-center to center the content both vertically and horizontally on the page. Additionally, the w-full max-w-md classes control the width of the container, while p-6, bg-white, rounded-lg, and shadow-lg provide padding, background color, rounded corners, and a shadow effect for a polished look.

Step 6 - Run the Application:

To start your development server and preview your application:

Open your terminal and navigate to your project directory.
Run the following command:

pnpm dev

This command will launch the development server and make your application accessible at http://localhost:3000 by default. You can now test and view your application in the browser.

Once the development server is running, visit the following URL in your browser to access the sign-in page:

http://localhost:3000/signin

This will load the sign-in page of your application, where you can test the OAuth authentication flow.

Congratulations! You have successfully integrated OAuth login into your application, providing users with a seamless and secure authentication experience. 🎉

If you enjoyed this blog, please consider following and supporting me! Your encouragement motivates me to create more helpful content for you. 😊

Reference Links:

Better_Auth Docs: https://www.better-auth.com/

pnpm Docs: https://pnpm.io/

Docker Docs: https://docs.docker.com/

Prisma Docs: https://www.prisma.io/docs/getting-started

Shadcn Docs: https://ui.shadcn.com/

Next.js Docs: https://nextjs.org/

Tailwindcss Docs: https://tailwindcss.com/

Github repository: https://github.com/Daanish2003/better_auth_nextjs

DEV Community: Daanish2003

Google oneTap login using Better_Auth, nextjs, prisma, shadcn

Tech Stack

Prerequisites

Cloning the Starter Project:

Setup

1. Configure the .env File

Step 1: Get the ClientID for Google One Tap Login

Step 2: Setup Environment Variable

Step 3: Update auth.ts and auth-client.ts file

Step 4: Create a oneTapCall()function

Step 5: Call the function inside signIn Component:

Step 6: Run your application:

Conclusion

Magic link authentication using Better_Auth, Next.js, Shadcn, Prisma Resend, Tailwindcss

Tech Stack

Prerequisites

Cloning the Starter Project:

Setup

1. Configure the .env File

Step 1: Update auth.ts file and auth-client.ts file

Step 2: Update the login-schema.ts file

Step 3: Update the sign-in component

Step 4: Run your application:

Conclusion

Blog Links:

Reference Links:

Guest login using better_auth, nextjs, prisma, shadcn

Tech Stack

Prerequisites

Cloning the Starter Project:

Setup

1. Configure the .env File

Step 1: Update schema.prisma file

Step 2: Update auth.ts and auth-client.tsfile

Step 4: Create anonymous-button Component

Step 5: Update SignIn component and Signup component

SignUp Component:

SignIn Component

Step 6: Run your application:

Conclusion

Blog Links:

Reference Links:

Username and Password Authentication with Better_Auth, Next.js, Prisma, Shadcn, and TailwindCSS

Tech Stack

Prerequisites

Cloning the Starter Project:

Setup

1. Configure the .env File

Note:

Step 1: Update schema.prisma file

Step 2: Update auth.ts and auth-client.tsfile

Step 3: Update login-schema.ts and signup-schema.ts file

Step 4: Create generateUsername file

Step 5: Update SignIn component and Signup component

SignUp Component:

SignIn Component

Step 6: Run your application:

Conclusion

Blog Links:

Reference Links:

Two-Factor Authentication Using Better_Auth, Next.js, Prisma, ShadCN, and Resend

Tech Stack

Prerequisites

Cloning the Starter Project:

Configure the .env File

Step 1: Install ShadCN Components

Step 2: Update Prisma Schema

Step 3: Integrate 2FA Using Better_Auth

Backend Configuration

Frontend Configuration

Step 4: Build the UI for 2FA

Create Zod Validation Schema

Add Settings Component

Update app/page.tsx

Implement OTP Input Component

Create a requestOTP Helper Component

Create Two-Factor Verification Component

Create TwoFactorPage

Step 5: Run Your Application

1. Configure the `.env` File

Step 4: Create a `oneTapCall()`function

1. Configure the `.env` File

Step 1: Update `auth.ts` file and `auth-client.ts` file

Step 2: Update the `login-schema.ts` file

1. Configure the `.env` File

Step 1: Update `schema.prisma` file

Step 2: Update `auth.ts` and `auth-client.ts`file

Step 4: Create `anonymous-button` Component

1. Configure the `.env` File

Step 1: Update `schema.prisma` file

Step 2: Update `auth.ts` and `auth-client.ts`file

Step 3: Update `login-schema.ts` and `signup-schema.ts` file

Step 4: Create `generateUsername` file

Configure the `.env` File

Update `app/page.tsx`

Create a `requestOTP` Helper Component

Create `TwoFactorPage`

Step 1: Update `auth.ts` file

Step 4: Create a `page.tsx`file for both `forgot-password` and `reset-password`

Step 4: Update `Signin`component

Step 1: Setting up `Resend` service

Step 2: Integrate Email verification with `Better_Auth`

Update the `auth.ts` File

Update the `SignIn` Component

Update the `SignUp` Component

Create a `docker-compose.yml` File

Create a Reusable `CardWrapper` Component

Create `FormError` and `FormSuccess` Components:

Create the `useAuthState.ts`Hook file

Create zod scheme for `signin` and `signup`

Create the `sign-in.tsx` file

Create the `sign-up.tsx` file

Create `Signout` Button

Create `page.tsx` and `layout.tsx` for signup and signin page