google sign in(22.09.14)

// _document.js(nextjs)
<script src="https://accounts.google.com/gsi/client" async defer />

// login.js
useEffect(() => {
    if (typeof window !== "undefined") {
      // id, render config 설정
      const IdConfiguration = {
        client_id: process.env.NEXT_PUBLIC_GOOGLE_CLIENT_ID,
        callback: "your handler",
      };
      const GsiButtonConfiguration = {
        type: "icon",
        shape: "circle",
      };
      // 실행
      google.accounts.id.initialize(IdConfiguration);
      // 버튼이 2개 필요해서 렌더 2번
      google.accounts.id.renderButton(
        document.getElementById("your component Id"),
        GsiButtonConfiguration
      );
      google.accounts.id.renderButton(
        document.getElementById("your component Id"),
        GsiButtonConfiguration
      );
      google.accounts.id.prompt();
    }
  }, []);

// Logout
function googleLogout() {
	google.accounts.id.disableAutoSelect();
}
// return 값으로 credential이 온다. 그걸 jwt로 디버깅해보면 google 회원 정보가 담겨있음. 그럼 그걸 가공해서 백엔드 처리하면 될 듯.

error

http://localhost, http://localhost:${portNumber} 이걸 google console에서 승인된 자바스크립트 원본에 등록 안해주면 에러가 난다.