Authentification des utilisateurs

L’authentification est le processus qui consiste à prouver l’identité d’un utilisateur avant de lui accorder l’accès à une ressource. Dans ce démarrage rapide, vous apprendrez à intégrer la connexion universelle à votre agent d’IA et à tirer parti d’OAuth 2.0 et d’OpenID Connect pour authentifier les utilisateurs de façon sécurisée. Lorsqu’un utilisateur s’authentifie auprès d’un fournisseur d’identité par l’intermédiaire d’Auth0, Auth0 peut transmettre les informations de l’utilisateur dans un jeton d’ID à une application ou à un agent d’IA afin d’offrir une expérience personnalisée. Par exemple, un robot conversationnel peut saluer un utilisateur par son nom et afficher des informations pertinentes selon son profil. À la fin de ce démarrage rapide, vous devriez disposer d’une application capable de :

S’inscrire et se connecter à l’aide d’un nom d’utilisateur et d’un mot de passe ou d’un compte Google.
Authentifier et autoriser les utilisateurs à l’aide d’OAuth 2.0 et d’OpenID Connect.

Choisissez votre pile technologique

Next.js
FastAPI

Use sample app (recommended)
Integrate into your app

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

generate random 32 byte value

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:

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 or add the following content to your .env.local file:

.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 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: [
    /*
     * 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|$).*)",
  ],
};

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

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

Download sample app

Start by downloading and extracting the sample app. Then open in your preferred IDE.The project is divided into these two folders:

backend: contains the backend code for the web application, an API written in Python using FastAPI and the LangGraph agent.
frontend: contains the frontend code for the web application written in React as a Vite Single Page App (SPA).

Install backend packages

In the backend directory of your project, install the required packages using your preferred package manager, such as uv. You can follow the instructions to install uv in its documentation.

cd backend
uv sync

Create your environment file

In the backend directory of your project, create a new file and name it .env and add the following content:

.env

APP_BASE_URL='http://localhost:8000'
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>'

generate random 32 byte value

openssl rand -hex 32

Install frontend packages

Ensure you have npm installed or follow the instructions here to install npm. Navigate to the frontend directory of your project and install the required packages:

cd frontend
npm install

Run your application

To run your application, start both the FastAPI backend and the frontend in two terminals:

In one terminal, start the FastAPI backend:

cd backend
source .venv/bin/activate
fastapi dev app/main.py

In a second new terminal, start the frontend:

cd frontend
npm run dev

Visit the URL http://localhost:5173 in your browser.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.

Prochaines étapes

Pour configurer l’appel d’outils internes, suivez le guide de démarrage rapide Appeler des API internes au nom de l’utilisateur.
Pour configurer l’appel d’outils tiers, suivez le guide de démarrage rapide Appeler des API tierces au nom de l’utilisateur.
Pour en savoir plus, consultez la page Authentification des utilisateurs.

Premiers pas

Ressources

Authentification des utilisateurs

Choisissez votre pile technologique

Download sample app

Install packages

Create your environment file

Run your application

Install Auth0 Next.js SDK

Add log in to your application

Create your environment file

Create the Auth0 client

Add the authentication middleware

Run your application

View a complete example

Download sample app

Install backend packages

Create your environment file

Install frontend packages

Run your application

Prochaines étapes

​Choisissez votre pile technologique

​Download sample app

​Install packages

​Create your environment file

​Run your application

​Install Auth0 Next.js SDK

​Add log in to your application

​Create your environment file

​Create the Auth0 client

​Add the authentication middleware

​Add Log in and Sign up buttons

​Run your application

​View a complete example

​Download sample app

​Install backend packages

​Create your environment file

​Install frontend packages

​Run your application

​Prochaines étapes

Choisissez votre pile technologique

Download sample app

Install packages

Create your environment file

Run your application

Install Auth0 Next.js SDK

Add log in to your application

Create your environment file

Create the Auth0 client

Add the authentication middleware

Add Log in and Sign up buttons

Run your application

View a complete example

Download sample app

Install backend packages

Create your environment file

Install frontend packages

Run your application

Prochaines étapes