Phone Auth OTP UI

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.

Installation

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{
    WidgetsFlutterBinding.ensureInitialized();

  // Initialize firebase
  await Firebase.initializeApp(

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

  if (USE_EMULATOR) {
    _connectToFirebaseEmulator();
  }

runApp(const MyApp());
}

  Future _connectToFirebaseEmulator() async {
  const fireStorePort = "8080";
  const authPort = "9099";
  final localHost = Platform.isAndroid ? '10.0.2.2' : '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.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
            fontFamily: "regular",
            primaryColor: kAppColor,
            backgroundColor: kAppColor,
            colorScheme: ThemeData()
                .colorScheme
                .copyWith(primary: kAppColor, secondary: kAppColor),

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

Learn more here.

Roadmap / Features

• For issues, please create a new issue on the repository.
• For feature requests, & questions, please participate on the discussion thread.
• To contribute a change to this plugin, please review our contribution guide and open a pull request.