Introducing Protected App: Build authentication in clicks, no code required

The story behind Protected App.
Sijie
SijieDeveloper
March 04, 20244 min read
Introducing Protected App: Build authentication in clicks, no code required

Making Logto as an open alternative to Auth0 has been quite the ride. The world is full of ways to check who's who online, so why add another? That's the big question we chewed over. We wanted something that any coder could pick up and use it without having to learn a bunch of SDKs or write endless lines of code.

So, here's the big news: We made Protected App. It's super simple—just fill in two spots, and bam, your app is protected with authentication. No headaches. 🎉

The motivation behind Protected App

We began developing Protected App after noticing a significant issue while maintaining our official SDKs: despite providing numerous SDKs and sample projects for developers, the integration process remained challenging. Developers had to learn about various types of "tokens" and write additional code to integrate them. This led us to question: Is using Logto genuinely easier than building a new authentication system from scratch? Unfortunately, we realized it wasn't as straightforward as we had hoped.

Getting inspired by the Express SDK

In the Express SDK, we advise developers to add middleware as an additional layer to perform three key tasks: handle authentication routes, check authentication state, and append user information to the request object. By doing this, developers can access a trusted authentication object from the request without needing to understand the intricacies of "integrating an SDK." This prompted us to think: Could we handle the preliminary tasks for the developers and directly lead them to the subsequent steps?

Similar product: Cloudflare Access

According to its official introduction, Cloudflare Access creates a secure access layer for all your self-hosted, SaaS, or non-web applications without requiring any code changes to the applications themselves.

As a CDN provider, Cloudflare can add an authentication layer to its CDN service before forwarding requests to the origin server. However, it's primarily designed for enterprise internal products, with the free plan supporting only up to 50 users and charges based on user count.

Here's what we did

Cloudflare is trusted by a wide developer community, and Protected App runs on Cloudflare Workers, eliminating concerns about managing an additional server for your application. We integrated Logto in a way similar to what we demonstrated in the Express SDK sample, but with added support for customization. Then, we forward the enhanced request to your origin server.

The Protected App maintains session state and user information. If a user is not authenticated, the Protected App redirects them to the sign-in page. Once authenticated, the Protected App wraps the user's request with authentication and user information, then forwards it to the origin server.

This process is visualized in the following flowchart:

Request
Yes
Yes
No
No
Client
(Browser)
Logto
Protected App
Route
matches?
Is authenticated?
Origin server
Logto sign-in

Simplifying authentication: Simple to use, yet secure and powerful

Using Protected App is remarkably straightforward, requiring just two key pieces of information: the origin URL that requires authentication, and the app domain, which acts as an authentication protection proxy. This domain also serves as the open URL for your application.

fields

Beneath its user-friendly surface, Protected App employs the robust OpenID Connect protocol, the same technology behind other regular Logto apps. This ensures your application benefits from industry-level security and scalability, safeguarding your data and user information without compromising performance.

Furthermore, Protected App offers extensive customization options. You have the freedom to fine-tune authentication rules for different areas of your site and bind a custom domain.

Focusing on what matters

By adopting Protected App, the rest of the powerful Logto features automatically open to you: customizable sign-in experience, multi-factor authentication, enterprise SSO, role-based access control, organizations, and more!

In this rapidly evolving industry, we hope all the builders can focus on their awesome ideas and businesses, instead of fighting with integrations and tech obstacles. This is our team's mission, and this is what Logto was designed for. We're committed to supporting you in bringing your great ideas to life, ensuring that you can dedicate your time and resources to what truly matters—your vision and your users.

Join the journey

Protected App is now available in Logto Cloud, and we're excited to announce that it will be open-sourced soon.

We invite you to embark on this journey with us, simplifying security so you can stay focused on what truly matters.

Stay secure, stay signed in! 💻🔐