Skip to content

Commit 833885d

Browse files
grdsdevgrdsdev
committed
add Facebook auth example
1 parent 195140d commit 833885d

File tree

13 files changed

+392
-0
lines changed

13 files changed

+392
-0
lines changed

‎examples/FACEBOOK_AUTH_SETUP.md‎

Lines changed: 98 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,98 @@
1+
# Facebook Authentication Setup
2+
3+
This guide explains how to set up Facebook authentication in the Supabase Examples app.
4+
5+
## Prerequisites
6+
7+
1. A Facebook Developer account
8+
2. A Facebook App created in the Facebook Developer Console
9+
3. Supabase project with Facebook OAuth configured
10+
11+
## Setup Steps
12+
13+
### 1. Facebook Developer Console Configuration
14+
15+
1. Go to [Facebook Developers](https://developers.facebook.com/)
16+
2. Create a new app or use an existing one
17+
3. Add "Facebook Login" product to your app
18+
4. Configure your OAuth redirect URIs in Facebook Login settings:
19+
- Add your Supabase project's Facebook OAuth callback URL
20+
- Format: `https://[your-project-ref].supabase.co/auth/v1/callback`
21+
22+
### 2. Supabase Configuration
23+
24+
1. Go to your Supabase project dashboard
25+
2. Navigate to Authentication > Providers
26+
3. Enable Facebook provider
27+
4. Enter your Facebook App ID and App Secret
28+
5. Configure the redirect URL if needed
29+
30+
### 3. Flutter App Configuration
31+
32+
#### Android Configuration
33+
34+
The following files have been configured for you:
35+
36+
1. **AndroidManifest.xml** - Contains Facebook SDK configuration
37+
2. **strings.xml** - Contains placeholder values for Facebook credentials
38+
39+
You need to update the following values in `android/app/src/main/res/values/strings.xml`:
40+
41+
```xml
42+
<string name="facebook_app_id">YOUR_ACTUAL_FACEBOOK_APP_ID</string>
43+
<string name="facebook_client_token">YOUR_ACTUAL_FACEBOOK_CLIENT_TOKEN</string>
44+
<string name="fb_login_protocol_scheme">fbYOUR_ACTUAL_FACEBOOK_APP_ID</string>
45+
```
46+
47+
#### iOS Configuration
48+
49+
The following files have been configured for you:
50+
51+
1. **Info.plist** - Contains Facebook SDK configuration
52+
53+
You need to update the following values in `ios/Runner/Info.plist`:
54+
55+
```xml
56+
<key>FacebookAppID</key>
57+
<string>YOUR_ACTUAL_FACEBOOK_APP_ID</string>
58+
<key>FacebookClientToken</key>
59+
<string>YOUR_ACTUAL_FACEBOOK_CLIENT_TOKEN</string>
60+
```
61+
62+
And update the URL scheme:
63+
```xml
64+
<string>fbYOUR_ACTUAL_FACEBOOK_APP_ID</string>
65+
```
66+
67+
## Getting Your Facebook Credentials
68+
69+
### App ID
70+
1. Go to Facebook Developers Console
71+
2. Select your app
72+
3. Go to Settings > Basic
73+
4. Copy the "App ID"
74+
75+
### Client Token
76+
1. In the same Basic settings page
77+
2. Copy the "Client Token"
78+
3. If you don't see it, you may need to generate one
79+
80+
## Testing
81+
82+
1. Replace all placeholder values with your actual Facebook credentials
83+
2. Run `flutter pub get` to install dependencies
84+
3. Run the app and test the "Continue with Facebook" button
85+
4. Ensure your Facebook app is configured to allow the bundle ID/package name of your Flutter app
86+
87+
## Troubleshooting
88+
89+
- **Android**: Make sure your package name in `android/app/build.gradle` matches what's configured in Facebook
90+
- **iOS**: Make sure your bundle identifier matches what's configured in Facebook
91+
- **Both platforms**: Ensure your Facebook app is not in "Development Mode" if testing with non-developer accounts
92+
- Check that your Supabase Facebook OAuth configuration matches your Facebook app settings
93+
94+
## Security Notes
95+
96+
- Never commit real Facebook credentials to version control
97+
- Consider using environment variables or secure configuration management
98+
- Regularly rotate your Facebook Client Token

‎examples/android/app/src/main/AndroidManifest.xml‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
11
<manifest xmlns:android="http://schemas.android.com/apk/res/android">
2+
<uses-permission android:name="android.permission.INTERNET"/>
3+
24
<application
35
android:label="supabase_examples"
46
android:name="${applicationName}"
@@ -30,6 +32,30 @@
3032
<meta-data
3133
android:name="flutterEmbedding"
3234
android:value="2" />
35+
36+
<!-- Facebook Configuration -->
37+
<meta-data
38+
android:name="com.facebook.sdk.ApplicationId"
39+
android:value="@string/facebook_app_id"/>
40+
<meta-data
41+
android:name="com.facebook.sdk.ClientToken"
42+
android:value="@string/facebook_client_token"/>
43+
44+
<activity
45+
android:name="com.facebook.FacebookActivity"
46+
android:configChanges="keyboard|keyboardHidden|screenLayout|screenSize|orientation"
47+
android:label="@string/app_name" />
48+
49+
<activity
50+
android:name="com.facebook.CustomTabActivity"
51+
android:exported="true">
52+
<intent-filter>
53+
<action android:name="android.intent.action.VIEW" />
54+
<category android:name="android.intent.category.DEFAULT" />
55+
<category android:name="android.intent.category.BROWSABLE" />
56+
<data android:scheme="@string/fb_login_protocol_scheme" />
57+
</intent-filter>
58+
</activity>
3359
</application>
3460
<!-- Required to query activities that can process text, see:
3561
https://developer.android.com/training/package-visibility and

‎examples/android/app/src/main/res/values/strings.xml‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
<?xml version="1.0" encoding="utf-8"?>
2+
<resources>
3+
<string name="app_name">Supabase Examples</string>
4+
<!-- Facebook Configuration -->
5+
<!-- Replace these with your actual Facebook App ID and Client Token -->
6+
<string name="facebook_app_id">YOUR_FACEBOOK_APP_ID</string>
7+
<string name="facebook_client_token">YOUR_FACEBOOK_CLIENT_TOKEN</string>
8+
<string name="fb_login_protocol_scheme">fbYOUR_FACEBOOK_APP_ID</string>
9+
</resources>

‎examples/ios/Podfile.lock‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,20 @@
11
PODS:
22
- app_links (6.4.1):
33
- Flutter
4+
- FBAEMKit (18.0.0):
5+
- FBSDKCoreKit_Basics (= 18.0.0)
6+
- FBSDKCoreKit (18.0.0):
7+
- FBAEMKit (= 18.0.0)
8+
- FBSDKCoreKit_Basics (= 18.0.0)
9+
- FBSDKCoreKit_Basics (18.0.0)
10+
- FBSDKLoginKit (18.0.0):
11+
- FBSDKCoreKit (= 18.0.0)
412
- Flutter (1.0.0)
13+
- flutter_facebook_auth (7.1.2):
14+
- FBSDKLoginKit (~> 18.0.0)
15+
- Flutter
16+
- flutter_secure_storage (6.0.0):
17+
- Flutter
518
- path_provider_foundation (0.0.1):
619
- Flutter
720
- FlutterMacOS
@@ -14,15 +27,28 @@ PODS:
1427
DEPENDENCIES:
1528
- app_links (from `.symlinks/plugins/app_links/ios`)
1629
- Flutter (from `Flutter`)
30+
- flutter_facebook_auth (from `.symlinks/plugins/flutter_facebook_auth/ios`)
31+
- flutter_secure_storage (from `.symlinks/plugins/flutter_secure_storage/ios`)
1732
- path_provider_foundation (from `.symlinks/plugins/path_provider_foundation/darwin`)
1833
- shared_preferences_foundation (from `.symlinks/plugins/shared_preferences_foundation/darwin`)
1934
- url_launcher_ios (from `.symlinks/plugins/url_launcher_ios/ios`)
2035

36+
SPEC REPOS:
37+
trunk:
38+
- FBAEMKit
39+
- FBSDKCoreKit
40+
- FBSDKCoreKit_Basics
41+
- FBSDKLoginKit
42+
2143
EXTERNAL SOURCES:
2244
app_links:
2345
:path: ".symlinks/plugins/app_links/ios"
2446
Flutter:
2547
:path: Flutter
48+
flutter_facebook_auth:
49+
:path: ".symlinks/plugins/flutter_facebook_auth/ios"
50+
flutter_secure_storage:
51+
:path: ".symlinks/plugins/flutter_secure_storage/ios"
2652
path_provider_foundation:
2753
:path: ".symlinks/plugins/path_provider_foundation/darwin"
2854
shared_preferences_foundation:
@@ -32,7 +58,13 @@ EXTERNAL SOURCES:
3258

3359
SPEC CHECKSUMS:
3460
app_links: 585674be3c6661708e6cd794ab4f39fb9d8356f9
61+
FBAEMKit: e34530df538b8eb8aeb53c35867715ba6c63ef0c
62+
FBSDKCoreKit: d3f479a69127acebb1c6aad91c1a33907bcf6c2f
63+
FBSDKCoreKit_Basics: 017b6dc2a1862024815a8229e75661e627ac1e29
64+
FBSDKLoginKit: 5875762d1fe09ddcb05d03365d4f5dc34413843d
3565
Flutter: e0871f40cf51350855a761d2e70bf5af5b9b5de7
66+
flutter_facebook_auth: fa503a7103e482577bf50694ceefe6b61a78ef1a
67+
flutter_secure_storage: d33dac7ae2ea08509be337e775f6b59f1ff45f12
3668
path_provider_foundation: 2b6b4c569c0fb62ec74538f866245ac84301af46
3769
shared_preferences_foundation: fcdcbc04712aee1108ac7fda236f363274528f78
3870
url_launcher_ios: 5334b05cef931de560670eeae103fd3e431ac3fe

‎examples/ios/Runner/Info.plist‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -45,5 +45,42 @@
4545
<true/>
4646
<key>UIApplicationSupportsIndirectInputEvents</key>
4747
<true/>
48+
49+
<!-- Facebook Configuration -->
50+
<key>CFBundleURLTypes</key>
51+
<array>
52+
<dict>
53+
<key>CFBundleURLName</key>
54+
<string>facebook-login</string>
55+
<key>CFBundleURLSchemes</key>
56+
<array>
57+
<string>fbYOUR_FACEBOOK_APP_ID</string>
58+
</array>
59+
</dict>
60+
</array>
61+
<key>FacebookAppID</key>
62+
<string>YOUR_FACEBOOK_APP_ID</string>
63+
<key>FacebookClientToken</key>
64+
<string>YOUR_FACEBOOK_CLIENT_TOKEN</string>
65+
<key>FacebookDisplayName</key>
66+
<string>Supabase Examples</string>
67+
<key>LSApplicationQueriesSchemes</key>
68+
<array>
69+
<string>fbapi</string>
70+
<string>fbapi20130214</string>
71+
<string>fbapi20130410</string>
72+
<string>fbapi20130702</string>
73+
<string>fbapi20131010</string>
74+
<string>fbapi20131219</string>
75+
<string>fbapi20140410</string>
76+
<string>fbapi20140116</string>
77+
<string>fbapi20150313</string>
78+
<string>fbapi20150629</string>
79+
<string>fbapi20160328</string>
80+
<string>fbauth</string>
81+
<string>fb-messenger-share-api</string>
82+
<string>fbauth2</string>
83+
<string>fbshareextension</string>
84+
</array>
4885
</dict>
4986
</plist>

‎examples/lib/screens/auth_screen.dart‎

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import 'package:flutter/material.dart';
2+
import 'package:flutter_facebook_auth/flutter_facebook_auth.dart';
23
import 'package:supabase_flutter/supabase_flutter.dart';
34

45
class AuthScreen extends StatefulWidget {
@@ -137,6 +138,54 @@ class _AuthScreenState extends State<AuthScreen> {
137138
}
138139
}
139140

141+
Future<void> _signInWithFacebook() async {
142+
setState(() => _loading = true);
143+
144+
try {
145+
final LoginResult result = await FacebookAuth.instance.login(
146+
permissions: ['email', 'public_profile'],
147+
);
148+
149+
if (result.status == LoginStatus.success) {
150+
final accessToken = result.accessToken!.tokenString;
151+
152+
final AuthResponse response = await Supabase.instance.client.auth.signInWithIdToken(
153+
provider: OAuthProvider.facebook,
154+
idToken: accessToken,
155+
);
156+
157+
if (mounted) {
158+
ScaffoldMessenger.of(context).showSnackBar(
159+
const SnackBar(
160+
content: Text('Facebook sign in successful!'),
161+
backgroundColor: Colors.green,
162+
),
163+
);
164+
}
165+
} else {
166+
if (mounted) {
167+
ScaffoldMessenger.of(context).showSnackBar(
168+
SnackBar(
169+
content: Text('Facebook sign in cancelled: ${result.status}'),
170+
backgroundColor: Colors.orange,
171+
),
172+
);
173+
}
174+
}
175+
} catch (e) {
176+
if (mounted) {
177+
ScaffoldMessenger.of(context).showSnackBar(
178+
SnackBar(
179+
content: Text('Facebook sign in failed: ${e.toString()}'),
180+
backgroundColor: Colors.red,
181+
),
182+
);
183+
}
184+
} finally {
185+
if (mounted) setState(() => _loading = false);
186+
}
187+
}
188+
140189
@override
141190
Widget build(BuildContext context) {
142191
return Scaffold(
@@ -257,6 +306,37 @@ class _AuthScreenState extends State<AuthScreen> {
257306
),
258307
],
259308
),
309+
const SizedBox(height: 24),
310+
const Divider(),
311+
const SizedBox(height: 16),
312+
Text(
313+
'Or sign in with:',
314+
style: Theme.of(context).textTheme.titleMedium,
315+
textAlign: TextAlign.center,
316+
),
317+
const SizedBox(height: 16),
318+
SizedBox(
319+
width: double.infinity,
320+
child: ElevatedButton.icon(
321+
onPressed: _loading ? null : _signInWithFacebook,
322+
icon: const Icon(Icons.facebook, color: Colors.white),
323+
label: _loading
324+
? const SizedBox(
325+
width: 16,
326+
height: 16,
327+
child: CircularProgressIndicator(
328+
strokeWidth: 2,
329+
valueColor: AlwaysStoppedAnimation<Color>(Colors.white),
330+
),
331+
)
332+
: const Text('Continue with Facebook'),
333+
style: ElevatedButton.styleFrom(
334+
backgroundColor: const Color(0xFF1877F2),
335+
foregroundColor: Colors.white,
336+
padding: const EdgeInsets.symmetric(vertical: 12),
337+
),
338+
),
339+
),
260340
],
261341
],
262342
),

