A Developer’s Guide to Flutter & Auth for a Replicated Supabase DB (Part 2)

After successfully replicating your database with our first guide, the next step is connecting your Flutter application. This guide covers configuring the app to use the new database and setting up social providers for development users. For mobile apps, we also cover the essential deep linking configuration required to return to your app after a social login.

This article assumes you have completed Part 1: A Developer’s Guide to Replicating a Supabase Production Database.

Step 1: Configure Provider Developer Consoles

Objective: To configure social logins, environment variables, and mobile deep linking for your Flutter app so it works with the replicated database.

Get your Development Redirect URL from your dev Supabase project’s dashboard under Authentication > Providers.

It will be https://[your-dev-project-ref].supabase.co/auth/v1/callback.

Configure authentication providers and login methods for your users

For each social provider, add this new URL to your list of authorized redirect URIs.

Google: Go to the Google Cloud Console: https://console.cloud.google.com/apis/credentials

Create credentials to access your enabled APIs

Apple: Go to the Apple Developer Portal and create a new Services ID specifically for your dev environment: https://developer.apple.com/account/resources/identifiers/list

Developers > Certificates, Identifiers & Profiles

Facebook: Go to the Meta for Developers portal: https://developers.facebook.com/apps/

Note: The UIs for these developer consoles change frequently. If you can’t find the exact setting, search their official documentation for “authorized redirect URIs”.

Step 2: Configure Project Provider Credentials

Open the dashboards for both your production and development Supabase projects.
Navigate to Authentication > Providers in both.
Copy the Client ID and Client Secret from the production settings into the corresponding fields in the development project.
Enable each provider in the development project and Save.

Enables Sign in with Apple on the web using OAuth or natively within iOS, macOS, watchOS or tvOS apps.

Note for Apple: The ‘Client Secret’ is the content of the .p8 private key file you downloaded from the Apple Developer Portal. Open this file and copy its entire content into the field.

Step 3: Configure the Flutter Application

We recommend keeping database connections and other secure credentials fully secure in your project.

The instructions will vary by architecture, but important notes:

Separate your production and dev keys
Restrict internal company access to both production and dev keys
Your development environment, if replicated in part 1, contains senstive production data. This comes with legal requirements for safeguarding.
Do not include passwords in your source code (!!) or sourece control — especially public repositories.

Step 4: Configure Deep Linking

Social logins on mobile will fail to return to your app without this step. You must tell your app how to handle the auth callback.

For iOS: In Xcode, you need to define a Custom URL Scheme for your app (e.g., com.yourcompany.appname). This scheme must be added to the “Redirect URLs” list in your Supabase Dashboard under Authentication > URL Configuration.
For Android: In your android/app/src/main/AndroidManifest.xml file, you need to add a new <intent-filter> to your main activity that listens for the callback.
Refer to the official Supabase documentation on Deep Linking for the precise implementation details: https://supabase.com/docs/guides/auth/native-mobile-deep-linking

Troubleshooting 🛡️

Problem: Social logins fail with a redirect_uri_mismatch error.

Cause: You have not added your new development callback URL to the authorized list in the provider’s developer console.
Solution: Carefully follow Step 1 for each provider you use.

Problem: Apple Sign In still doesn’t work.

Cause: Supabase web-based auth requires a Services ID, which is separate from the App ID used for native Apple Sign In.
Solution: You must create a new Services ID in the Apple Developer Portal as detailed in Step 1.

Problem: My Flutter app still connects to production in debug mode.

Cause: The logic in main.dart is incorrect or the environment’s (password) dev file isn’t being loaded.
Solution: Add print statements to your main function to verify the supabaseUrl variable before initialization. Ensure .env.dev is in the project root.

Problem: Email/password users can’t log in.

Cause: Password hashes are created with a secret key unique to each project. Production hashes are useless in the new dev project.
Solution: Create new test users or use the “Reset password” option in the Supabase dashboard for a copied user.

With your app and auth configured, your development environment should now be a functional, isolated mirror of production. This setup allows you to build, test, and innovate with much greater confidence.

“Data is a precious thing and will last longer than the systems themselves.” — Tim Berners-Lee