Sign In with Device
Our React Native SDK offers the easiest way to integrate Cotter's Passwordless Login. You can simply call a function and it does most of the heavy lifting and authentication for you.
What you're building
Steps
Set Allowed Methods in the Dashboard to allow Trusted Devices
Step 1: Import Cotter as a dependency
Make sure you're using react-native
version < 0.63
(Optional) Checkout additional steps for Android, React Native < 0.60, and Manual Installation.
Step 2: Set up Cotter in your Project
To allow Cotter to display modals, wrap your root component with connectCotterWrapper
:
Step 3: Setting Authentication Methods
You need to set allowed methods for authenticating your users. To allow TRUSTED DEVICES
, go to https://dev.cotter.app/rules
Remember to set the correct Project in the dropdown list
Step 4: Register this device as a Trusted Device
After registering your user_id
to Cotter using the API above, you should enroll the current device as the user's first Trusted Device.
Step 5: Authenticate from a Trusted Device and Non-Trusted Device
To request an authentication from Cotter's SDK, you would need to call cotter.trustedDevice.requestAuth
. This will automatically detect whether the current device is a Trusted Device or not.
How it works with your Login system:
For example, on your "Login" button, set onPress
to this.authenticate
. This will invoke Cotter's SDK to authenticate the user. You would need to:
(optional) Fetch the
user_id
you used for this user on Step 4 when you registered the user to Cotter. You can do this using a function likethis.getUserID
below to getuser_id
based on the email/phone. (If you're just using the email/phone as theuser_id
, that's fine too.)Use the
user_id
to initialize acotter
object, and callcotter.trustedDevice.requestAuth
. You can pass in anEVENT NAME
here. This could be any string to tag the event type (LOGIN
,TRANSACTION
, etc).Login your user by validating the Cotter's response in your backend server.
Trusted and Non-Trusted Device
When an Authentication Event is requested using method TRUSTED_DEVICE
, there are 2 possible cases:
Case 1: The current device is a Trusted Device
If the current device is a Trusted Device, it should automatically be approved, and you will receive a JSON response containing the requested Event
and whether or not it's approved. The approval is based on whether or not the signature included in the request from the SDK is valid.
You should see a result that the event is not new, and that it's approved. This is because the signature from the Trusted Device is sufficient to prove that the device is authorized.
When passing this Event Response to your backend, you need to check if this JSON is valid and if it comes from Cotter's server.
Checkout how to verify the OAuth Tokens from Cotter here:
pageVerifying JWT TokensCase 2: The current device is NOT a Trusted Device
We'll cover this in the next guide:Authenticate from a Non-Trusted Device/sdk-reference/react-native/react-native-sdk-passwordless-login/authenticate-from-a-non-trusted-device
🎉 You're done!
Last updated