[TIL] Day 73 Supabase Authentication 소셜로그인 구현

2024.01.17 수

 

자세한 방법 작성

로직과 더불어 결정 과정 서술

spotufy 이메일 인증 절차 생략 방법

 

Google  v

Kakao  v

Spotify v

 

Naver  x

Apple  x

Azure (Microsoft)  x

 

 

// 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;

 

// StartIn3Seconds.tsx
import React from 'react';
import Image from 'next/image';
import rocket from '@assets/login/rocket.png';

function StartIn3Seconds() {
  return (
    <div className="flex items-center gap-[4px]">
      <div className="w-[40px] h-[1px] bg-gray-E6" />
      <div className="flex justify-center items-center gap-[4px] w-[120px]">
        <div className="text-center font-pretendard text-[13px] font-[500] leading-[24px] tracking-[-0.4px] capitalize">
          3초만에 시작하기
        </div>
        <div className="relative w-[20px] h-[20px]">
          <Image src={rocket} alt="rocket" fill />
        </div>
      </div>
      <div className="w-[40px] h-[1px] bg-gray-E6" />
    </div>
  );
}

export default StartIn3Seconds;

 

// GoogleLoginBtn.tsx
import React from 'react';
import { googleLogin } from '@/auth/google';
import google from '@assets/login/google.png';
import Image from 'next/image';

function GoogleLoginBtn() {
  return (
    <>
      <button className="relative w-[52px] h-[52px] rounded-full bg-[#FF1400]" type="button" onClick={googleLogin}>
        <Image src={google} alt="google" fill />
      </button>
    </>
  );
}

export default GoogleLoginBtn;

 

// google.ts
import { supabase } from '@/lib/supabase-config';

/**구글 로그인 */
export const googleLogin = async () => {
  const { data, error } = await supabase.auth.signInWithOAuth({
    provider: 'google',
    options: {
      queryParams: {
        access_type: 'offline',
        prompt: 'consent'
      }
    }
  });
  console.log(data);
  if (error) console.error('login error : ', error);
};

// KakaoLoginBtn.tsx
import React from 'react';
import { kakaoLogin } from '@/auth/kakao';
import kakao from '@assets/login/kakao.png';
import Image from 'next/image';

function KakaoLoginBtn() {
  return (
    <>
      <button className="relative w-[52px] h-[52px] rounded-full bg-[#FEE500]" type="button" onClick={kakaoLogin}>
        <Image src={kakao} alt="kakao" fill />
      </button>
    </>
  );
}

export default KakaoLoginBtn;

 

// kakao.ts
import { supabase } from '@/lib/supabase-config';

/**카카오 로그인 */
export async function kakaoLogin() {
  const { data, error } = await supabase.auth.signInWithOAuth({
    provider: 'kakao'
  });
  console.log(data);
  if (error) console.error('login error : ', error);
}

 

// SpotifyLoginBtn.tsx
import React from 'react';
import { spotifyLogin } from '@/auth/spotify';
import spotify from '@assets/login/spotify.png';
import Image from 'next/image';

function SpotifyLoginBtn() {
  return (
    <button className="relative w-[52px] h-[52px] rounded-full bg-white" type="button" onClick={spotifyLogin}>
      <Image src={spotify} alt="spotify" fill />
    </button>
  );
}

export default SpotifyLoginBtn;

 

// spotify.ts
import { supabase } from '@/lib/supabase-config';

/**스포티파이 로그인 */
export async function spotifyLogin() {
  const { data, error } = await supabase.auth.signInWithOAuth({
    provider: 'spotify'
  });
  console.log(data);
  if (error) console.error('login error : ', error);
}

 

// auth.ts
import { supabase } from '@/lib/supabase-config';

/**유저 정보 확인 */
export const getUser = async () => {
  const {
    data: { user }
  } = await supabase.auth.getUser();
  console.log('여기는 getuser', !!user);
  return user;
};

/**로그아웃 */
export async function logout() {
  const { error } = await supabase.auth.signOut();
  alert('로그아웃 되었습니다');
  if (error) console.error('logout error : ', error);
}