All Projects → mohith7548 → Firebase-Phone-Auth-Demo

mohith7548 / Firebase-Phone-Auth-Demo

Licence: other
Demo Project to show how to use Phone Authentication in Flutter with Firebase backend

Programming Languages

dart
5743 projects
HTML
75241 projects
swift
15916 projects
kotlin
9241 projects
objective c
16641 projects - #2 most used programming language

Projects that are alternatives of or similar to Firebase-Phone-Auth-Demo

React Firebase Hooks
React Hooks for Firebase.
Stars: ✭ 2,227 (+2869.33%)
Mutual labels:  firebase-auth, firebase-authentication
django-rest-firebase-auth
Use firebase authentication with your django rest framework project
Stars: ✭ 16 (-78.67%)
Mutual labels:  firebase-auth, firebase-authentication
Firebase Ios Sdk
Firebase iOS SDK
Stars: ✭ 3,309 (+4312%)
Mutual labels:  firebase-auth, firebase-authentication
Nextjs Redux Firebase Authentication
Boilerplate Project for Authentication with Firebase in NextJs and Redux
Stars: ✭ 90 (+20%)
Mutual labels:  firebase-auth, firebase-authentication
DashboardHeroLite
The easiest way to build an admin dashboard for your SaaS. Fully functional user management, UI and routing.
Stars: ✭ 34 (-54.67%)
Mutual labels:  firebase-auth, firebase-authentication
React Mobx Firebase Authentication
🔥Boilerplate Project for Authentication with Firebase in React and MobX
Stars: ✭ 111 (+48%)
Mutual labels:  firebase-auth, firebase-authentication
Whatsup
**Deprecated** Real time chat app written in Swift 4 using Firebase and OTP Authentication
Stars: ✭ 39 (-48%)
Mutual labels:  otp, firebase-authentication
React Firebase Authentication
🔥 Boilerplate Project for Authentication with Firebase in React.
Stars: ✭ 863 (+1050.67%)
Mutual labels:  firebase-auth, firebase-authentication
firebase-bundle
A Symfony Bundle for the Firebase PHP Admin SDK
Stars: ✭ 112 (+49.33%)
Mutual labels:  firebase-auth, firebase-authentication
PhoneAuthenticationwithStepviewdesign
This project have UI design of Phone SMS verification and with firebase phone authentication complete working
Stars: ✭ 22 (-70.67%)
Mutual labels:  firebase-authentication, phone-authentication
The Road To React With Firebase
📓The Road to React with Firebase: Your journey to build business applications with React and Firebase.
Stars: ✭ 82 (+9.33%)
Mutual labels:  firebase-auth, firebase-authentication
capacitor-firebase-authentication
⚡️ Capacitor plugin for Firebase Authentication.
Stars: ✭ 67 (-10.67%)
Mutual labels:  firebase-auth, firebase-authentication
Simple firebase auth
Simple Firebase Login Flow in Flutter
Stars: ✭ 58 (-22.67%)
Mutual labels:  firebase-auth, firebase-authentication
Firebase Php
Unofficial Firebase Admin SDK for PHP
Stars: ✭ 1,657 (+2109.33%)
Mutual labels:  firebase-auth, firebase-authentication
Firebase Admin Node
Firebase Admin Node.js SDK
Stars: ✭ 1,050 (+1300%)
Mutual labels:  firebase-auth, firebase-authentication
Supertokens Core
Open source alternative to Auth0 / Firebase Auth / AWS Cognito
Stars: ✭ 2,907 (+3776%)
Mutual labels:  signin, firebase-auth
Rxfirebase
Rxjava 2.0 wrapper on Google's Android Firebase library.
Stars: ✭ 509 (+578.67%)
Mutual labels:  firebase-auth, firebase-authentication
Firebase Admin Python
Firebase Admin Python SDK
Stars: ✭ 591 (+688%)
Mutual labels:  firebase-auth, firebase-authentication
Chatter
Real time chat app written in Swift 4 using Firebase
Stars: ✭ 30 (-60%)
Mutual labels:  firebase-auth, firebase-authentication
iOS-SwiftUI-Firebase-Login-Example
Complete Sign up and Sign in Process for iOS SwiftUI - using Firebase Email and Password Authentication.
Stars: ✭ 37 (-50.67%)
Mutual labels:  firebase-auth, firebase-authentication

Firebase Phone Authentication using Firebase

Demo Project to show how to do Phone Authentication in Flutter using Firebase backend.

Screenshots

At First PhoneNo is entered and submitted
At First PhoneNo is entered and submitted
After OTP is entered & submitted App is restarted
After OTP is entered & submitted App is restarted

Motivation

I felt there is no setp-by-step documentation for Firebase Phone Authentication in Flutter. There were couple of implementations on Medium but are out-dated and one article got it but that failed to explain some crucial concepts. AndroidX brought a lot of changes in addition to FlutterFire plugins update. I asked this question on stackoverflow almost 2 years ago, but failed to get step-by-step answer. So I created this demo project.

