# Customization

## 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](https://107069962-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M0QGDMRD8y_Kd-BpOvT%2F-M2qFdTVewEOBVxAIIKC%2F-M2qaSfFdhMp4Xgdgrvz%2Fimage.png?alt=media\&token=08eea07b-95a7-43ef-b053-e257848af51f)

To customize this page, do the following:

```javascript
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](https://107069962-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M0QGDMRD8y_Kd-BpOvT%2F-M2qa_y26FyaAFnK-xKS%2F-M2qbX5z6vycUGFP7a5-%2Fimage.png?alt=media\&token=84be5cce-e692-495c-933f-72ca5b446497)

To customize this page, do the following:

```javascript
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](https://107069962-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M0QGDMRD8y_Kd-BpOvT%2F-M2qnFAv6g2ZTAT8J01z%2F-M2qoAbYX0Nk_-l-bWMN%2Fimage.png?alt=media\&token=010973c7-aa58-4462-96e6-8075e4db1ecf)

To customize this page, do the following:

```javascript
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](https://107069962-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M0QGDMRD8y_Kd-BpOvT%2F-M2qnFAv6g2ZTAT8J01z%2F-M2qowYiYX7CJxtGVIHE%2Fimage.png?alt=media\&token=b867e508-8de8-4b20-9097-4b5ff4b282e3)

To customize this page, do the following:

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