{"id":19312028,"url":"https://github.com/weblineindia/flutter-otp-authentication","last_synced_at":"2025-04-07T16:18:17.549Z","repository":{"id":54807165,"uuid":"280448858","full_name":"weblineindia/Flutter-OTP-Authentication","owner":"weblineindia","description":"A Flutter based OTP Authentication component, used to verify your mobile number with OTP (One Time Password) using Firebase Authentication.","archived":false,"fork":false,"pushed_at":"2024-02-21T06:56:36.000Z","size":258,"stargazers_count":258,"open_issues_count":0,"forks_count":39,"subscribers_count":10,"default_branch":"master","last_synced_at":"2025-03-31T13:18:52.650Z","etag":null,"topics":["firebase-authentication","firebase-otp","flutter","flutter-components","flutter-demo","flutter-examples","flutter-firebase","flutter-firebase-auth","flutter-library","flutter-otp","flutter-otp-authentication","flutter-plugin","otp-authentication","reusable-components"],"latest_commit_sha":null,"homepage":"https://www.weblineindia.com/software-development-resources.html","language":"Dart","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/weblineindia.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-07-17T14:42:13.000Z","updated_at":"2025-03-24T18:38:26.000Z","dependencies_parsed_at":"2024-02-21T07:51:56.188Z","dependency_job_id":null,"html_url":"https://github.com/weblineindia/Flutter-OTP-Authentication","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/weblineindia%2FFlutter-OTP-Authentication","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/weblineindia%2FFlutter-OTP-Authentication/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/weblineindia%2FFlutter-OTP-Authentication/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/weblineindia%2FFlutter-OTP-Authentication/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/weblineindia","download_url":"https://codeload.github.com/weblineindia/Flutter-OTP-Authentication/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247685628,"owners_count":20979085,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["firebase-authentication","firebase-otp","flutter","flutter-components","flutter-demo","flutter-examples","flutter-firebase","flutter-firebase-auth","flutter-library","flutter-otp","flutter-otp-authentication","flutter-plugin","otp-authentication","reusable-components"],"created_at":"2024-11-10T00:32:16.616Z","updated_at":"2025-04-07T16:18:17.519Z","avatar_url":"https://github.com/weblineindia.png","language":"Dart","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Flutter - OTP Authentication\n\nA Flutter based OTP Authentication component, used to verify your mobile number with OTP (One Time Password) using Firebase Authentication. \n\n\n## Table of contents\n- [Flutter Support](#flutter-support)\n- [Demo](#demo)\n- [Features](#features)\n- [Getting started](#getting-started)\n- [Usage](#usage)\n- [Methods](#methods)\n- [Want to Contribute?](#want-to-contribute)\n- [Need Help / Support?](#need-help)\n- [Collection of Components](#collection-of-Components)\n- [Changelog](#changelog)\n- [License](#license)\n- [Keywords](#Keywords)\n\n\n## Flutter Support\n\nVersion - Flutter 1.17 (stable)\n\nWe have tested our program in above version, however you can use it in other versions as well.\n\n\n## Demo\n[![](wliotpauthentication.jpg)](https://github.com/weblineindia/Flutter-OTP-Authentication/blob/master/wliotpauthentication.jpg)\n\n------\n\n## Features\n\n* Select country with flag \u0026 country code. \n* Verify mobile number with OTP all over the world.\n\n\n## Getting started\n\n* Download this sample project and import widget dart files in your Flutter App. \n* Update Widgets UI based on your requirements. \n\n\n## Usage\n\nSetup process is described below to integrate in sample project.\n\n### Methods\n\nConfigure Firebase in main method.\n    \n    WidgetsFlutterBinding.ensureInitialized();\n    Platform.isAndroid\n        ? await Firebase.initializeApp(\n            options: const FirebaseOptions(\n                apiKey: 'xxxxxxxxxxxx-g-famDgC3jx6VV4h-xxxxxx',\n                appId: '1:xxxxxxxxxxxx:android:xxxxxxxb7ea052854b0005',\n                messagingSenderId: 'xxxxxxxxxxxx',\n                projectId: 'flutterxxxxxxxxx-9xxxa'))\n        : await Firebase.initializeApp();\n\nConfigure Country Picker Widget \u0026 implement method for call back selected country details e.g\n      \n    // Put CountryPicker Widget\n    CountryPicker(\n        callBackFunction: _callBackFunction\n    );\n       \n    // Create callback function \n    void _callBackFunction(String name, String dialCode, String flag) {\n        // place your code\n    }\n    \nConfigure OtpPinField For OTP (One Time Password)\n    \n    // add these packages in pubspec.yaml file\n    otp_pin_field: ^1.2.2\n    firebase_core: ^2.25.4\n       \n    // run this command to install package\n    flutter pub get\n       \n    // initialize key and add OtpPinField in class\n\n    final _otpPinFieldKey = GlobalKey\u003cOtpPinFieldState\u003e();\n\n    OtpPinField(\n      key: _otpPinFieldKey,\n      textInputAction: TextInputAction.done,\n      maxLength: 6,\n      fieldWidth: 40,\n      onSubmit: (text) {\n            smsOTP = text;\n      },\n      onChange: (text) {}\n    )\n      \nValidate Phone Number \u0026 Generate Otp     \n      \n    // generate otp method and store Verification Id\n    Future\u003cvoid\u003e generateOtp(String contact) async {\n      final PhoneCodeSent smsOTPSent = (verId, forceResendingToken) {\n      verificationId = verId;\n      };\n      try {\n        await _auth.verifyPhoneNumber(\n        phoneNumber: contact,\n        codeAutoRetrievalTimeout: (String verId) {\n          verificationId = verId;\n        },\n        codeSent: smsOTPSent,\n        timeout: const Duration(seconds: 60),\n        verificationCompleted: (AuthCredential phoneAuthCredential) {},\n        verificationFailed: (error) {\n          print(error);\n        },\n       );\n      } catch (e) {\n      handleError(e as PlatformException);\n     }\n    }\n       \n\nVerify otp                   \n       \n    //Method for verify otp entered by user  \n    Future\u003cvoid\u003e verifyOtp() async {\n       if (smsOTP.isEmpty || smsOTP == '') {\n          showAlertDialog(context, 'please enter 6 digit otp');\n          return;\n        }\n        try {\n              final AuthCredential credential = PhoneAuthProvider.credential(\n                verificationId: verificationId,\n                smsCode: smsOTP,\n              );\n              final UserCredential user = await _auth.signInWithCredential(credential);\n              final User? currentUser = _auth.currentUser;\n              assert(user.user?.uid == currentUser?.uid);\n              Navigator.pushReplacementNamed(context, '/homeScreen');\n            } on PlatformException catch(e){\n          handleError(e);\n        } catch (e) {\n              print('error $e');\n            }\n      }\n\n\nHandle errors\n\n    //Method for handle the errors\n    void handleError(PlatformException error) {\n      switch (error.code) {\n        case 'ERROR_INVALID_VERIFICATION_CODE':\n          FocusScope.of(context).requestFocus(FocusNode());\n          setState(() {\n            errorMessage = 'Invalid Code';\n          });\n          showAlertDialog(context, 'Invalid Code');\n          break;\n        default:\n          showAlertDialog(context, error.message ?? 'Error');\n          break;\n      }\n    }\n    \n------\n\n## Directive options\n\n### Firebase project setup steps\n\nCreate Project setup in firebase console using below URL [https://console.firebase.google.com/](https://console.firebase.google.com/) . Enable Phone Number sign-in for your Firebase project in console\n[https://firebase.google.com/docs/auth/ios/phone-auth](https://firebase.google.com/docs/auth/ios/phone-auth])\n\nDownload GoogleService-Info.Plist file and add into iOS folder\n\nDownload GoogleService.json file and add into Android folder\n\n### Firebase project setup steps\n\nInstall following pub dev package\n\nfirebase_auth: ^0.15.4\n\n------\n\n## Want to Contribute?\n\n- Created something awesome, made this code better, added some functionality, or whatever (this is the hardest part).\n- [Fork it](http://help.github.com/forking/).\n- Create new branch to contribute your changes.\n- Commit all your changes to your branch.\n- Submit a [pull request](http://help.github.com/pull-requests/).\n\n ------\n \n## Collection of Components\n We have built many other components and free resources for software development in various programming languages. Kindly click here to view our [Free Resources for Software Development.](https://www.weblineindia.com/software-development-resources.html)\n \n------\n\n## Changelog\nDetailed changes for each release are documented in [CHANGELOG](./CHANGELOG).\n\n## License\n[MIT](LICENSE)\n\n[mit]: https://github.com/weblineindia/Flutter-OTP-Authentication/blob/master/LICENSE\n\n## Keywords\nFlutter-OTP-Authentication, Firebase-OTP-Authentication, Firebase-Authentication, Firebase, Authentication, OTP-Authetication\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fweblineindia%2Fflutter-otp-authentication","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fweblineindia%2Fflutter-otp-authentication","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fweblineindia%2Fflutter-otp-authentication/lists"}