FlutterFlow + Supabase OTP SMS Auth

Question

I am working on a project that requires Auth via the standard Email/Password, but also the ability to auth using a phonenumber and a OTP.

I know FF may be potentially working on adding more auth type support for Supabase in the future, my project requires it now.

I have tried to begin implementing a custom action that can intake the inputted phone number and signin/generate the OTP via Supabase.

I am having some trouble with the exact package and action code. My custom action code is referenced below.

Which package should I be using? supabase | Dart Package (pub.dev) or supabase_flutter | Flutter Package (pub.dev)

I recently implemented a change password action successfully using the supabase pacakge (import 'package:supabase/supabase.dart';) but I am confused as to which package actually supports the SMS OTP.

Any assistance or guidance would be truly appreciated.

Thanks in advance!

// Automatic FlutterFlow imports
import '/backend/supabase/supabase.dart';
import '/flutter_flow/flutter_flow_theme.dart';
import '/flutter_flow/flutter_flow_util.dart';
import '/custom_code/actions/index.dart'; // Imports other custom actions
import '/flutter_flow/custom_functions.dart'; // Imports custom functions
import 'package:flutter/material.dart';
// Begin custom action code
// DO NOT REMOVE OR MODIFY THE CODE ABOVE!

import 'package:supabase/supabase.dart';

Future<String?> signInWithSMSOTP(String phoneNumber) async {
  // Add your function code here!

  final response = await SupaFlow.client.auth.signInWithOtp(
    phone: phoneNumber,
  );

  if (response.error != null) {
    // Handle error (e.g., display an error message)
    return response.error!.message;
  } else {
    // Authentication was successful
    return null;
  }
}

Answer 1

For Flutter projects, you should always use the supabase_flutter package. supabase package is for non-Flutter environments, such as server side Dart or Angular Dart.