Проблематика стандартной реализации MSAL в Next.js
Официальные библиотеки MSAL от Microsoft предоставляют мощные инструменты для работы с аутентификацией и авторизацией пользователей, но они не были оптимизированы под особенности роутинга в Next.js. При попытке интегрировать пакет @azure/msal-react разработчики сталкиваются со следующими проблемами:
- Несовместимость гидратации между серверной и клиентской частью приложения.
- Сложность настройки промежуточного ПО (middleware).
- Трудности при передаче состояния аутентификации между компонентами сервера и клиента.
Эти проблемы особенно актуальны при использовании новой архитектуры роутера в Next.js версии 13 и выше.
Как библиотека msal-next решает эти задачи
Библиотека @chemmangat/msal-next, разработанная специально для устранения этих проблем, предлагает следующие преимущества:
Автоматическая настройка
С помощью команды npx @chemmangat/msal-next-cli init можно автоматически инициализировать весь процесс аутентификации, что значительно упрощает настройку проекта.
Настройка доступа на уровне страниц
Вы можете экспортировать объект конфигурации страницы (PageAuthConfig) прямо из файла страницы, чтобы определить необходимые роли или логику проверки прав доступа.
Совместимость с архитектурой Next.js
Библиотека корректно обрабатывает границы гидратации, позволяя сохранить чистоту структуры вашего приложения.
Интеграция с промежуточным программным обеспечением
Предоставляется удобный способ обработки перенаправлений до начала рендеринга страницы, что улучшает производительность и удобство использования.
Быстрый старт
Для того чтобы начать использовать библиотеку, выполните следующую команду установки зависимостей:
npm install @chemmangat/msal-next @azure/msal-browser @azure/msal-react
Затем добавьте провайдер MSAL в ваш файл app/layout.tsx. Это позволит вам легко управлять процессом аутентификации и авторизации в вашем приложении.