Skip to main content

Build custom product pages

Learn how to build custom product pages in Retool.

Organization admins can replace Retool’s login, reset password, signup, and invitation claims pages with Retool applications. This allows you to customize the user journey, which is valuable if you whitelabel Retool for external users outside your organization.

This guide covers how to set Retool applications as your product pages and use User Actions to control the user lifecycle (login, reset password, claiming an invite, etc.).

Configure product pages​

You can replace the following pages with Retool apps:

  • Login
  • Confirm reset password
  • Claim invitation

Each of these pages has a distinct route necessary for the user flow to work. For example, from an invite email, Retool needs to know which URL to open (e.g., that of a Retool-managed page or Retool app). Other flows, like how users input their passwords, or sign up for Retool, can be entirely defined by you.

1. Set product pages in settings​

To use custom product pages, set the Retool app you want to use from the settings page. The app must have a public link enabled.

Branding preview
  1. Go to Settings > Branding and customization.
  2. From the Preview section, confirm the dropdown is set to the page you want to modify, e.g., Login.
  3. Select Manage.
  4. Choose from existing public apps or select Create a new app.
  5. Set a custom URL for your app. Retool will automatically generate the public link at [your_domain].com/p/[custom_url].

New apps created from this flow are placed in the root folder. Ensure you restrict access to these apps by moving them to a more privileged folder.

2. Build product page apps​

This section covers how to build custom product pages using Retool apps.

Because these apps deal with sensitive information, restrict their access to admins and developers with only the most privileged access.

The template apps generated from Branding settings work with no additional configuration. Password reset and invite links will automatically use the public, custom URL set in Step 5 above.

These template apps also come prebuilt with User Actions. User Actions are an easy-to-use wrapper on top of Retool’s public APIs for:

  • Logging in
  • Logging out
  • Claiming invites
  • Sending password reset links
  • Confirming reset passwords

User Actions are used the same as any other Retool query, except that they can only be called from within apps.

Build your login page​

The login page serves as the default landing page for unauthenticated users. When users log out of Retool, they are automatically redirected to this page, though you can still access the Retool-managed at [your_domain].retool.com/auth/login. You can use this single page with User Actions to support login, password reset, and signup.

When building your login page, use the Login User Action.

Build queries for login User Actions

The Login User Action supports the following login methods:

  • Email and password
  • Google SSO
  • SAML SSO, when already configured in Settings > SSO
  • OIDC SSO, when already configured in Settings > SSO

To ensure users are routed to the Retool home page or a workspace, add an event handler. When you specify / as the path, Retool routes the user to the home page, or if they have a workspace set for their permission group, to their workspace app.

Build password reset and invite flows​

You can use the Send reset password email User Action to support password reset flows. You can use these actions within your same login app, e.g., by adding a new view to your container, or by creating a dedicated page for password resets and linking to it from your login page.

The Send reset password email User Action automatically validates the password reset token and email address passed as URL parameters. You can similarly build additional apps and functionality for claiming invites and confirming password resets using the Claim invitation and Confirm password reset flows.

Build a signup flow​

You can use the Retool API to build a self-service signup flow for your users.

Build a signup flow for your users

In the example login page above, when a user completes the onboarding questionnaire, the form triggers a query calling POST /user_invites with the form inputs in the metadata field, as well as the default permission groups.

When the user is created upon claiming the invitation, the companyName value will be stored on the user object. As an editor, you can access this value by referencing {{ current_user.metadata.companyName }}.

Security​

Because these apps touch the core user lifecycle, it's important to build these applications with security best practices in mind. User Actions do not make Retool any less secure, since these endpoints do not require authentication and are publicly accessible—anyone can attempt to reset the password for any email address.

Retool relies on the security of the reset password and invitation process, meaning the links are only accessible from the user’s or admin's email inbox.