Lovablefeaturebeginner

Add Social Login to Lovable App

Add Google and GitHub OAuth login via Supabase Auth with profile sync.

What you'll get

Social login with Google and GitHub OAuth buttons, profile auto-creation, and account linking.

The Prompt

Add Google and GitHub social login to my Lovable app using Supabase Auth.

REQUIREMENTS:
1. Add "Continue with Google" and "Continue with GitHub" buttons on the Sign In and Sign Up pages with proper brand icons and colors.
2. Configure Supabase Auth to use Google and GitHub as OAuth providers.
3. On successful OAuth callback, check if a profile exists in the "profiles" table. If not, auto-create one using the OAuth user data (name, avatar, email).
4. Handle the OAuth redirect flow — redirect to /auth/callback, process the session, then redirect to the dashboard.
5. Show a loading state during the OAuth redirect.
6. If the OAuth email matches an existing email/password account, link the accounts.
7. Handle errors gracefully: provider unavailable, user denied access, email already registered.

DATABASE:
- No new tables. Uses existing "profiles" table.
- Update the profile creation trigger to handle OAuth metadata.

ENVIRONMENT VARIABLES:
- Google: GOOGLE_CLIENT_ID, GOOGLE_CLIENT_SECRET (set in Supabase Dashboard)
- GitHub: GITHUB_CLIENT_ID, GITHUB_CLIENT_SECRET (set in Supabase Dashboard)

SECURITY:
- Configure redirect URLs in both Google/GitHub OAuth app settings and Supabase.
- Only allow redirects to your verified domain.

Replace these variables

VariableReplace with
[OAUTH_PROVIDERS]OAuth providers to add (e.g., Google, GitHub, Apple)

Tips for best results

Set up OAuth credentials in Google Cloud Console and GitHub Settings BEFORE configuring Supabase.

Add your production URL to the allowed redirect URIs in both the OAuth provider and Supabase settings.

Follow-up prompts

Add Apple login

Add 'Sign in with Apple' as an additional OAuth provider. Note: Apple requires a paid Apple Developer account and specific configuration.

Related prompts