How to Integrate Auth0 with V0

Ask V0 to install the @auth0/nextjs-auth0 package in your project. V0 can add npm dependencies by including them in a prompt — ask it to 'install @auth0/nextjs-auth0 and set up Auth0 authentication with Next.js App Router'. Once the package is installed, create a lib/auth0.ts file that exports a configured Auth0Client instance. The Auth0Client constructor in v4 auto-reads your Auth0 credentials from environment variables if they follow the AUTH0_ prefix naming convention. For most configurations, you can instantiate Auth0Client with no arguments and it will read AUTH0_DOMAIN, AUTH0_CLIENT_ID, AUTH0_CLIENT_SECRET, and AUTH0_SECRET automatically. The AUTH0_SECRET is a 32-character random string used to encrypt session cookies — it is not your Auth0 Client Secret. Generate it with: openssl rand -hex 32 in a terminal, or use any random string generator. The Auth0_BASE_URL should be your production deployment URL (e.g., https://your-app.vercel.app) — this is used for the OAuth callback URL. Export the auth0 instance from lib/auth0.ts so it can be imported throughout your app in Server Components, API routes, and middleware.

1import { Auth0Client } from '@auth0/nextjs-auth0/server';
2
3export const auth0 = new Auth0Client({
4  // Auth0Client auto-reads AUTH0_DOMAIN, AUTH0_CLIENT_ID,
5  // AUTH0_CLIENT_SECRET, AUTH0_SECRET from environment variables.
6  // Add custom configuration here if needed:
7  // authorizationParameters: {
8  //   scope: 'openid profile email',
9  //   audience: 'https://your-api.auth0.com',
10  // },
11});

The @auth0/nextjs-auth0 SDK auto-mounts its authentication routes through a catch-all route handler at app/auth/[auth0]/route.ts. This single file handles all four Auth0 routes: /auth/login, /auth/logout, /auth/callback, and /auth/profile. Create this file and point it to your auth0 client instance. Next, create middleware.ts at the root of your project to protect routes. The Auth0 middleware checks for a valid session cookie on every request to protected routes. If the user is not authenticated, they are redirected to /auth/login which forwards them to the Auth0 Universal Login page. If authenticated, the request proceeds normally. The middleware uses createRouteMatcher to define which routes require authentication. Common patterns: protect /dashboard and all subroutes with /dashboard/:path*, protect all API routes that need authentication with /api/protected/:path*, and leave public routes (/, /about, /pricing, /auth/:path*) unprotected. The auth/path* pattern is critical — you must not protect the Auth0 callback route or users can never complete the login flow. Once middleware is configured, testing is straightforward: navigate to /dashboard without being logged in, and you should be redirected to the Auth0 Universal Login page.

1// app/auth/[auth0]/route.ts
2import { auth0 } from '@/lib/auth0';
3export const GET = auth0.handleAuth();

In the Auth0 Dashboard, configure your application for your Vercel deployment URL. Go to Applications → your app → Settings and update the Allowed Callback URLs, Allowed Logout URLs, and Allowed Web Origins fields with your production URL. Allowed Callback URLs must include your deployment URL plus /auth/callback: https://your-app.vercel.app/auth/callback. Also add http://localhost:3000/auth/callback for local development. Allowed Logout URLs must include: https://your-app.vercel.app. Web Origins: https://your-app.vercel.app. Save the changes. Now add four environment variables to Vercel Dashboard → Settings → Environment Variables: - AUTH0_DOMAIN: your Auth0 domain (e.g., your-tenant.us.auth0.com) - AUTH0_CLIENT_ID: the Client ID from Auth0 application settings - AUTH0_CLIENT_SECRET: the Client Secret from Auth0 application settings (sensitive — never NEXT_PUBLIC_) - AUTH0_SECRET: a 32-character random string for session cookie encryption Optionally add AUTH0_BASE_URL with your production URL if you need to override automatic base URL detection. After adding all variables, trigger a redeployment in Vercel. For local development, add these variables to .env.local with localhost values. To enable social login providers (Google, GitHub, etc.), go to Auth0 Dashboard → Authentication → Social. Click each provider you want to enable, add the provider's client credentials (from Google Cloud Console or GitHub OAuth apps), and save. Auth0 handles all the provider-specific OAuth flows once configured.

With authentication configured, use session data throughout your app to personalize the experience. The @auth0/nextjs-auth0 SDK provides different session access patterns for different contexts. In Server Components and API routes, use auth0.getSession() which returns the session object containing user information (sub, name, email, picture) and the raw ID token. The function returns null if the user is not authenticated, so always check for null before accessing session properties. In Client Components, use the useUser() hook from '@auth0/nextjs-auth0' which provides the same session data plus loading and error states. The hook accesses session data without a server round-trip by reading from a client-accessible session endpoint. For API route protection, call auth0.getSession() at the start of your handler. If it returns null, return a 401 response. If it returns a session, extract the user's sub (Auth0 user ID) to scope database queries to that specific user. This ensures users can only access their own data. For complex multi-tenant Auth0 setups integrating with third-party services like Stripe subscriptions, RapidDev's team can help design the session enrichment and tenant routing patterns.

1// Example: Server Component with Auth0 session
2import { auth0 } from '@/lib/auth0';
3import { redirect } from 'next/navigation';
4
5export default async function DashboardPage() {
6  const session = await auth0.getSession();
7
8  if (!session) {
9    redirect('/auth/login');
10  }
11
12  const { user } = session;
13
14  return (
15    <div>
16      <h1>Welcome, {user.name}!</h1>
17      <p>Email: {user.email}</p>
18      <img src={user.picture} alt="Profile" className="w-10 h-10 rounded-full" />
19      <a href="/auth/logout">Sign Out</a>
20    </div>
21  );
22}
23
24// Example: API Route with session check
25import { auth0 } from '@/lib/auth0';
26import { NextResponse } from 'next/server';
27
28export async function GET() {
29  const session = await auth0.getSession();
30
31  if (!session) {
32    return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
33  }
34
35  const userId = session.user.sub; // Auth0 user ID
36  // Fetch user-specific data using userId
37  return NextResponse.json({ userId, email: session.user.email });
38}