Using Bolt.New and Logto to quickly build your custom login flows

What is Bolt.New#

Bolt.new is a browser-based tool for generating and running full-stack web applications instantly. Built on top of StackBlitz’s WebContainer technology, it gives developers a clean, pre-configured stack that includes Next.js (App Router), Tailwind CSS, Supabase, Prisma, and ShadCN UI. The entire environment runs locally in the browser, no installations, no cloud build steps, and no signup required.

Unlike tools that focus on AI-assisted coding inside an existing project, Bolt.new focuses on the beginning of the development process. It removes the overhead of setting up project structure, dependencies, and local servers, letting you go from idea to working prototype in seconds.

How is Bolt.new different from Cursor or Lovable?#

While tools like Cursor and Lovable serve as AI copilots inside your code editor, Bolt.new focuses on something else entirely: instant, full-stack project generation and execution.

• Cursor enhances VS Code workflows with AI, helping you edit or generate code in your existing environment.
• Bolt.new creates a working app from scratch based on a prompt or template, and runs it instantly inside the browser using WebContainers.

There’s no dependency on local tools or remote cloud VMs. Everything runs in-browser with native support for Node.js, package management, and full-stack development. This makes it particularly well-suited for fast prototyping and local-first experimentation, especially in AI or SaaS project contexts.

Who is Bolt.new for?#

Bolt.new is designed for developers who often start from scratch such as:

• Indie hackers validating product ideas
• AI builders testing workflows or embedding models
• Founders prototyping MVPs
• Engineers creating internal tools or demos

These users are typically comfortable with the modern web stack and prefer tools that are fast, clean, and non-opinionated. Bolt.new is not a visual site builder or tutorial-driven platform. It assumes a working knowledge of React and full-stack development but removes setup friction.

The history and evolution of Bolt.new#

Bolt.new was created by the team behind StackBlitz, a company founded in 2017 by Eric Simons and Albert Pai. StackBlitz pioneered WebContainers, a browser-native WebAssembly runtime capable of executing Node.js environments directly inside the browser. This eliminated the need for cloud servers or local installations when developing modern JavaScript applications.

In 2023, StackBlitz faced a turning point. Growth had slowed, and the team explored a more radical direction: combining WebContainers with AI to generate fully functional applications from natural language prompts.

This experiment became Bolt.new, which launched publicly in October 2024. Within weeks, it gained significant traction among developers for its simplicity and speed. The tool combined everything StackBlitz had built over years, runtime isolation, fast dependency installation, and shareable environments, with an AI interface that understood common development goals.

Bolt.new marked a shift in developer tooling: instead of just writing code faster, developers could now start with code that was already running, tailored to their intent.

Guide: Use Logto and Bolt.New to add a custom log-in experience#

Register an app in Logto console#

In this example, I used Bolt.new to create a CMS app. I skipped the prompt phase and went straight to the point: I asked the agent to build a CMS with Logto as the authentication provider.

According to the instructions, I needed to provide two key pieces of information:

1. Logto endpoint
2. App ID

Since the app is a single-page React application, no app secret is needed. The agent handled the rest: it installed the latest Logto React SDK, set up authentication components, and wired everything together.

To complete the setup, I went to the Logto Cloud Console, created a new single-page application, and copied the Logto endpoint and App ID into Bolt.new.

Then configure the Redirect URIs and Post sign-out redirect URIs.

One important detail: because Bolt.new is browser-based and not a local IDE, you can’t use http://localhost:3000/as your redirect URI. Instead, make sure to use the preview URL shown in the Bolt.new browser tab.

Customize Logto pre-built sign in experience#

Logto provides a configurable, pre-built sign-in flow that you can customize in the Console. To get started, go to Sign-in Experience > Sign-in & Sign-up, then choose your preferred sign-in methods (such as email, username, phone number, or social login).

Once configured, triggering the sign-in flow will redirect users to Logto’s hosted sign-in page with your selected options. The entire authentication process is handled by Logto, and users are returned to your app after signing in.

Create a floating login panel above your product#

Now I want to go a step further and build a more customized sign-in experience, similar to what Perplexity offers. Instead of redirecting to a separate page, I’ll place a floating login panel directly on top of the product UI. This keeps users in context while still using Logto’s authentication flow underneath.

So I just use this prompt:

I want to make the sign-in page look better, just a floating panel on the bottom right corner. With two buttons: one for “Sign In” and one for “Create Account.” Each button should redirect to a different screen, handled by Logto. Using first-screen experience documented in Logto https://docs.logto.io/end-user-flows/authentication-parameters/first-screen

The nice part is, when you click Sign In, it goes straight to the sign-in page. If you click Create Account, it opens directly to the account creation screen.

Add social flows#

You can provide the agent with Logto’s direct sign-in documentation along with a prompt like “add social sign-in flows.” This allows you to skip the default Logto landing screen. For example, clicking the Google Sign-In button will immediately launch the Google authentication flow, giving users a faster and more friendly login experience.

Logto’s upcoming update will support AI-powered auth integration#

This is just a basic example. Logto is currently building MCP servers that run directly inside your IDE, allowing you to interact with the Logto Console and Management API without ever leaving your development environment.

With this setup, you’ll be able to:

1. Create and manage users
2. View and filter logs
3. Configure login and sign-up flows
4. Define API resources, permissions, and roles
5. Manage applications and access settings
6. And more

By combining local tooling with AI and Logto’s infrastructure, authentication is no longer a painful integration step, it becomes part of your natural development flow.