Add Auth0 sign-in
You want users to authenticate with an existing Auth0 tenant from a Next.js application.
Auth.js · Const
Auth0
Auth0 is a built-in Auth.js provider for signing users in through Auth0. Add it to the provider list, configure the documented credentials, and register the provider callback URL.
How it works
Auth0 is a built-in OpenID Connect provider. Add the provider to Auth.js, provide the Auth0 application credentials through the documented environment variables, and register the generated callback URL in Auth0.
Syntax
Auth0(config?: OIDCUserConfig<Auth0Profile>): OIDCConfig<Auth0Profile>Parameters
| Name | Type | Description |
|---|---|---|
config | OIDCUserConfig<Auth0Profile> | Optional Auth0 provider configuration, including credentials and OIDC settings. |
Returns
OIDCConfig<Auth0Profile>
Key points
- Auth.js includes Auth0 as a built-in sign-in integration.
- The provider documents
AUTH_AUTH0_IDandAUTH_AUTH0_SECRETas its environment-variable credentials. - The Next.js callback endpoint uses the
/api/auth/callback/auth0path. - The provider supplies defaults, so a basic setup can use
Auth0without a configuration object. - When customization is needed, the provider accepts an OIDC user configuration parameter typed for
Auth0Profile.
Common mistakes
- The Auth0 application must use the callback URL that matches the deployed Auth.js route; for the Next.js setup, this is the API callback path.
Example: Configure Auth0 with Next.js
import NextAuth from "next-auth"
import Auth0 from "next-auth/providers/auth0"
export const { handlers, auth, signIn, signOut } = NextAuth({
providers: [Auth0],
})Registers Auth0 as a built-in provider in a Next.js Auth.js configuration.
When to use it
Customize OIDC configuration
Your Auth0 application requires settings beyond the built-in defaults.
Register the callback endpoint
You are deploying an Auth.js app and need to connect the identity provider dashboard to its route.
Interview questions
QHow is Auth0 added to a Next.js Auth.js configuration?
Auth0 is supplied as a built-in provider by importing it from the framework-specific providers package and placing it in the providers array. In Next.js, the standard setup uses Auth0 directly, while explicit clientId and clientSecret configuration is also supported.
Follow-up: How would you customize the built-in provider? Call Auth0 with configuration overrides; Auth.js merges those overrides with the provider defaults.
QWhich environment variables does the Auth0 provider use?
The documented environment variables are AUTH_AUTH0_ID and AUTH_AUTH0_SECRET. Auth.js uses these credentials for the Auth0 integration when the provider is configured.
Follow-up: What URL must be configured in Auth0? Set the application callback to https://example.com/api/auth/callback/auth0, adjusted for the deployed origin.
QWhat callback URL should an Auth0 Next.js application register?
The provider's callback endpoint ends in /callback/auth0, because auth0 is the provider identifier used in the route. For Next.js, the documented path is /api/auth/callback/auth0.
Follow-up: Why does the identifier matter beyond the callback URL? Provider identifiers uniquely identify entries in AuthConfig.providers and are also used in URLs.
Related
Auth0ProfileOIDCUserConfigOIDCConfigcustomizing a built-in OAuth provider