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
};