## Authentication Quickstart

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](/content/docs/authenticate/login/auth0-universal-login/index.html) to your AI agent 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

-  Next.js
-  FastAPI

### 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.](/content/signup?onboard_app=auth_for_aa&ocid=701KZ000000cXXxYAM-aPA4z0000008OZeGAM/index.html)
2. Create an Auth0 Application  
Go to your [Auth0 Dashboard](https://manage.auth0.com/dashboard) to create a new Auth0 Application.  
   - Navigate to [**Applications > Applications**](https://manage.auth0.com/#/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](/content/docs/get-started/applications/index.html).

### Download sample app

Start by downloading and extracting the sample app. Then open in your preferred IDE.

### Install packages

Ensure you have `npm` installed or follow the instructions to [install npm](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm) in its documentation.  
In the root directory of your project, install the required packages:

```
npm install
```

### Create your environment file

In the root directory of your project, create a new `.env.local` file 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>'
```
To get your Auth0 application’s `AUTH0_DOMAIN`, `AUTH0_CLIENT_ID`, and `AUTH0_CLIENT_SECRET`, navigate to **Applications > Applications** in the Auth0 Dashboard and select your client application. You’ll find these values in the **Basic Information** section at the top.  
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:

```
openssl rand -hex 32
```

### 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:

Sign up for your application to create a new user account. You will then see a welcome message with your username. You can sign in with that account on future visits.

### Install Auth0 Next.js SDK

In the root directory of your project, install the [Auth0 Next.js SDK](https://github.com/auth0/nextjs-auth0):

```
npm i @auth0/nextjs-auth0@4
```

### Add log in to your application

Secure your application using the Auth0 Next.js SDK.

#### 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` or update your existing middleware file. 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: [
    "/((?!_next/static|_next/image|images|favicon.[ico|png]|sitemap.xml|robots.txt|$).*)",
  ],
};
```

#### Add Log in and Sign up buttons

Use the following code example 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  
```javascript
//...
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}
    />
  );
}
```

### Run your application

Start your app, typically with this command:

```
npm run dev
```

Visit your app in the browser, typically at `http://localhost:3000`. You will see:

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 on [GitHub](https://github.com/auth0-samples/auth0-ai-samples/tree/main/authenticate-users/vercel-ai-next-js).

### Next steps

- To set up first-party tool calling, complete the [Call first-party APIs on user’s behalf](/content/ai/docs/get-started/call-first-party-apis-on-users-behalf/index.html) quickstart.
- To set up third-party tool calling, complete the [Call third-party APIs on user’s behalf](/content/ai/docs/get-started/call-third-party-apis-on-users-behalf/index.html) quickstart.
- Learn more about [User Authentication](/content/ai/docs/intro/user-authentication/index.html).