[Supabase] 소셜 로그인 구현

 

---

진행 요약

- 리액트 tsx 환경에서 작업하였습니다.

   // Login.tsx
   ...
   <SocialLabel>간편한 소셜 로그인</SocialLabel>
          <SocialContainer>
            <OAuthLogin provider="google" />
            <OAuthLogin provider="kakao" />
            <OAuthLogin provider="github" />
          </SocialContainer>

- 반복되는 코드이기에 컴포넌트를 분리해서 사용했습니다.

 

export const sosialUserAtom = atom<string | null>(null);

type Provider = 'google' | 'kakao' | 'github';

interface OAuthLoginProps {
  provider: Provider;
}

const OAuthLogin = ({ provider }: OAuthLoginProps) => {
  const handleLogin = async () => {
    try {
      await supabase.auth.signInWithOAuth({
        provider: provider
      });

      localStorage.setItem('social', provider);
    } catch (error) {
      console.log(error);
    }
  };

-  atom 전역 상태 관리 라이브러리를 사용해준 이유는 localStorage에 어떤 소셜 로그인이 들어갔는지 알기 위해서 입니다.

- 비동기 작업이기에 async/await 구문을 사용했습니다.

- Atom은 recoil이라고도 불리며 어려운 상태 관리를 보다 쉽게 관리해줄 수 있습니다.

 

// TopBar.tsx

 // 소셜로그인
  const socialLogin = async () => {
    const user = await supabase.auth.getUser();

    // 저장된 정보에 따른 소셜로그인 데이터 가져오기
    // social === "google" | "github" | "kakao"
    const socialData = user.data.user?.identities?.filter((v) => v.provider === social);

    if (socialData !== undefined && socialData[0].identity_data && user.data.user) {
      const data = socialData[0].identity_data;

      const myUser: User = {
        email: data.email,
        id: user.data.user.id,
        nickname: data.user_name,
        profileImg: data.avatar_url
      };
      setUserData(myUser as User);
    }
  };

-  supabase 유저 정보 가져오는 함수를 발동시키고 받아온 값을

user에 저장합니다.

- 그 객체 중에서 provider가 로컬 스토리지에 저장된 소셜 값과 같을 시 

그 배열 데이터만 가져와서 필요한 값을 변수에 저장하고 랜더링 시켜줍니다.

 

...
{/* 로그인 후 */}
            {userData ? (
              <>
                <p>Hello, {userData.nickname}</p>
                <S.ProfileImg src={userData.profileImg || baseImage}></S.ProfileImg>
                <Link to={'/password_change'}>PW변경</Link>
                <S.TopBarLogButton onClick={signOutHandler}>로그아웃</S.TopBarLogButton>
                <br />
              </>
            ) :

 

 

---

결과 화면