[TIL] Day 74 Supabase Auth 로그인 처리 및 회원정보등록

2024.01.18 목

 

추가 로직 깔금하게 정리 후 기재

+설명

 

supabase.auth.onAuthStateChange

 

// AuthenticationLayer.tsx
'use client';

import { useEffect, useState } from 'react';
import { supabase } from '@/lib/supabase-config';
import { useRecoilState } from 'recoil';
import { userState } from '@/recoil/user';
import { usePathname } from 'next/navigation';
import { Props } from '@/types/childrenPropsType';
import { RegisterType } from '@/types/registerType';
import Logout from './Logout';
import Loading from './Loading';
import TempHome from './TempHome';

function AuthenticationLayer({ children }: Props) {
  const [isAuthInitialized, setIsAuthInitialized] = useState(false);
  const [user, setUser] = useRecoilState(userState);

  const pathname = usePathname(); // 로딩 중 화면 개선 하기 위해서 시도중

  useEffect(() => {
    supabase.auth.onAuthStateChange((event, session) => {
      if (session) {
        supabase
          .from('custom_users')
          .select()
          .eq('uid', session.user.id)
          .returns<RegisterType>()
          .single()
          .then((response) => {
            const profile = response.data; //custom_users
            setUser({ id: session.user.id, profile });
          });
      } else {
        setUser(null);
      }
      setIsAuthInitialized(true);
    });
    console.log('user', user);
  }, [isAuthInitialized, setUser]);

  return (
    <>
	  <div>{isAuthInitialized ? children : <Loading />}</div>
      {/* <div>{isAuthInitialized || pathname.toString() === '/' ? children : <Loading />}</div> */} // 로딩 중 화면 개선 하기 위해서 시도중
      {/* test */} // dev모드
      <div>로그인 여부 : {!!user?.id ? 'true' : 'false'}</div>
      <div>회원등록 여부 : {user?.profile?.information_agreement ? 'true' : 'false'}</div>
      <Logout />
      <TempHome />
    </>
  );
}

export default AuthenticationLayer;

 

 

// page.tsx = children
import Page from '@/components/layout/Page';
import React from 'react';
import StartOrRegister from '@/components/home/StartOrRegister';
import Image from 'next/image';
import login_main_img from '@assets/login/login_main_img.png';

export default function HomePage() {
  return (
    <Page noHeader>
      <div className="flex flex-col items-center justify-evenly h-screen">
        <header className="flex flex-col gap-[14px] items-center text-black">
          <h1 className="w-[140px] h-[32px] text-[28px] font-virgil font-[600] leading-normal">Crosswalk</h1>
          <h2 className="text-[18px] font-pretendard font-[400] leading-normal">인생의 소울메이트를 만나보세요!</h2>
        </header>

        <div className="relative w-full max-h-[20rem] h-[40vh]">
          <Image src={login_main_img} alt="tutorial_avatar1" fill className="object-cover" />
        </div>

        <div className="flex justify-center items-center w-[18.75rem] h-[3.125rem]">
          <StartOrRegister />
        </div>
      </div>
    </Page>
  );
}

 

 

// StartOrRegister.tsx
'use client';

import React from 'react';
import SocialLogin from './social_login/SocialLogin';
import { useRecoilState } from 'recoil';
import { Button } from '@nextui-org/react';
import Link from 'next/link';
import { userState } from '@/recoil/user';

function StartOrRegister() {
  const [user, setUser] = useRecoilState(userState);

  return user ? (
    user.profile?.information_agreement ? (
      <Button className="w-full h-full bg-customGreen rounded-3xl cursor-pointer">
        <Link href={'/main'} className="flex justify-center items-center w-full h-full">
          시작하기
        </Link>
      </Button>
    ) : (
      <Button className="w-full h-full bg-customYellow rounded-3xl cursor-pointer">
        <Link href={'/register'} className="flex justify-center items-center w-full h-full">
          등록하기
        </Link>
      </Button>
    )
  ) : (
    <SocialLogin />
  );
}

export default StartOrRegister;

 

 

// SocialLogin.tsx
import KakaoLoginBtn from './kakao/KakaoLoginBtn';
import GoogleLoginBtn from './google/GoogleLoginBtn';
import SpotifyLoginBtn from './spotify/SpotifyLoginBtn';
import StartIn3Seconds from './StartIn3Seconds';

function SocialLogin() {
  return (
    <div className="flex flex-col items-center gap-[0.7rem]">
      <StartIn3Seconds />
      <div className="flex justify-center gap-[20px]">
        <GoogleLoginBtn />
        <KakaoLoginBtn />
        <SpotifyLoginBtn />
      </div>
    </div>
  );
}

export default SocialLogin;