![Auth0 Next.js SDK Banner](https://cdn.auth0.com/website/sdks/banners/nextjs-auth0-banner.png) The Auth0 Next.js SDK is a library for implementing user authentication in Next.js applications. [![Auth0 Next.js SDK Release](https://img.shields.io/npm/v/@auth0/nextjs-auth0)](https://www.npmjs.com/package/@auth0/nextjs-auth0) ![Auth0 Next.js SDK Downloads](https://img.shields.io/npm/dw/@auth0/nextjs-auth0) [![Auth0 Next.js SDK License](https://img.shields.io/:license-mit-blue.svg?style=flat)](https://opensource.org/licenses/MIT) 📚 [Documentation](#documentation) - 🚀 [Getting Started](#getting-started) - 💻 [API Reference](https://auth0.github.io/nextjs-auth0/) - 💬 [Feedback](#feedback) ## Documentation - [QuickStart](https://auth0.com/docs/quickstart/webapp/nextjs) - our guide for adding Auth0 to your Next.js app. - [Examples](https://github.com/auth0/nextjs-auth0/blob/main/EXAMPLES.md) - lots of examples for your different use cases. - [Security](https://github.com/auth0/nextjs-auth0/blob/main/SECURITY.md) - Some important security notices that you should check. - [Docs Site](https://auth0.com/docs) - explore our docs site and learn more about Auth0. ## Getting Started ### 1. Install the SDK ```shell npm i @auth0/nextjs-auth0 ``` This library requires Node.js 20 LTS and newer LTS versions. ### 2. Add the environment variables Add the following environment variables to your `.env.local` file: ```env AUTH0_DOMAIN= AUTH0_CLIENT_ID= AUTH0_CLIENT_SECRET= AUTH0_SECRET= APP_BASE_URL= ``` The `AUTH0_DOMAIN`, `AUTH0_CLIENT_ID`, and `AUTH0_CLIENT_SECRET` can be obtained from the [Auth0 Dashboard](https://manage.auth0.com) once you've created an application. **This application must be a `Regular Web Application`**. The `AUTH0_SECRET` is the key used to encrypt the session and transaction cookies. You can generate a secret using `openssl`: ```shell openssl rand -hex 32 ``` The `APP_BASE_URL` is the URL that your application is running on. When developing locally, this is most commonly `http://localhost:3000`. > [!IMPORTANT] > You will need to register the following URLs in your Auth0 Application via the [Auth0 Dashboard](https://manage.auth0.com): > > - Add `http://localhost:3000/auth/callback` to the list of **Allowed Callback URLs** > - Add `http://localhost:3000` to the list of **Allowed Logout URLs** ### 3. Create the Auth0 SDK client Create an instance of the Auth0 client. This instance will be imported and used in anywhere you need access to the authentication methods on the server. Add the following contents to a file named `lib/auth0.ts`: ```ts import { Auth0Client } from "@auth0/nextjs-auth0/server"; export const auth0 = new Auth0Client(); ``` > [!NOTE] > The Auth0Client automatically uses safe defaults to manage authentication cookies. For advanced use cases, you can customize transaction cookie behavior by providing your own configuration. See [Transaction Cookie Configuration](https://github.com/auth0/nextjs-auth0/blob/main/EXAMPLES.md#transaction-cookie-configuration) for details. ### 4. Add the authentication middleware Create a `middleware.ts` file in the root of your project's directory: ```ts import type { NextRequest } from "next/server"; import { auth0 } from "./lib/auth0"; // Adjust path if your auth0 client is elsewhere 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).*)" ] }; ``` > [!NOTE] > If you're using a `src/` directory, the `middleware.ts` file must be created inside the `src/` directory. > [!IMPORTANT] > This broad middleware matcher is essential for rolling sessions and security features. For scenarios when rolling sessions are disabled, see [Session Configuration](https://github.com/auth0/nextjs-auth0/blob/main/EXAMPLES.md#session-configuration) for alternative approaches. You can now begin to authenticate your users by redirecting them to your application's `/auth/login` route: ```tsx import { auth0 } from "./lib/auth0"; // Adjust path if your auth0 client is elsewhere export default async function Home() { const session = await auth0.getSession(); if (!session) { return (

); } return (

Welcome, {session.user.name}!

Auth0 Logo

Auth0 is an easy to implement, adaptable authentication and authorization platform. To learn more checkout Why Auth0?

This project is licensed under the MIT license. See the LICENSE file for more info.

Pacote	Downloads	Stars	Tamanho	Issues	Publicado em	Licença

@auth0/nextjs-auth0	324,148	2,242	740 kB	15	il y a 3 jours	MIT