Supabaseのログアウト処理で、Remixのloaderを再読み込みする方法

Remixで作成したアプリケーションにSupabase Authを組み合わせる際の、ログアウト処理を実装する方法を簡単にまとめました。

ログアウト後のページ遷移はuseNavigate()で行う

ログアウトボタンをクリックした際に、ログインページへリダイレクトさせる実装を行う場合、次のようなリダイレクト処理をクライアント側で実施します。window.location.replaceを使う直球実装も理論上可能ですが、Remixを使っている場合はRemixのAPIを使う方がよいでしょう。

  const navigate = useNavigate()
  const data = useLoaderData<typeof rootLoader>()
  const { user } = data || {}
  return (
    <button
      onClick={async (e) => {
        e.preventDefault()
        const { error } = await supabaseClient.auth.signOut()
        if (error) {
          window.alert(error.message)
        } else {
          navigate('/signin')
        }
      }}
    >
      Sign out
    </button>

loader処理を再実行したい場合は、useRevalidatorも利用する

もしログイン状況に依存した処理がloader内で実行されている場合は、useRevalidatorを利用した再読み込み処理も実装しましょう。Remixの状態更新後にリダイレクトすることで、ログアウト前に取得した情報を破棄することができる様子です。

  const navigate = useNavigate()
  const revalidator = useRevalidator();
  const data = useLoaderData<typeof rootLoader>()
  const { user } = data || {}
  return (
    <button
      onClick={async (e) => {
        e.preventDefault()
        const { error } = await supabaseClient.auth.signOut()
        if (error) {
          window.alert(error.message)
        } else {
          revalidator.revalidate();
          navigate('/signin')
        }
      }}
    >
      Sign out
    </button>

参考ドキュメントなど

• https://remix.run/docs/en/main/hooks/use-revalidator
• https://stackoverflow.com/questions/73048879/how-do-i-reload-my-page-in-remix-run-on-a-button-click-in-an-error-boundary-comp