# Custom Auth Popups

You can fully customize the authentication popups. There are new variables that you can set in the Backoffice:

* AUTH\_SERVICE\_HTML
* AUTH\_POPUP\_SUCCESS\_HTML
* AUTH\_POPUP\_FAIL\_HTML
* AUTH\_PRE\_HTML

The AUTH\_SERVICE\_HTML is the popup for API Key and Password authentication., The AUTH\_POPUP\_SUCCESS\_HTML is displayed when the authentication is successful, the AUTH\_POPUP\_FAIL\_HTML is displayed if the authentication fails. And the AUTH\_PRE\_HTML is used for connectors that have the `pre` field defined in the auth.js file (to gather additional information before the authentication).

To modify the popup, go to the _System_ section in the Backoffice and add a new _Key._ Let's say we want to modify the popup for Api Key connectors.

<figure><img src="https://3844357853-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FLWWF0gTSzvFs1o4Cs6Tm%2Fuploads%2FX7rPu0mUKaXA6IGYQt4G%2FAppmixer_Backoffice.png?alt=media&#x26;token=dd6b9ca7-fd7c-4fbf-8711-f7da95a7b956" alt=""><figcaption><p>Changing the authentication popup.</p></figcaption></figure>

At the bottom of this page, you will find the default HTML files. You can use them and modify them, or you can create your own.

We are going to change the text to:

<figure><img src="https://3844357853-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FLWWF0gTSzvFs1o4Cs6Tm%2Fuploads%2Fkk7e7vj7PT67t2PgguCS%2Fappmixer_%E2%80%93_auth-service_html.png?alt=media&#x26;token=0c06e65c-7c88-4a12-80a5-791b78cf58da" alt=""><figcaption></figcaption></figure>

Then you paste the whole HTML into the Backoffice.&#x20;

<figure><img src="https://3844357853-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FLWWF0gTSzvFs1o4Cs6Tm%2Fuploads%2FOViD48J8PjzIfi4h48Oe%2FAppmixer_Backoffice.png?alt=media&#x26;token=f29dff47-c0e9-4d75-bf70-39e303cd033a" alt=""><figcaption></figcaption></figure>

And this is the result:

<figure><img src="https://3844357853-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FLWWF0gTSzvFs1o4Cs6Tm%2Fuploads%2FenxLMLQ6e7OKqLUCJrjM%2FAppmixer_QA_and_Appmixer.png?alt=media&#x26;token=732a32db-24f0-431b-a66a-f5630d8b2cfe" alt=""><figcaption></figcaption></figure>

### Default HTML files

{% file src="https://3844357853-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FLWWF0gTSzvFs1o4Cs6Tm%2Fuploads%2FyhcADl8NJcEk2FKkiQ3g%2Fauth-service.html.zip?alt=media&token=0225ad9f-e78a-451b-820c-ff3b8820d9f1" %}
Default auth-service.html
{% endfile %}

{% file src="https://3844357853-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FLWWF0gTSzvFs1o4Cs6Tm%2Fuploads%2FRTJAA4t9LzkcbwnZOUFL%2Flogin-success.html.zip?alt=media&token=f5f0857e-10ec-4836-be93-0d575432be9f" %}

{% file src="https://3844357853-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FLWWF0gTSzvFs1o4Cs6Tm%2Fuploads%2Fspns0QDaoz2PVXZQVGKF%2Flogin-fail.html.zip?alt=media&token=ad36607e-87e7-4bfb-b924-a837d9f84264" %}

{% file src="https://3844357853-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FLWWF0gTSzvFs1o4Cs6Tm%2Fuploads%2FyI1r8sovHbhU2mlIWK7d%2Fauth-pre.html.zip?alt=media&token=300ccc53-2aa3-4d7e-a757-10b39b3d2b99" %}
Default auth-pre.html
{% endfile %}



