---
title: "Login Module"
slug: "login-module"
updated: 2025-09-26T02:33:48Z
published: 2025-09-26T02:33:48Z
canonical: "docs.unqork.io/login-module"
---

> ## Documentation Index
> Fetch the complete documentation index at: https://docs.unqork.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Login Module

UDesignerClassic Designer

## Overview

The **login** **module** is the first page end-users see when logging in to your [application](/v1/docs/introduction-to-unqork-applications). You can set up your login page to verify end-user credentials or use an SSO authentication service. You can create this page in its own [module](/v1/docs/introduction-to-the-module-builder) during the application creation process. Or, you can connect it to your application later. The login module is optional and not required to build your application in the Unqork Designer Platform.

> [!CAUTION]
> Login and Logout modules are only available when viewing at the Application level.

### Enabling a Login Module

On the [Environment Administration](/v1/docs/environment-administration) page, you can enable custom login modules based on application needs. Enable the setting to connect or disconnect login modules to applications. Disable the setting to prevent login modules from being connected or disconnected from applications.

To enable an existing login module:

1. At the top of the Unqork Designer Platform, click Administration.
2. Under Environment, select **Environment Administration**.
3. Navigate to the **General** settings section of Environment Administration.
4. Set **Enable Custom Login/Logout** **Module****s** to (**checked**).
5. At the bottom of the page, click Save Changes.

> [!NOTE]
> Login modules do not display in Express View when you disable this setting. Disabling the custom login module setting reverts all affected applications back to the default login screen for the environment.

### Creating and Connecting a Login Module to an Existing Application

In your application's [workspace](/v1/docs/introduction-to-workspaces), you can create and connect a new login module to a new or existing application.

#### Create and Connect a Login Module to a New Application

Create and connect a login module during the application creation process. This method names the login module and connects it to the new application for you.

To create and connect a login module when creating a new application:

1. Navigate to your workspace and click **+ Create App**.
2. In the **Create App** pop-up modal, complete the required application information.
3. From the **Login** **Module** drop-down, select **New Login** **Module**.

