[Next.js] NextAuth의 매력에 빠지다

js로 프로젝트를 구현했을때는 NextAuth를 제대로 이용하지 못해서

 

자체로그인을 따로 만들었고,

그걸 헤더부분에서 쓰려니까  리덕스를 사용해야 하는 상황이였다.

 

"use client";

import { useSelector } from "react-redux";
import LoginBtn from "./LoginBtn";
import SignupBtn from "./SignupBtn";
import LogoutBtn from "./LogoutBtn";

export default function HeaderLoginP() {
  const user2 = useSelector(state => state.loginState.user);
  const token = window.localStorage.getItem("accessToken");

  // console.log(user2?.email);
  return (
    <div>
      {user2 || token ? (
        <div className="navbtn">
          {/* <h2>{user2?.email}님</h2> */}
          <h2>안녕하세요</h2>
          <LogoutBtn className="navbtn2" />
        </div>
      ) : (
        <div className="navbtn">
          <LoginBtn className="navbtn2" />
          <SignupBtn className="navbtn2" />
        </div>
      )}
    </div>
  );
}

 

 

근데 NextAuth 이놈 진짜 최고다...

자체 로그인을 만들필요도 없는것은 물론이요..

useSession을 이용해서 로그인상태(로그인여부)를 파악할수도 있고,

헤더에서 바로 사용할수도 있다. 리덕스가 필요없는 훨씬 간단한 코드가 되었다!!!!!! 아주 최고야!!!!

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

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

  return (
    <div>
      <h2>
        {status === "loading" ? (
          <p>Loading</p>
        ) : status === "authenticated" ? (
          <p>{session?.user?.name}님</p>
        ) : (
          <p>로그인하세요</p>
        )}
      </h2>
    </div>
  );
}

 

"use client";

import HeaderP from "./lib/next-auth/HeaderP";
import { SessionProvider } from "next-auth/react";

export default function HeaderBtn() {
  return (
    <div>
      <SessionProvider>
        <HeaderP />
      </SessionProvider>
    </div>
  );
}

 

 

그래서 HeaderBtn을 그냥 layout에서 사용하면 리덕스필요없이 끝이다 !!!!! 

완전 장점 !!!!