Google OAuth Setup

This document provides an overview of setting up Google OAuth in your project using NextAuth and Supabase. We'll cover the steps to obtain Google OAuth keys and where to configure them in your project.

NextAuth

NextAuth Google OAuth Setup

To set up Google OAuth using NextAuth, follow these steps:

Setup

1. Create a Google Cloud Project:

   • Go to the Google Cloud Console and create a new project.

2. Configure OAuth Consent Screen:

   • Navigate to the OAuth consent screen tab and configure the consent screen with the required details.

3. Create OAuth 2.0 Credentials:

   • Go to the Credentials tab and create new OAuth 2.0 Client IDs.
   • Set the application type to Web application.
   • Add authorized redirect URIs. For example: http://localhost:3000/api/auth/callback/google.

4. Obtain Client ID and Client Secret:

   • Copy the generated Client ID and Client Secret.

5. Add your Client ID and Client Secret to .env.local:

   • Rename .env.example to .env.local if you haven't already.
   • Add your Google Client ID, Client Secret, and Callback URL to the environment variables:

   GOOGLE_CLIENT_ID=<your_google_client_id>
   GOOGLE_CLIENT_SECRET=<your_google_client_secret>
   CALLBACK_URL='/admin/customers'

Supabase

Supabase Google OAuth Setup

To set up Google OAuth using Supabase, follow these steps:

Setup

1. Create a Google Cloud Project:

   • Go to the Google Cloud Console and create a new project.

2. Configure OAuth Consent Screen:

   • Navigate to the OAuth consent screen tab and configure the consent screen with the required details.

3. Create OAuth 2.0 Credentials:

   • Go to the Credentials tab and create new OAuth 2.0 Client IDs.
   • Set the application type to Web application.
   • Add authorized redirect URIs. For example: https://<your-supabase-project-id>.supabase.co/auth/v1/callback.

4. Obtain Client ID and Client Secret:

   • Copy the generated Client ID and Client Secret.

5. Add Google Provider in Supabase Dashboard:

   • Go to your Supabase project dashboard.
   • Navigate to the Authentication settings.
   • Under External OAuth Providers, enable Google and add your Client ID and Client Secret.

Using Google OAuth with Supabase

No additional code changes are needed in your application. Supabase will handle the OAuth flow based on the configuration in the dashboard.

Tip: Regularly check for updates and best practices in the NextAuth documentation and the Supabase documentation to keep your integration secure and efficient.