Question:

I’m trying to integrate Mailchimp OAuth authentication in my Next.js 14 application using NextAuth.js and TypeScript. My goal is to allow users to sign in with their Mailchimp accounts and fetch their Mailchimp data.

Problem:

When users click the “Sign in with Mailchimp” button, they are redirected to the Mailchimp authorization page, but after authorizing the app, they are redirected back to my app with an error: invalid_scope.

Expected Result:

• Users should be able to sign in with Mailchimp.
• Upon successful authentication, users should be redirected back to the app with a valid session.

Actual Result:

• After clicking “Sign in with Mailchimp” and authorizing the app, users are redirected to a URL with an invalid_scope error.

Error Message:

[next-auth][error][OAUTH_CALLBACK_HANDLER_ERROR]
https://next-auth.js.org/errors#oauth_callback_handler_error invalid_scope {
  error: {
    message: 'invalid_scope',
    stack: 'Error: invalid_scopen' +
      '    at oAuthCallback (/path/to/node_modules/next-auth/server/index.js:17000:23)n' +
      '    at Object.callback (/path/to/node_modules/next-auth/server/index.js:17145:107)n' +
      '    at AuthHandler (/path/to/node_modules/next-auth/server/index.js:17771:51)n' +
      '    at async NextAuthRouteHandler (/path/to/node_modules/next-auth/server/index.js:17979:30)n' +
      '    at async NextAuth._args$ (/path/to/node_modules/next-auth/server/index.js:18014:24)n' +
      '    at async /path/to/node_modules/next/dist/compiled/next-server/app-route.runtime.dev.js:6:63251',
    name: 'Error'
  },
  error_description: undefined,
  providerId: 'mailchimp',
  message: 'invalid_scope'
}

What I’ve Tried:

1. Verified Mailchimp OAuth Scopes:

   • I used the scopes audience_read, campaign_read, and list_read.

2. Updated NextAuth.js Configuration:

   • My nextauth.ts configuration is as follows:

   import NextAuth from 'next-auth';
   import Providers from 'next-auth/providers';
   
   export default NextAuth({
     providers: [
       Providers.Mailchimp({
         clientId: process.env.MAILCHIMP_CLIENT_ID!,
         clientSecret: process.env.MAILCHIMP_CLIENT_SECRET!,
         authorizationUrl: 'https://login.mailchimp.com/oauth2/authorize?response_type=code&scope=audience_read%20campaign_read%20list_read',
         tokenUrl: 'https://login.mailchimp.com/oauth2/token',
         profileUrl: 'https://login.mailchimp.com/oauth2/metadata',
         redirectUri: `${process.env.NEXTAUTH_URL}/api/auth/callback/mailchimp`,
       }),
     ],
     callbacks: {
       async jwt(token, account) {
         if (account) {
           token.accessToken = account.access_token;
         }
         return token;
       },
       async session(session, token) {
         session.accessToken = token.accessToken;
         return session;
       },
     },
     debug: true, // Enable debugging
   });
   

3. Configured Mailchimp App Redirect URI:

   • Set the Redirect URI in Mailchimp app settings to http://localhost:3000/api/auth/callback/mailchimp.

4. Verified Environment Variables:

   • Added environment variables in .env.local:

   MAILCHIMP_CLIENT_ID=your_mailchimp_client_id
   MAILCHIMP_CLIENT_SECRET=your_mailchimp_client_secret
   NEXTAUTH_URL=http://localhost:3000
   

5. Restarted Development Server:

   • Restarted the server with npm run dev.

Despite these steps, I’m still encountering the invalid_scope error.

Question:

• What could be causing the invalid_scope error in my Mailchimp OAuth configuration with NextAuth.js?
• Are there any specific scopes I might be missing or misconfiguring?
• How can I correctly set up Mailchimp OAuth in NextAuth.js to avoid this error?

Code Snippet:

NextAuth.js Configuration:

import NextAuth from 'next-auth';
import Providers from 'next-auth/providers';

export default NextAuth({
  providers: [
    Providers.Mailchimp({
      clientId: process.env.MAILCHIMP_CLIENT_ID!,
      clientSecret: process.env.MAILCHIMP_CLIENT_SECRET!,
      authorizationUrl: 'https://login.mailchimp.com/oauth2/authorize?response_type=code&scope=audience_read%20campaign_read%20list_read',
      tokenUrl: 'https://login.mailchimp.com/oauth2/token',
      profileUrl: 'https://login.mailchimp.com/oauth2/metadata',
      redirectUri: `${process.env.NEXTAUTH_URL}/api/auth/callback/mailchimp`,
    }),
  ],
  callbacks: {
    async jwt(token, account) {
      if (account) {
        token.accessToken = account.access_token;
      }
      return token;
    },
    async session(session, token) {
      session.accessToken = token.accessToken;
      return session;
    },
  },
  debug: true,
});

Environment Variables:

MAILCHIMP_CLIENT_ID=your_mailchimp_client_id
MAILCHIMP_CLIENT_SECRET=your_mailchimp_client_secret
NEXTAUTH_URL=http://localhost:3000

Any help would be greatly appreciated!