https://nextjs.org/learn/dashboard-app/adding-authentication
In this chapter...
인증이란
NextAuth.js를 통해 앱에 인증을 추가하는 법
사용자를 리다이렉트하고 루트를 지키기 위해 미들웨어를 쓰는 법
pending state와 폼 에러를 다루기 위해 리액트의 useActionState를 쓰는 법
What is authentication?
시스템이 사용자가 누군지를 체크하는 것
보안 웹사이트는 여러 방법으로 체크하는데 예시로, 사용자명과 비밀번호 입력 후, 사이트는 인증 코드를 디바이스로 보내거나 외부 앱을 사용한다.
이 2-factor 인증(2FA)는 보안을 증가시킨다. 누군가 비번을 알아도, 유니크 토큰 없이 접근할 수 없다.
Authentication vs. Authorization
Authentication
- 사용자가 누군지를 확인하는 것.
Authorization - 그 다음 스텝. 사용자가 증명되면, 앱의 어느 파트를 ㅅ용 허용할지 결정
Authentication는 누군지 확인하는 것이고, Authorization은 어떤 부분에 접근할지 정해주는 것.
Creating the login route
로그인 폴더 새로 생성
NextAuth.js
- 인증을 앱에 추가하기 위해 사용할 것.
- 세션 관리, 로그인, 로그아웃, 다른 인증 등에 사용
- 과정을 간편화, 통합된 솔루션 제공
Setting up NextAuth.js
NextAuth.js 설치하기
beta 버전을 까는 이유 : Next.js 14와 호환 가능
그 후, 앱의 비밀 키 생성. 이 키는 사용자 세션의 보안을 확실히 하는 쿠키 암호화에 사용
.env 파일에 입력
AUTH_SECRET=your-secret-keyauth 실행을 위해, Vercel 프로젝트에서도 환경 변수를 업데이트 해야 한다.
Adding the pages option
authConfig 객체를 내보내는 auth.config.ts를 루트에 생성한다.
객체는 NextAuth.js에 대한 옵션을 포함한다.
지금은, pages 옵션만 포함한다.
로그인, 로그아웃, 에러 페이지 루트 특화에 pages 옵션을 쓸 수 있다.
필수적이진 않지만, 이것은 사용자가 로그인 페이지로 리다이렉트 되도록 한다.
Protecting your routes with Next.js Middleware
루트를 보호하기 위해 다음 로직을 추가한다.
이것은 로그인 하지 않았을 때 유저가 대시보드 페이지에 접근하는 것을 막는다.
authorized 콜백은 만약 요청이 Next.js 미들웨어를 통해 페이지에 접근하는 것에 인증되었을 때 쓰인다.
이것은 요청이 완성되기 전 호출되고, auth와 request 프로퍼티를 가진 객체를 받는다.
quth 프로퍼티는 사용자 세선과, incoming 요청을 포함하는 request 프로퍼티를 포함한다.
providers 옵션은 : 다른 로그인 옵션이 들어간 배열이다.
이제 미들웨어 파일에 authConfig 객체를 불러와야한다.
프로젝트 루트에, middleware.ts를 만든다.
- 여기서 authConfig 객체로 NextAuth.js를 초기화하고 auth 프로퍼티를 내보낸다.
- 특정 경로에서도 작동할 수 있도록 미들웨어에서 온 matcher 옵션을 쓴다.
미들웨어를 쓰는 것의 장점은 보호된 루트는 인증 시까지 렌더링을 시작하지 않아 보안, 성능을 향상시킨다는 것이다.
Password hashing
해싱은 패스워드를 고정된 길이의 랜덤인 문자로 변환해 노출되었을 떄도 보안을 유지하는 것을 말한다.
seed.js 파일에서, db에 저장 전에 사용자의 비밀번호를 hash 하기 위해 bcrypt를 호출한다. bcrypt 패키지를 위해 별개의 파일이 필요하다. bcrypt 는 Next.js 미들웨어에서 불가능한 Node.js APIs에 의존하기 때문이다.
authConfig 객체를 뿌리는 auth.ts를 생성한다.
Adding the Credentials provider
다른 로그인 옵션들을 배열로 제공하는 NextAuth.js.providers에 대한 prociders옵션을 추가해야 한다. Credentials provider을 사용할 것이다.
Credentials provider는 사용자가 사용자명과 패스워드로 로그인 하도록 한다.
Adding the sign in functionality
인증 로직을 다루기 위해 authorize 함수를 사용할 수 있다.
서버 액션과 비슷하게, 사용자가 db에 존재하는지 확인 전에 이메일, 패스워드를 증명하기 위해 zod를 사용할 수 있다.
인증 후, 사용자를 db에 요청하는 getUser 함수를 만든다.
그 후, 패스워드가 일치하는지 보기 위해 bcrypt.compare를 호출한다.
만약 패스워드가 일치하면, 사용자에게 반환하기 원할 거고 아니면 로그인 못하게 null을 반환한다.
Updating the login form
로그인 폼과 auth 로직을 연결해야한다.
actions.ts 파일에서, authenticate라는 새 액션을 생성한다.
이것은 auth.ts에서부터 signIn 함수를 불러올 것이다.
만약 'CredentialsSignin' 에러가 있다면, 에러 메시지를 보여준다.
마침내, login-form.tsx에서, 서버 액션을 호출하고, 에러를 다루고, 폼 대기 상태를 표시하기 위해 리액트의 useActionState를 사용할 수 있다.
Adding the logout functionality
SideNav 컴포넌트에 로그아웃 함수를 추가하기 위해, auth.ts에서 signOut 함수를 가져온다.
