[나만무] Next Auth, google social login 구현

[나만무] Next Auth, google social login 구현

 

기존 구현했던 react-google-login 라이브러리 이용한 google login은 캐시를 지워줘야 됐다.

됐다 안됐다..하는 기능은 사실상 안되는 기능이다! 

npm i uninstall react-google-login

 

그래서 여러 자료를 찾던 중 NextAuth가 있길래 바로 이용.

 

참고 자료 

https://www.youtube.com/watch?v=6lCXM11Tgyg

https://dantechblog.gatsbyjs.io/posts/next-auth/

Home | Dan DevLog

---

pages/api/auth/[...nextauth].ts

import NextAuth from "next-auth";
import GoogleProvider from "next-auth/providers/google";

// Initialize NextAuth

export default NextAuth({
    providers: [
        GoogleProvider({
            clientId: process.env.GOOGLE_CLIENT_ID ?? "",
            clientSecret: process.env.GOOGLE_CLIENT_SECRET ?? "",
        })
    ]
})

 

pages/_app.tsx

import { RecoilRoot } from "recoil";
import "../styles/globals.css";
import { ThemeProvider } from "next-themes";
import { AppProps } from "next/app";
import {SessionProvider} from 'next-auth/react';

function MyApp({ Component, pageProps }: AppProps) {
  return (
		...
        <SessionProvider session={pageProps.session}>
          <Component {...pageProps} />
        </SessionProvider>
		...
  );
}

export default MyApp;

 

pages.index.tsx

import React, { useEffect, useState } from "react";
import { useRouter } from "next/router";
import axios from "axios";
import { signIn, useSession, signOut } from "next-auth/react";
import NavBar from "@/features/Dashboard/components/NavBar";
import { Wrapper } from "@/styles/wrapper";
import SignupButton from "@/features/User/SignupButton";
import LoginBtn from "@/features/User/LoginBtn";
import GoogleLogoutBtn from "@/features/User/GoogleLogoutBtn";
import GoogleLoginBtn from "@/features/User/GoogleLoginBtn";

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

  const [token, setToken] = useState<string | null>(null);

  useEffect(() => {
    const storedToken = localStorage.getItem("token");
    setToken(storedToken);
  }, []);

  useEffect(() => {
    if (status === "authenticated" && sessionData?.user) {
      saveUserData(sessionData.user);
    }
  }, [status, sessionData]);

  const saveUserData = async (userData: any) => {
    try {
      const response = await axios.post("http://localhost:8800/api/login", {
        email: userData.email,
        givenName: userData.name,
        imageUrl: userData.image,
      });
		...
    } catch (error) {
      console.error("사용자 정보 저장 중 오류가 발생했습니다.", error);
    }
  };

  return (
        ...
            {(!sessionData?.user && !token) ? (
                 <SignupButton />
              ): null}
              {(!sessionData?.user && !token) ? (
                <LoginBtn />
              ): null}
              {sessionData?.user ? (
                <GoogleLogoutBtn />
              ) : (
                <GoogleLoginBtn />
              )}
		...
      </Wrapper>
    </div>
  )
}

 

/features/User/GoogleLogoutBtn

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

const GoogleLoginBtn = () => {

  const handleSignIn = (e: any) => {
    e.preventDefault();
    signIn("google");
  };
  
  return (
    <button
      type="button"
      className="font-bold py-2 rounded mr-4 border-black border w-full"
      onClick={handleSignIn}
    >
      구글 로그인
    </button>
  );
};

export default GoogleLoginBtn;

 

/features/User/GoogleLogoutBtn

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

const GoogleLogoutBtn = () => {
  const handleLogout = async (e : any) => {
    e.preventDefault();
    await signOut({ callbackUrl: "/" });
    localStorage.removeItem("token");
  };

  return (
    <button
      type="button"
      className="font-bold py-2 px-4 rounded mr-4 border-black border w-full"
      onClick={handleLogout}
    >
      구글 로그아웃
    </button>
  );
};

export default GoogleLogoutBtn;

 

UserModal.tsx

        {typeof window !== "undefined" && sessionData?.user && token ? (
              <GoogleLogoutBtn />
            ) : token ? (
                < LogoutBtn />
            ):null}

구글 로그인 했을 경우, 구글 로그아웃 버튼만!

일반 로그인 했을 경우, 일반 로그아웃 버튼만 보이도록 로직을 짰다.

---

---

대한 컴포넌트화 하는데 집중했다.

cf. Back코드는 변경 사항 없다!

 

유저 모달창 기능이 나오면 로그인, 회원가입 input 역시 컴포넌트화 해야한다.

또한, 일반 로그인과 구글 소셜 로그인 기능 두가지를 모두 가져갈 경우 userType도 나눠야 할 것 같다.

이 이야기는 추후 회의 때 더 이야기를 나눠봐야 할듯하다.