Skip to main content
Version: Next

Customize sign-in experience

In the "Get Started" tab, click the "Customize" button on the right, and the browser will redirect to the Sign-in Experience tab.

Sign-in preview​

Do you know...

You can preview the result in real-time! No matter what you update on the left, the right-side UI will immediately update to synchronize the change.

The customer may use the app under different conditions, including platform, language, and appearance.

Feel free to change them to see the result of your combination.

Branding​

In this area, you can define several main elements of brand expose: color, logo, and favicon, and Custom CSS.

  • Brand color will affect the primary color of components, e.g., buttons and links.
  • Enable dark mode controls if the UI has a "dark feeling" when Logto detects related system preference.
  • Custom CSS makes you tailor all pages' UI for a unique look with CSS code.
  • Other options are pretty straightforward, so we skip them here.
info

You may notice the auto-generated Brand color (Dark) is slightly different compared to the original Brand color.
Because Logto just took care of the visual difference between light and dark and computes a brand color exclusively for dark mode. If you are unsatisfied with the color, you are also free to customize it.

Sign-in experience - Branding

Others​

Let's skip "Sign-in methods" for now and move to the "Others" tab.

Terms​

An app will likely have a Terms and a Pravicy Policy of Use in production, and it's mandatory to accept it before signing in or creating an account.

Enter the URL to enforce this process. Logto will load it via an <iframe>.

Language​

This section allows you to specify the languages that will be displayed to the end user.

There are two options here that could require your special attention: the first one is Enable auto-detect switch and the second one is select a default language selector.

In the default configuration, your app will automatically detect the user's locale settings and switch to one of the supported languages in Logto. However, if the detected language is not supported, the default language will be used as a backup.

If you disable the feature, only the default language will be displayed in your app. Since doing so will restrict your access to potential users, it is not generally recommended.

This article is merely an easy starter to help you get a feel for your app language preferences. Go to Localized language for more advanced scenarios and setting recommendations.

Sign-in experience - Others

What's next​

Yeah, yeah. Signing in without entering the password is the trend. Logto cannot miss it and has built-in support. Continue reading: