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
• Getting started
• Usage
• Methods
• BagelAuth project setup steps
• Want to Contribute?
• Need Help / Support?
• Collection of Components
• Changelog
• License
• Keywords

---

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

2. add: variables to server/.env

PORT=3000
BAGEL_TOK="YOUR BAGEL TOKEN"

3. install dependencies

cd server
npm install

4. 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