4주차 - OAuth 기능 구현(Github, Google)

ggomadev·2024년 7월 30일

CSS UI radix shadcn tailwind tailwindCSS

Ultimate Next.js Course

목록 보기

3/7

Ultimate Next.js Course 강의를 보면서 공부한 것들을 작성한 글입니다.

Next-Auth

OAuth

구글, 페이스북와 같이 다양한 플랫폼의 특정 사용자 데이터에 접근하기 위해 제 3자 클라이언트(구현서비스)가 사용자의 접근 권한을 위임 받을 수 있는 표준 프로토콜.

Resource Owner

우리의 서비스를 이용하면서 구글, 페이스 등의 플랫폼에서 리소스(페이스북 친구목록, 네이버 블로그)를 소유하고 있는 사용자

Authorization Server

Resource Owner를 인증하고 클라이언트에게 액세스 토큰을 발급해주는 서버.

Resource Server

리소스를 보유하고 있는 서버(구글, 페이스북 등)

참고) Authorization Server와 Resource Server는 공식 문서상 별개로 구분되어있으나 이는 개발자에게 달려있다고 함

Client

Resource Server의 자원을 이용하려는, 우리가 개발하려는 서비스

OAuth Flow

1. 웹 애플리케이션 등록

구글, 깃허브 등 사용하려는 리소스 서버에 자신의 서비스를 등록한다.
이 과정에서 clientID(클라이언트 웹 애플리케이션을 구별할 수 있는 식별자), clientSecret(ClientID에 대한 비밀키, 절대 알려져서는 안됨), Authorized redirect URL(Authorization Code를 전달받을 리다이렉트 주소)을 부여받는다.

2. Resource Owner의 승인

Resource Owner는 Resource Server에 접속하여 로그인한다.
완료시 Resource Server는 쿼리스트링으로 넘어온 파라미터들을 통해 클라이언트를 검사한다.
(ClientID와 Redirect URL이 같은지 확인)

3. Resource Server의 승인

2번이 완료되면 RedirectURL로 클라이언트를 리다이렉트 시킨다. AccessToken 발급 전에 임시 암호인 Authroization Code를 함께 발급한다. 클라이언트는 Resource Server에 정보를 직접 전달하고 Resource Server가 이를 확인한 후에 유효한 요청이라면 AccessToken을 발급한다.

Github

settings -> Developer Settings -> OAuth Apps -> new OAuth App 버튼 클릭 후 -> register하면 됨

Google

구글 클라우드

1. 사용자 인증정보 만들기 -> OAuth 클라이언트 ID

- 승인된 JavaScript 원본
http://localhost:3000

- 승인된 리디렉션 URI
http://localhost:3000/api/auth/callback/github

사용자 OAuth 동의화면 작성하기

// .env.local
openssl rand -base64 33

터미널에 입력후 나오는 값(x) 넣기

AUTH_SECRET=x

코드

// server>auth.ts
import NextAuth from "next-auth";
import Google from "next-auth/providers/google";
import Github from "next-auth/providers/github";
import { DrizzleAdapter } from "@auth/drizzle-adapter";

import { db } from "@/server";

export const { handlers, auth, signIn, signOut } = NextAuth({
  adapter: DrizzleAdapter(db),
  secret: process.env.AUTH_SECRET,
  providers: [
    Google({
      clientId: process.env.GOOGLE_CLIENT_ID,
      clientSecret: process.env.GOOGLE_CLIENT_SECRET,
    }),
    Github({
      clientId: process.env.GITHUB_ID,
      clientSecret: process.env.GITHUB_SECRET,
    }),
  ],
});

개인회고

⚠️ 여기까지한 뒤 http://localhost:3000/api/auth/signIn으로 들어갔을 때 400에러 발생 ⚠️
-> 당시에는 400에러의 원인을 서버와의 통신 또는 drizzle 라이브러리를 잘못 사용해서라고 생각하고 계속 코드랑 라이브러리 문서만 쳐다봤었다
-> Next-Auth 문서 읽고 http://localhost:3000/api/auth/signin 으로 들어갔더니 잘 나오는 것을 확인했다(처음부터 문서 이 부분을 봤으면 삽질하지 않았을 것 같다. 강의 따라가는 것도 중요하지만 문서도 함께 보도록 해야겠다(머리로는 알고있지만..! 반성))