Phone Auth OTP UI

pub package

Phone Auth OTP UI is a phone number authentication with OTP UI, that comes with super cool features like auto country code update as per user location, country selector screen with a search option, otp screen to verify user phone number and a super beautiful UI that will suit any flutter project.

Please contribute to the discussion with feedback.


flutter pub add phone_auth_otp_ui

Getting Started

Here's a quick example that shows how to implement the UI in your app

import 'dart:io';

import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:example/firebase_options.dart';
import 'package:firebase_auth/firebase_auth.dart';
import 'package:firebase_core/firebase_core.dart';
import 'package:flutter/material.dart';
import 'package:phone_auth_otp_ui/phone_auth_otp_ui.dart';

const bool USE_EMULATOR = true;

Future<void> main()  async{

  // Initialize firebase
  await Firebase.initializeApp(

    name: 'phone-auth-otp-ui',
    options: DefaultFirebaseOptions.currentPlatform,


runApp(const MyApp());

  Future _connectToFirebaseEmulator() async {
  const fireStorePort = "8080";
  const authPort = "9099";
  final localHost = Platform.isAndroid ? '' : 'localhost';
  FirebaseFirestore.instance.settings = Settings(
      host: "$localHost:$fireStorePort",
      sslEnabled: false,
      persistenceEnabled: false);
  await FirebaseAuth.instance.useEmulator("http://$localHost:$authPort");

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  // This widget is the root of your application.
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
            fontFamily: "regular",
            primaryColor: kAppColor,
            backgroundColor: kAppColor,
            colorScheme: ThemeData()
                .copyWith(primary: kAppColor, secondary: kAppColor),

            // brightness: Brightness.light,
      home: const EditNumberScreen(navScreen: HomeScreen(),)

Learn more here.

Roadmap / Features