Twilio Verify Push SDK helps you verify users by adding a low-friction, secure, cost-effective, "push verification" factor into your own mobile application. This fully managed API service allows you to seamlessly verify users in-app via a secure channel, without the risks, hassles or costs of One-Time Passcodes (OTPs). This project provides a library to implement Verify Push for your react native app.
React native 0.66.5
Add the library to your project:
yarn add https://github.com/twilio/twilio-verify-for-react-native.git
Install the pods for your project
npx pod-install
If you want to receive challenges as push notifications, you should register Your App with APNs.
More info here
If you want to receive challenges as push notifications, you should add a firebase configuration to your project
More info here
After setting up push notifications for Android & iOS, you should add a react native library to receive notifications from APN for iOS and FCM for Android.
The example app is using react-native-push-notification, you can find the full example source here
import TwilioVerify, { PushFactorPayload } from '@twilio/twilio-verify-for-react-native';
let factor = await TwilioVerify.createFactor(
new PushFactorPayload(
factorName,
verifyServiceSid,
identity,
accessToken,
pushToken
)
);
await TwilioVerify.verifyFactor(new VerifyPushFactorPayload(factor.sid));
let challenge = await TwilioVerify.getChallenge(challengeSid, factorSid);
await TwilioVerify.updateChallenge(
new UpdatePushChallengePayload(factorSid, challengeSid, newStatus)
);
let factors = await TwilioVerify.getAllFactors();
let challenges = await TwilioVerify.getAllChallenges(
new ChallengeListPayload(factorSid, 10, ChallengeStatus.Pending, ChallengeListOrder.Desc)
);
await TwilioVerify.deleteFactor(factorSid);
You can clear local storage calling the TwilioVerify.clearLocalStorage
method:
await TwilioVerify.clearLocalStorage();
Note: Calling this method will not delete factors in Verify Push API, so you need to delete them from your backend to prevent invalid/deleted factors when getting factors for an identity.
Install the packages in the twilio-verify-for-react-native
project
yarn install
Install the packages in the example
app
cd example
yarn install
example
and install the podscd example
npx pod-install
Change the Bundle Identifier to something unique so Apple’s push notification server can direct pushes to this app
Get the Access token generation URL
from your backend (Running the sample backend). You will use it for creating a factor
Run iOS app in twilio-verify-for-react-native
root folder
yarn example ios
NOTE: There could be incompatibility issues with the react native version and your environment, so running the project from Xcode could share more details about the error and how to fix it
Follow the steps from Firebase configuration, follow steps 1 to 3
Get the Access Token generation URL
from your backend (Running the Sample backend). You will use it for creating a factor
Run Android app in twilio-verify-for-react-native
root folder
yarn example android
Quick Deploy to Twilio
option
Go to live application
index.html
with access-token
.(e.g. https://verify-push-backend-xxxxx.twil.io/access-token). This will be your Access Token generation URL
Create a push challenge
section in your sample backend (https://verify-push-backend-xxxxx.twil.io/index.html)Identity
you used in factor creationFactor Sid
you addedmessage
. You will see the message in the push notification and in the challenge viewAdd more Details
buttonCreate challenge
buttonChallenge
sectionCreate a push challenge
section, as Login request approved!
or Login request denied!
, below the Create challenge
button