Problem

It is important to validate a user either through email or phone. But phone verification is more effective than email. It is easier to create a lot of fake accounts than creating a fake phone number. Conventionally, we use the following techniques for verification :

OTP (One Time Password)

Missed Call

But it is a multi-step process and it breaks the user flow. One solution is, we can use Truecaller SDK which is free and can verify user in just one tap.

Steps to integrate Truecaller

you can find official documentation on https://truecaller4developers.gitbook.io/truecallersdk/mobile-websites/implementing-user-flow-for-your-mobile-website

Register on https://developer.truecaller.com

2. Create app (Refer fig 1.1) for Web

fig- 1.1

Callback URL corresponds to an endpoint of backend where truecaller will post the access token for us to fetch the user’s profile. Every access token can be used to fetch the profile only of the related user granting the authorization to our app.

fig-1.2

3. Use generated app key (refer fig-1.2) in partner Key of Truecaller’s Deep link’s(refer fig-1.3)

RequestNonce should be a unique requestID that you need to associate with every verification request you trigger. The minimum length of the request ID parameter should be 8 characters and maximum length can be 64 characters

You can use userid in requestNonce , to indicate that this request id belongs to particular user.

fig-1.3 . truecaller’s deeplink

4. Truecaller’s deeplink (refer fig 1.3) pops up this modal, (refer fig 1.4) if truecaller is present in user’s mobile else we can use another method for verification.

fig 1.4

5. If user clicks on “continue” or “ use another mobile number”(refer fig 1.4) then truecaller posts request id and access token to callback URL and backend will use this access token to fetch user’s profile by making API call to end point.

6. Once User’s profile is at backend we need to setup a proper communication mechanism between frontend and backend. We can use these methods for this purpose.

polling we can make a long polling request or make a specific number of periodic requests [ say every 3 seconds ] to our backend to check if the user’s profile data has reached our backend or not. This kind of request can hold until a particular threshold time so that it waits for the profile response from your server.

we can make a long polling request or make a specific number of periodic requests [ say every 3 seconds ] to our backend to check if the user’s profile data has reached our backend or not. This kind of request can hold until a particular threshold time so that it waits for the profile response from your server. subscription we establish a two-way, persistent connection between our client and the server. server push data back to client when event happens on server(user’s profile fetch)

We can use any method according to our requirement.

Using Subscription (GraphQl)

you can find official subscription’s documentation on https://www.apollographql.com/docs/react/advanced/subscriptions

Initialise web socket link for two way persistent connection.

fig- 1.5

Note : use ‘wss’ for Web host because it use https

2. Write GraphQl query for subscription.

fig 1.6

3. Once the user’s profile is fetched, server pushes the data to client and onSubscriptionData(refer fig 1.7) will be triggered.

fig 1.7

4. You can use this subscription data(refer fig 1.7) as per your requirement.

Note : Make two apps in developer.truecaller.com. One for localhost, and the other for web host because domain name is different. Two app keys will be generated. Don’t forget to change the app key while hosting.

Last words

If you find other issues and you figure out how to fix them, let me know and I will update this guide.

Thanks for Reading !!