In this guide, you’ll learn how to:
  • Enable social sign in providers in Supabase.
  • Configure the provider’s settings in Supabase.
  • Connect them to your Rocket app for live authentication.
Heads up: Social sign in in Rocket only works with your app’s live preview URL after publishing.
It will not work inside Rocket.

Before you begin

You’ll need:
  • A Supabase account with an active project.
  • Your Supabase account connected to Rocket.
  • Your Rocket app’s live preview link or custom domain.
  • Access to the developer console for your chosen social provider such as Google, GitHub, or Facebook.

Set up a social provider in Supabase

The steps below use Google as the example, but the process is similar for other providers.
For provider specific instructions, check their official documentation.
1

Open the provider settings in Supabase

  1. In your Supabase project, go to Authentication in the left sidebar.
  2. Click Sign In / Providers.
  3. Select your desired provider. In this example, select Google.
Supabase Authentication providers list lightSupabase Authentication providers list dark

Opening provider settings in Supabase

Success check: The provider settings panel opens and shows fields for credentials and a callback URL.
2

Create credentials in the provider's developer console

In the provider’s developer console such as Google Cloud Console:
  • Create a new OAuth 2.0 Client ID and Secret.
  • In Authorized JavaScript origins, use your Rocket app’s live preview URL or custom domain. Do not use localhost.
  • In Authorized redirect URIs, paste the Callback URL from Supabase.
For Google, see the Google OAuth setup guide.
Success check: You have a Client ID and Client Secret generated in your provider’s console.
3

Enter credentials into Supabase

On the provider’s settings page in Supabase:
  1. In field 1, paste the Client ID from the provider’s developer console.
  2. In field 2, paste the Client Secret from the provider’s developer console.
  3. Copy the Redirect URL shown in field 3 and ensure it matches exactly in your provider’s settings.
Supabase Google provider settings lightSupabase Google provider settings dark

Entering Client ID, Client Secret, and Callback URL in Supabase

Always copy the callback URL directly from Supabase to avoid typos. Each provider will have a unique callback URL.
Success check: Supabase shows your provider as enabled in the list.
4

Test sign in in your Rocket app

  1. Publish your Rocket app to get the live preview link.
  2. Open the live preview instead of localhost.
  3. Click Sign in with [Provider].
  4. Complete the authentication flow.
Success check: You are redirected back to your Rocket app and logged in through the provider.

Troubleshooting

1. OAuth error after clicking sign in

What you’ll see:
Clicking the provider’s sign in button triggers an OAuth related error page.
How to fix it:
  • Ensure the Authorized redirect URI in the provider console matches exactly with the Supabase callback URL.
  • Confirm the Authorized JavaScript origins includes your Rocket live preview or custom domain.

2. Redirected but not logged in

What you’ll see:
After provider login, you return to your app but are not authenticated.
How to fix it:
  • Verify Rocket is connected to the Supabase project where the provider is enabled.
  • Test only on the live preview URL or your custom domain instead of localhost.

Social sign in done right

You have now enabled a social authentication provider in your Rocket app using Supabase.
Need help?
Email us at support@rocket.new or join our Discord community.