Auth0

Log in to your Auth0 dashboard at manage.auth0.com. You need to create two separate Application entries. First, create a Native Application for end-user login: click Applications in the left sidebar → Applications → Create Application → choose Native → name it something like 'FlutterFlow App'. On the Settings tab, copy the Domain (e.g., your-tenant.us.auth0.com) and the Client ID (starts with letters/numbers — this is PUBLIC, safe in client code). Do not copy the Client Secret for this application; it is not used in PKCE flows. Next, configure the Allowed Callback URLs for this Native Application. The format for Android is: com.yourcompany.yourapp://YOUR_DOMAIN/android/com.yourcompany.yourapp/callback. For iOS it is: com.yourcompany.yourapp://YOUR_DOMAIN/ios/com.yourcompany.yourapp/callback. Replace com.yourcompany.yourapp with your actual bundle ID (found in FlutterFlow under Settings → App Details → Package Name). Add both URLs to the Allowed Callback URLs field and click Save Changes. A mismatch between the scheme in Auth0 and the scheme in your app is the top cause of silent login failures. Second, create a Machine-to-Machine Application for admin operations: go back to Applications → Create Application → Machine to Machine Applications. Authorize it against the Auth0 Management API (select the API from the dropdown, then grant the permissions you need: read:users, update:users, read:logs, etc. — use least privilege). On the Settings tab, copy both the Client ID and the Client Secret. This Client Secret goes into your Firebase Cloud Function only — never into FlutterFlow.

In FlutterFlow, open the left navigation and click Custom Code. Click the + Add button and select Action. Name it auth0Login. In the Dependencies field, add auth0_flutter — FlutterFlow will resolve the latest compatible version from pub.dev automatically. You do not need to run flutter pub get; FlutterFlow handles the dependency graph in the background. In the Dart editor for the action, paste the code below. Set the Return Value type to JSON (or define individual output variables for accessToken, idToken, and name — both approaches work). The action calls Auth0(domain, clientId).webAuthentication().login() which opens the system browser (on Android via Custom Tabs, on iOS via SFSafariViewController) and waits for the redirect. On success it returns the Credentials object containing the access token, ID token, and decoded user profile. IMPORTANT: You must also register the callback URL scheme so the OS redirects back to your app. In FlutterFlow, go to Settings & Integrations → General → URL Schemes and add your scheme (com.yourcompany.yourapp). On Android this registers the intent filter; on iOS it registers the CFBundleURLTypes entry. Without this, Universal Login will complete in the browser but never return to your app. After saving the Custom Action, open the Action Flow Editor for your Login button widget, add the auth0Login Custom Action as the first step, then add Set App State actions to store the returned token and user fields. Add a Navigate action to send the user to your home screen on success.

1// custom_action.dart
2import 'package:auth0_flutter/auth0_flutter.dart';
3
4Future<dynamic> auth0Login(
5  String domain,
6  String clientId,
7) async {
8  try {
9    final auth0 = Auth0(domain, clientId);
10    final credentials = await auth0
11        .webAuthentication(scheme: 'com.yourcompany.yourapp')
12        .login();
13
14    return {
15      'accessToken': credentials.accessToken,
16      'idToken': credentials.idToken,
17      'name': credentials.user.name ?? '',
18      'email': credentials.user.email ?? '',
19      'sub': credentials.user.sub,
20    };
21  } catch (e) {
22    throw Exception('Auth0 login failed: $e');
23  }
24}

Because your M2M Client Secret cannot be placed in the FlutterFlow app, you need a Firebase Cloud Function that holds it server-side. This Function requests a Management API token from Auth0 using the client-credentials grant, then forwards the admin request. In the Firebase console, go to your project, then click Functions → Get Started (or write in the functions/ directory if you already have Functions configured). In your functions/index.js file, add the code shown below. The Function first calls https://YOUR_DOMAIN/oauth/token with your M2M credentials to get a Management API bearer token, then uses that token to call the Management API endpoint you request. Set your Auth0 credentials as Firebase environment variables (do NOT hardcode them in source). In the Firebase console, go to Functions → Configuration and add: AUTH0_DOMAIN, AUTH0_M2M_CLIENT_ID, AUTH0_M2M_CLIENT_SECRET. These are injected as process.env variables at runtime. Deploy the Function using the Firebase console's deploy button or by running firebase deploy --only functions in your local terminal. After deployment, copy the HTTPS trigger URL (e.g., https://us-central1-yourproject.cloudfunctions.net/auth0Admin). This is the URL you will configure in FlutterFlow's API Calls panel. The Function caches the M2M token in a module-level variable and checks expiry before each request — this avoids a token exchange on every single API call and keeps your Management API rate limit headroom intact. The Auth0 free plan limits Management API calls to approximately 10 requests per second on the /users endpoint; check your plan's current limits.