Setup Firebase with Flutter

You can setup Firebase by following this guide: https://firebase.google.com/docs/flutter/setup

If you encounter errors with MultiDex or AndroidX make sure you follow below steps

// Inside android folder in app level build.gradle file
...
android {
  ...
  defaultConfig {
    ...
    multiDexEnabled true // add this
  }
  ...
}
...
dependencies {
  // implementation 'com.android.support:multidex:1.0.3' // No AndroidX support
  implementation 'com.android.support:multidex:2.0.1' // Add this to support AndroidX
  implementation 'androidx.browser:browser:1.2.0' // To display verification webpage in the user's default browser
  ...
}
...

Steps

  1. Ask for user's phoneNumber
  2. Get OTP from Firebase
  3. SignIn to Firebase

Rules

  • SignIn/Login is done in the same way.
  • The OTP is only used to get AuthCrendential object
  • AuthCredential object is the only thing that is used to signIn the user. It is obtained either from verificationCompleted callback function in verifyPhoneNumber or from the PhoneAuthProvider. (Don't worry if it's confusing, keep reading, you'll get it)

Workflow

  1. User gives the phoneNumber
  2. Firebase sends OTP
  3. SignIn the user
    • If the SIM card with the phoneNumber is not in the device that is currently running the app,
      • We have to first ask the OTP and get AuthCredential object
      • Next we can use that AuthCredential to signIn This method works even if the phoneNumber is in the device
    • Else if user provided SIM phoneNumber is in the device running the app,
      • We can signIn without the OTP.
      • because the verificationCompleted callback from submitPhoneNumber function gives the AuthCredential object which is needed to signIn the user
      • But in the previous case it ain't called because the SIM is not in the phone.

Functions

  • SubmitPhoneNumber
Future<void> _submitPhoneNumber() async {
    /// NOTE: Either append your phone number country code or add in the code itself
    /// Since I'm in India we use "+91 " as prefix `phoneNumber`
    String phoneNumber = "+91 " + _phoneNumberController.text.toString().trim();
    print(phoneNumber);

    /// The below functions are the callbacks, separated so as to make code more redable
    void verificationCompleted(AuthCredential phoneAuthCredential) {
      print('verificationCompleted');
      ...
      this._phoneAuthCredential = phoneAuthCredential;
      print(phoneAuthCredential);
    }

    void verificationFailed(AuthException error) {
      ...
      print(error);
    }

    void codeSent(String verificationId, [int code]) {
      ...
      print('codeSent');
    }

    void codeAutoRetrievalTimeout(String verificationId) {
      ...
      print('codeAutoRetrievalTimeout');
    }

    await FirebaseAuth.instance.verifyPhoneNumber(
      /// Make sure to prefix with your country code
      phoneNumber: phoneNumber,

      /// `seconds` didn't work. The underlying implementation code only reads in `millisenconds`
      timeout: Duration(milliseconds: 10000),

      /// If the SIM (with phoneNumber) is in the current device this function is called.
      /// This function gives `AuthCredential`. Moreover `login` function can be called from this callback
      verificationCompleted: verificationCompleted,

      /// Called when the verification is failed
      verificationFailed: verificationFailed,

      /// This is called after the OTP is sent. Gives a `verificationId` and `code`
      codeSent: codeSent,

      /// After automatic code retrival `tmeout` this function is called
      codeAutoRetrievalTimeout: codeAutoRetrievalTimeout,
    ); // All the callbacks are above
  }
  • SubmitOTP
void _submitOTP() {
    /// get the `smsCode` from the user
    String smsCode = _otpController.text.toString().trim();

    /// when used different phoneNumber other than the current (running) device
    /// we need to use OTP to get `phoneAuthCredential` which is inturn used to signIn/login
    this._phoneAuthCredential = PhoneAuthProvider.getCredential(
        verificationId: this._verificationId, smsCode: smsCode);

    _login();
  }
  • SignIn/LogIn
Future<void> _login() async {
    /// This method is used to login the user
    /// `AuthCredential`(`_phoneAuthCredential`) is needed for the signIn method
    /// After the signIn method from `AuthResult` we can get `FirebaserUser`(`_firebaseUser`)
    try {
      await FirebaseAuth.instance
          .signInWithCredential(this._phoneAuthCredential)
          .then((AuthResult authRes) {
        _firebaseUser = authRes.user;
        print(_firebaseUser.toString());
      });
      ...
    } catch (e) {
      ...
      print(e.toString());
    }
  }
  • Logout
  Future<void> _logout() async {
    /// Method to Logout the `FirebaseUser` (`_firebaseUser`)
    try {
      // signout code
      await FirebaseAuth.instance.signOut();
      _firebaseUser = null;
      ...
    } catch (e) {
      ...
      print(e.toString());
    }
  }

For more details on implementation please refer to the lib/main.dart file.

Contributions

  • Please feel free to contribute to this README (Pull Requests) and this stackoverflow answer
  • If you find this README useful please star the repository
Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].