- https://nextjs.org/docs/getting-started
- create-next-app CLI
- 요즘은 CLI 설치 않고
npx
사용한다 npx create-next-app next-oauth-101
- 바로 실행 가능
cd next-oauth-101; npm run dev
- 3000번 포트에 뭔가 간단한 UI가 나온다
- 이 상태로 소스를 수정하면 바로 반영된다
- 요즘은 CLI 설치 않고
next.js/examples
아래서 필요한 기능을 찾는다.- Adding Authentication to an existing serverless Next.js App in no time with NextAuth.js!
- nextjs application이 있는데 user/authentication을 추가하고 싶은가?
NextAuth.js
를 추가하면 끝이다 - 일단 OAuth provider로 Google예로들자
- GCP Console에서 project를 만든다
API's & Service
->Credentials
-> Create credentials -> OAuth Client ID- User type은 external 밖에 못 고른다
- Internal: Google Workspace 사용자 대상
- External: App이 production에 push되고 verify되어야 함. 그 전까진 등록된 test user만 사용가능
- OAuth client ID / Secret을 만들었다. JSON Download가 되는데 이걸 분실하면 안되는건가? -> 아니다. 콘솔에서 보이네
npm install next-auth
- 이 글에선
.env
를 사용한다 .env.production
,.env.development
등을 사용하라는데 이것들은 git에 올리지 않아야겠지?
- 이 글에선
- Dynamic API Routes는 그냥 API Routes와 다르다
- 어쩐지 react관련 오류가 나더라
http://localhost:3000/api/auth/a/b/c
에 대해req.query
를 출력해 보면{ nextauth: [ 'a', 'b', 'c' ] }
이 나온다- https://github.com/nextauthjs/next-auth-example 이걸 보면 dotenv를 읽어들이는 부분이 없다. nextjs에 내장된 기능이다
- nextjs application이 있는데 user/authentication을 추가하고 싶은가?
OAuth 인증하는 nextjs 샘플 따라하기
· 2 min read