Auth.js로 Oauth 구현하기 (예시 : google)

NextAuth가  다양한 프레임워크를 지원하기 위해서 확장되면서 Auth.js로 바꼈습니다.

그러면서 사용법도 살짝 바꼈고 공식문서를 보고 학습한 부분을 포스팅합니다.

 

설치방법

1. Auth.js설치

npm install next-auth@beta

beta를 생략해도 됩니다.

 

이후 .env파일을 만든후에  암호화에 사용할 AUTH_SECRET을 만듭니다.

npx auth secret

을 실행하고 env파일에 넣어주면 됩니다.

 

2. Oauth 등록

이후 google-Oauth를 사용해야하니 계정을 만들고 등록합니다.

Oauth에 대한 자세한 설명한 아래 링크 참조하시면 좋습니다.

https://goldenrabbit.co.kr/2023/08/07/oauth%EB%A5%BC-%EC%82%AC%EC%9A%A9%ED%95%9C-%EA%B5%AC%EA%B8%80-%EB%A1%9C%EA%B7%B8%EC%9D%B8-%EC%9D%B8%EC%A6%9D%ED%95%98%EA%B8%B0-1%ED%8E%B8/

OAuth를 사용한 구글 로그인 인증하기 1편 - OAuth 소개와 준비하기 - 골든래빗

계정 생성과정까지는 동일한데, 리디랙션 URI만 아래와 같이 수정합니다

[origin]/api/auth/callback/google

http://localhost:3000/api/auth/callback/google

생성된 환경변수는 아래와 같은 환경변수로 해야하지 추가 작업이 줍니다.(아니면 일일이 사용할 떄마다 등록)

AUTH_GOOGLE_ID={CLIENT_ID}
AUTH_GOOGLE_SECRET={CLIENT_SECRET}

 
이후 루트경로에 provider를 등록합니다.

import NextAuth, { NextAuthConfig } from 'next-auth';
import Google from 'next-auth/providers/google';

export const config = {
  theme: { logo: 'https://authjs.dev/img/logo-sm.png' },
  providers: [Google],
} satisfies NextAuthConfig;

export const { handlers, signIn, signOut, auth } = NextAuth(config);

마지막으로 로그인 버튼에 아래와 같이 서버액션으로 사용하면 끝납니다.

import { signIn } from "@/auth.ts"
 
export function SignIn() {
  return (
    <form
      action={async () => {
        "use server"
        await signIn("google")
      }}
    >
      <button type="submit">Signin with Google</button>
    </form>
  )
}

이떄 서버액션을 사용하는 이유는 서버에서 작업을 하는 함수기에 보안적인 측면에서 장점이 있기 때문입니다.
https://nextjs.org/learn/dashboard-app/mutating-data

Learn Next.js: Mutating Data | Next.js

https://next-auth-example.vercel.app/

NextAuth.js Example

을 통해서 다양한 Oauth및 로그인 방법에 대한 예시를 확인할 수 있습니다.

 

트러블 슈팅
사용할 수 없는 메서드라고 에러가 뜸

이떄 우리가 만든 auth.ts 말고도 next/auth에서 자체적으로 사용가능한 signOut함수가 있는데, 해당 함수가 import되면서 에러가 발생함. 이를 수정

참고문헌

https://authjs.dev/getting-started/installation

Auth.js | Installation

https://authjs.dev/getting-started/authentication/oauth

OAuth Providers