‎examples/linux/flutter/generated_plugin_registrant.cc‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,10 +6,14 @@
66

77
#include "generated_plugin_registrant.h"
88

9+
#include <flutter_secure_storage_linux/flutter_secure_storage_linux_plugin.h>
910
#include <gtk/gtk_plugin.h>
1011
#include <url_launcher_linux/url_launcher_plugin.h>
1112

1213
void fl_register_plugins(FlPluginRegistry* registry) {
14+
g_autoptr(FlPluginRegistrar) flutter_secure_storage_linux_registrar =
15+
fl_plugin_registry_get_registrar_for_plugin(registry, "FlutterSecureStorageLinuxPlugin");
16+
flutter_secure_storage_linux_plugin_register_with_registrar(flutter_secure_storage_linux_registrar);
1317
g_autoptr(FlPluginRegistrar) gtk_registrar =
1418
fl_plugin_registry_get_registrar_for_plugin(registry, "GtkPlugin");
1519
gtk_plugin_register_with_registrar(gtk_registrar);

‎examples/linux/flutter/generated_plugins.cmake‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
#
44

55
list(APPEND FLUTTER_PLUGIN_LIST
6+
flutter_secure_storage_linux
67
gtk
78
url_launcher_linux
89
)

‎examples/macos/Flutter/GeneratedPluginRegistrant.swift‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,12 +6,16 @@ import FlutterMacOS
66
import Foundation
77

88
import app_links
9+
import facebook_auth_desktop
10+
import flutter_secure_storage_macos
911
import path_provider_foundation
1012
import shared_preferences_foundation
1113
import url_launcher_macos
1214

1315
func RegisterGeneratedPlugins(registry: FlutterPluginRegistry) {
1416
AppLinksMacosPlugin.register(with: registry.registrar(forPlugin: "AppLinksMacosPlugin"))
17+
FacebookAuthDesktopPlugin.register(with: registry.registrar(forPlugin: "FacebookAuthDesktopPlugin"))
18+
FlutterSecureStoragePlugin.register(with: registry.registrar(forPlugin: "FlutterSecureStoragePlugin"))
1519
PathProviderPlugin.register(with: registry.registrar(forPlugin: "PathProviderPlugin"))
1620
SharedPreferencesPlugin.register(with: registry.registrar(forPlugin: "SharedPreferencesPlugin"))
1721
UrlLauncherPlugin.register(with: registry.registrar(forPlugin: "UrlLauncherPlugin"))

0 commit comments

Comments
 (0)