English

Bring your own sign-in UI to Logto Cloud

This tutorial will guide you through the process of creating and deploying your own custom sign-in UI to Logto Cloud.

Charles

Developer

8/23/20244 min read

Stop wasting weeks on user auth

Launch secure apps faster with Logto. Integrate user auth in minutes, and focus on your core product.

Get started

Background

Logto provides an out-of-box sign-in experience UI that covers all Logto features, including sign-in, registration, password recovery, single sign-on (SSO), and more. Users can also customize the look and feel of the sign-in experience UI using our "Custom CSS" feature.

However, some users still want to deeply customize their sign-in experience (both UI and auth flows) to match their branding and specific business requirements. We've heard you! And we're excited to announce that the "Bring your own UI" feature is now available in Logto Cloud.

In this tutorial, we'll guide you through the steps to create and deploy your own custom sign-in UI to Logto Cloud.

Prerequisites

Before you start, ensure you have the following:

A Logto Cloud account with a subscription plan
An application integrated with Logto (Quick-starts)
Logto tunnel CLI installed
Basic knowledge of HTML, CSS, and JavaScript

For simplicity, we will use the classic "username & password" sign-in method in the following steps. Remember to change your sign-in method in Logto Console.

The minimum requirement for a sign-in UI is to have an index.html file, with a sign-in form that includes at least a username input, a password input, and a submit button. I used ChatGPT to generate a sample HTML, and here I come with this pinky lovely sign-in page.

I have omitted the CSS styles for simplicity, and here is how simple the HTML looks like:

You can also start with a boilerplate from your favorite front-end framework, such as Create React App, Next.js, or Vue CLI.

Since Logto is open source, another recommendation is to clone the Logto Experience project, and modify the code to fit your needs. This is the full feature Logto built-in sign-in experience UI, written in React and TypeScript.

Setup Logto tunnel CLI

Logto tunnel CLI is a tool that not only servers your HTML pages, but also allows you to interact with Logto's Experience API from your HTML pages in local dev environment.

Assuming your index.html page is located in /path/to/your/custom-ui, and your Logto tenant ID is foobar, you can run the command this way:

Or, if you are using a UI framework that has a built-in development server, and your page is served at http://localhost:4000, you can run the command like this:

After running the command, the tunnel service will be started on your local machine http://localhost:9000/.

Go to the application you created earlier, and change the Logto endpoint from https://foobar.logto.app/ to http://localhost:9000/ in your Logto SDK config.

Let's take our React sample project as an example:

Click the "Sign in" button in your application. Instead of seeing the built-in Logto sign-in UI, you should now be redirected to your custom sign-in page.

Interact with Logto Experience API

In this step, we will interact with Logto Experience API in your custom UI. First, let's create a script.js file and add the reference in your index.html.

Put the following code in your script.js file.

This script will complete the username and password sign-in flow with the help of these APIs:

PUT /api/experience - Start the sign-in interaction
POST /api/experience/verification/password - Verify the username and password
POST /api/experience/identification - Identify user for the current interaction
POST /api/experience/submit - Submit the sign-in interaction

Refer to Logto Experience API docs for more details.

Go to your application and click the "Sign in" button.
You should be redirected to your custom sign-in page at http://localhost:9000/.
Enter username and password, and click the "Submit" button.
If everything is set up correctly, you should be redirected back to your application, with authenticated user information.

Once you have finished developing and testing your custom sign-in UI locally, you can deploy it to Logto Cloud. Simply create a zip file of your custom UI folder and upload it to the "Custom UI" section in your Logto Console.

After uploading, save the changes, and your custom sign-in UI will go live in your Logto Cloud tenant, replacing the built-in Logto sign-in experience.

Finally, go back to your application and change the endpoint URI back to your Logto cloud endpoint: https://foobar.logto.app/. This time, you can stop the Logto tunnel service, and your application should now work directly with the custom UI hosted online.

Conclusion

In this tutorial, we've walked you through the process of implementing and deploying your own custom sign-in UI to Logto Cloud.

With this feature, you can now deeply customize your sign-in UI and auth flows to match your branding and specific business requirements.

Happy coding! 🚀

Try Logto Cloud for free

Background#

Prerequisites#

Create your custom sign-in UI#

Setup Logto tunnel CLI#

Trigger sign-in from your application#

Interact with Logto Experience API#

Test your custom sign-in page#

Deploy your custom sign-in UI to Logto Cloud#

Conclusion#

Background#

Prerequisites#

Create your custom sign-in UI#

Setup Logto tunnel CLI#

Trigger sign-in from your application#

Interact with Logto Experience API#

Test your custom sign-in page#

Deploy your custom sign-in UI to Logto Cloud#

Conclusion#

Background

Prerequisites

Create your custom sign-in UI

Setup Logto tunnel CLI

Trigger sign-in from your application

Interact with Logto Experience API

Test your custom sign-in page

Deploy your custom sign-in UI to Logto Cloud

Conclusion

Background

Prerequisites

Create your custom sign-in UI

Setup Logto tunnel CLI

Trigger sign-in from your application

Interact with Logto Experience API

Test your custom sign-in page

Deploy your custom sign-in UI to Logto Cloud

Conclusion