Supabaseのログアウト処理で、Remixのloaderを再読み込みする方法
RemixアプリにSupabase Authのログアウト処理を組み合わせる際の方法を紹介。ログアウト後はuseNavigate()でページ遷移し、「Sign out」ボタンをクリックするとログアウトと同時にリダイレクトされる。再読み込みや状態更新後のリダイレクトも実装可能。ログアウト時に取得した情報を破棄するために使われる。Loader処理を再実行したい時はuseRevalidatorを利用。 Reminx APIを使うことを推奨。
広告ここから
広告ここまで
目次
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>