Использование Bolt.New и Logto для быстрой настройки кастомных потоков входа

Что такое Bolt.New#

Bolt.new — это инструмент в браузере для мгновенной генерации и запуска полноценных веб-приложений. Построенный на базе WebContainer-технологии StackBlitz, он предоставляет разработчикам чистый, предварительно настроенный стек, включающий Next.js (App Router), Tailwind CSS, Supabase, Prisma и ShadCN UI. Вся среда работает локально в браузере: не требуется ни установка, ни облачные сборки, ни регистрация.

В отличие от инструментов, которые фокусируются на AI-помощи при работе в существующих проектах, Bolt.new ориентируется именно на начальный этап разработки. Он устраняет трудности, связанные с настройкой структуры проекта, зависимостей и локальных серверов, позволяя перейти от идеи к рабочему прототипу за считанные секунды.

Чем Bolt.new отличается от Cursor или Lovable?#

В то время как такие инструменты, как Cursor и Lovable, служат ИИ-ассистентами внутри редактора кода, Bolt.new предлагает нечто совершенно иное: мгновенную генерацию и запуск полноценного приложения.

• Cursor улучшает работу в VS Code с помощью ИИ, помогая редактировать или генерировать код в вашей среде.
• Bolt.new создает рабочее приложение с нуля на основе промта или шаблона и запускает его мгновенно прямо в браузере с помощью WebContainers.

Нет необходимой зависимости от локальных инструментов или удалённых облачных машин. Всё работает прямо в браузере с нативной поддержкой Node.js, управления пакетами и full-stack-разработки. Это особенно удобно для быстрой разработки прототипов и экспериментов, особенно в контексте AI или SaaS-проектов.

Для кого предназначен Bolt.new?#

Bolt.new создан для разработчиков, которые часто начинают с чистого листа:

• Индие-хакеров, валидирующих идеи продуктов
• AI-разработчиков, тестирующих рабочие процессы или внедряющих модели
• Основателей, прототипирующих MVP
• Инженеров, создающих внутренние инструменты или демо-версии

Обычно это пользователи, знакомые с современным веб-стеком и предпочитающие быстрые, удобные, неограничивающие инструменты. Bolt.new — не визуальный конструктор сайтов и не обучение через пошаговые уроки. Он рассчитан на навыки работы с React и full-stack, но снимает барьеры настройки.

История и эволюция Bolt.new#

Bolt.new был создан командой StackBlitz, компании, основанной в 2017 году Эриком Саймонсом и Альбертом Паи. StackBlitz был пионером WebContainers — родного в браузере WebAssembly-окружения, способного запускать Node.js непосредственно в браузере. Это устранило необходимость в облачных серверах или локальных установках для разработки современных JavaScript-приложений.

В 2023 году StackBlitz оказался на переломном этапе. Рост притормозил, и команда решила пойти дальше: объединить WebContainers с ИИ для генерации полноценных приложений из обычных текстовых запросов.

Так появился Bolt.new, который был публично запущен в октябре 2024 года. За считанные недели инструмент набрал популярность у разработчиков благодаря простоте и скорости. В нём соединились лучшие наработки StackBlitz: изоляция рантайма, быстрая установка пакетов, шэринг окружения — с интуитивным ИИ-интерфейсом, понимающим обычные задачи разработчиков.

Bolt.new ознаменовал новый этап в инструментах для разработки: теперь можно было начинать со стартового кода, уже работающего и адаптированного под ваш запрос.

Руководство: используем Logto и Bolt.New для кастомного входа в приложение#

Зарегистрируй приложение в консоли Logto#

В этом примере я использовал Bolt.new, чтобы создать CMS. Я пропустил этап промта и сразу перешёл к делу: попросил агента собрать CMS с Logto в качестве провайдера аутентификации.

По инструкции требовалось указать два важных параметра:

1. Logto endpoint
2. App ID

Поскольку приложение — одностраничное на React, секрет клиента не требуется. Агент сделал остальное: установил последнюю Logto React SDK, настроил компоненты авторизации и связал всё воедино.

Чтобы завершить настройку, я зашёл в Logto Cloud Console, создал новое одностраничное приложение и скопировал Logto endpoint и App ID в Bolt.new.

Далее нужно настроить Redirect URI и URI перенаправления после выхода.

Важная деталь: поскольку Bolt.new работает в браузере, а не локально в IDE, ты не можешь использовать http://localhost:3000/ в качестве Redirect URI. Вместо этого используй Preview URL, который отображается в вкладке Bolt.new в браузере.

Кастомизация готового экрана входа Logto#

Logto предоставляет готовый, настраиваемый поток входа, который можно кастомизировать в консоли. Зайди в Sign-in Experience > Sign-in & Sign-up, выбери нужные методы входа (электронная почта, имя пользователя, телефон или соцсети).

После настройки запуск потока входа перенаправляет пользователя на хостинговую страницу Logto с выбранными опциями. Весь процесс аутентификации на себя берёт Logto — после входа пользователь возвращается в твое приложение.

Создай плавающую панель входа поверх интерфейса#

Теперь хочу пойти дальше и сделать кастомизированный вход, как у Perplexity. Вместо перехода на отдельную страницу размещаю плавающую панель входа прямо поверх интерфейса. Такой подход сохраняет контекст пользователя, но в качестве механизма авторизации продолжает использовать Logto.

Использую вот такой промт:

Хочу, чтобы страница входа выглядела лучше — просто плавающая панель в нижнем правом углу, две кнопки: “Войти” и “Создать аккаунт”. Каждая кнопка ведёт на свой экран, управляется через Logto. Используй first-screen, как в Logto https://docs.logto.io/end-user-flows/authentication-parameters/first-screen

Главная фишка: при нажатии Sign In идёшь прямо на экран входа, при Create Account — сразу на форму создания аккаунта.

Добавь соцсети#

Ты можешь передать агенту документацию по прямому входу Logto и промт вида «добавь логин через соцсети». Это позволит пропустить стандартную стартовую страницу Logto. Например, нажимая на кнопку Google Sign-In, сразу запускается аутентификация через Google — это быстрее и удобнее для пользователя.

В ближайшем обновлении Logto появится поддержка AI-интеграции для аутентификации#

Это только базовый пример. Сейчас Logto разрабатывает MCP-серверы, которые работают прямо в твоей IDE и позволяют взаимодействовать с Logto Console и Management API, не выходя из среды разработки.

В этом режиме ты сможешь:

1. Создавать и управлять пользователями
2. Просматривать и фильтровать логи
3. Настраивать потоки входа и регистрации
4. Определять API-ресурсы, права и роли
5. Управлять приложениями и доступом
6. И многое другое

Объединяя локальные инструменты, AI и инфраструктуру Logto, аутентификация больше не будет болью — она станет органичной частью твоего цикла разработки.