How to set up social authentication with Flutterflow and Supabase

Knowing how to set up social authentication with your Flutterflow and Supabase apps, can give your creations a sense of trust that email authentication alone cannot. This is especially true of niche apps where we need to build user trust. Most app builders seem to find that Google Auth is the most used method, particularly when building B2C applications.

Luckily, Supabase supports a whole range of social authentication methods, which you can find in your Supabase dashboard with the path authentication/providers. In this video we look at how to set up social authentication for Flutterflow for Google and Github. We run through the setting up of the API keys, where you need to put these in your Supabase dashboard and the custom actions required to allow a user to sign up to your app with social authentication.

Finally we look at the custom trigger function we are using in Supabase to populate our public.users table when a new user signs up. The trigger will work whether the user signs up with social authentication or email.

Here is the video. All of the custom code used here is available below.

Social authentication custom code

The first block of code is what we put in our Flutterflow custom action. This is assigned to the button we are using for user sign up. Remember to change the authentication providers name to the one that is assigned to the button.

import 'package:supabase/supabase.dart';

Future<void> githubAuth() async {
  try {
    await SupaFlow.client.auth.signInWithOAuth(Provider.github);
  } catch (e) {
    print('Exception: $e');
  }
}

The following two code blocks are for creating and dropping a trigger function in Supabase. These need to be created in the SQL editor and cannot be changed in the trigger functions area of the dashboard. Remember to check your table and function names are correct for your use.

CREATE TRIGGER after_auth_users_insert AFTER INSERT ON auth.users FOR EACH ROW EXECUTE FUNCTION updatepublicusers();

DROP TRIGGER after_auth_users_insert ON auth.users

The following function is the one that the trigger function calls to update your public.users table. As this is a Security Definer function, you may want to add a search_path for additional security. Also remember to ensure your table names are correct.

CREATE OR REPLACE FUNCTION updatepublicusers()
RETURNS TRIGGER SECURITY definer AS $$

BEGIN
    -- Check if the operation is an INSERT
    IF TG_OP = 'INSERT' THEN
        -- Insert or update the corresponding record in public.users
        INSERT INTO public.users (userid, email)
        VALUES (NEW.id, NEW.email)
        ON CONFLICT (userid) DO UPDATE
        SET email = EXCLUDED.email;

        INSERT INTO public.verify (userid)
        VALUES (NEW.id)
        ON CONFLICT (userid) DO NOTHING;
    END IF;
    RETURN NEW;
END;
$$ LANGUAGE plpgsql;

Conclusion – Setting up social authentication in Flutterflow

Within the elements which are essential for user authentication, such as update user email and forgot password actions. Arguably, social authentication is the most important. For us as app builders it passes some of the elements of authentication, such as passwords and two factor authentication onto others. Also, it gives our app a degree of trust with the user that email sign up alone does not provide. Finally, and most importantly, for our users, social authentication is just convenient and provides them with an easier experience when signing up to our Flutterflow applications.