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 🧡🐙!