Git Product home page Git Product logo

flutter_bagel_otp's Introduction

BagelDB Flutter - OTP Authentication

A Flutter based OTP Authentication component, used to verify your mobile number with OTP (One Time Password) using BagelAuth Authentication.

Table of contents


Features

  • Select country with flag & country code.
  • Verify mobile number with OTP all over the world.

Getting started

  • Download this sample project and import widget dart files in your Flutter App.
  • Update Widgets UI based on your requirements.

Usage

Setup process is described below to integrate in sample project.

Methods

Configure Country Picker Widget & implement method for call back selected country details e.g
    // Put CountryPicker Widget
    CountryPicker(
        callBackFunction: _callBackFunction
    );

    // Create callback function
    void _callBackFunction(String name, String dialCode, String flag) {
        // place your code
    }
Configure PINEntryTextField For OTP (One Time Password)
    // add this package in pubspec.yaml file
    pin_entry_text_field: ^0.1.4

    // run this command to install package
    flutter pub get

    // add PINEntryTextField in class
    PinEntryTextField(
      fields: 6,
      onSubmit: (text) {
      },
    )
Verify otp
    //Method for verify otp entered by user
    Future<void> verifyOtp(String phone) async {
    if (smsOTP == null || smsOTP == '') {
      showAlertDialog(context, 'please enter 6 digit otp');
      return;
    }
    try {
      // final res = await db.bagelUsersRequest.updatePassword(phone, smsOTP); // via sdk

			// via internal api (currently using an express js server)
      final res = await dio.post(
        '/updateUserPassword',
        data: {
          'emailOrPhone': phone,
          'password': smsOTP,
        },
      );
      print({res});

      final validateOtpRes = await db.bagelUsersRequest.validateOtp(smsOTP);
      print({validateOtpRes});
      Navigator.pushReplacementNamed(context, '/homeScreen');
    } catch (e) {
      print({e});
    }
  }
Handle errors
    //Method for handle the errors
    void handleError(PlatformException error) {
      switch (error.code) {
        case 'ERROR_INVALID_VERIFICATION_CODE':
          FocusScope.of(context).requestFocus(FocusNode());
          setState(() {
            errorMessage = 'Invalid Code';
          });
          showAlertDialog(context, 'Invalid Code');
          break;
        default:
          showAlertDialog(context, error.message);
          break;
      }
    }

BagelAuth project setup steps

  1. add: bagel token to lib/.environment.dart
final bagelToken =
    "YOUR BAGEL TOKEN";
final PORT = 3000
  1. add: variables to server/.env
PORT=3000
BAGEL_TOK="YOUR BAGEL TOKEN"
  1. install dependencies
cd server
npm install
  1. run dev script (runs nodemon and flutter for web)
npm run dev

Want to Contribute?

  • Added some functionality, created something awesome, made this code better, added better documentation, etc.
  • Fork it.
  • Create new branch to contribute your changes.
  • Commit all your changes to your branch.
  • Submit a pull request.

License

MIT

Keywords

Flutter-OTP-Authentication, BagelAuth-OTP, BagelAuth, Authentication, OTP-Authentication

flutter_bagel_otp's People

Contributors

gilbertohnrq avatar nevehallon avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.