OAuth Setup

Enable users to sign in with their favorite social accounts like GitHub, Google, and more.

What is OAuth?

OAuth lets users log in using accounts they already have (like GitHub or Google) instead of creating new passwords. It's faster and more secure.

GitHub OAuth Setup

For detailed instructions, see the Supabase GitHub OAuth documentation.

1. Create GitHub OAuth App

1. Go to GitHub Developer Settings
2. Click "New OAuth App"
3. Fill in the details:
   • Application name: Your Onlook App
   • Homepage URL: http://localhost:3000 (or your production domain)
   • Authorization callback URL:
     • Local development: http://localhost:54321/auth/v1/callback
     • Production: https://your-production-domain/auth/v1/callback
4. Click "Register application"
5. Copy your Client ID and Client Secret

2. Configure Supabase

1. Open your Supabase dashboard
2. Go to Authentication → Providers
3. Find GitHub and click Enable
4. Paste your:
   • Client ID
   • Client Secret
5. Click Save

3. Update Your App

Add the GitHub provider to your login page:

import { createClient } from '@supabase/supabase-js'

const supabase = createClient(supabaseUrl, supabaseKey)

// Add GitHub login button
const signInWithGitHub = async () => {
  const { error } = await supabase.auth.signInWithOAuth({
    provider: 'github'
  })
  if (error) console.error('Error:', error)
}

Google OAuth Setup

For detailed instructions, see the Supabase Google OAuth documentation.

1. Create Google OAuth App

1. Go to Google Cloud Console
2. Create a new project or select existing one
3. Go to APIs & Services → Credentials
4. Click "Create Credentials" → "OAuth client ID"
5. Choose "Web application"
6. Add authorized redirect URIs:
   • Local development: http://localhost:54321/auth/v1/callback
   • Production: https://your-production-domain/auth/v1/callback
7. Copy your Client ID and Client Secret

2. Configure Supabase

1. In Supabase dashboard, go to Authentication → Providers
2. Find Google and click Enable
3. Paste your Client ID and Client Secret
4. Click Save

3. Add to Your App

const signInWithGoogle = async () => {
  const { error } = await supabase.auth.signInWithOAuth({
    provider: 'google'
  })
  if (error) console.error('Error:', error)
}

Other Providers

Supabase supports many OAuth providers. For comprehensive setup instructions for all providers, see the Supabase Social Login documentation.

Popular providers include:

• Discord: Follow similar steps at Discord Developer Portal
• Twitter: Set up at Twitter Developer Portal
• Facebook: Configure at Facebook Developers
• Apple: Set up at Apple Developer

Note: For each provider, remember to add both local (http://localhost:54321/auth/v1/callback) and production (https://your-production-domain/auth/v1/callback) redirect URIs to avoid redirect_uri_mismatch errors.

Important Notes

Environment Variables

Make sure your .env.local has:

NEXT_PUBLIC_SUPABASE_URL=your-supabase-url
NEXT_PUBLIC_SUPABASE_ANON_KEY=your-supabase-anon-key

Testing

1. Start your Onlook app
2. Click the OAuth login button
3. You should be redirected to the provider (GitHub/Google)
4. After authorizing, you'll be redirected back to your app
5. Check if the user is logged in

Troubleshooting

"Invalid redirect URI"

• Double-check your callback URL in the OAuth app settings
• Make sure it matches exactly: http://localhost:54321/auth/v1/callback

"Client ID not found"

• Verify you copied the Client ID and Client Secret correctly
• Check that the OAuth provider is enabled in Supabase

"Access denied"

• Ensure your OAuth app is public (not in development mode)
• For GitHub: Check that users have access to your organization (if applicable)

Next Steps

Once OAuth is working:

• Customize the login UI
• Add user profile information
• Set up role-based access
• Configure email notifications

That's it! Your users can now sign in with their social accounts. 🎉