oauth providers/facebook

18 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

Facebook OAuth setup overview

Setting up Facebook logins for a Supabase application requires four parts: Create and configure a Facebook Application on the Facebook Developers Site, configure email permissions in the Facebook app (required for Supabase Auth), add the Facebook keys to the Supabase Project dashboard, and add the login code to the Supabase JS Client App.

Facebook email permission requirement

Configuring email permissions in your Facebook app is required for Supabase Auth to work correctly. Without email permissions, Facebook will not return the user's email address, which may cause authentication failures or incomplete user profiles.

Facebook callback URI format

The callback URI for Facebook OAuth in Supabase follows the pattern https://<project-ref>.supabase.co/auth/v1/callback. This URI should be entered under Valid OAuth Redirect URIs in the Facebook Login Settings page.

Configure email permission in Facebook Use Cases

To configure email permission for Supabase Auth, navigate to your Facebook app dashboard, click Use Cases under Build Your App, find Authentication and Account Creation and click Edit, then verify that both public_profile and email show status Ready for testing. If email is not listed, click the Add button next to it.

Configure Facebook auth provider via Management API

You can configure the Facebook auth provider using the Management API with a PATCH request to https://api.supabase.com/v1/projects/$PROJECT_REF/config/auth. Set three fields: external_facebook_enabled (boolean), external_facebook_client_id (string), and external_facebook_secret (string). Requires SUPABASE_ACCESS_TOKEN header.

JavaScript Facebook OAuth sign-in example

async function signInWithFacebook() { const { data, error } = await supabase.auth.signInWithOAuth({ provider: 'facebook', }) if (error) { console.error('Error signing in with Facebook:', error.message) return } // The user will be redirected to Facebook for authentication } This example shows how to call signInWithOAuth() with 'facebook' as the provider in JavaScript.

Dart/Flutter Facebook OAuth sign-in example

Future<void> signInWithFacebook() async { await supabase.auth.signInWithOAuth( OAuthProvider.facebook, redirectTo: kIsWeb ? null : 'my.scheme://my-host', authScreenLaunchMode: kIsWeb ? LaunchMode.platformDefault : LaunchMode.externalApplication, ); } This example shows how to call signInWithOAuth() with OAuthProvider.facebook in Flutter.

Flutter Facebook SDK signInWithIdToken alternative

import 'package:flutter_facebook_auth/flutter_facebook_auth.dart'; import 'package:supabase_flutter/supabase_flutter.dart'; Future<void> signInWithFacebook() async { try { final LoginResult result = await FacebookAuth.instance.login( permissions: ['public_profile', 'email'], ); if (result.status == LoginStatus.success) { final accessToken = result.accessToken!.tokenString; await Supabase.instance.client.auth.signInWithIdToken( provider: OAuthProvider.facebook, idToken: accessToken, ); } else { throw Exception('Facebook login failed: ${result.status}'); } } catch (e) { throw Exception('Facebook authentication error: ${e.toString()}'); } } This example shows using the Facebook SDK directly in Flutter and then authenticating with Supabase using signInWithIdToken(). Requires flutter_facebook_auth dependency.

Swift Facebook OAuth sign-in example

import SwiftUI struct SignInWithFacebook: View { @Environment(\.webAuthenticationSession) var webAuthenticationSession var body: some View { Button("Sign in with Facebook") { Task { do { try await supabase.auth.signInWithOAuth( provider: .facebook, redirectTo: URL(string: "my.scheme://my-host")!, launchFlow: { @MainActor url in try await webAuthenticationSession.authenticate( using: url, callbackURLScheme: "my.scheme" ) } ) } catch { print("Failed to sign in with Facebook: \(error)") } } } } } This example shows how to call signInWithOAuth() with .facebook provider in Swift. Requires configuring URL scheme in Xcode under Target > Info > URL Types.

Kotlin Facebook OAuth sign-in example

suspend fun signInWithFacebook() { supabase.auth.signInWith(Facebook) } This example shows how to call signInWith() with Facebook provider in Kotlin.

C# Facebook OAuth sign-in example

var state = await supabase.Auth.SignIn(Provider.Facebook); var signInUrl = state.Uri; This example shows how to call SignIn() with Provider.Facebook in C#.

Facebook Development mode limitations

Facebook apps start in Development mode, which has the following limitations: only users with a role on the app (administrators, developers, testers) can authenticate, and other users will see an 'App Not Setup' error when trying to log in.

Add test users to Facebook Development app

To add test users to a Facebook app in Development mode, go to developers.facebook.com, select your app, navigate to App Roles > Roles, and add users as Testers, Developers, or Administrators. Users must accept the invitation from their Facebook notification settings.

Facebook App Review process steps

Before a Facebook app can be used by the general public, complete the App Review process: (1) Complete App Settings in Settings > Basic including App Icon, Privacy Policy URL, Terms of Service URL (if applicable), and App Domain. (2) Request Permissions by navigating to App Review > Permissions and Features and request public_profile and email. (3) Submit for Review with detailed testing instructions, a screencast video demonstrating the login feature, and explanation of data usage. (4) Wait for Approval, which typically takes 1-5 business days.

Facebook 'App not setup' error troubleshooting

The 'App not setup' error occurs when a user without a role on your app tries to log in while the app is in Development mode. Solution: Either add the user as a tester in your Facebook app settings, or complete the App Review process to make your app available to all users.

Facebook user email not returned troubleshooting

Facebook only returns the email address if the user has a confirmed email on their Facebook account, your app has been granted the email permission, and the email permission is marked as 'Ready for testing' in Use Cases > Authentication and Account Creation. Solution: Check that the email permission is properly configured in your Facebook app's Use Cases settings.

Facebook 'Redirect URI mismatch' error troubleshooting

The 'Redirect URI mismatch' error indicates the callback URL configured in Facebook doesn't match the one used during authentication. Solution: Verify that the Valid OAuth Redirect URIs in your Facebook app settings exactly matches https://<project-ref>.supabase.co/auth/v1/callback with no trailing slashes or typos.

Facebook login works in development but not production troubleshooting

If login works locally but fails in production, check: (1) Your production URL is added to Valid OAuth Redirect URIs in Facebook. (2) The App ID and Secret in your Supabase dashboard match your Facebook app. (3) Your Facebook app is in Live mode (not Development mode).

Give your agent this brain