Skip to main content

Authentication with Google in NextJS and Supabase

tip

Before you start, make sure you have created Terms of Service and Privacy Policy pages. You will need to add these links when you set up Google Auth.

tip

Set up a Google Search Console and add your domain to it. Verifying your domain will speed up the process of getting your app approved by Google.

Configuring Authentication in Google Cloud​

  1. Go to the Google Cloud and create a new project if you don't have one already.
  2. Go to OAuth consent screen in Google Cloud to create a new consent screen.
  • [OAuth consent screen] Set up the consent screen settings
    • User Type: External
    • Application name/logo: anything you want
    • Add your website URL, privacy policy and terms of service URLs
    • Add your domain as an authorized domain
    • Add your email address

  • [Scopes] Add the following scopes to Your non-sensitive scopes:

    • .../auth/userinfo.email
    • .../auth/userinfo.profile

  • [Test users] section

    • Add your email address as a test user

  • [Summary] section

    • Check if everything is correct. If yes, click Back to Dashboard button.
  1. Go to Credentials and click Create Credentials to create a new OAuth Client ID.
    • Application type: Web application
    • Name: anything you want
    • Authorized JavaScript origins: leave empty
    • Authorized redirect URIs: add http://localhost:54321/auth/v1/callback for local development and https://<project-id>.supabase.co/auth/v1/callback
    • Click Create button
    • Save Client ID and Client Secret for later

Whenever you are ready with your app, return to the OAuth consent screen and click Publish App button. This will start the process of getting your app approved by Google. If it shows Prepare for verification button, go through the steps required.

Google will email you asking about the status of your app. Reply to this email.

info

Usually, it took me a couple of days to get my app approved by Google. But it can take longer if you use more sensitive scopes.

Configuring Authentication in Local Supabase​

  1. In SupaLaunch, open config file /supabase/config.toml.
  2. Find the following section, add your Google Client ID and Client Secret:
[auth.external.google]
enabled = true
client_id = ""
secret = ""
  1. Run supabase stop and supabase start to restart Supabase.
  2. Now you should be able to login with Google while using your local Supabase.

Configuring Authentication in Production Supabase​

Turn on authentication with Google in Supabase:

  1. In supabase.com, go Authentication -> Providers.
  2. Turn on Google Auth.
  3. Add your Google Client ID and Client Secret.
  4. Click Save.

Now Google Authentication should work in production with your test user. Once Google approves your app, it will work for all users.