Supabase signin with google, Facebook and magic Link

Until Flutterflow gives us sign in with all of these options, here is a very quick and easy way to do it.

Set up custom actions and call these actions when a button is pressed or however you like (at least on the web which is tested)

Sign in with Google

final supabase = SupaFlow.client;
const bool kIsWeb = bool.fromEnvironment('dart.library.js_util');
Future signInWithGoogle() async {
  await supabase.auth.signInWithOAuth(
    Provider.google,
    redirectTo: kIsWeb ? null : 'com.my.app://login-callback/',
  );
}

Sign in with FB

final supabase = SupaFlow.client;
const bool kIsWeb = bool.fromEnvironment('dart.library.js_util');
Future signInWithFB() async {
  await supabase.auth.signInWithOAuth(
    Provider.facebook,
    redirectTo: kIsWeb ? null : 'com.my.app://login-callback/',
  );
}

Magic Link

final supabase = SupaFlow.client;
const bool kIsWeb = bool.fromEnvironment('dart.library.js_util');
Future signInWithMagicLink(String email) async {
  await supabase.auth.signInWithOtp(email: email);
}
11
7 replies