Customization
You can change the text and logo in most of the UI that's provided by Cotter's React Native SDK.
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
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
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
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
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
};
Last modified 3yr ago