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:
1
const yourLogo = require('../assets/images/yourLogo.png');
2
​
3
// You don't have to update everything, you can set only the 'title' if you want
4
var authApproveText = {
5
title: 'Are you trying to sign in?',
6
subtitle: 'Someone is trying to sign in to your account from another device',
7
logo: yourLogo,
8
buttonNo: "No, it's not me",
9
buttonYes: 'Yes',
10
};
11
​
12
approveLogin = async () => {
13
this.cotter.trustedDevice.getNewEvent(authApproveText); // <-- pass in here
14
};
Copied!

Request Authentication Prompt

Request Authentication
To customize this page, do the following:
1
const tapImage = require('../assets/images/tapImage.png');
2
const warningImage = require('../assets/images/warningImage.png');
3
​
4
// You don't have to update everything, you can set only the 'title' if you want
5
const authReqText = {
6
title: 'Approve this login from your phone',
7
subtitle: "A notification is sent to your trusted device to confirm it's you",
8
image: tapImage,
9
titleError: 'Something went wrong',
10
subtitleError: "We are unable to confirm it's you, please try again",
11
imageError: warningImage,
12
};
13
​
14
this.cotter.trustedDevice.requestAuth(
15
'EVENT NAME',
16
this.onRequestSuccess,
17
this.onRequestError,
18
authReqText, // <-- pass in here
19
);
Copied!

Show QR Code Modal

Show QR Code Modal
To customize this page, do the following:
1
const checkImage = require('../assets/images/checkImage.png');
2
const warningImage = require('../assets/images/warningImage.png');
3
​
4
// You don't have to update everything, you can set only the 'title' if you want
5
const showQRText = {
6
title: 'Register This Device',
7
subtitle: 'Please scan this QR Code from a Trusted Device',
8
imageSuccess: checkImage,
9
imageError: warningImage,
10
};
11
​
12
showQRCode = () => {
13
this.cotter.trustedDevice.trustThisDevice(
14
this.onSuccessTrust,
15
this.onErrorTrust,
16
showQRText, // <-- pass in here
17
);
18
};
Copied!

QR Code Scanner Modal

QR Code Scanner Modal
To customize this page, do the following:
1
const checkImage = require('../assets/images/checkImage.png');
2
const warningImage = require('../assets/images/warningImage.png');
3
​
4
// You don't have to update everything, you can set only the 'title' if you want
5
const scanQRText = {
6
title: 'Scan QR Code',
7
subtitle: 'Scan the QR Code from the new device',
8
imageSuccess: checkImage,
9
imageError: warningImage,
10
blocked:
11
'Camera is blocked. Please go to Settings and allow access to camera.',
12
};
13
​
14
scanQRCode = () => {
15
this.cotter.trustedDevice.scanQRCode(scanQRText); // <-- pass in here
16
};
Copied!
Last modified 1yr ago