Sign up for an{" "}
Auth0 account
{" "}
or{" "}
console.log("log in")}>
log in
{" "}
to your existing account to integrate directly with your own tenant.
;
};
export const AuthCodeGroup = ({children, dropdown}) => {
const [processedChildren, setProcessedChildren] = useState(children);
useEffect(() => {
let unsubscribe = null;
function init() {
unsubscribe = window.autorun(() => {
const processChildren = node => {
if (typeof node === "string") {
let processedNode = node;
for (const [key, value] of window.rootStore.variableStore.values.entries()) {
const escapedKey = key.replaceAll(/[.*+?^${}()|[\]\\]/g, (String.raw)`\$&`);
processedNode = processedNode.replaceAll(new RegExp(escapedKey, "g"), value);
}
return processedNode;
} else if (Array.isArray(node)) {
return node.map(processChildren);
} else if (node && node.props && node.props.children) {
return {
...node,
props: {
...node.props,
children: processChildren(node.props.children)
}
};
}
return node;
};
setProcessedChildren(processChildren(children));
});
}
if (window.rootStore) {
init();
} else {
window.addEventListener("adu:storeReady", init);
}
return () => {
window.removeEventListener("adu:storeReady", init);
unsubscribe?.();
};
}, [children]);
return {processedChildren};
};
export const sections = [{
id: "configuration-d-auth0",
title: "Configuration d’Auth0"
}, {
id: "installer-la-trousse-sdk-next-js-auth0",
title: "Installer la trousse SDK Next.js Auth0"
}, {
id: "configuration-de-la-trousse-sdk",
title: "Configuration de la trousse SDK"
}, {
id: "ajouter-le-gestionnaire-de-route-dynamique",
title: "Ajouter le gestionnaire de route dynamique"
}, {
id: "ajouter-le-composant-userprovider",
title: "Ajouter le composant UserProvider"
}, {
id: "ajouter-une-connexion-à-votre-application",
title: "Ajouter une connexion à votre application"
}, {
id: "ajouter-une-fonctionnalité-de-déconnexion-à-votre-application",
title: "Ajouter une fonctionnalité de déconnexion à votre application"
}];
Ce guide explique comment intégrer Auth0 à n’importe quelle application Next.js, nouvelle ou existante, à l’aide de la trousse SDK Next.js Auth0. Nous vous recommandons de vous connecter pour suivre ce guide de démarrage rapide avec les exemples configurés pour votre compte.
Pour utiliser les services Auth0, vous devez avoir une application installée dans Auth0 Dashboard. L’application Auth0 est l’endroit où vous allez configurer le fonctionnement de l’authentification pour le projet que vous développez.
### Configurer une application
Utilisez le sélecteur interactif pour créer une nouvelle application Auth0 ou sélectionner une application existante qui représente le projet avec lequel vous souhaitez effectuer l’intégration. Dans Auth0, chaque application se voit attribuer un identifiant client unique alphanumérique que votre code d’application utilisera pour appeler les API Auth0 via la trousse SDK.
Tous les paramètres que vous configurez à l’aide de ce guide rapide seront automatiquement mis à jour pour votre application dans le [Tableau de bord](https://manage.auth0.com/#/), qui est l’endroit où vous pourrez gérer vos applications à l’avenir.
Si vous préférez explorer une configuration complète, consultez plutôt un exemple d’application.
### Configuration des URL de rappel
Une URL de rappel est une URL intégrée dans votre application vers laquelle vous souhaitez qu’Auth0 redirige les utilisateurs après leur authentification. Si elle n’est pas définie, les utilisateurs ne seront pas redirigés vers votre application après s’être connectés.
Si vous suivez notre projet à titre d’exemple, définissez ceci sur `http://localhost:3000/api/auth/callback`.
### Configuration des URL de déconnexion
Une URL de déconnexion est une URL intégrée dans votre application vers laquelle vous souhaitez qu’Auth0 redirige les utilisateurs après leur déconnexion. Si elle n’est pas définie, les utilisateurs ne pourront pas se déconnecter de votre application et recevront un message d’erreur.
Si vous suivez notre projet à titre d’exemple, définissez ceci sur `http://localhost:3000`.
Exécutez la commande suivante dans le répertoire de votre projet pour installer la trousse SDK Next.js Auth0 :
`npm install @auth0/nextjs-auth0`
La trousse SDK expose des méthodes et des variables qui vous aident à intégrer Auth0 à votre application Next.js en utilisant les [gestionnaires de route](https://nextjs.org/docs/app/building-your-application/routing/route-handlers) sur le système dorsal et le [contexte React](https://reactjs.org/docs/context.html) avec les [Crochets React](https://reactjs.org/docs/hooks-overview.html) sur le système frontal.
Dans le répertoire racine de votre projet, ajoutez le fichier `.env.local` avec les [variables d’environnement](https://nextjs.org/docs/basic-features/environment-variables) suivantes :
* `AUTH0_SECRET` : valeur secrète longue utilisée pour chiffrer le témoin de session. Vous pouvez générer une chaîne appropriée en utilisant `openssl rand -hex 32` sur la ligne de commande.
* `AUTH0_BASE_URL` : URL de base de votre application.
* `AUTH0_ISSUER_BASE_URL` : URL de votre domaine de locataire Auth0. Si vous utilisez un [domaine personnalisé avec Auth0](https://auth0.com/docs/custom-domains), utilisez la valeur de votre domaine personnalisé au lieu de la valeur indiquée dans l’onglet Settings (Paramètres).
* `AUTH0_CLIENT_ID` : identifiant client de votre application Auth0.
* `AUTH0_CLIENT_SECRET` : secret client de votre application Auth0.
La trousse SDK lira ces valeurs à partir de l’environnement du processus Node.js et se configurera automatiquement.
Ce guide rapide s’adresse au [routeur d’application](https://nextjs.org/docs/app) Next.js. Si vous utilisez le [routeur Pages](https://nextjs.org/docs/pages), consultez l’exemple dans le [README](https://github.com/auth0/nextjs-auth0#page-router) de la trousse SDK.
Créez un fichier dans `app/api/auth/[auth0]/route.js`. Il s’agit de votre fichier Route Handler (Gestionnaire de route) avec un [Dynamic Route Segment (Segment de route dynamique)](https://nextjs.org/docs/app/building-your-application/routing/route-handlers#dynamic-route-segments).
Ensuite, importez la méthode `handleAuth` de la trousse SDK et appelez-la à partir de l’exportation `GET`. Cette opération crée les routes suivantes :
* `/api/auth/login` : la route utilisée pour se connecter avec Auth0.
* `/api/auth/logout` : la route utilisée pour déconnecter l’utilisateur.
* `/api/auth/callback` : la route vers laquelle Auth0 redirigera l’utilisateur après une connexion réussie.
* `/api/auth/me` : la route à partir de laquelle le profil utilisateur doit être récupéré.
Côté frontal, la trousse SDK utilise React Context pour gérer l’état d’authentification de vos utilisateurs. Pour que cet état soit accessible à toutes vos pages, vous devez remplacer le [Root Layout component (composant Disposition racine)](https://nextjs.org/docs/app/building-your-application/routing/pages-and-layouts#root-layout-required) et envelopper la balise `` avec un `UserProvider` dans le fichier `app/layout.jsx`.
L’état d’authentification exposé par `UserProvider` est accessible dans n’importe quel composant client à l’aide de l’appel `useUser()`.
##### Point de contrôle
Maintenant que vous avez ajouté le gestionnaire de route et `UserProvider`, exécutez votre application pour vérifier qu’elle ne génère pas d’erreurs liées à Auth0.
Les utilisateurs peuvent désormais se connecter à votre application en visitant Gestionnaire de route `/api/auth/login` fourni par la trousse SDK. Ajoutez un lien qui pointe vers la route de connexion à l’aide d’une **balise d’ancrage**. En cliquant sur ce lien, vos utilisateurs seront redirigés vers la page de connexion universelle Auth0, où Auth0 pourra les authentifier. Une fois l’authentification réussie, Auth0 redirigera vos utilisateurs vers votre application.
Les prochaines règles de liaison pourraient suggérer d’utiliser le composant `Link` au lieu d’une balise d’ancrage. Le composant `Link` est destiné à effectuer des [transitions côté client entre les pages](https://nextjs.org/docs/api-reference/next/link). Comme le lien pointe vers une route API et non vers une page, vous devez le conserver en tant que balise d’ancrage.
##### Point de contrôle
Ajoutez le lien de connexion à votre application.
* Lorsque vous cliquez dessus, vérifiez que votre application Next.js vous redirige vers la page [Connexion universelle Auth0](https://auth0.com/universal-login) et que vous pouvez maintenant vous connecter ou vous inscrire en utilisant un nom d’utilisateur et un mot de passe ou un fournisseur social.
* Une fois l’opération terminée, vérifiez qu’Auth0 vous redirige vers votre application.
Auth0 active le fournisseur social Google par défaut sur les nouveaux locataires et vous offre des clés de développeur pour tester la connexion avec des [fournisseurs d’identité sociale](https://auth0.com/docs/connections/identity-providers-social). Toutefois, ces clés de développeur présentent certaines limitations qui peuvent entraîner un comportement différent de votre application. Pour plus de détails sur ce comportement et comment le résoudre, consultez le document [Tester les connexions sociales avec des clés de développeur Auth0](https://auth0.com/docs/connections/social/devkeys#limitations-of-developer-keys).
Maintenant que vous pouvez vous connecter à votre application Next.js, vous avez besoin [d’un moyen de vous déconnecter](https://auth0.com/docs/logout/log-users-out-of-auth0). Ajoutez un lien qui pointe vers la route API `/api/auth/logout`. En cliquant dessus, vous redirigez vos utilisateurs vers votre [point de terminaison de déconnexion Auth0](https://auth0.com/docs/api/authentication?javascript#logout) (`https://YOUR_DOMAIN/v2/logout`), puis vous les redirigez immédiatement vers votre application.
##### Point de contrôle
Lancez votre application.
* Vérifiez que votre application Next.js vous redirige vers la page de [connexion universelle Auth0](https://auth0.com/universal-login) et que vous pouvez désormais vous connecter ou vous inscrire à l’aide d’un nom d’utilisateur et d’un mot de passe ou d’un fournisseur de réseau social.
* Une fois cette opération terminée, vérifiez qu’Auth0 effectue une redirection vers votre application.
## Étapes suivantes
Beau travail! Si vous en êtes arrivé là, vous devriez avoir la connexion, la déconnexion et les informations de profil utilisateur actives dans votre application.
Cela conclut notre tutoriel de démarrage rapide, mais il y a tellement plus à explorer. Pour en savoir plus sur ce que vous pouvez faire avec Auth0, consultez :
* [Auth0 Dashboard](https://manage.auth0.com/#) : apprenez à configurer et gérer votre locataire et vos applications Auth0
* [Trousse SDK nextjs-auth0](https://github.com/auth0/nextjs-auth0/) : explorez en détail la trousse SDK utilisée dans ce tutoriel
* [Auth0 Marketplace](https://marketplace.auth0.com/) : découvrez des intégrations que vous pouvez activer pour étendre les fonctionnalités d’Auth0
```bash .env.local lines theme={null}
AUTH0_SECRET='use [openssl rand -hex 32] to generate a 32 bytes value'
APP_BASE_URL='http://localhost:3000'
AUTH0_DOMAIN='https://{yourDomain}'
AUTH0_CLIENT_ID='{yourClientId}'
AUTH0_CLIENT_SECRET='{yourClientSecret}'
```
```typescript src/lib/auth0.ts lines theme={null}
import { Auth0Client } from "@auth0/nextjs-auth0/server";
export const auth0 = new Auth0Client();
```
```typescript src/middleware.ts lines theme={null}
import type { NextRequest } from "next/server";
import { auth0 } from "./lib/auth0";
export async function middleware(request: NextRequest) {
return await auth0.middleware(request);
}
export const config = {
matcher: [
/*
* Match all request paths except for the ones starting with:
* - _next/static (static files)
* - _next/image (image optimization files)
* - favicon.ico, sitemap.xml, robots.txt (metadata files)
*/
"/((?!_next/static|_next/image|favicon.ico|sitemap.xml|robots.txt).*)",
],
};
```
```typescript src/app/page.tsx lines theme={null}
import { auth0 } from "@/lib/auth0";
import './globals.css';
export default async function Home() {
// Fetch the user session
const session = await auth0.getSession();
// If no session, show sign-up and login buttons
if (!session) {
return (
);
}
// If session exists, show a welcome message and logout button
return (
Welcome, {session.user.name}!
);
}
```
```typescript src/lib/auth0.ts lines theme={null}
import { Auth0Client } from "@auth0/nextjs-auth0/server";
export const auth0 = new Auth0Client();
```
```bash .env.local lines theme={null}
AUTH0_SECRET='use [openssl rand -hex 32] to generate a 32 bytes value'
APP_BASE_URL='http://localhost:3000'
AUTH0_DOMAIN='https://{yourDomain}'
AUTH0_CLIENT_ID='{yourClientId}'
AUTH0_CLIENT_SECRET='{yourClientSecret}'
```
```typescript src/middleware.ts lines theme={null}
import type { NextRequest } from "next/server";
import { auth0 } from "./lib/auth0";
export async function middleware(request: NextRequest) {
return await auth0.middleware(request);
}
export const config = {
matcher: [
/*
* Match all request paths except for the ones starting with:
* - _next/static (static files)
* - _next/image (image optimization files)
* - favicon.ico, sitemap.xml, robots.txt (metadata files)
*/
"/((?!_next/static|_next/image|favicon.ico|sitemap.xml|robots.txt).*)",
],
};
```
```typescript src/app/page.tsx lines theme={null}
import { auth0 } from "@/lib/auth0";
import './globals.css';
export default async function Home() {
// Fetch the user session
const session = await auth0.getSession();
// If no session, show sign-up and login buttons
if (!session) {
return (
);
}
// If session exists, show a welcome message and logout button
return (
Welcome, {session.user.name}!
);
}
```
```typescript src/middleware.ts lines theme={null}
import type { NextRequest } from "next/server";
import { auth0 } from "./lib/auth0";
export async function middleware(request: NextRequest) {
return await auth0.middleware(request);
}
export const config = {
matcher: [
/*
* Match all request paths except for the ones starting with:
* - _next/static (static files)
* - _next/image (image optimization files)
* - favicon.ico, sitemap.xml, robots.txt (metadata files)
*/
"/((?!_next/static|_next/image|favicon.ico|sitemap.xml|robots.txt).*)",
],
};
```
```bash .env.local lines theme={null}
AUTH0_SECRET='use [openssl rand -hex 32] to generate a 32 bytes value'
APP_BASE_URL='http://localhost:3000'
AUTH0_DOMAIN='https://{yourDomain}'
AUTH0_CLIENT_ID='{yourClientId}'
AUTH0_CLIENT_SECRET='{yourClientSecret}'
```
```typescript src/lib/auth0.ts lines theme={null}
import { Auth0Client } from "@auth0/nextjs-auth0/server";
export const auth0 = new Auth0Client();
```
```typescript src/app/page.tsx lines theme={null}
import { auth0 } from "@/lib/auth0";
import './globals.css';
export default async function Home() {
// Fetch the user session
const session = await auth0.getSession();
// If no session, show sign-up and login buttons
if (!session) {
return (
);
}
// If session exists, show a welcome message and logout button
return (
Welcome, {session.user.name}!
);
}
```
```typescript src/app/page.tsx lines theme={null}
import { auth0 } from "@/lib/auth0";
import './globals.css';
export default async function Home() {
// Fetch the user session
const session = await auth0.getSession();
// If no session, show sign-up and login buttons
if (!session) {
return (
);
}
// If session exists, show a welcome message and logout button
return (
Welcome, {session.user.name}!
);
}
```
```bash .env.local lines theme={null}
AUTH0_SECRET='use [openssl rand -hex 32] to generate a 32 bytes value'
APP_BASE_URL='http://localhost:3000'
AUTH0_DOMAIN='https://{yourDomain}'
AUTH0_CLIENT_ID='{yourClientId}'
AUTH0_CLIENT_SECRET='{yourClientSecret}'
```
```typescript src/lib/auth0.ts lines theme={null}
import { Auth0Client } from "@auth0/nextjs-auth0/server";
export const auth0 = new Auth0Client();
```
```typescript src/middleware.ts lines theme={null}
import type { NextRequest } from "next/server";
import { auth0 } from "./lib/auth0";
export async function middleware(request: NextRequest) {
return await auth0.middleware(request);
}
export const config = {
matcher: [
/*
* Match all request paths except for the ones starting with:
* - _next/static (static files)
* - _next/image (image optimization files)
* - favicon.ico, sitemap.xml, robots.txt (metadata files)
*/
"/((?!_next/static|_next/image|favicon.ico|sitemap.xml|robots.txt).*)",
],
};
```
Sign up for an{" "}
Auth0 account
{" "}
or{" "}
console.log("log in")}>
log in
{" "}
to your existing account to integrate directly with your own tenant.
