otpless_flutter 1.0.8

Flutter plugin to integrate OTPless login with whatsapp with flutter

OTPLess Flutter Plugin

Integrate OTPless "login with whatsapp" functionality

Getting Started

Native Part (Permissions)

1. Copy the application name, Package Name and Bundle Id and create an OTPLess account

• Visit OTPless Website

2. Go to the Applications tab in sidebar and copy the callback URI

• Callback URI should be the deeplink for your application

2. Added Required Permissions

For iOS

• add the following keys in Info.plist file for sucessfull deeplinking of callback uri
• call back URI has two parts one is scheme and another is domain
• for Example: For URI "exam://example.com", "exam" will be scheme and "example.com" will be the domain
• we need to add the domain and scheme to the Info.Plist file

<key>FlutterDeepLinkingEnabled</key>
<true/>
<key>CFBundleURLTypes</key>
<array>
    <dict>
    <key>CFBundleTypeRole</key>
    <string>Editor</string>
    <key>CFBundleURLName</key>
    <string>your_app_domain</string>
    <key>CFBundleURLSchemes</key>
    <array>
    <string>your_app_scheme</string>
    </array>
    </dict>
</array>

• example (query permission)

• We also need the query permission to check whether the user has Whatsapp installed in his/her device

<key>LSApplicationQueriesSchemes</key>
<array>
    <string>whatsapp</string>
</array>

• example (query permission)

For Android

• The AndroidMainfest.xml must be modified to for deeplinking
• Paste this xml snippet in AndroidManifest.xml present inside android/app/src/main/AndroidManifest.xml inside the <activity> tag

<intent-filter android:autoVerify="true">
    <action android:name="android.intent.action.VIEW" />
    <category android:name="android.intent.category.DEFAULT" />
    <category android:name="android.intent.category.BROWSABLE" />
    <data android:scheme="your_app_scheme" android:host="your_app_domain"  />
</intent-filter>

• If you got more doubt please check the example app's AndroidManifest

Flutter Part (Implementation)

Install OTPless Flutter plugin

• Enter this command in terminal at the root of your flutter app

flutter pub add otpless_flutter

Import the plugin in your Flutter project

NOTE : USE THE PLUGIN IN APPLICATION'S ENTRY POINT Eg. in the root route (starting page) "/"

import 'package:otpless_flutter/otpless_flutter.dart';

Create an instance of plugin and store in a local variable

final _otplessFlutterPlugin = Otpless();

Function for initiating the login process

• To get your application's specific intentUrl please read the doc mentioned here

 // ** Function to initiate the login process
  void initiateWhatsappLogin(String intentUrl) async{
    var result = await _otplessFlutterPlugin.loginUsingWhatsapp(intentUrl: intentUrl);
    switch (result['code']) {
      case "581":
        print(result['message']);
        //TODO: handle whatsapp not found
        break;
      default:
    }
  }

Listen to token changes

• NOTE LISTEN TO THE TOKEN CHANGES INSIDE initState() METHOD LIKE THE BELOW EXAMPLE

@override
  void initState() {
    super.initState();
    initPlatformState();
  }

  // ** Function that is called when page is loaded
  // ** We can check the auth state in this function
  Future<void> initPlatformState() async {
    _otplessFlutterPlugin.authStream.listen((token) {
      // TODO: Handle user token like storing in SharedPreferences or navigation
      print(token)
    });
  }

• refer Rest API documentation

Made with ❤️ by OTPless