Learn how to enhance the user sign-up experience with Logto authentication parameters.

At Logto, we place a strong emphasis on refining our onboarding process for our customers. We understand the importance of making the user sign-up and sign-in experience as straightforward and seamless as possible. In this article, we'll share two little tricks you should use to improve the user's sign-up experience.

First screen

Let's take a brief look at the OIDC authentication process.

When a user sends an authentication request from the client application, an OIDC authentication session is initiated in Logto. The user is then directed to the Logto-hosted login page to enter their credentials and verify their identity. Once the user successfully logs in, the authentication response is sent back to the client application.

By default, a sign-in screen will be presented to the user.

If the user does not have an account, he may then click on the Register button to switch to the sign-up screen.

But what if the user comes to the application with the clear intention of signing up? You would definitely want to skip the sign-in screen and land the user directly on a well designed sign-up screen.

This can be easily achieved by adding the first_screen parameter to your authentication request.

curl --location \
  --request GET 'https://[tenant-id].logto.app/oidc/auth?client_id=1234567890&...&first_screen=register'

Or in a supported SDK:

logtoClient.signIn({
  redirectUri: 'https://your-app.com/callback',
  firstScreen: 'register',
});

The first_screen parameter can take two values: signIn or register.

By setting the first_screen parameter to register, you can skip the sign-in screen and land the user directly on the sign-up screen.

Just like our Logto homepage.

When user clicks on the Get started button, they will be directed to the sign-up screen directly.

Direct sign-in

Another handy authentication parameter you should know is direct_sign_in. This parameter allows you to initiate a social or enterprise SSO authentication flow directly by bypassing the sign-in screen.

This is particularly useful when you have your own social and enterprise SSO entry points and want to skip Logto's sign-in screen.

For example, without the direct_sign_in parameter specified, an enterprise SSO user journey would be like:

1. Default sign-in screen is presented.
2. Enters the email address.
3. Single sign-on detected and the user then clicks on the Single Sign-On button to initiate the SSO flow.
4. Additionally, if multiple SSO providers are configured under the same email domain, the user will be prompted to select the desired SSO provider. This flow can be simplified if you know the user's desired SSO provider in advance. The direct_sign_in parameter can take the following values:

• social:<provider-name>: Directly initiate a third-party social authentication flow. (e.g. social:google)
• sso:<connector-id>: Directly initiate an enterprise SSO authentication flow. (e.g. sso:1234567890)

💡 Be aware that the specified connectors and sign-in methods must be properly configured and enabled in the sign-in experience settings.

Append the direct_sign_in parameter to your authentication request:

curl --location \
  --request GET 'https://[tenant-id].logto.app/oidc/auth?client_id=1234567890&...&direct_sign_in=sso:1234567890'

Or in a supported SDK:

logtoClient.signIn({
  redirectUri: 'https://your-app.com/callback',
  directSignIn: 'social:google',
});

With the direct_sign_in parameter, the user will be directly redirected to the specified identity provider's authentication page. Significantly reducing the number of steps required to complete the authentication process.

Conclusion

At Logto, we take user experience very seriously. By using the first_screen and direct_sign_in parameters, you can significantly enhance the onboarding process for your customers.

If you want to create a customized and visually appealing sign-up screen, be sure to explore our custom-css feature.

For more information, check out the authentication parameters.

Try Logto Cloud for free