Report: Implementing Role-Based Authentication with Google OAuth using Auth.js v5

[mohammddarwesh]

Overview

This solution implements role‑based authentication using Google OAuth via Auth.js (NextAuth.js v5 beta) in a Next.js application. The user is allowed to choose a role at sign‑up, and that role is securely passed to the database using a cookie. Additionally, the solution uses a new database field, isRoleLocked, to ensure that the role is only set during the first sign‑up and cannot be altered unintentionally. The following sections describe the components and steps involved.

1. Environment and Dependencies

Environment Variables

The application requires the following environment variables:

NEXTAUTH_SECRET=your_nextauth_secret
AUTH_GOOGLE_CLIENT_ID=your_google_client_id
AUTH_GOOGLE_CLIENT_SECRET=your_google_client_secret
DATABASE_URL=your_database_url
NEXTAUTH_URL=http://localhost:3000
ENCRYPTION_KEY=optional_if_using_encryption   // (Not used in this simplified solution)

Dependencies

Install the necessary packages:

npm install next-auth@beta @auth/prisma-adapter @prisma/client js-cookie react-hot-toast

2. Database Setup with Prisma

Prisma Schema Changes

Extend your Prisma schema to include the following fields in the User model:

• role: to store the chosen role.
• isRoleLocked: a boolean flag to indicate if the role has been set permanently.

File: prisma/schema.prisma

datasource db {
  provider = "postgresql" // or your chosen provider
  url      = env("DATABASE_URL")
}

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

model User {
  id            String   @id @default(cuid())
  name          String?
  email         String?  @unique
  emailVerified DateTime?
  image         String?
  role          String?  // e.g. "CUSTOMER", "ADMIN", "SELLER"
  isRoleLocked  Boolean  @default(false)
  accounts      Account[]
  sessions      Session[]
}

model Account {
  id                String   @id @default(cuid())
  userId            String
  type              String
  provider          String
  providerAccountId String
  refresh_token     String?  @db.Text
  access_token      String?  @db.Text
  expires_at        Int?
  token_type        String?
  scope             String?
  id_token          String?  @db.Text
  session_state     String?
  user              User     @relation(fields: [userId], references: [id])
  
  @@unique([provider, providerAccountId])
}

model Session {
  id           String   @id @default(cuid())
  sessionToken String   @unique
  userId       String
  expires      DateTime
  user         User     @relation(fields: [userId], references: [id])
}

After modifying your schema, run:

npx prisma generate
npx prisma migrate dev --name add_role_and_roleLocked

3. Cookie Service (Simplified)

Since we’re simplifying by removing encryption, we use the plain js-cookie library for the client-side cookie management.

File: lib/cookies.ts

import Cookies from "js-cookie";

export class CookieService {
  static setRole(role: string) {
    Cookies.set('role', encodeURIComponent(role));
  }

  static getRole(): string | null {
    const role = Cookies.get('role');
    return role ? decodeURIComponent(role) : null;
  }

  static clearRole() {
    Cookies.remove('role');
  }
}

4. Role Validator and Public Types

a. Public Types

Define an enum for roles for type safety.

File: types/index.ts

export enum UserRole {
  CUSTOMER = 'CUSTOMER',
  ADMIN = 'ADMIN',
  SELLER = 'SELLER',
}

b. Type Augmentation for Auth.js

Augment NextAuth types to include a custom role field.

File: types/next-auth.d.ts

import { DefaultSession } from "next-auth";

declare module "@auth/core/jwt" {
  interface JWT {
    role?: string;
  }
}

declare module "next-auth" {
  interface Session {
    user: {
      role?: string;
    } & DefaultSession["user"];
  }

  interface User {
    role?: string;
  }
}

Ensure your tsconfig.json includes these types.

5. Auth.js Configuration

The configuration is split into a common configuration for edge compatibility and a full configuration that uses Prisma.

a. Common Configuration

File: auth.config.ts

import Google from "next-auth/providers/google"
import type { NextAuthConfig } from "next-auth"

export default {
  providers: [Google],
  cookies: {
    pkceCodeVerifier: {
      name: 'next-auth.pkce.code_verifier',
      options: {
        httpOnly: true,
        sameSite: 'lax',
        path: '/',
        secure: process.env.NODE_ENV === 'production'
      }
    }
  }
} satisfies NextAuthConfig

b. Full Configuration with Adapter and Sign-In Logic

This configuration merges the common config with the Prisma adapter and implements a sign‑in callback that reads the role from a cookie, validates it, and updates the user record in the database. It also sets isRoleLocked so that the role cannot be changed once set.

File: auth.ts

import NextAuth from "next-auth"
import authConfig from "./auth.config"
import { PrismaAdapter } from "@auth/prisma-adapter"
import { NextAuthConfig } from "next-auth";
import { prisma } from "./lib/utils/prisma";
import { UserRole } from "@prisma/client";
import { Session } from "next-auth"
import { JWT } from "@auth/core/jwt"
import { cookies } from "next/headers";

export const { handlers, auth, signIn, signOut } = NextAuth({
    ...authConfig,
    adapter: PrismaAdapter(prisma),
    session: { strategy: "jwt" },
    pages: {
        signIn: "/sign-in",
        error: "/auth/error",
    },
    callbacks: {
        async signIn({ user, account }) {
            try {
                if (!user.email) return false;

                const existingUser = await prisma.user.findUnique({
                    where: { email: user.email },
                    select: { role: true, roleLocked: true }
                });

                // Get role from cookie
                const cookie = await cookies() || {};
                const roleCookie = cookie.get("role")?.value;
                let role = roleCookie ? decodeURIComponent(roleCookie) : null;

                // Validate role
                const isValidRole = role && Object.values(UserRole).includes(role as UserRole);
                role = isValidRole ? role as UserRole : UserRole.CUSTOMER;

                if (!existingUser) {
                    // Create new user
                    await prisma.user.create({
                        data: {
                            email: user.email,
                            role: role as UserRole,
                            roleLocked: true,
                            name: user.name,
                            image: user.image
                        }
                    });
                } else if (!existingUser.roleLocked) {
                    // Update existing user's role if not locked
                    await prisma.user.update({
                        where: { email: user.email },
                        data: {
                            role: role as UserRole,
                            roleLocked: true
                        }
                    });
                }

                return true;
            } catch (error) {
                console.error('Sign-in error:', error);
                return false;
            }
        },
        async jwt({ token, user }: { token: JWT, user: any }) {
            if (user && 'role' in user) {
                token.role = user.role as UserRole;
            }
            return token;
        },
        async session({ session, token }) {
            if (session.user) {
                session.user.role = token.role;
            }
            return session;
        }
    }
});

c. API Route for Auth.js

Ensure your authentication API route runs on Node.js (for Prisma compatibility).

File: app/api/auth/[...nextauth]/route.ts

import { handlers } from "@/auth" // Referring to the auth.ts we just created
export const { GET, POST } = handlers

6. Custom Sign-In Page

This page lets the user choose a role (e.g., CUSTOMER, ADMIN, SELLER) and saves it in a cookie before initiating the Google OAuth flow.

File: app/auth/signin/page.tsx

"use client";
import { signIn } from "next-auth/react";
import { UserRole } from "@/types";
import { useRouter } from "next/navigation";
import { toast } from "react-hot-toast";
import { Button } from "@/components/ui/button";
import { CookieService } from "@/lib/cookies";

export default function SignIn() {
  const router = useRouter();

  const handleSignIn = async (role: UserRole) => {
    try {
      // Save the chosen role in a cookie.
      CookieService.setRole(role);
      const result = await signIn("google", {
        callbackUrl: "/dashboard",
        redirect: false,
      });
      if (result?.error) {
        toast.error("Failed to sign in. Please try again.");
        CookieService.clearRole();
        return;
      }
      if (result?.url) {
        router.push(result.url);
      }
    } catch (error) {
      console.error("Sign-in error:", error);
      toast.error("An unexpected error occurred. Please try again.");
      CookieService.clearRole();
    }
  };

  return (
    <div className="flex flex-col gap-4 items-center mt-8">
      <h1 className="text-2xl font-bold">Sign In</h1>
      <Button
        onClick={() => handleSignIn(UserRole.CUSTOMER)}
        className="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 transition-colors"
      >
        Sign in as Customer
      </Button>
      <Button
        onClick={() => handleSignIn(UserRole.ADMIN)}
        className="px-4 py-2 bg-green-500 text-white rounded hover:bg-green-600 transition-colors"
      >
        Sign in as Admin
      </Button>
      <Button
        onClick={() => handleSignIn(UserRole.SELLER)}
        className="px-4 py-2 bg-purple-500 text-white rounded hover:bg-purple-600 transition-colors"
      >
        Sign in as Seller
      </Button>
    </div>
  );
}

7. Minimal Middleware (Optional)

If you need middleware that protects routes, you can create a minimal middleware file (which runs on Edge and uses only core functionality).

File: middleware.ts

import { NextResponse } from "next/server";
import type { NextRequest } from "next/server";

export function middleware(req: NextRequest) {
  return NextResponse.next();
}

export const config = {
  matcher: [
    "/((?!_next|api/auth|.*\\.(css|js|png|jpg|jpeg|svg|ico)$).*)",
  ],
};

---

Summary

1. Prisma & Database:
   Your Prisma schema includes fields for role and isRoleLocked. The Prisma client is initialized in lib/prisma.ts.

2. Encryption & Cookie Service:
   (Optional encryption removed) – Cookie service in lib/cookies.ts stores the chosen role plainly.

3. Type Safety & Role Validation:

   • types/index.ts defines a UserRole enum.
   • types/next-auth.d.ts augments Auth.js types to include role.
   • lib/roleValidator.ts validates roles.

4. Auth.js Configuration:

   • auth.config.ts holds the common configuration (edge-compatible).
   • auth.ts merges the common config with Prisma adapter and sign‑in logic that reads the role from a cookie, validates it, updates/creates the user record, and locks the role.

5. Custom Sign-In Page:
   The sign‑in page allows users to choose a role before authenticating via Google, storing the role in a cookie.

6. Middleware:
   A minimal middleware example is provided.

This solution ensures that during the first sign‑in, the user's chosen role (from the sign‑in page) is passed via a cookie to the Auth.js sign‑in callback, where it’s validated and stored in the database along with an isRoleLocked flag to prevent further changes. Feel free to share and adjust this solution as needed.