> For the complete documentation index, see [llms.txt](https://docs.cotter.app/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.cotter.app/sdk-reference/react-native/older-sdk-versions/sign-in-with-device/customization.md).

# 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](/files/-M2qaSfFdhMp4Xgdgrvz)

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](/files/-M2qbX5z6vycUGFP7a5-)

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](/files/-M2qoAbYX0Nk_-l-bWMN)

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](/files/-M2qowYiYX7CJxtGVIHE)

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