# Login

By editing a login configuration you can define the authentication options for your solution and customize the login experience for your users. It is common to use one configuration that applies to all environments but if you want to enable a different login configuration for an environment, it can be set under [Environments](https://docs.appfarm.io/reference/configuration/environments).

The login configuration is used for the built-in authentication pages. Additionally, some settings apply to the app listing page that is shown at the root URL of the Appfarm Client when multiple apps are available.

{% hint style="info" %}
**Custom login app**

You can build a custom authentication flow by creating a custom login app. As an example, we use a custom app for [sign up and login](https://showroom.appfarm.app/sign-up) in the [Showroom](https://showroom.appfarm.app/). \
\
Note that this custom login app must be an [Unauthenticated App](https://docs.appfarm.io/how-to/authentication-and-access-control/unauthenticated-access) and that it should be defined as the Default App in the [Environments Config](https://docs.appfarm.io/reference/environments#other).
{% endhint %}

## General settings

<table><thead><tr><th width="274">Setting</th><th>Description</th></tr></thead><tbody><tr><td><strong>Name</strong></td><td>An internal name for this login configuration.</td></tr><tr><td><strong>Page Title</strong></td><td>Used in the <code>&#x3C;title></code> tag and displayed as the title of the browser tab.<br>Defaults to <code>Appfarm</code>.</td></tr><tr><td><strong>Favicon</strong></td><td>A 16x16 or 32x32 pixel image used as the icon in the browser tab. Must be uploaded to <a href="../resources/files">Files</a>.<br>Defaults to the Appfarm rocket.</td></tr><tr><td><strong>Logo</strong></td><td>Displayed on the login page. Must be uploaded to <a href="../resources/files">Files</a>.<br>Defaults to the Appfarm logo.</td></tr><tr><td><strong>Info Text</strong></td><td>Text displayed below the logo on the login page.</td></tr><tr><td><strong>App</strong></td><td><p>An app to use for a custom authentication flow, replacing the built-in authentication pages.</p><p></p><p>The app you select must be configured for unauthenticated access. The authentication options available in your app, configured using the <a href="../../library/action-nodes/auth-operations">Auth Operations</a> action node, must be enabled under <a href="#authentication-options">Authentication options</a>.</p></td></tr><tr><td><strong>Theme</strong></td><td>A <a href="../resources/themes">theme</a> to apply to customize buttons and fonts.</td></tr><tr><td><strong>Background Color</strong></td><td>Setting a background color will overwrite the background color from a theme.</td></tr><tr><td><strong>Background Image</strong></td><td>Selecting a background image will reveal further options for how the image should be applied. The image is applied in addition to the background color. Must be uploaded to <a href="../resources/files">Files</a>.</td></tr><tr><td><strong>Background Gradient</strong></td><td>CSS to generate a <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Images/Using_CSS_gradients">background gradient</a>. Setting a background gradient will overwrite any other background settings. Example values:<br>- <code>linear-gradient(#e66465, #9198e5)</code><br>- <code>linear-gradient(70deg, blue, pink)</code><br>- <code>radial-gradient(rgba(230, 100, 101, 0.9), rgba(145, 152, 229, 0.7))</code></td></tr></tbody></table>

## **Authentication options**

<table><thead><tr><th width="277">Setting</th><th>Description</th></tr></thead><tbody><tr><td><strong>Password Login</strong></td><td>Enable login with a password set by the user.</td></tr><tr><td><strong>Login Link</strong></td><td>Enable passwordless login where a "magic link" is sent to the user's email address. After clicking this link logs the user in.</td></tr><tr><td><strong>One Time Password Login</strong></td><td>Enable one-time password login where a 6-digit code is sent to the user's email address. After entering this code the user is logged in.</td></tr><tr><td><strong>Google</strong></td><td>Enable Sign In With Google.</td></tr><tr><td><strong>Custom Auth</strong></td><td>Add a <a href="#undefined">custom authentication provider configuration.</a></td></tr><tr><td><strong>Onboarding URL</strong></td><td><p>A URL where a user can create a user account. Must be a full URL including the protocol, for example <code>https://onboarding.appfarm.io</code>.</p><p></p><p>When a value is entered, the following text is displayed on the login page: "Don't have an account? Sign Up". <em>Sign Up</em> is linked to the provided onboarding URL.</p><p>The URL could be for an <a href="../../how-to/authentication-and-access-control/unauthenticated-access">unauthenticated app</a> or an external site. </p></td></tr><tr><td><strong>Disable iOS Fullscreen</strong></td><td>Currently, the implementation of Progressive Web Apps on Apple devices has limitations. Some authentication methods like OAuth (Google, Facebook, Microsoft Entra ID) and login links will not work in combination with fullscreen usage. In that case, fullscreen should be disabled.</td></tr></tbody></table>

### **Custom auth**

Appfarm supports custom authentication providers such as Microsoft Entra ID (Azure AD). A provider should first be configured under [Custom auth providers](https://docs.appfarm.io/reference/configuration/login/custom-auth-providers) and then added within the login configuration. Each custom auth provider configuration has the following settings.

| Setting               | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        |
| --------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Name**              | A reference for the configuration.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
| **Enabled**           | Enable users to authenticate using this configuration.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             |
| **Hide Login Button** | <p>Do not display the login button on the built-in login page. Instead you can use a unique URL which can be found under the <a href="../appfarm-create/blue-dots">blue dot</a> next to this option in Appfarm Create. This option can be useful if you have a <a href="../environments#other">default app</a> for unauthenticated users as the entry point (with login features).<br><br><strong>Example</strong>: Clicking the blue dot, you find the following URL <code>https\://HOST\_NAME/auth/v1/authorize?auth\_selector=custom\&id=W80Mpo</code><br>In your App for Login, you may have a button for login, with an action with an <strong>Open URL</strong> action node as below:<br><img src="https://29237295-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MiLU-xcHu0eLZiTxcmZ%2Fuploads%2FkUQ2v7TUqmjxqHOcEMFR%2Fimage.png?alt=media&#x26;token=819eb9db-8371-4b3f-a074-3a041752f4f0" alt=""><br><em>Note that in this case, we have an App Variable holding the relative path where we want to user to be navigated to after login.</em></p> |
| **Button Text**       | The text shown on the button on the login page to start authentication. If not specified, **Name** is used.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        |
| **Provider**          | Assign a [custom auth provider](https://docs.appfarm.io/reference/configuration/login/custom-auth-providers).                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      |

## **Mail templates**

Emails are sent to users in conjunction with standard user authentication operations. The details and content of those emails can be customized. The following emails can be customized:

* Reset password
* Welcome
* Login link
* One time password

You can find examples of custom templates under [Email templates](https://docs.appfarm.io/how-to/themes-and-styling/add-custom-email-templates).

{% hint style="warning" %}
**Important**

All authentication emails sent by Appfarm are sent from <security@appfarm.io>. It is not possible to change this email address.
{% endhint %}

<table><thead><tr><th width="216">Setting</th><th>Description</th></tr></thead><tbody><tr><td><strong>From Display Name</strong></td><td>The name of the sender.<br>Defaults to <code>Appfarm</code>.</td></tr><tr><td><strong>Reply-To Address</strong></td><td>Unless anything is specified in this setting, the reply-to email for login-related emails is <a href="mailto:security@appfarm.io">security@appfarm.io</a>. <strong>You should, if possible, add another email address here for handling end-customer-related support cases.</strong></td></tr><tr><td><strong>Subject</strong></td><td>This should be edited and mention your company/product name.<br>The default subjects reference Appfarm.</td></tr><tr><td><strong>Text Body Template</strong></td><td><p>A plain text email body. The following parameters can be used within the text to dynamically populate data:</p><ul><li><code>{{firstName}}</code></li><li><code>{{lastName}}</code></li><li><code>{{resetLink}}</code> <em>(Reset password and welcome emails)</em></li><li><code>{{loginLink}}</code> <em>(Welcome and login link emails)</em></li><li><code>{{oneTimePassword}}</code> <em>(One time password email)</em></li><li><code>{{email}}</code></li><li><code>{{hostName}}</code></li></ul></td></tr><tr><td><strong>HTML Body Template</strong></td><td>A HTML email body. The text body must be populated for a custom HTML body to be used. The same parameters for populating dynamic data are available.</td></tr></tbody></table>


---

# 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.appfarm.io/reference/configuration/login.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.