Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ankit-slnk/flutter-phone-auth-demo
Flutter phone authentication demo.
https://github.com/ankit-slnk/flutter-phone-auth-demo
android dart demo firebase flutter ios java phone-number phoneauthentication swift
Last synced: 24 days ago
JSON representation
Flutter phone authentication demo.
- Host: GitHub
- URL: https://github.com/ankit-slnk/flutter-phone-auth-demo
- Owner: Ankit-Slnk
- Created: 2020-09-05T01:52:41.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2022-02-23T17:43:54.000Z (almost 3 years ago)
- Last Synced: 2024-03-10T18:35:15.502Z (10 months ago)
- Topics: android, dart, demo, firebase, flutter, ios, java, phone-number, phoneauthentication, swift
- Language: JavaScript
- Homepage: https://ankitsolanki.dev
- Size: 3.23 MB
- Stars: 7
- Watchers: 2
- Forks: 4
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Flutter Firebase Phone Authentication Demo
![Flutter Firebase Phone Authentication Demo](flutter_phone_auth.png)
This demo will show us how to authenticate a user by using phone number.
![Flutter Firebase Phone Authentication Demo](flutter_phone_auth.gif)
## Setup
Use latest versions of below mentioned plugins in `pubspec.yaml`.
| Plugin | Pub | Explanation |
|--------|-----|-------------|
| [connectivity](https://github.com/flutter/plugins/tree/master/packages/connectivity/connectivity) | [![pub package](https://img.shields.io/pub/v/connectivity.svg)](https://pub.dev/packages/connectivity) | Used to check internet connectivity.
| [firebase_auth](https://github.com/FirebaseExtended/flutterfire/tree/master/packages/firebase_auth/firebase_auth) | [![pub package](https://img.shields.io/pub/v/firebase_auth.svg)](https://pub.dev/packages/firebase_auth) | Used to authenticate phone.
| [firebase_core](https://github.com/FirebaseExtended/flutterfire/tree/master/packages/firebase_core/firebase_core) | [![pub package](https://img.shields.io/pub/v/firebase_core.svg)](https://pub.dev/packages/firebase_core) | Used for core Firebase Api.
| [fluttertoast](https://github.com/PonnamKarthik/FlutterToast) | [![pub package](https://img.shields.io/pub/v/fluttertoast.svg)](https://pub.dev/packages/fluttertoast) | Used to show toast.And then
flutter pub get
Visit [Firebase Console](https://console.firebase.google.com/u/0/?pli=1) to add new project. Add `Android` and `iOS` app to that project. Add `google-services.json` and `GoogleService-Info.plist` for `Android` and `iOS` respetively to its predefined place in flutter project.
Now enable `Phone` Sign-in method (second tab) in Authentication.
Please add some phone numbers for testing
To prevent abuse, Firebase enforces a limit on the number of SMS messages that can be sent to a single phone number within a period of time. If you exceed this limit, phone number verification requests might be throttled. If you encounter this issue during development, use a different phone number for testing, or try the request again later.
| Phone number | Verification code |
| ------------ | ----------------- |
| +91 11 1111 1111 | 111111 |
| +91 22 2222 2222 | 222222 |
| +91 33 3333 3333 | 333333 |You can also get this steps in Firebase docs for [Android](https://firebase.google.com/docs/auth/android/phone-auth) and [iOS](https://firebase.google.com/docs/auth/ios/phone-auth) and [web](https://firebase.google.com/docs/auth/web/phone-auth).
#### For Android
Please mention `internet` permission in `AndroidManifest.xml`. This will not affect in `debug` mode but in `release` mode it will give `socket exception`.
Add SHA-1 in firebase app
1. Open app in Android Studio
2. Open Gradle panel
3. Goto andoid -> app -> Tasks -> android
4. Double click on signingReport, it will generate SHA-1Add below line in android/build.gradle
buildscript {
// ...
dependencies {
// ...
classpath 'com.google.gms:google-services:4.3.2'
}
}Add below line in app/build.gradle
apply plugin: 'com.android.application'
android {
// ...
}dependencies {
// ...
}// ADD THIS AT THE BOTTOM
apply plugin: 'com.google.gms.google-services'#### For iOS
Follow the steps in [google_sign_in](https://pub.dev/packages/google_sign_in) library
### Initialise Firebase
await Firebase.initializeApp();
### Verify Phone
final PhoneVerificationFailed verificationFailed = (FirebaseAuthException authException) {
// Handle the case when phone verification failes.
};final PhoneCodeSent codeSent = (String verificationId, [int forceResendingToken]) async {
// OTP send successfully.
_verificationId = verificationId;
};final PhoneCodeAutoRetrievalTimeout codeAutoRetrievalTimeout = (String verificationId) {
// Handle the case when phone verification automatic retrival timeout.
_verificationId = verificationId;
};PhoneVerificationCompleted verificationCompleted = (PhoneAuthCredential phoneAuthCredential) {
// Handle the case when we want automatic phone verification.
// Only called on Android.
};if (kIsWeb) { //for web
await _auth.signInWithPhoneNumber("+911111111111")
.then((value) {
_verificationId = value.verificationId;
});
} else { // for native
await _auth
.verifyPhoneNumber(
phoneNumber: "+911111111111", // Phone number with country code.
timeout: const Duration(seconds: 5), // Phone code automatic retrival timeout duration.
verificationCompleted: verificationCompleted, // Triggers for instant verification of phone.
verificationFailed: verificationFailed, // Triggers when phone verification failed.
codeSent: codeSent, // Triggers when code is sent successfully.
codeAutoRetrievalTimeout: codeAutoRetrievalTimeout, // Triggers when phone code auto retrival timeout.
);
}### Sign in
AuthCredential credential = PhoneAuthProvider.credential(
verificationId: _verificationId,
smsCode: otp,
);
User user = (await _auth.signInWithCredential(credential)).user;
User currentUser = _auth.currentUser;#### For Web
Add Firebase core JS SDK
Add Firebase Auth and Analytics JS for google sign-in
Initialize Firebase with configuration
var firebaseConfig = {
// ... your web apps configuration. This is available in your Firebase project settings.
};// Initialize Firebase
firebase.initializeApp(firebaseConfig);
firebase.analytics();
Finally for android and ios
flutter run
for web
flutter run -d chrome
Checkout [this demo](https://flutter-web-phone-auth.netlify.app/#/) in [Flutter Web](https://flutter.dev/docs/get-started/web).