Skip to main content

OAuth 인증하는 nextjs 샘플 따라하기

· 2 min read
  • 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가 나온다
      • 이 상태로 소스를 수정하면 바로 반영된다
  • 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에 내장된 기능이다