TUTORIAL
Below you can find both the code to a custom widget, as well as the custom action for your FlutterFlow SMS OTP Auth with Supabase.
Good luck!
Custom widget code:
Copy Code
// 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/widgets/index.dart'; // Imports other custom widgets
import '/custom_code/actions/index.dart'; // Imports custom actions
import '/flutter_flow/custom_functions.dart'; // Imports custom functions
import 'package:flutter/material.dart';
// Begin custom widget code
// DO NOT REMOVE OR MODIFY THE CODE ABOVE!
import 'package:intl_phone_field/country_picker_dialog.dart';
import 'package:intl_phone_field/intl_phone_field.dart';
class IntlPhoneInput extends StatefulWidget {
const IntlPhoneInput({
super.key,
this.width,
this.height,
required this.onChanged,
});
final double? width;
final double? height;
final Future Function(String? phoneNumber) onChanged;
@override
State<IntlPhoneInput> createState() => _IntlPhoneInputState();
}
class _IntlPhoneInputState extends State<IntlPhoneInput> {
@override
Widget build(BuildContext context) {
return IntlPhoneField(
decoration: InputDecoration(
labelText: 'Phone Number',
border: OutlineInputBorder(
borderSide: BorderSide(),
),
),
languageCode: "SI",
showCountryFlag: false,
onChanged: (phone) {
widget.onChanged(phone.completeNumber);
},
);
}
}
Custom action code:
Copy Code
// 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_flutter/supabase_flutter.dart';
Future<bool> otpSignin(
String token,
String phone,
) async {
// Add your function code here!
final supabase = SupaFlow.client;
print("Client initialized");
try {
final AuthResponse res = await supabase.auth
.verifyOTP(type: OtpType.sms, token: token, phone: phone);
print("OTP verified");
} catch (e) {
print('Error" $e');
}
final Session? session = await supabase.auth.currentSession;
if (session != null) {
print('Signed in');
return true;
}
print("Not signed in");
return false;
}
// Set your action name, define your arguments and return parameter,
// and then add the boilerplate code using the green button on the right!
Let’s start building.
Jump on a call with our CEO to discuss your idea in more detail 🧡🐙!