![nextjs-auth0](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. ![Release](https://img.shields.io/npm/v/@auth0/nextjs-auth0) ![Downloads](https://img.shields.io/npm/dw/@auth0/nextjs-auth0) [![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: ``` 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 follwing 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 we 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() ``` ### 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" 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. You can now begin to authenticate your users by redirecting them to your application's `/auth/login` route: ```tsx import { auth0 } from "@/lib/auth0" 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	252,871	2,129	345 kB	56	il y a 12 jours	MIT