Links

Customization

You can change the text and logo in most of the UI that's provided by Cotter's React Native SDK.

Getting started

To start customizing the UI, you will pass a config containing the text that you want to the functions that you've used in the previous guides:

Approve Authentication Request Prompt

Approve Authentication Request
To customize this page, do the following:
const yourLogo = require('../assets/images/yourLogo.png');
// You don't have to update everything, you can set only the 'title' if you want
var authApproveText = {
title: 'Are you trying to sign in?',
subtitle: 'Someone is trying to sign in to your account from another device',
logo: yourLogo,
buttonNo: "No, it's not me",
buttonYes: 'Yes',
};
approveLogin = async () => {
this.cotter.trustedDevice.getNewEvent(authApproveText); // <-- pass in here
};

Request Authentication Prompt

Request Authentication
To customize this page, do the following:
const tapImage = require('../assets/images/tapImage.png');
const warningImage = require('../assets/images/warningImage.png');
// You don't have to update everything, you can set only the 'title' if you want
const authReqText = {
title: 'Approve this login from your phone',
subtitle: "A notification is sent to your trusted device to confirm it's you",
image: tapImage,
titleError: 'Something went wrong',
subtitleError: "We are unable to confirm it's you, please try again",
imageError: warningImage,
};
this.cotter.trustedDevice.requestAuth(
'EVENT NAME',
this.onRequestSuccess,
this.onRequestError,
authReqText, // <-- pass in here
);

Show QR Code Modal

Show QR Code Modal
To customize this page, do the following:
const checkImage = require('../assets/images/checkImage.png');
const warningImage = require('../assets/images/warningImage.png');
// You don't have to update everything, you can set only the 'title' if you want
const showQRText = {
title: 'Register This Device',
subtitle: 'Please scan this QR Code from a Trusted Device',
imageSuccess: checkImage,
imageError: warningImage,
};
showQRCode = () => {
this.cotter.trustedDevice.trustThisDevice(
this.onSuccessTrust,
this.onErrorTrust,
showQRText, // <-- pass in here
);
};

QR Code Scanner Modal

QR Code Scanner Modal
To customize this page, do the following:
const checkImage = require('../assets/images/checkImage.png');
const warningImage = require('../assets/images/warningImage.png');
// You don't have to update everything, you can set only the 'title' if you want
const scanQRText = {
title: 'Scan QR Code',
subtitle: 'Scan the QR Code from the new device',
imageSuccess: checkImage,
imageError: warningImage,
blocked:
'Camera is blocked. Please go to Settings and allow access to camera.',
};
scanQRCode = () => {
this.cotter.trustedDevice.scanQRCode(scanQRText); // <-- pass in here
};