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.
Trusted Devices using Cotter's React Native SDK
Make sure you're using
react-native version < 0.63yarn
npm
yarn add react-native-cotter react-native-device-info rn-secure-storage react-native-randombytes react-native-camera react-native-svg react-native-securerandom buffer react-native-inappbrowser-reborn react-native-sha256
npx pod-install ios
npm install --save react-native-cotter react-native-device-info rn-secure-storage react-native-randombytes react-native-camera react-native-svg react-native-securerandom buffer react-native-inappbrowser-reborn react-native-sha256
npx pod-install ios
To allow Cotter to display modals, wrap your root component with
connectCotterWrapper :import {connectCotterWrapper} from 'react-native-cotter';
class MyApp extends Component {
}
MyApp = connectCotterWrapper(MyApp);
This method
signUpWithDevice will register the user based on the user's identifier to Cotter and then trust the current device. import { Cotter } from "react-native-cotter";
class SignUp extends Component {
...
register = (identifier) => {
// Signup the user and trust this device
var cotter = new Cotter(API_KEY_ID);
cotter.signUpWithDevice(
identifier, // User's email, phone or username
this.onSuccess,
this.onError,
);
};
onSuccess = resp => {
alert('Success');
console.log(resp);
};
onError = err => {
alert('Error');
console.log(err);
};
...
}
To request an authentication from Cotter's SDK, you would need to call
cotter.signInWithDevice . This will automatically detect whether the current device is a Trusted Device or not.JavaScript
JSON Response
// Request authentication
var cotter = new Cotter(API_KEY_ID);
cotter.signInWithDevice(
identifier, // User's email, phone or username
this.onSuccess,
this.onError,
);
{
// OAuth 2.0 Tokens
"oauth_token": {
"access_token": "eyJhbGciOiJFUzI1N...",
"auth_method": "TRUSTED_DEVICE",
"expires_in": 3600,
"id_token": "eyJhbGciOiJFUzI...",
"refresh_token": "33625:anGsIfvFd...",
"token_type": "Bearer"
},
// Information about the login request
"ID": 2535926,
"CreatedAt": "2020-08-01T01:36:24.321921222Z",
"DeletedAt": "0001-01-01T00:00:00Z",
"UpdatedAt": "2020-08-01T01:36:24.321921425Z",
"approved": true, // This login request is approved
"client_user_id": "abcdefgh-d15c-466f-aaa3-f029a8e534c3",
"event": "LOGIN",
"ip": "172.92.5.201",
"issuer": "<YOUR API KEY ID>",
"location": "San Francisco",
"method": "TRUSTED_DEVICE",
"new": false,
"signature": "L6x8sLHyPTOMCxudw34YTFGCEO4dGvakJl0g9dIDjUp2gaXbD7Yfxo86Dr7OEtHYmSYegSJkwmZjMzDnPvltDQ==",
"timestamp": "1596245784",
"user_id": "00000000-0000-0000-0000-000000000000"
}
Cotter's SDK will find the user from
userEmail , this must be the same as the one used to register the user during sign up.This function returns
oauth_token , including an access_token that you should validate in your backend. You can either:- use this
access_tokento protect all of your API endpoints, or - you can use your own session tokens. You'll need to validate this
access_tokenbefore you generate your session tokens in the backend.
Cotter's SDK automatically stores the OAuth tokens for you. Check out how to get access tokens and logged-in user information.
When an Authentication Event is requested using method
TRUSTED_DEVICE, there are 2 possible cases:If the current device is a Trusted Device, it should automatically be approved, and you will receive an access token.
{
...
"method": "TRUSTED_DEVICE",
"new": false, // Is this a new pending event (should be false).
"approved": true // Is this event approved (should be true).
"signature": "oonMGCAxp3..." // Signature to make sure this event comes from Cotter's server
}
You should see a result that the event is not new, and that it's approved. You'll receive the
oauth_token because the user is successfully authenticated, and you can pass this to your backend to authorize access for the user.Checkout how to verify the OAuth Tokens from Cotter here:
We'll cover this in the next guide:
Last modified 2yr ago