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

Let's get in touch

Step 1/2

How can we reach you?

Tell us about your project!

Thanks for reaching out! We’ve received your submission and will be in touch shortly!
Oops! Something went wrong while submitting the form.