Добавьте аутентификацию Logto в ваше приложение Next.js с использованием Server Actions

Server Actions предлагает обновлённый подход к созданию надёжных веб-приложений без необходимости использования традиционных REST API. Ранее мы обсуждали это в нашей статье.

Сегодня мы рады сообщить об официальной поддержке Server Actions в нашем Next.js SDK, несмотря на то, что это экспериментальная функция.

Для быстрого обзора ознакомьтесь с этим примером и следуйте за нами, чтобы узнать, как интегрировать Logto с Server Actions в этом руководстве.

Предварительные требования#

Чтобы начать, убедитесь, что у вас есть следующее:

• Рабочая инстанция Logto или доступ к облачному аккаунту Logto.
• Проект Next.js с включённой функцией Server Actions.

Настройка Logto#

Если вы используете самохостинг Logto, обратитесь к документации Logto "Начать работу", чтобы настроить вашу инстанцию Logto.

Откройте консоль Logto, введя URL https://cloud.logto.io/, если вы используете Logto Cloud, или конечную точку, которую вы настроили для самохостинга.

Далее перейдите на вкладку "Приложения" и нажмите на "Создать приложение".

В появившемся модальном окне выберите "Next.js (App Router)" и укажите имя приложения, например, "Next.js App". Затем нажмите "Создать приложение".

Вы будете перенаправлены на страницу руководства в Logto. Нажмите "Завершить и готово", чтобы перейти на страницу сведений о приложении.

В разделе "URI перенаправлений" введите следующее значение:

Например, если вы размещаете Next.js на http://localhost:3000, значение должно быть:

Нажмите на кнопку "Сохранить изменения" внизу. После успешного сохранения оставьте эту страницу открытой, так как она будет полезна для конфигурации Next.js.

Настройка приложения Next.js#

Убедитесь, что у вас есть проект с последней версией Next.js. Если у вас ещё нет, вы можете следовать официальному руководству по установке для создания.

На момент написания этого руководства функция является экспериментальной и требует активации в next.config.js

Определение библиотеки Logto#

Начнем с установки модуля @logto/next с помощью npm следующим образом:

Вы также можете использовать yarn или pnpm.

Затем создадим некоторые функции как "server actions", создайте новый файл libraries/logto.ts:

В этом файле мы экспортируем четыре функции для аутентификации. Обратите внимание на первую строку, "use server", которая указывает, что код в файле может выполняться только на стороне сервера. Мы используем "next/headers", чтобы управлять сессиями на основе файлов cookie.

• Ссылка на "use server": https://react.dev/reference/react/use-server
• Ссылка на использование "next/headers" для управления файлами cookie: https://nextjs.org/docs/api-reference/next/headers

Вышеописанные функции, которые мы экспортировали, могут вызываться напрямую из компонента клиента React. Это главное преимущество использования Server Actions. Давайте перейдём к следующей главе, чтобы увидеть, как использовать эти функции.

Реализация кнопок входа и выхода#

С созданием функций аутентификации давайте создадим страницу. Мы создадим два клиентских компонента для инициирования действий входа и выхода.

Вход#

/app/sign-in.tsx:

Здесь мы импортируем функцию signIn, которая была определена только что в предыдущей главе. Хотя код выполняется на стороне сервера, эта функция всё же может вызываться напрямую компонентом <button>, когда пользователь нажимает на кнопку входа. Таким образом, мы устраняем необходимость писать какой-либо REST API для обработки процесса входа. На самом деле, Next.js обрабатывает детали диспатчера запроса "POST" за нас. Получив redirectUrl, мы можем вызвать router.push, чтобы перенаправить на страницу входа Logto.

Выход#

/app/sign-out.tsx:

Процесс выхода аналогичен процессу входа.

Подготовка страницы обратного вызова#

Как стандартный поставщик идентификации OIDC, Logto перенаправляет пользователей на URL обратного вызова после аутентификации. Поэтому мы должны подготовить страницу обратного вызова для обработки результата входа.

/app/callback/page.tsx

Здесь мы используем клиентский компонент с useEffect, что упрощает отображение страницы "загрузки" для улучшения пользовательского опыта.

Отображение контекста пользователя и защищённой страницы#

Теперь давайте создадим минимальную домашнюю страницу, чтобы продемонстрировать полезность Logto SDK. При необходимости защитите любой ресурс от неизвестных пользователей, проверяя значение isAuthenticated и перенаправляя на страницу входа или показывая сообщения об ошибке.

app/page.tsx

Как вы можете заметить, это серверный компонент, который устраняет необходимость в useEffect и управлении сложными изменениями состояния.

Заключение#

Server actions предлагают упрощённый и прямолинейный способ внедрения аутентификации по сравнению с традиционными приложениями Next.js, которые полагаются на REST API.

Весь код можно найти в этом репозитории: https://github.com/logto-io/js/tree/master/packages/next-server-actions-sample

Почему бы не попробовать Logto Cloud и не испытать простоту в действии?