Add Mailchimp login to Next.js
A Next.js application needs Mailchimp as a social sign-in option.
Auth.js · Const
Mailchimp
Mailchimp is a built-in Auth.js OAuth provider. Add it to the providers list and configure the documented Mailchimp credentials; Auth.js supplies default provider settings.
How it works
Mailchimp is a built-in OAuth provider. Add it to Auth.js's providers list; Auth.js uses the provider's default OAuth configuration, while client credentials are supplied through the documented environment variables or explicit provider configuration.
Syntax
function default(config?: OAuthUserConfig<Record<string, any>>): OAuthConfig<Record<string, any>>Parameters
| Name | Type | Description |
|---|---|---|
config | OAuthUserConfig<Record<string, any>> | Optional OAuth provider configuration, including values such as client ID and client secret. |
Returns
OAuthConfig<Record<string, any>>
Key points
- Auth.js includes Mailchimp as a built-in provider, so a separate custom OAuth provider definition is unnecessary.
- The provider's documented credential variables are
AUTH_MAILCHIMP_IDandAUTH_MAILCHIMP_SECRET. - For Next.js, register the Mailchimp callback at the
/api/auth/callback/mailchimpendpoint. - The integration supplies default OAuth settings that can be used without manually specifying every endpoint.
Common mistakes
- The provider is configured as OAuth 2 by default; override the built-in configuration only when your deployment requires different settings.
Example: Enable Mailchimp sign-in
import NextAuth from "next-auth"
import MailChimp from "next-auth/providers/mailchimp"
export const { handlers, auth, signIn, signOut } = NextAuth({
providers: [MailChimp],
})Register the built-in Mailchimp provider in a Next.js Auth.js configuration, then set the provider credentials in the environment.
When to use it
Customize provider configuration
An integration needs credentials or OAuth settings that differ from the defaults.
Configure the callback URL
A deployment is registering its OAuth redirect with Mailchimp.
Interview questions
QHow do you enable Mailchimp authentication in Next.js?
Import the framework-specific Mailchimp provider and include it in the Auth.js providers array. In Next.js, the documented form is MailChimp passed directly as a provider.
Follow-up: How would you customize it? Use the provider function form and pass an OAuth user configuration, such as client credentials or other supported overrides.
QWhich environment variables does the Mailchimp provider use?
The documented environment variables are AUTH_MAILCHIMP_ID and AUTH_MAILCHIMP_SECRET. Auth.js can infer the provider credentials from these names in the standard setup.
Follow-up: What must be changed for a nonstandard setup? Provide explicit clientId and clientSecret values in Mailchimp({ ... }) and override other defaults as needed.
QWhat callback URL must be registered with Mailchimp?
For a Next.js deployment, configure the callback URL as https://example.com/api/auth/callback/mailchimp. The provider identifier in the path is mailchimp.
Follow-up: How does the callback path differ in other integrations? The page documents /auth/callback/mailchimp for Qwik and SvelteKit, while Express is not yet documented there.
Related
OAuthConfigOAuthUserConfigprovidersMailChimpAuthAUTH_MAILCHIMP_IDAUTH_MAILCHIMP_SECRET