User Authentication

• 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.

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.

• Use sample app (recommended)
• Integrate into your app

​

Clone sample app

Clone this sample app from the Auth0 AI samples repository:

Report incorrect code

Copy

Ask AI

git clone https://github.com/auth0-samples/auth0-ai-samples.git
cd auth0-ai-samples/authenticate-users/vercel-ai-next-js

​

Install packages

Ensure you have npm installed or follow the instructions to install npm in its documentation. In the root directory of your project, install the required packages:

Report incorrect code

Copy

Ask AI

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

Report incorrect code

Copy

Ask AI

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 the Settings tab in the Auth0 Dashboard. 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:

generate random 32 byte value

Report incorrect code

Copy

Ask AI

openssl rand -hex 32

​

Run your application

Run this command to start your server:

Report incorrect code

Copy

Ask AI

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.

​

Next steps

• To set up first-party tool calling, complete the Call your APIs on user’s behalf quickstart.
• To set up third-party tool calling, complete the Call other’s APIs on user’s behalf quickstart.
• Learn more about User Authentication.