Вопрос или проблема
Я использую NextAuth.js (Auth.js) в своем приложении Next.js 14 с OIDC провайдером для аутентификации.
Я реализовал своего собственного Oauth провайдера. Я добавил следующую логику в свой layout.tsx, чтобы ограничить пользователей от доступа к приложению без входа в систему:
export default async function RootLayout({ children }) {
const loggedIn = await auth();
if (!loggedIn) redirect('/api/auth/signin');
return (
<html lang="en">
<body>
{/* содержимое макета */}
</body>
</html>
);
}
Это успешно перенаправляет на страницу входа, но я хотел бы обойти выбор кнопки входа и перенаправить пользователей напрямую на страницу входа через OAuth.
Вот моя настройка OIDC провайдера:
export default function OwnIdentityProvider(options: any): Provider {
return {
id: "admin-spa",
name: "Онлайн администратор",
type: "oidc",
issuer: `${process.env.AUTH_IDENTITY_URL}/`,
authorization: {
url: `${process.env.AUTH_IDENTITY_URL}/connect/authorize`,
params: {
responseType: 'id_token',
scope: 'openid profile email api1',
},
},
// токен, информация о пользователе и т.д.
}
}
Существует ли способ пропустить страницу выбора входа и перенаправить напрямую на страницу входа через OAuth, когда пользователь не вошел в систему?
Я получаю эту страницу, когда: redirect('/api/auth/signin');
Которую я хочу обойти и сразу перейти на страницу входа.
Также каков лучший подход для проверки, вошел ли пользователь в систему или нет, при попытке зайти в приложение с корневого URL?
Ответ или решение
Для того чтобы перенаправить пользователя напрямую на страницу входа в OAuth, минуя промежуточную страницу выбора, используя NextAuth.js (Auth.js) в приложении Next.js 14, можно использовать метод signIn напрямую с указанием вашего провайдера.
Вот как можно изменить ваш код в layout.tsx, чтобы реализовать это поведение:
Шаги для реализации
-
Удалите перенаправление на
/api/auth/signin: Вместо того чтобы перенаправлять на страницу входа, мы будем вызывать методsignInс указанием провайдера. -
Используйте
redirectк авторизации OAuth: Вызовите функциюsignInс вашим провайдером после проверки аутентификации.
Вот пример кода с учетом вышеуказанных шагов:
import { redirect } from 'next/navigation';
import { getSession, signIn } from 'next-auth/react';
export default async function RootLayout({ children }) {
const session = await getSession();
// Если сессии нет, переходим напрямую на страницу авторизации OAuth
if (!session) {
await signIn('admin-spa', { callbackUrl: '/' }); // 'admin-spa' - это ваш провайдер
}
return (
<html lang="en">
<body>
{children}
</body>
</html>
);
}Объяснение кода
-
getSession: Эта функция используется для проверки текущей сессии пользователя. Если у пользователя нет активной сессии, мы вызываем функциюsignIn. -
signIn: После вызова данной функции с указанием идентификатора вашего провайдера ('admin-spa'), выполняется перенаправление пользователя непосредственно на страницу авторизации вашего OIDC провайдера. ПараметрcallbackUrlуказывает, куда пользователь будет перенаправлен после успешной авторизации.
Преимущества данного подхода
- Прямое перенаправление: Пользователь сразу будет направлен на OAuth страницу входа, без промежуточной страницы выбора.
- Простота: Код становится легче и чище, поскольку нет необходимости управлять состоянием отображения кнопок входа.
Альтернативы для проверки аутентификации
Вы также можете рассмотреть возможность интеграции серверного рендеринга (SSR) для проверки аутентификации. Например, использование getServerSideProps для выполнения проверки на уровне сервера, но это зависит от архитектуры вашего приложения.
Заключение
Таким образом, вы сможете эффективно управлять аутентификацией пользователей в вашем приложении Next.js с помощью NextAuth.js, обеспечивая более плавный пользовательский опыт, сразу перенаправляя на страницу входа в OIDC.