Использование Bolt.New и Logto для быстрой настройки кастомных потоков входа
Узнайте, как с помощью Bolt.new создать полнофункциональное приложение со входом через Logto. От настройки потоков аутентификации до создания плавающей панели входа и подключения социальных сетей — в этом руководстве рассмотрены как базовая установка, так и кастомизация.
GuamianProduct & Design
Хватит тратить недели на аутентификацию пользователей
Запускайте безопасные приложения быстрее с Logto. Интегрируйте аутентификацию пользователей за считанные минуты и сосредоточьтесь на вашем основном продукте.
Bolt.new — это инструмент в браузере для мгновенной генерации и запуска полноценных веб-приложений. Построенный на базе WebContainer-технологии StackBlitz, он предоставляет разработчикам чистый, предварительно настроенный стек, включающий Next.js (App Router), Tailwind CSS, Supabase, Prisma и ShadCN UI. Вся среда работает локально в браузере: не требуется ни установка, ни облачные сборки, ни регистрация.
В отличие от инструментов, которые фокусируются на AI-помощи при работе в существующих проектах, Bolt.new ориентируется именно на начальный этап разработки. Он устраняет трудности, связанные с настройкой структуры проекта, зависимостей и локальных серверов, позволяя перейти от идеи к рабочему прототипу за считанные секунды.
В то время как такие инструменты, как Cursor и Lovable, служат ИИ-ассистентами внутри редактора кода, Bolt.new предлагает нечто совершенно иное: мгновенную генерацию и запуск полноценного приложения.
Cursor улучшает работу в VS Code с помощью ИИ, помогая редактировать или генерировать код в вашей среде.
Bolt.new создает рабочее приложение с нуля на основе промта или шаблона и запускает его мгновенно прямо в браузере с помощью WebContainers.
Нет необходимой зависимости от локальных инструментов или удалённых облачных машин. Всё работает прямо в браузере с нативной поддержкой Node.js, управления пакетами и full-stack-разработки. Это особенно удобно для быстрой разработки прототипов и экспериментов, особенно в контексте AI или SaaS-проектов.
Bolt.new создан для разработчиков, которые часто начинают с чистого листа:
Индие-хакеров, валидирующих идеи продуктов
AI-разработчиков, тестирующих рабочие процессы или внедряющих модели
Основателей, прототипирующих MVP
Инженеров, создающих внутренние инструменты или демо-версии
Обычно это пользователи, знакомые с современным веб-стеком и предпочитающие быстрые, удобные, неограничивающие инструменты. Bolt.new — не визуальный конструктор сайтов и не обучение через пошаговые уроки. Он рассчитан на навыки работы с React и full-stack, но снимает барьеры настройки.
Bolt.new был создан командой StackBlitz, компании, основанной в 2017 году Эриком Саймонсом и Альбертом Паи. StackBlitz был пионером WebContainers — родного в браузере WebAssembly-окружения, способного запускать Node.js непосредственно в браузере. Это устранило необходимость в облачных серверах или локальных установках для разработки современных JavaScript-приложений.
В 2023 году StackBlitz оказался на переломном этапе. Рост притормозил, и команда решила пойти дальше: объединить WebContainers с ИИ для генерации полноценных приложений из обычных текстовых запросов.
Так появился Bolt.new, который был публично запущен в октябре 2024 года. За считанные недели инструмент набрал популярность у разработчиков благодаря простоте и скорости. В нём соединились лучшие наработки StackBlitz: изоляция рантайма, быстрая установка пакетов, шэринг окружения — с интуитивным ИИ-интерфейсом, понимающим обычные задачи разработчиков.
Bolt.new ознаменовал новый этап в инструментах для разработки: теперь можно было начинать со стартового кода, уже работающего и адаптированного под ваш запрос.
Руководство: используем Logto и Bolt.New для кастомного входа в приложение#
В этом примере я использовал Bolt.new, чтобы создать CMS. Я пропустил этап промта и сразу перешёл к делу: попросил агента собрать CMS с Logto в качестве провайдера аутентификации.
По инструкции требовалось указать два важных параметра:
Logto endpoint
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 предоставляет готовый, настраиваемый поток входа, который можно кастомизировать в консоли. Зайди в 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, не выходя из среды разработки.
В этом режиме ты сможешь:
Создавать и управлять пользователями
Просматривать и фильтровать логи
Настраивать потоки входа и регистрации
Определять API-ресурсы, права и роли
Управлять приложениями и доступом
И многое другое
Объединяя локальные инструменты, AI и инфраструктуру Logto, аутентификация больше не будет болью — она станет органичной частью твоего цикла разработки.