[![A static image displaying the Create App modal in UDesigner. The Login Module drop-down is displayed and the New Login Module is highlighted.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/UD_Login_CreateLoginModule_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-07T20%3A53%3A43Z&se=2026-11-07T21%3A53%3A43Z&sr=c&sp=r&sig=NPxN5VJX3m9pKp68d%2FLuu1M6yxeib9TgNljg1KPFHmM%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/UD%20Login%20CreateLoginModule.jpg?sv=2026-02-06&spr=https&st=2026-11-07T20%3A53%3A43Z&se=2026-11-07T21%3A53%3A43Z&sr=c&sp=r&sig=NPxN5VJX3m9pKp68d%2FLuu1M6yxeib9TgNljg1KPFHmM%3D)
4. Click **Create**.

> [!NOTE]
> Login modules created in the Create App pop-up modal are named after the application and end with the text "Login". For example, Acme Corp Login.

From here, open the module and customize your login screen. Here are a few ideas of components you can add to begin:

- [**T****ext FieldComponent**](/v1/docs/text-field-component): Create a user name field for login credentials.
- [**ButtonComponent**](/v1/docs/button-component) : Create a call to action for your end-users to click after inserting their credentials.

#### Connect a Login Module to an Existing Application

If you already have a login module, you connect it to your application.

To connect a login module at the Application level:

1. Navigate to the application that contains your login module.
2. At the top of the page, click ··· **(options)**.
3. Select **Settings**.
4. From the **Login** **Module** drop-down, enter or select the login module.
5. Click **Save & Close**.

### Previewing a Login Module

It's important to note that all modules you plan to have navigate to using your login module must exist in the same application. Otherwise, you'll receive a [403 error](/v1/docs/http-status-codes).

To preview the login module at the Application level:

1. Navigate to the application that contains your login module.
2. At the top of the page, click ··· **(options)**.
3. Select **Preview**. The application displays on a new page with the login module present at the top.

[![A static image displaying the Application page, the options button and Preview buttons are highlighted.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/headerModule_preview_thumb_0_0(2).jpg?sv=2026-02-06&spr=https&st=2026-11-07T20%3A53%3A43Z&se=2026-11-07T21%3A53%3A43Z&sr=c&sp=r&sig=NPxN5VJX3m9pKp68d%2FLuu1M6yxeib9TgNljg1KPFHmM%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/headerModule%20preview(2).jpg?sv=2026-02-06&spr=https&st=2026-11-07T20%3A53%3A43Z&se=2026-11-07T21%3A53%3A43Z&sr=c&sp=r&sig=NPxN5VJX3m9pKp68d%2FLuu1M6yxeib9TgNljg1KPFHmM%3D)

To successfully preview your login module, you must preview it at the Application level. Otherwise, you must manipulate the browser URL to consider any redirects. The URL looks like the following:` https://www.{your-environment}.io/app/{appPath}#/display/{{moduleId}}/{{submissionId}}/{{moduleId}}.`

### Disconnecting a Login Module

If you decide you do not want a login module in your application anymore, you can remove it.

To disconnect a login module at the Application level:

1. Navigate to the application that contains your login module.
2. At the top of the page, click ··· **(options)**.
3. Select **Settings**.
4. From the **Login** **Module** drop-down, click the **X** next to the login module’s name.

[![A static image displaying the App Details modal. The Login Module field displays a X button to disconnect an existing login module.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/UD_Login_DisableLogin_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-07T20%3A53%3A43Z&se=2026-11-07T21%3A53%3A43Z&sr=c&sp=r&sig=NPxN5VJX3m9pKp68d%2FLuu1M6yxeib9TgNljg1KPFHmM%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/UD%20Login%20DisableLogin.jpg?sv=2026-02-06&spr=https&st=2026-11-07T20%3A53%3A43Z&se=2026-11-07T21%3A53%3A43Z&sr=c&sp=r&sig=NPxN5VJX3m9pKp68d%2FLuu1M6yxeib9TgNljg1KPFHmM%3D)
5. Click **Save & Close**.

> [!NOTE]
> Disconnecting a login module does not delete it.

## Resources

- [Learn about Logout modules](/v1/docs/logout-module).
- [Learn how to use Header modules](/v1/docs/header-module).
- [Implement Footer modules](/v1/docs/footer-module).

## Overview

The **login** **module** is the first page end-users see when logging in to your [application](/v1/docs/introduction-to-unqork-applications). You can set up your login page to verify end-user credentials or use an SSO authentication service. You can create this page in its own [module](/v1/docs/introduction-to-the-module-builder) during the application creation process. Or, you can connect it to your application later. The login module is optional and not required to build your application in the Unqork Designer Platform.

> [!WARNING]
> Login and Logout modules are only available when viewing at the Application level.

### Enabling a Login Module

On the [Environment Administration](/v1/docs/environment-administration) page, you can enable custom login modules based on application needs. Enable the setting to connect or disconnect login modules to applications. Disable the setting to prevent login modules from being connected or disconnected from applications.

To enable an existing login module:

1. At the top right of the Unqork Designer Platform, click the **Settings ▾** drop-down.
2. Select **Administration**.
3. Under Environment, select **Environment Administration**.
4. Navigate to the **General** settings section of Environment Administration.
5. Set **Enable Custom Login/Logout** **Module****s** to (**checked**).
6. At the bottom of the page, click Save Changes.

> [!NOTE]
> Login modules do not display in Express View when you disable this setting. Disabling the custom login module setting reverts all affected applications back to the default login screen for the environment.

### Creating a Login Module

Create and connect a login module during the application creation process. This method names the login module and connects it to the new application for you.

To create and connect a login module when creating a new application:

1. Navigate to your workspace and click **+ Create App**.
2. In the **Create App** pop-up modal, complete the required application information.
3. From the **Login** **Module** drop-down, select **FE****New Login** **Module**.

[![A static image displaying the Create App modal. The Login Module drop-down is displayed and the New Login Module is highlighted.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/login_module_createNew_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-07T20%3A53%3A43Z&se=2026-11-07T21%3A53%3A43Z&sr=c&sp=r&sig=NPxN5VJX3m9pKp68d%2FLuu1M6yxeib9TgNljg1KPFHmM%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/login%20module%20createNew.jpg?sv=2026-02-06&spr=https&st=2026-11-07T20%3A53%3A43Z&se=2026-11-07T21%3A53%3A43Z&sr=c&sp=r&sig=NPxN5VJX3m9pKp68d%2FLuu1M6yxeib9TgNljg1KPFHmM%3D)
4. Click **Create**.

> [!NOTE]
> Login modules created in the Create App pop-up modal are named after the application and end with the text "Login". For example, Acme Corp Login.

From here, open the module and customize your login screen. Here are a few ideas of components you can add to begin:

- [**T****ext FieldComponent**](/v1/docs/text-field-component): Create a user name field for login credentials.
- [**P****rotected FieldComponent**](/v1/docs/protected-field-component): Create a masked field for users to input their password.
- [**ButtonComponent**](/v1/docs/button-component) : Create a call to action for your end-users to click after inserting their credentials.

> [!NOTE]
> The [Unqork Marketplace](https://marketplace.unqork.io/) offers a Login Moduletemplate containing everything you need to set up a login page.

### Connecting a Login Module to an Application

On an existing application's App Settings page, you can connect a login module.

To connect a login module to your application:

1. Navigate to your workspace and locate your application tile.
2. Click the **ellipsis (···)** menu.
3. Select **![Settings Icon](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Settings(2).png?sv=2026-02-06&spr=https&st=2026-11-07T20%3A53%3A43Z&se=2026-11-07T21%3A53%3A43Z&sr=c&sp=r&sig=NPxN5VJX3m9pKp68d%2FLuu1M6yxeib9TgNljg1KPFHmM%3D) Settings**.
4. From the **Login** **Module** drop-down, enter or select a login module.
5. Click **Save**.

### Creating a Login Module Library Element

You can also create a login module as a Library Element before connecting it to your application. By adding your module to the Library, you can share it with all your applications.

To create a login module Library Element for your application:

1. At the top right of the Unqork Designer Platform, click the **Library ▾** drop-down.
2. Select **Library Elements**.
3. Click **+ Create New**.
4. In the **Module** **Name** field, enter a name for your module.

> [!TIP]
> To easily locate your login module later, begin the module name with Login. For example, Login: Acme Corp.
5. Click **Create**.

### Previewing a Login Module

It's important to note that all modules you plan to have navigate to using your login module must exist in the same application. Otherwise, you'll receive a 403 error. The following image shows you how to preview a module at the Application level:

[![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/App_Preview_thumb_0_0(2).jpg?sv=2026-02-06&spr=https&st=2026-11-07T20%3A53%3A43Z&se=2026-11-07T21%3A53%3A43Z&sr=c&sp=r&sig=NPxN5VJX3m9pKp68d%2FLuu1M6yxeib9TgNljg1KPFHmM%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/App%20Preview(2).jpg?sv=2026-02-06&spr=https&st=2026-11-07T20%3A53%3A43Z&se=2026-11-07T21%3A53%3A43Z&sr=c&sp=r&sig=NPxN5VJX3m9pKp68d%2FLuu1M6yxeib9TgNljg1KPFHmM%3D)

To successfully preview your login module, you must preview it at the Application level. Otherwise, you must manipulate the browser URL to consider any redirects. The URL looks like the following: `https://www.{your-environment}.io/app/{appPath}#/display/{moduleId}/{submissionId}/{moduleId}.`

### Disconnecting a Login Module

If you decide you don’t want a login module in your application anymore, you can remove it.

To remove a login module from an application:

1. Navigate to your workspace and locate your application.
2. Click the **ellipsis (···)** menu.
3. Select **![Settings Icon](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Settings(2).png?sv=2026-02-06&spr=https&st=2026-11-07T20%3A53%3A43Z&se=2026-11-07T21%3A53%3A43Z&sr=c&sp=r&sig=NPxN5VJX3m9pKp68d%2FLuu1M6yxeib9TgNljg1KPFHmM%3D) Settings**.
4. From the **Login** **Module** drop-down, click the **X** next to the login module’s name.

[![A static image displaying the App Details modal, the Login Module field disconnect button is highlighted.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/login_module_disconnect_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-07T20%3A53%3A43Z&se=2026-11-07T21%3A53%3A43Z&sr=c&sp=r&sig=NPxN5VJX3m9pKp68d%2FLuu1M6yxeib9TgNljg1KPFHmM%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/login%20module%20disconnect.jpg?sv=2026-02-06&spr=https&st=2026-11-07T20%3A53%3A43Z&se=2026-11-07T21%3A53%3A43Z&sr=c&sp=r&sig=NPxN5VJX3m9pKp68d%2FLuu1M6yxeib9TgNljg1KPFHmM%3D)
5. Click **Save**.

## Resources

- [Learn about Logout modules](/v1/docs/logout-module).
- [Learn how to use Header modules](/v1/docs/header-module).
- [Implement Footer modules](/v1/docs/footer-module).

## 

End-users, also known as Express Users, are the individuals accessing an application through Express View. In most cases, end-users are the customers using the product.

Single Sign-On is an authentication scheme that enables users to use one set of login credentials across multiple services.

Express View is how your end-user views your application. Express View also lets you preview your applications to test your configuration and view the styling. This is also the view your end-users will see when interacting with your application. After configuring a module, click Preview in the Module Builder to interact with the module in Express View.

A modal is a window that appears on top of the content you are currently viewing.