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
| Variable | Replace 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.