English

Bolt
AI
Direct sign-in

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

Learn how to use Bolt.new to build a full-stack app with Logto authentication. From configuring sign-in flows to creating a floating login panel and enabling social logins, this guide covers both setup and customization.

Guamian

Product & Design

7/31/20254 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

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:

Logto endpoint
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.

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.

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.

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:

Create and manage users
View and filter logs
Configure login and sign-up flows
Define API resources, permissions, and roles
Manage applications and access settings
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.

Try Logto Cloud for free

What is Bolt.New#

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

Who is Bolt.new for?#

The history and evolution of Bolt.new#

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

Register an app in Logto console#

Customize Logto pre-built sign in experience#

Create a floating login panel above your product#

Add social flows#

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

What is Bolt.New#

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

Who is Bolt.new for?#

The history and evolution of Bolt.new#

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

Register an app in Logto console#

Customize Logto pre-built sign in experience#

Create a floating login panel above your product#

Add social flows#

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

What is Bolt.New

How is Bolt.new different from Cursor or Lovable?

Who is Bolt.new for?

The history and evolution of Bolt.new

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

Register an app in Logto console

Customize Logto pre-built sign in experience

Create a floating login panel above your product

Add social flows

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

What is Bolt.New

How is Bolt.new different from Cursor or Lovable?

Who is Bolt.new for?

The history and evolution of Bolt.new

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

Register an app in Logto console

Customize Logto pre-built sign in experience

Create a floating login panel above your product

Add social flows

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