Стремясь начать еще один побочный проект, я попробовал себя в Next Js. Поскольку я уже относительно хорошо знаю React, начать работу с Next Js было относительно легко. Так было до тех пор, пока мне не пришлось иметь дело с аутентификацией. Поскольку я хотел создать информационную панель для своих университетских дел в качестве побочного проекта, мне также пришлось войти в систему с учетными данными университета. Таким образом, выбор быстро пал на Credentials Provider, с помощью которого можно реализовать собственную логику аутентификации. Итак, теперь хватит болтовни, и давайте приступим к самому уроку.
Кстати, я также сделал этот урок в виде видео, если вам интересно
👉 https://youtu.be/iyF2Y5-3IxE
Первый шаг — установить следующую авторизацию:
Следующим шагом будет добавление каталога с именем auth в вашу папку API. Затем вам нужно создать файл с именем [...nextauth].js в вашей папке авторизации.
Следующим шагом является создание объекта NextAuth, который будет импортирован из пакета next-auth. Затем нам нужно добавить атрибут provider. Этот атрибут определяет поставщика, которого вы хотите использовать для своего проекта. Затем вы добавляете свой CredentialsProvider. В этом вы определяете имя для вашего CredentialsProvider на случай, если вы захотите добавить еще один. Затем в атрибуте учетных данных вы определяете поля ввода, которые хотите использовать для аутентификации. В моем случае это просто имя пользователя и пароль. После этого вам нужно реализовать свою логику в методе авторизации. Например, учетные данные берутся здесь и возвращаются в виде объекта, если запрос правильный.
Важно возвращать ноль в случае неверных данных, потому что тогда пользователь получит уведомление о том, что что-то пошло не так.
Последний шаг — перезапись обратных вызовов. В этом случае сеансу можно дать любой объект или поле, которые вы хотите иметь в объекте сеанса. В этом случае в сеанс будет передан только токен с учетными данными.
Теперь вам просто нужно изменить _app.js и обернуть pageProps в SessionProvider. Это гарантирует, что содержимое проверяется перед его отображением.
В качестве последнего шага в индексном файле может быть реализована проверка подлинности. Для этой цели доступен хук useSession. Этот хук подхватывает текущий сеанс и позволяет получить доступ к данным сеанса, а также к текущему состоянию сеанса. С помощью простой проверки теперь можно проверить статус сеанса, и в случае неаутентифицированного пользователя можно снова отправить его для входа в систему. В этом помогает хук useRouter.
Вот и все. Спасибо за прочтение ❤️. Дайте мне знать, если вы хотите узнать больше о следующем js.
