Skip to main content

OAuth Authentication 🔐

OAuth authentication allows users to sign in using their existing accounts from third-party providers like Google, GitHub, and more. This method simplifies the authentication process while leveraging the security and convenience of established identity providers.

We have integrated Google OAuth, and you can easily add other OAuth providers by following the steps outlined in this guide.

You can refer to the official Supabase documentation for more detailed information on OAuth authentication.

✨ Features​

  • Multiple Provider Support: Integration with various OAuth providers including Google, GitHub, Discord, and more
  • Seamless Authentication: Users can sign in with their existing accounts
  • Automatic Profile Information: Basic user information is automatically retrieved from the OAuth provider
  • Customizable Provider List: Easy configuration to enable/disable specific OAuth providers

⚙️ Configuration​

To enable OAuth authentication, you'll need to configure the environment variables, the auth config file and set up the OAuth providers in your Supabase dashboard.

  1. Configure the OAuth providers in the apps/web/src/configs/authConfig.ts file:

    {
      providers: {
        // ... other auth methods
        oAuth: ['google'] // Add your desired OAuth providers
      }
    }

  2. Set up your OAuth provider credentials in your Supabase dashboard (for production) and configure the necessary environment variables & apps/web/supabase/config.toml file (for development)

  3. To complete the Google OAuth setup, you need to create/open a project in the Google Cloud Console and obtain the client ID & client secret and add them to your .env file. You can refer to the official Supabase documentation for detailed instructions.

    GOOGLE_CLIENT_ID = your_google_client_id
    GOOGLE_CLIENT_SECRET = your_google_client_secret

🛠️ Implementation​

Below is the code example for implementing OAuth authentication.

Example Usage​

The OAuth sign-in process is handled through the OauthProviders component. Example usage can be found in the apps/web/src/app/(front)/auth/login/page.tsx file:

import OauthProviders from '@repo/ui/providers/OauthProviders'
import authConfig from '@configs/authConfig'

<OauthProviders
  providers={authConfig.providers.oAuth}
  redirectTo={`${process.env.NEXT_PUBLIC_APP_URL}`}
/>

Available Providers​

The following OAuth providers are supported in Supabase:

  • Apple
  • Azure
  • Bitbucket
  • Discord
  • Facebook
  • Figma
  • GitHub
  • GitLab
  • Google
  • Kakao
  • Keycloak
  • LinkedIn
  • Notion
  • Slack
  • Spotify
  • Twitch
  • Twitter
  • WorkOS
  • Zoom

How to add a new OAuth provider​

You can add a new OAuth provider by following these steps. Here, we'll demonstrate how to add GitHub OAuth to your application:

  1. Register Your GitHub OAuth App

    • Log in to your GitHub account
    • Go to GitHub Developer Settings > OAuth Apps > New OAuth App
    • Fill in the application details:
      • Application name
      • Homepage URL
      • Authorization callback URL

  2. Configure Supabase

    For development:

    • Add your GitHub OAuth credentials to your .env file:

      GITHUB_CLIENT_ID = your_github_client_id
      GITHUB_CLIENT_SECRET = your_github_client_secret

    • Add the GitHub OAuth configuration to your apps/web/supabase/config.toml file:

      [auth.external.github]
      enabled = true
      client_id = "env(GITHUB_CLIENT_ID)"
      secret = "env(GITHUB_CLIENT_SECRET)"
      redirect_uri = "http://127.0.0.1:54321/auth/v1/callback"

    For production

    Configure GitHub OAuth in your Supabase dashboard:

    • Log in to your Supabase dashboard
    • Create a new project or select an existing project
    • Go to Authentication > Sign In / Up
    • Go to GitHub
    • Enable GitHub auth
    • Add your GitHub OAuth credentials

  3. Update Auth Config

    In apps/web/src/configs/authConfig.ts file, add GitHub to the OAuth providers:

    {
      providers: {
        // ... other auth methods
        oAuth: ['google', 'github'] // Add GitHub to OAuth providers
      }
    }

That's it! You've successfully added GitHub OAuth to your application. 🎉

You can follow similar steps to add other OAuth providers to your application.

✅ Conclusion​

OAuth authentication provides a secure and user-friendly way to implement authentication in your application. It reduces friction in the sign-up/sign-in process while maintaining high security standards through trusted providers.