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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.cotter.app/sdk-reference/react-native/older-sdk-versions/sign-in-with-device/customization.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.