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
To customize this page, do the following:
constyourLogo=require('../assets/images/yourLogo.png');// You don't have to update everything, you can set only the 'title' if you wantvar 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
To customize this page, do the following:
consttapImage=require('../assets/images/tapImage.png');constwarningImage=require('../assets/images/warningImage.png');// You don't have to update everything, you can set only the 'title' if you wantconstauthReqText= { 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:
constcheckImage=require('../assets/images/checkImage.png');constwarningImage=require('../assets/images/warningImage.png');// You don't have to update everything, you can set only the 'title' if you wantconstshowQRText= { 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:
constcheckImage=require('../assets/images/checkImage.png');constwarningImage=require('../assets/images/warningImage.png');// You don't have to update everything, you can set only the 'title' if you wantconstscanQRText= { 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};