Application Builder - Login element

The Login element provides a pre-built form (Email/Password) that connects to your User Source. It handles the security, validation, and session creation required to log users into your application.

This page covers how to securely authenticate users and grant access to private pages and data.

Overview

The login element is an important component for securing your application.

  • Prerequisite: You must have a configured User Source (connected to a Users table) before this element will work.
  • Function: Authenticates the user. If successful, it triggers an “On Success” event (usually a redirect).
  • Visibility: Once logged in, the user’s role determines which pages and elements they can see.
  • Styling: You can style the Inputs and the Button independently using Theme Overrides.

login element

Add a login form

  1. Open the Elements panel (click the + icon).
  2. Select Login.
  3. Drag and drop the element onto your canvas.
    • Tip: It is best practice to place this on a dedicated “Login” page that is visible to All Visitors.

Configuration

Click the element to open the General properties tab.

1. User Source (Required)

You must tell the element which database to check credentials against.

  • Select an existing User Source from the dropdown.
  • If the dropdown is empty, go to Application Settings > User Sources to create one or add a new source from the dropdown menu.

Choose a user source to use the login element

2. Button Label

Customize the text displayed on the submission button.

  • Default: “Log in”
  • Custom: “Sign In,” “Access Portal,” etc.

3. Events (On Success)

By default, the login form simply validates the user. You must define what happens next.

  1. Click the Events tab.
  2. You will see the On Success trigger.
  3. Add an action, typically Open Page.
  4. Select the destination (e.g., “Home” or “Dashboard”).
    • Note: If you don’t set this, the user will remain on the login page even after successfully logging in.

Styling and Theme Overrides

The Login element consists of two distinct parts: the Input Fields and the Submit Button. You can customize them separately via Theme Overrides.

  1. In the General tab, look for the Style/Settings icon (slider icon) next to the configuration sections.

Styling User Source (Inputs)

Click the override icon next to the User Source field to style the text boxes:

  • Label: Font, color, and size of the “Email” and “Password” labels.
  • Input: Background color, border radius, and text padding of the entry boxes.

Styling Login Button

Click the override icon next to the Login button label field to style the button:

  • States: Configure distinct looks for Default, Hover, and Active states.
  • Visuals: Change the button color, border, and alignment (Left/Center/Right/Full Width).

Post-login behavior

Once a user logs in, the application state changes.

  1. Page Visibility: The user can now access pages set to “Logged-in visitors only.”
  2. Data Security: Any data restricted to the user’s role becomes available.
  3. Logout: To allow users to leave, you must add a separate Button element elsewhere in your app (e.g., in the header) and configure its Event to Log out.

Baserow logout button will end the user's session

Troubleshooting

Login works, but the user is not redirected

This usually happens if the user does not have permission to view the destination page.

  • Check Page Visibility: Go to the destination page (e.g., “Dashboard”) and check its Visibility settings. Ensure the user’s role is included in the “Allow roles” list.
  • Check User Source: Ensure the User Source has the Role field correctly mapped to your database.

“Invalid Credentials” error

  • Ensure the email and password in your database match exactly.
  • Remember that passwords in Baserow are hashed. You cannot simply type a plain text password into the database cell; you must create the user via a Sign-Up form or use the admin tools to set the password.

Learn more about the password field type.

Related content

Still need help? If you’re looking for something else, please feel free to make recommendations or ask us questions; we’re ready to assist you.