FlutterFlow + Supabase SMS OTP认证：包选择与代码问题咨询

问题说明 #

项目需要同时支持Email/Password和手机号+OTP认证，FlutterFlow目前暂未为Supabase提供原生手机号OTP支持，因此尝试通过自定义动作实现，但在包选择和代码实现上遇到问题。此前已使用supabase包完成修改密码功能，不确定该包是否支持SMS OTP，现有发送OTP的自定义动作代码如下：

// 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;
  }
}

解决方案 #

1. 包选择确认

你当前使用的supabase包完全支持SMS OTP功能，无需更换其他包。但需要提前在Supabase控制台完成两项配置：

• 开启Phone Auth认证方式
• 配置短信服务提供商（如Twilio、MessageBird），确保账户余额充足且配置正确

2. 完善自定义动作代码

现有代码仅完成了发送OTP的步骤，完整的手机号OTP登录需要两个环节：发送OTP到用户手机、验证用户输入的OTP完成登录。以下是两个自定义动作的完整实现：

动作1：发送OTP到手机号

// 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';
import '/flutter_flow/custom_functions.dart';
import 'package:flutter/material.dart';
// Begin custom action code
import 'package:supabase/supabase.dart';

Future<String?> sendSMSOTP(String phoneNumber) async {
  // 确保手机号格式正确（如国际区号：+8613xxxxxxxxx）
  final formattedPhone = phoneNumber.startsWith('+') ? phoneNumber : '+$phoneNumber';
  
  final response = await SupaFlow.client.auth.signInWithOtp(
    phone: formattedPhone,
    shouldCreateUser: true, // 自动创建新用户（若手机号未注册），按需设置
  );

  return response.error?.message;
}

动作2：验证OTP完成登录

// 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';
import '/flutter_flow/custom_functions.dart';
import 'package:flutter/material.dart';
// Begin custom action code
import 'package:supabase/supabase.dart';

Future<String?> verifySMSOTP(String phoneNumber, String otpCode) async {
  final formattedPhone = phoneNumber.startsWith('+') ? phoneNumber : '+$phoneNumber';
  
  final response = await SupaFlow.client.auth.verifyOTP(
    phone: formattedPhone,
    token: otpCode,
    type: OtpType.sms,
  );

  if (response.error != null) {
    return response.error!.message;
  } else {
    // 登录成功，可在此处理用户信息同步等逻辑
    return null;
  }
}

3. FlutterFlow中使用流程

• 在UI中添加手机号输入框，调用sendSMSOTP动作发送验证码
• 显示OTP输入框，用户输入后调用verifySMSOTP动作完成登录
• 根据两个动作的返回值处理错误提示（如手机号格式错误、OTP无效等）

内容的提问来源于stack exchange，提问作者OGDEV1990