Anjan Shomodder

Posted on May 13

How to Add Google OAuth in a Local Supabase Project

#react #nextjs #webdev #oauth

How to Add Google OAuth in a Local Supabase Project

Setting up Google OAuth in a local Supabase project can be tricky, but with the right steps, you can get it working seamlessly. Here's a quick guide to help you through the process.

Video Tutorial

If you prefer a video tutorial, check out my YouTube video on this topic:

But if you want more detail explanation, check out this video tutorial. I have explained everything in detail.

Prerequisites

Docker: Ensure Docker is installed and running.
Supabase CLI: Install the Supabase CLI.

You can check these videos if you need help with the installation:

Steps to Set Up Google OAuth

1. Initialize a Local Supabase Project

Navigate to your project root and run:

  supabase init

This creates a config.toml file.
Start the Supabase project:

  supabase start

Note: The first run may take time to download images and running containers.

You will get the output like this:

2. Configure Environment Variables

Store the API URL and anon key in your .env.local file:

  NEXT_PUBLIC_SUPABASE_URL=<your_supabase_api_url>
  NEXT_PUBLIC_SUPABASE_ANON_KEY=<your_anon_key>

3. Set Up a Google Cloud Project

Create a new project in Google Cloud Console.
Go to API & Services > OAuth consent screen:
- Fill in the required fields.
- Set the user type to External.
Go to Clients tab & Create an OAuth client:
- Application type: Web application.
- Javascript origins can be left empty.
- Add two redirect URIs:

1. `http://localhost:54321/auth/v1/callback`
2. `http://127.0.0.1:54321/auth/v1/callback` (Optional)
   ![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u8caxozl8vu60foro9lu.png)

> Note: If you are using a different port, make sure to update the redirect URI accordingly.

Go to Data Access tab:
- Click on Add or Remove Scopes.
- Select the following scopes (Usually the first 3) & save:
Then go to the OAuth Client
- Copy the Client ID and Client Secret to a new file .env in your project root.
- Add the following lines to your .env file:
```
SUPABASE_AUTH_GOOGLE_CLIENT_ID=<your_client_id>
SUPABASE_AUTH_GSUPABASE_AUTH_GOOGLE_SECRET_KEYOOGLE_CLIENT_SECRET=<your_client_secret>
```

4. Update Supabase Config

Open config.toml and search for the auth.external section.
You should see a section like this:

    [auth.external.apple]
    enabled = false
    client_id = ""
    # DO NOT commit your OAuth provider secret to git. Use environment variable substitution instead:
    secret = "env(SUPABASE_AUTH_EXTERNAL_APPLE_SECRET)"
    # Overrides the default auth redirectUrl.
    redirect_uri = ""
    # Overrides the default auth provider URL. Used to support self-hosted gitlab, single-tenant Azure,
    # or any other third-party OIDC providers.
    url = ""
    # If enabled, the nonce check will be skipped. Required for local sign in with Google auth.
    skip_nonce_check = false

Duplicate the code and change the section name to auth.external.google and update the values:

  [auth.external.google]
  enabled = true
  client_id = "env(SUPABASE_AUTH_GOOGLE_CLIENT_ID)"
  # DO NOT commit your OAuth provider secret to git. Use environment variable substitution instead:
  secret = "env(SUPABASE_AUTH_GOOGLE_SECRET_KEY)"
  # Overrides the default auth redirectUrl.
  redirect_uri = "http://localhost:54321/auth/v1/callback"
  # Overrides the default auth provider URL. Used to support self-hosted gitlab, single-tenant Azure,
  # or any other third-party OIDC providers.
  url = ""
  # If enabled, the nonce check will be skipped. Required for local sign in with Google auth.
  skip_nonce_check = true

Set enabled to true and skip_nonce_check to true.
Set client_id and secret to the environment variables you created in the .env file.
Set redirect_uri to http://localhost:54321/auth/v1/callback. Same as the one you added in the Google Cloud project.
- Now search for site_url under [auth] section and set it to http://localhost:3000:

5. Restart Supabase

After updating the config, restart Supabase:

  supabase stop
  supabase start

6. Implement Google Sign-In

You can use the nextjs repository to test the Google sign-in. You can find the repository here. If you want to create your own, follow these steps:

Create a server action:

'use server'

export const handleGoogleSignIn = async () => {
  const supabase = await createClientForServer()

  const baseUrl = process.env.NEXT_PUBLIC_URL || 'http://localhost:3000'

  const { data, error } = await supabase.auth.signInWithOAuth({
    provider: 'google',
    options: {
      redirectTo: `${baseUrl}/auth/callback`,
    },
  })

  if (error) {
    console.error('Error signing in with Google:', error)
    return
  }

  if (data) {
    console.log('Google sign-in data:', data)
    redirect(data.url) // Redirect to the URL provided by Supabase
    // Handle the response as needed
  }
}

Note: If you are using localhost as base url, make sure the redirect url is in supabase config is also using localhost. If you are using ip like 127.0.0.1, make sure the redirect url is also using 127.0.0.1. If they don't match you will get an error from google.

Create a new file app/auth/callback/route.js:

import { NextResponse } from 'next/server'
// The client you created from the Server-Side Auth instructions
import { createClientForServer } from '@/utils/supabase/server'

export async function GET(request) {
  const { searchParams, origin } = new URL(request.url)
  const code = searchParams.get('code')
  // if "next" is in param, use it as the redirect URL
  const next = searchParams.get('next') ?? '/'

  if (code) {
    const supabase = await createClientForServer()
    const { error } = await supabase.auth.exchangeCodeForSession(code)
    if (!error) {
      const forwardedHost = request.headers.get('x-forwarded-host') // original origin before load balancer
      const isLocalEnv = process.env.NODE_ENV === 'development'
      if (isLocalEnv) {
        // we can be sure that there is no load balancer in between, so no need to watch for X-Forwarded-Host
        return NextResponse.redirect(`${origin}${next}`)
      } else if (forwardedHost) {
        return NextResponse.redirect(`https://${forwardedHost}${next}`)
      } else {
        return NextResponse.redirect(`${origin}${next}`)
      }
    }
  }

  // return the user to an error page with instructions
  return NextResponse.redirect(`${origin}/auth/auth-code-error`)
}

Add a form with buttton to call the handleGoogleSignIn function:

<form action={handleGoogleSignIn}>
  <button type='submit' className='btn btn-xl '>
    Sign in with Google
  </button>
</form>

For detailed instruction, check out the video on youtube.

7. Test Google Sign-In

Run your development server:

  npm run dev

Click the "Sign in with Google" button and follow the prompts.
If everything is set up correctly, you should be redirected to your app after signing in.
You can use supabase.auth.getUser() to check if the user is logged in.

Recap

Update the config.toml file with Google OAuth settings.
Restart Supabase after changes.
Ensure redirect URIs are correctly configured.

That's it! You now have Google OAuth working in your local Supabase project. If you found this guide helpful, feel free to share it and check out my other tutorials for more tips.