프로그래밍/NextJS

nextjs 소셜로그인 구현

타코코딩 2023. 12. 11. 16:25
npm i next-auth



pages/api/auth/[nextauth].js 파일생성

import NextAuth from "next-auth"; import GithubProvider from "next-auth/providers/github"; export const authOptions = { providers: [ GithubProvider({ clientId: 'Github에서 발급받은ID', clientSecret: 'Github에서 발급받은Secret', }), ], secret : 'jwt생성시쓰는암호' }; export default NextAuth(authOptions);

https://next-auth.js.org/

 

NextAuth.js

Authentication for Next.js

next-auth.js.org

시크릿키 잊지말고 입력해야함

"use client";
import { useSession, signIn, signOut } from "next-auth/react";

export default function LgoinBtn() {
  return (
    <button
      onClick={() => {
        signIn();
      }}>
      로그인
    </button>
  );
}

 


signIn 이라는 라이브러리함수쓰면 자동으로 로그인페이지 만들어짐

  let session = await getServerSession(authOptions);
  console.log(session);
{
  user: {
    name: '깃허브닉넴',
    email: '이멜@gmail.com',
    image: '유저프사'
  }
}

깃허브에서 시크릿키 발급받는방법