1// functions/index.js
2const functions = require('firebase-functions');
3const admin = require('firebase-admin');
4const fetch = require('node-fetch');
5admin.initializeApp();
6
7const AUTH0_DOMAIN = process.env.AUTH0_DOMAIN;
8const CLIENT_ID = process.env.AUTH0_M2M_CLIENT_ID;
9const CLIENT_SECRET = process.env.AUTH0_M2M_CLIENT_SECRET;
10
11let cachedToken = null;
12let tokenExpiry = 0;
13
14async function getManagementToken() {
15  if (cachedToken && Date.now() < tokenExpiry) return cachedToken;
16
17  const res = await fetch(`https://${AUTH0_DOMAIN}/oauth/token`, {
18    method: 'POST',
19    headers: { 'Content-Type': 'application/json' },
20    body: JSON.stringify({
21      grant_type: 'client_credentials',
22      client_id: CLIENT_ID,
23      client_secret: CLIENT_SECRET,
24      audience: `https://${AUTH0_DOMAIN}/api/v2/`,
25    }),
26  });
27  const data = await res.json();
28  cachedToken = data.access_token;
29  tokenExpiry = Date.now() + (data.expires_in - 60) * 1000;
30  return cachedToken;
31}
32
33exports.auth0Admin = functions.https.onRequest(async (req, res) => {
34  res.set('Access-Control-Allow-Origin', '*');
35  if (req.method === 'OPTIONS') { res.status(204).send(''); return; }
36
37  try {
38    const token = await getManagementToken();
39    const { action, userId, query } = req.body;
40
41    let url = `https://${AUTH0_DOMAIN}/api/v2/users`;
42    let method = 'GET';
43    let body = undefined;
44
45    if (action === 'search') url += `?q=${encodeURIComponent(query)}&search_engine=v3`;
46    if (action === 'block') { url += `/${userId}`; method = 'PATCH'; body = JSON.stringify({ blocked: true }); }
47    if (action === 'getUser') url += `/${userId}`;
48
49    const mgmtRes = await fetch(url, {
50      method,
51      headers: { Authorization: `Bearer ${token}`, 'Content-Type': 'application/json' },
52      body,
53    });
54    const data = await mgmtRes.json();
55    res.json(data);
56  } catch (err) {
57    res.status(500).json({ error: err.message });
58  }
59});

With the Firebase Function deployed, you can now wire up FlutterFlow's API Calls panel to reach it. In the left nav, click API Calls → + Add → Create API Group. Name the group Auth0Admin. Set the Base URL to your Firebase Function HTTPS trigger URL (e.g., https://us-central1-yourproject.cloudfunctions.net/auth0Admin). You do not need authentication headers here because the Function itself is the trust boundary. Add individual API Calls inside the group. Click + Add → Create API Call. Name the first one searchUsers. Set the Method to POST. Leave the endpoint path empty (the Function URL is the full path). In the Body tab, set the body type to JSON and define the structure: { "action": "search", "query": "{{ query }}" }. Click the Variables tab and add a variable named query (type String). This becomes a FlutterFlow binding point you can connect to a TextField widget. Add a second call named blockUser with body { "action": "block", "userId": "{{ userId }}" } and a userId variable. In the Response & Test tab for searchUsers, paste a sample Auth0 users array response and click Generate JSON Paths. FlutterFlow creates JSON Path extractors like $.users[*].email, $.users[*].user_id, $.users[*].last_login that you can bind directly to ListView tile widgets. To trigger these calls in your app, open the Action Flow Editor for a search button, add Backend/API Call → searchUsers, pass the text field value as the query variable, then bind the response to a Page State variable. Display results in a ListView with Dynamic Children bound to the response data.

Logout in Auth0 Universal Login requires clearing both the app session and the Auth0 browser session. Add another Custom Action named auth0Logout. In the Dart code, call auth0.webAuthentication().logout() which opens the system browser briefly to invalidate the Auth0 session cookie, then returns. After the action completes, add a Set App State action to clear all auth-related App State fields (accessToken, idToken, name, email), then a Navigate action to send the user back to the Login screen. To protect pages that require authentication, use FlutterFlow's Conditional Navigation. On each protected page's initState (or via the page's On Page Load action), add an If/Else action that checks whether your App State accessToken field is empty. If it is empty, navigate to the Login page. This gates every route entry point without duplicating guard logic. For a more polished experience, add a loading state to the Login button that activates while auth0Login is running — use a Boolean App State variable isLoggingIn, set it to true at the start of the action and false at the end (in both success and error paths). Bind the button's Loading property to this boolean so users see a spinner during the browser handoff. If you want to display the RapidDev team's recommendation inline: if this custom action + Firebase Function setup feels complex, RapidDev's team builds FlutterFlow integrations like this every week — book a free scoping call at rapidevelopers.com/contact.

1// auth0_logout.dart
2import 'package:auth0_flutter/auth0_flutter.dart';
3
4Future auth0Logout(String domain, String clientId) async {
5  final auth0 = Auth0(domain, clientId);
6  await auth0
7      .webAuthentication(scheme: 'com.yourcompany.yourapp')
8      .logout();
9}