Next Auth(2)

Next Auth(1) 이어서…

user 정보 가져오기 & 로그아웃

user 정보 가져오고 로그아웃하기 위해서는 ****next-auth/react 에서 signOut, useSession를 불러와야 된다.

 

useSession()

useSession()는 data, status 두 값을 포함하는 객체를 반환한다.

data는 session / undefined / null 3가지 값을 가진다.

status는 loading / authenticated / unauthenticated 3가지 값을 가진다.

 

사용 예시

import { useSession } from "next-auth/react"

export default function Component() {
  const { data: session, status } = useSession()

  if (status === "authenticated") {
    return <p>Signed in as {session.user.email}</p>
  }

  return <a href="/api/auth/signin">Sign in</a>
}

 

signOut()

로그아웃 시에는 signOut() 함수를 사용한다.

 

callbackUrl

signOut 함수의 callbackUrl 옵션은 로그아웃이 완료된 후에 사용자를 리디렉션할 URL을 지정한다.

signOut() 함수에 명시적으로 callbackUrl을 지정하지 않으면 기본적으로 현재 페이지로 이동한다.

로그아웃 후에 특정 페이지로 이동하고 싶다면, signOut 함수의 callbackUrl 옵션을 사용하여 명시적으로 지정할 수 있습니다.

const logOut = async () => {
    await signOut({ callbackUrl: `${url}` });
 };

 

 

전체 코드

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

export default function Home() {
  const { data: session, status } = useSession();

  const logOut = async () => {
    await signOut({ callbackUrl: `${url}` });
  };

  return (
    <>
      <section css={HomePage}>
         <div css={{ marginBottom: "20px", fontSize: 20 }}>
           <span>user : </span>
           <span className="user-name">{session.user.name}</span>
         </div>
         <button
           onClick={logOut}
           style={{
             padding: "12px 34px",
             borderRadius: "10px",
             color: "#fff",
             backgroundColor: "#000",
           }}
         >
           로그아웃
         </button>
      </section>
    </>
  );
}

Home.auth = true;

 

 

최종 결과