Add WordPress login to Next.js
Users sign in to a Next.js application with WordPress.com accounts.
Auth.js · Const
WordPress
Auth.js provides a built-in WordPress OAuth provider. Register its callback URL, supply the WordPress client credentials, and add WordPress to the Auth.js providers configuration.
How it works
The WordPress provider is a built-in OAuth integration. Add the provider to Auth.js configuration, set the WordPress client credentials through AUTH_WORDPRESS_ID and AUTH_WORDPRESS_SECRET, and register the callback URL at /api/auth/callback/wordpress.
Syntax
function default(config): OAuthConfig<Record<string, any>>Parameters
| Name | Type | Description |
|---|---|---|
config | OAuthUserConfig<Record<string, any>> | Optional OAuth provider configuration, including client credentials or overrides for the built-in settings. |
Returns
OAuthConfig<Record<string, any>>
Key points
- Auth.js includes WordPress as a built-in provider rather than requiring a custom OAuth provider definition.
- For Next.js, register the provider callback at /api/auth/callback/wordpress on the application's origin.
- The documented environment variables for the WordPress client ID and secret are AUTH_WORDPRESS_ID and AUTH_WORDPRESS_SECRET.
- The core provider is a factory whose configuration argument produces an OAuthConfig<Record<string, any>>.
- WordPress supplies default OAuth settings, so basic use can rely on the built-in configuration.
Common mistakes
- The integration assumes WordPress uses OAuth 2 by default; override the built-in configuration if your deployment requires different OAuth settings.
Example: Configure WordPress login
import NextAuth from "next-auth"
import WordPress from "next-auth/providers/wordpress"
export const { handlers, auth, signIn, signOut } = NextAuth({
providers: [WordPress],
})Registers the built-in WordPress provider with NextAuth; credentials are read from the documented environment variables.
When to use it
Configure the core provider
A core Auth.js integration needs a provider definition with explicit client credentials.
Override provider defaults
A WordPress OAuth deployment differs from the built-in assumptions.
Interview questions
QHow do you configure WordPress authentication in Auth.js?
The provider can be added directly as WordPress in a framework configuration, or called as WordPress({ clientId, clientSecret }) in the core API. Auth.js uses the provider's built-in defaults unless you override them.
Follow-up: How would you customize it? Pass provider options to the function and merge them with the built-in defaults, changing only the settings required by the WordPress installation.
QWhich package import and environment variables are used?
For a Next.js setup, import WordPress from next-auth/providers/wordpress and include it in the providers array passed to NextAuth. The documented environment variables are AUTH_WORDPRESS_ID and AUTH_WORDPRESS_SECRET.
Follow-up: What must be configured outside the application? The WordPress client must be registered with the callback URL https://example.com/api/auth/callback/wordpress.
QWhat are the WordPress provider factory's parameter and return types?
The core provider factory accepts an OAuthUserConfig<Record<string, any>> configuration object and returns an OAuthConfig<Record<string, any>>. The configuration can provide client credentials and overrides for the default OAuth setup.
Follow-up: Why is the return type useful? It supplies the normalized provider definition that Auth.js consumes in its providers configuration.
Related
OAuthConfigOAuthUserConfigcustomizing a built-in OAuth providerNextAuthWordPress