[240619 TIL] Supabase 인증 with Tanstack Query

리액트에서 Context API를 사용하지 않고 Tanstack Query를 사용하여 Supabase의 인증 상태를 관리하고 확인하는 방법은 다음과 같습니다.

1. Tanstack Query 설정

import { QueryClient, QueryClientProvider, useQuery } from 'react-query';
import { supabase } from './supabaseClient';

const queryClient = new QueryClient();

function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <AuthChecker />
    </QueryClientProvider>
  );
}

2. 인증 상태 확인

const fetchSession = async () => {
  const { data: { session }, error } = await supabase.auth.getSession();
  if (error) throw new Error(error.message);
  return session;
};

const AuthChecker = () => {
  const { data: session, error, isLoading } = useQuery('authSession', fetchSession);

  if (isLoading) return <div>Loading...</div>;
  if (error) return <div>Error: {error.message}</div>;

  return (
    <div>
      {session ? 'Logged in' : 'Logged out'}
    </div>
  );
};

3. 인증 상태 변화 감지

import { useEffect } from 'react';
import { useQueryClient } from 'react-query';

const AuthListener = () => {
  const queryClient = useQueryClient();

  useEffect(() => {
    const { data: authListener } = supabase.auth.onAuthStateChange(() => {
      queryClient.invalidateQueries('authSession');
    });

    return () => {
      authListener.subscription.unsubscribe();
    };
  }, [queryClient]);

  return null;
};

const App = () => (
  <QueryClientProvider client={queryClient}>
    <AuthChecker />
    <AuthListener />
  </QueryClientProvider>
);

이 코드는 Tanstack Query를 사용하여 Supabase의 인증 상태를 관리하고, 인증 상태 변화 시 UI를 업데이트하는 방법을 보여줍니다.

예제추가

// 세션 변화에 따라 상세한 분기 처리 필요할 때
const { data } = supabase.auth.onAuthStateChange((event, session) => {
  console.log(event, session)

  if (event === 'INITIAL_SESSION') {
    // handle initial session
  } else if (event === 'SIGNED_IN') {
    // handle sign in event
  } else if (event === 'SIGNED_OUT') {
    // handle sign out event
  } else if (event === 'PASSWORD_RECOVERY') {
    // handle password recovery event
  } else if (event === 'TOKEN_REFRESHED') {
    // handle token refreshed event
  } else if (event === 'USER_UPDATED') {
    // handle user updated event
  }
})

// 단순히 로그인 여부에 따른 분기 처리가 필요할 때
const { data } = supabase.auth.onAuthStateChange((event, session) => {
  console.log(event, session)

  if (session) {
    // 로그인 상태로 변경
  } else {
    // 로그아웃 상태로 변경
  } 
})

// 리액트에서 많이 쓰는 패턴
// src/context/AuthProvider.jsx
import { useEffect } from "react";
import { useState } from "react";
import { createContext } from "react";
import { supabase } from "../supabase/supabaseClient";

export const AuthContext = createContext(null);

export default function AuthProvider({ children }) {
  const [isLogin, setIsLogin] = useState(false);

  useEffect(() => {
    const {
      data: { subscription },
    } = supabase.auth.onAuthStateChange((event, session) => {
      console.log(event, session);

      if (session) {
                setIsLogin(true);
      } else {
        setIsLogin(false);
      }
    });

    // 전역적으로 사용될 경우 구독해제가 필요한 코드는 아님.
    return () => subscription.unsubscribe();
  }, []);
  return (
    <AuthContext.Provider value={{ isLogin, setIsLogin }}>
      {children}
    </AuthContext.Provider>
  );
}