1분만에 auth 구현 할 수 있게 해주는 next-auth

 

깃허브 auth로 구현했는데 다 방식은 똑같다.

* app router를 사용했고 rsc,rcc에 대한 설명은 생략함.

1. auth key 받아오기

나는 깃허브에서 받아왔다.

 

2. pages/api/aut/[...nextauth].ts 만들기

app router쓰는데 api폴더를 pages폴더에 만들어서 그냥 pages에 넣었다.

app 폴더에 넣어도 상관 없을듯

 

아래코드는 그냥 next-auth에서 시키는대로 작성한거다.

import NextAuth from "next-auth";
import GithubProvider from "next-auth/providers/github";

export const authOptions = {
  providers: [
    GithubProvider({
      clientId: process.env.NEXT_PUBLIC_GITHUB_AUTH_ID || "",
      clientSecret: process.env.NEXT_PUBLIC_GITHUB_AUTH_SECRETS || "",
    }),
  ],
  secret: process.env.NEXT_PUBLIC_JWT_SECRETS || "",
};
export default NextAuth(authOptions);

 

3. 구현

next app router다 보니까 서버컴포넌트에서는 이벤트핸들러를 못붙혀서 클라이언트 컴포넌트로 버튼컴포넌트를 만들어주었다.

 

signIn()

"use client";

import { signIn } from "next-auth/react";
import React from "react";

export const GithubLoginBtn = () => {
  return (
    <button
      onClick={() => {
        signIn();
      }}
    >
      깃헙로그인
    </button>
  );
};

 

signOut()

"use client";

import { signOut } from "next-auth/react";
import React from "react";

export const LogoutBtn = () => {
  return (
    <button
      onClick={() => {
        signOut();
      }}
    >
      로그아웃
    </button>
  );
};

 

유저정보 확인

getServerSession(authOptions)를 통해 유저정보를 확인 할 수 있다.

authOptions는 2번에서 next-auth가 시키는대로 만들었던 객체이다.

 

// app/pages.tsx

import { GithubLoginBtn } from "@/components/auth/GithubLoginBtn";
import { LogoutBtn } from "@/components/auth/LogoutBtn";
import { authOptions } from "@/pages/api/auth/[...nextauth]";
import { getServerSession } from "next-auth";
...

export default async function Home() {
  const user = await getServerSession(authOptions);
  return (
    <div>
      {user && <Profile user={user} />}
      <nav>
        <ul>
          <li>
            <Link href="/posts">리스트</Link>
          </li>
          <li>
            <Link href="/form">글쓰러가기</Link>
          </li>
          <li>{user ? <LogoutBtn /> : <GithubLoginBtn />}</li>
        </ul>
      </nav>
    </div>
  );
}

 

콘솔을 찍으면 다음과 같이 이름, 이메일, 프사를 확인할 수 있다.