[Next.js] NextAuth 소셜 로그인, openssl 설치

Next.js - NextAuth 소셜 로그인

• next-auth 설치
  • cmd 창 프로젝트 최상단 디렉터리 위치에서 npm install next-auth@beta 입력
  • https://authjs.dev/reference/core 에서 Provider 확인 가능
• next-auth 사용
  • cmd 창 프로젝트 최상단 디렉터리 위치에서 openssl 입력 (openssl 미설치 시 아래 확인!)
  • rand -base64 32 입력
  • 입력 후 나오는 결과가 .env.local 의 AUTH_SECRET

  • 

  
  
  • .env.local 파일 생성 후 openssl에서 발급한 AUTH_SECRET 결과 넣어주기
    • .env.local 예시

    AUTH_SECRET=openssl에서 발급한 auth_secret 값 넣어주기
    GOOGLE_CLIENT_ID=구글ID
    GOOGLE_CLIENT_SECRET=구글SECRET
    

  • Provider 생성
    • GoogleProvider 예시

    import GoogleProvider from 'next-auth/providers/google';
    
    export const {
      handlers: { GET, POST },
      auth,
    } = NextAuth({
      providers: [
        GoogleProvider({
          clientId: process.env.GOOGLE_CLIENT_ID as string,
          clientSecret: process.env.GOOGLE_CLIENT_SECRET as string,
        }),
      ],
      secret: process.env.AUTH_SECRET as string,
    });
    

  • route.ts 생성

  • export { GET, POST } from '@/app/_lib/auth';
    export const runtime = 'edge';

 

Next.js - openssl 설치

• 윈도우에서 openssl 설치
  • https://slproweb.com/products/Win32OpenSSL.html 에서 Win64 OpenSSL v1.1.1w EXE 파일 다운 후 설치
  • 시스템 환경 변수 편집- 환경 변수- 시스템 변수- 새로 만들기

  • 

  
  
  • 시스템 변수- 변수 중 Path 클릭 후 편집 클릭
  • 새로 만들기 클릭 후 C:\Program Files\OpenSSL-Win64\bin 추가
  • cmd 창에서 openssl 입력, version 입력 시 설치와 버전 확인 가능

  •