How to Implement OAuth 2.0 in FlutterFlow for Secure Authentication

For supported providers, open the Firebase Console at console.firebase.google.com. Navigate to your project → Authentication → Sign-in method. Click 'Google', toggle it to Enabled, enter your support email, and click Save. Repeat for 'Apple' (requires Apple Developer account and Service ID) and 'GitHub' (requires a GitHub OAuth App with your app's callback URL). Back in FlutterFlow, go to Settings (gear icon) → Firebase → Authentication tab. Enable the same providers you activated in Firebase Console. FlutterFlow automatically generates the sign-in buttons and Action Flow wiring — you do not need to write any Dart code for built-in providers. Add a 'Sign In with Google' button to your login page, open its Action Flow, and select 'Log In → Google' as the action type.

Every OAuth provider requires you to register the exact redirect URIs (callback URLs) that your app will use. For Firebase Auth, the callback URL follows the pattern: https://{your-project-id}.firebaseapp.com/__/auth/handler. Copy this URL from Firebase Console → Authentication → Sign-in method → your provider → Authorized redirect URIs. Paste it into your OAuth provider's application settings (for GitHub: OAuth App → Authorization callback URL; for Google: Authorized redirect URIs in Google Cloud Console). An incorrect callback URL causes a 'redirect_uri_mismatch' error that blocks the entire OAuth flow. For FlutterFlow Web apps, also add your custom domain if you have one configured.

For providers not supported by Firebase Auth (Slack, LinkedIn, custom SAML, etc.), you need a server-side function that handles the OAuth 2.0 Authorization Code flow. The flow has two parts: (1) generateAuthUrl — takes no parameters, returns the OAuth provider's authorization URL with your client_id, redirect_uri, scope, and a CSRF state parameter. (2) handleCallback — takes the authorization code and state from the provider's redirect, exchanges the code for tokens using your client_secret (server-side only), retrieves the user's profile, creates or updates a Firebase Auth user via Admin SDK, and returns a Firebase custom token that FlutterFlow can use to sign in. Deploy this function to Firebase and store client_id and client_secret in Firebase environment config, never in client code.

1// firebase/functions/index.js
2// Deploy: firebase deploy --only functions
3
4const functions = require('firebase-functions');
5const admin = require('firebase-admin');
6const axios = require('axios');
7admin.initializeApp();
8
9// Step 1: Generate the OAuth authorization URL
10exports.getSlackAuthUrl = functions.https.onCall(async (data, context) => {
11  const clientId = functions.config().slack.client_id;
12  const redirectUri = functions.config().slack.redirect_uri;
13  const state = Math.random().toString(36).substring(2);
14
15  const url = `https://slack.com/oauth/v2/authorize` +
16    `?client_id=${clientId}` +
17    `&scope=identity.basic,identity.email` +
18    `&redirect_uri=${encodeURIComponent(redirectUri)}` +
19    `&state=${state}`;
20
21  return { url, state };
22});
23
24// Step 2: Exchange code for token (NEVER expose client_secret to client)
25exports.slackCallback = functions.https.onCall(async (data, context) => {
26  const { code } = data;
27  const clientId = functions.config().slack.client_id;
28  const clientSecret = functions.config().slack.client_secret; // server-side only
29  const redirectUri = functions.config().slack.redirect_uri;
30
31  const tokenRes = await axios.post('https://slack.com/api/oauth.v2.access', null, {
32    params: { client_id: clientId, client_secret: clientSecret,
33              code, redirect_uri: redirectUri }
34  });
35  if (!tokenRes.data.ok) throw new functions.https.HttpsError('unauthenticated', 'Slack OAuth failed');
36
37  const profile = tokenRes.data.authed_user;
38  const uid = `slack:${profile.id}`;
39  await admin.auth().setCustomUserClaims(
40    (await admin.auth().createUser({ uid, email: profile.email }).catch(() =>
41      admin.auth().getUser(uid))).uid,
42    { slack: true }
43  );
44  const customToken = await admin.auth().createCustomToken(uid);
45  return { customToken };
46});

In FlutterFlow's Custom Code panel, create two Custom Actions: 'initiateSlackOAuth' and 'completeSlackOAuth'. The first action calls the getSlackAuthUrl Cloud Function, retrieves the authorization URL, and opens it in an in-app WebView (or the device browser using the url_launcher package). The second action receives the authorization code (passed back to the app via a deep link or WebView URL change listener), calls the slackCallback Cloud Function, receives the Firebase custom token, and calls FirebaseAuth.instance.signInWithCustomToken() to sign the user in. After signInWithCustomToken succeeds, update the Firestore user document with the user's Slack profile data.

1import 'package:firebase_auth/firebase_auth.dart';
2import 'package:cloud_functions/cloud_functions.dart';
3
4// Custom Action: completeSlackOAuth
5// Parameters: code (String), state (String)
6// Returns: Boolean (true = signed in successfully)
7Future<bool> completeSlackOAuth(
8  String code,
9  String state,
10) async {
11  try {
12    final callable = FirebaseFunctions.instance.httpsCallable('slackCallback');
13    final result = await callable.call({'code': code, 'state': state});
14    final customToken = result.data['customToken'] as String?;
15    if (customToken == null) {
16      debugPrint('completeSlackOAuth: no custom token returned.');
17      return false;
18    }
19    await FirebaseAuth.instance.signInWithCustomToken(customToken);
20    debugPrint('completeSlackOAuth: signed in as ${FirebaseAuth.instance.currentUser?.uid}');
21    return true;
22  } catch (e) {
23    debugPrint('completeSlackOAuth error: $e');
24    return false;
25  }
26}

Navigate to your login page and add a 'Sign in with Slack' button. Open its Action Flow editor. Add step 1: 'Custom Action' → 'initiateSlackOAuth' — this opens the Slack authorization page in a WebView. Configure the WebView to listen for the redirect URI callback (your app's deep link scheme, e.g., yourapp://oauth/callback). When the WebView detects the callback URL, add step 2 in the WebView's 'On URL Change' action: 'Custom Action' → 'completeSlackOAuth', passing the 'code' and 'state' URL parameters. Add a conditional after completeSlackOAuth: if it returns true, navigate to the Home page; if false, show a Snackbar with an error message.

Test the built-in Firebase providers first using Test Mode — click Sign In with Google and complete the flow. Verify the user appears in Firebase Console → Authentication → Users with the correct provider listed. For custom OAuth (Slack), use Run Mode on a physical device since deep links require native app handling. Check three things: (1) The authorization URL opens correctly and shows the provider's consent screen. (2) After approval, the app receives the callback and calls the Cloud Function. (3) The Firebase custom token signs the user in and the user appears in Firebase Auth. Use FlutterFlow's DevTools console and Firebase Functions logs (Firebase Console → Functions → Logs) to diagnose any failures.