Skip to main content
Authentication is the process of proving a user’s identity before granting them access to a resource. In this quickstart, you’ll learn how to bring Universal Login to your GenAI application and leverage OAuth 2.0 and OpenID Connect to securely authenticate users. When a user authenticates with an identity provider through Auth0, Auth0 can pass user information in an ID token to an application or AI agent to deliver a personalized experience. For example, a chatbot can greet a user with their name and display relevant information based on the user’s profile. By the end of this quickstart, you should have an application that can:
  • Sign up and log in using a username and password or a Google account.
  • Authenticate and authorize users using OAuth 2.0 and OpenID Connect.

​
Pick your tech stack

​
Prerequisites

Before getting started, make sure you have completed the following steps:
1

Create an Auth0 Account

To continue with this quickstart, you need to have an Auth0 account.
2

Create an Auth0 Application

Go to your Auth0 Dashboard to create a new Auth0 Application.
  • Navigate to Applications > Applications in the left sidebar.
  • Click the Create Application button in the top right.
  • In the pop-up select Regular Web Applications and click Create.
  • Once the Application is created, switch to the Settings tab.
  • Scroll down to the Application URIs section.
  • Set Allowed Callback URLs as: http://localhost:3000/auth/callback
  • Set Allowed Logout URLs as: http://localhost:3000
  • Click Save in the bottom right to save your changes.
To learn more about Auth0 applications, read Applications.

​
Create a Next.js app

Use a starter template or create a Next.js web application using Next.js version 15 or above.Recommended: Use this starter template from the Auth0 AI samples repository:
git clone https://github.com/auth0-samples/auth0-ai-samples.git
cd auth0-ai-samples/authenticate-users/vercel-ai-next-js-starter
Or: Create a new application using create-next-app:
npx create-next-app@15 --src-dir

​
Install dependencies

In the root directory of your project, install the Auth0 Next.js SDK:
npm i @auth0/nextjs-auth0@4

​
Add log in to your application

Secure your application using the Auth0 Next.js SDK.

​
Create your environment file

In the root directory of your project, create a new file and name it .env.local and add the following content:
.env.local
APP_BASE_URL='http://localhost:3000'
AUTH0_SECRET='random 32 byte value'
AUTH0_DOMAIN='<your-auth0-domain>'
AUTH0_CLIENT_ID='<your-auth0-application-client-id>'
AUTH0_CLIENT_SECRET='<your-auth0-application-client-secret>'
Access your AUTH0_DOMAIN, AUTH0_CLIENT_ID, and AUTH0_CLIENT_SECRET by viewing the Auth0 Application that you created in the Auth0 Dashboard and navigating to the Basic Information section at the top of the Settings tab. Copy each value to the matching setting.Next, run this command to generate a random 32 byte value and copy it to the AUTH0_SECRET field.
generate random 32 byte value
openssl rand -hex 32

​
Create the Auth0 client

Create a new file in the src/lib directory and name it auth0.ts. Add the following code to create a new Auth0 client:
src/lib/auth0.ts
import { Auth0Client } from "@auth0/nextjs-auth0/server";

// Create an Auth0 Client.
export const auth0 = new Auth0Client();
The Auth0 client provides methods for handling authentication, sessions, and user data.

​
Add the authentication middleware

The middleware intercepts incoming requests and applies Auth0’s authentication logic. Create a new file in the src directory and name it middleware.ts. Add the following code to the file:
src/middleware.ts
import { NextRequest, NextResponse } from "next/server";
import { auth0 } from "./lib/auth0";

export async function middleware(request: NextRequest) {
  const authRes = await auth0.middleware(request);

  // Authentication routes — let the Auth0 middleware handle it.
  if (request.nextUrl.pathname.startsWith("/auth")) {
    return authRes;
  }

  const { origin } = new URL(request.url);
  const session = await auth0.getSession(request);

  // User does not have a session — redirect to login.
  if (!session) {
    return NextResponse.redirect(`${origin}/auth/login`);
  }
  return authRes;
}

export const config = {
  matcher: [
    /*
     * Match all request paths except for the ones starting with:
     * - _next/static (static files)
     * - _next/image, images (image optimization files)
     * - favicon.ico, sitemap.xml, robots.txt (metadata files)
     * - $ (root)
     */
    "/((?!_next/static|_next/image|images|favicon.[ico|png]|sitemap.xml|robots.txt|$).*)",
  ],
};

​
Add Log in and Sign up buttons

Update the src/app/page.tsx file with the following code to check if the user is signed in or not. It will display the Sign up or Log in buttons without a user session. If a user session exists, the app displays a welcome message with the user’s name.
src/app/page.tsx
//...
import { auth0 } from "@/lib/auth0";

export default async function Home() {
  const session = await auth0.getSession();

  if (!session) {
    return (
      <div className="flex flex-col items-center justify-center min-h-[50vh] my-auto gap-4">
        <h2 className="text-xl">You are not logged in</h2>
        <div className="flex gap-4">
          <Button asChild variant="default" size="default">
            <a href="/auth/login" className="flex items-center gap-2">
              <LogIn />
              <span>Login</span>
            </a>
          </Button>
          <Button asChild variant="default" size="default">
            <a href="/auth/login?screen_hint=signup">
              <UserPlus />
              <span>Sign up</span>
            </a>
          </Button>
        </div>
      </div>
    );
  }

  //... existing code

  // applicable only if you are using the starter template
  return (
    <ChatWindow
      endpoint="api/chat"
      emoji="🤖"
      placeholder={`Hello ${session?.user?.name}, I'm your personal assistant. How can I help you today?`}
      emptyStateComponent={InfoCard}
    />
  );
}

​
Add user profile dropdown (optional)

If you are using the starter template, you can add a user profile dropdown to your application. Update the src/app/layout.tsx file:
src/app/layout.tsx
//...
import { auth0 } from "@/lib/auth0";
import UserButton from "@/components/auth0/user-button";

export default async function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  const session = await auth0.getSession();

  return (
    <html lang="en" suppressHydrationWarning>
      {/* ... existing code */}
      <body className={publicSans.className}>
        <NuqsAdapter>
          <div className="bg-secondary grid grid-rows-[auto,1fr] h-[100dvh]">
            <div className="grid grid-cols-[1fr,auto] gap-2 p-4 bg-black/25">
              {/* ... existing code */}
              <div className="flex justify-center">
                {session && (
                  <div className="flex items-center gap-2 px-4 text-white">
                    <UserButton
                      user={session?.user!}
                      logoutUrl="/auth/logout"
                    />
                  </div>
                )}
                {/* ... existing code */}
              </div>
            </div>
            {/* ... existing code */}
          </div>
          <Toaster />
        </NuqsAdapter>
      </body>
    </html>
  );
}

​
Run your application

Run this command to start your server:
npm run dev
Visit the URL http://localhost:3000 in your browser.You will see:
Auth0 login screen
Sign up to your application to create a new user account. You will then see a welcome message with your user name. You can sign in with that account on future visits.

​
View a complete example

Want to see how it all comes together? Explore or clone the fully implemented sample application here on GitHub.

​
Next steps