Solving the “redirect_uri_mismatch” and “Try signing in with a different account” Errors with NextAuth and Google OAuth

✅ Free 1 hour AI consultation | 🌐 Zohey.io | 🤝 LinkedIn | ✉️ Email

As a startup founder, there are many challenges that come with building a SaaS business, and one of them is dealing with technical issues that may arise.

Especially for those that are bootstrapped, some of those issues can result in long hours of disappointment… In this article I discuss the issues I encountered when setting up Google Authentication and hope it helps you out saving some time!

Introduction

OAuth 2.0 is a widely-used protocol for enabling authentication and authorization between applications and service providers like Google, Facebook, and GitHub. When implementing OAuth 2.0 in your web application, you may encounter common errors such as redirect_uri_mismatch and issues with user authentication like "Try signing in with a different account." In this article I will walk you through the process of identifying and solving these errors using NextAuth, a popular authentication library for Next.js, with Google OAuth as the provider.

Context

Our example application uses the following stack:

• TypeScript
• Next.js with NextAuth for handling authentication
• Google OAuth 2.0 as the authentication provider
• Prisma for database integration

The Issue

We encountered two separate issues while working with NextAuth and Google OAuth:

1. Error 400: redirect_uri_mismatch
2. Authentication message: “Try signing in with a different account.”

Solving the “redirect_uri_mismatch” Error

The “redirect_uri_mismatch” error occurs when the redirect_uri specified in your application does not match the one registered in the Google Cloud Console. To resolve this issue, follow these steps:

1. Locate the NextAuth configuration file, typically named pages/api/auth/[...nextauth].ts.
2. Identify the redirect_uri used in your code. By default, NextAuth generates this URI for you, with the format https://your-domain.com/api/auth/callback/google. In case of localhost, you can use http://localhost:3000/api/auth/callback/google.
3. Verify your Google Cloud Platform (GCP) Console configuration. Ensure the redirect_uri from your code is present in the "Authorized redirect URIs" section of the OAuth 2.0 Client ID settings.
4. Restart your development server or redeploy your application after making any changes.

Solving the “Try signing in with a different account” Error

Okay, so I got through step 1 thinking I was there. But no, next error message popping up. This error message might appear for several reasons, such as access restrictions or insufficient user data. To resolve this issue, follow these steps:

1. Check the Google API project’s OAuth consent screen settings to ensure the app is published and not restricted to internal users.
2. Review your NextAuth configuration for any custom logic that may restrict access based on user attributes.
3. Make sure you’ve requested the necessary scopes in your NextAuth configuration, such as userinfo.profile and userinfo.email, to access the required user data.

Additionally, you can add an event to log the user object after a successful sign-in, which may help you identify any issues with the user data returned by Google. This looks like something like this:

export const authOptions: NextAuthOptions = {
  adapter: PrismaAdapter(prisma),
  providers: [
    GoogleProvider({
      clientId: process.env.GOOGLE_CLIENT_ID || '',
      clientSecret: process.env.GOOGLE_CLIENT_SECRET || '',
    }),
  ],
  events: {
    signIn: async (user, account, profile) => {
      console.log('User signed in:', user);
      console.log('Account:', account);
      console.log('Profile:', profile);
    },
  },
};

Tips for Solving Similar Issues

1. Double-check your redirect_uri: Ensure that it matches exactly in both your code and the Google Cloud Console.
2. Verify environment variables: Make sure variables like GOOGLE_CLIENT_ID and GOOGLE_CLIENT_SECRET are properly set in your project.
3. Check OAuth consent screen settings: Confirm that your app is published and allows access for the desired user types.
4. Review custom logic: Examine your NextAuth configuration for any custom logic that may restrict access.
5. Request necessary scopes: Verify that your app requests the required scopes to access user data.

Conclusion

Yes… dealing with OAuth 2.0 errors and authentication issues can be challenging, but following a systematic approach to identifying and resolving these issues can save you time and effort.

Understanding the configuration settings and custom logic in your NextAuth implementation, along with checking the OAuth consent screen settings and the user data returned by your authentication provider, will help you tackle these issues effectively. Hope this tutorial will save you some time.

Hope this helps and if you have any questions, please let me know