[Vue3]Supabaseで簡単にMFAログインを実装する

TL;DR

実装したコード

<script setup lang="ts">
import { supabase } from '@/utils/supabase';

const targetEmail = 'ユーザーが入力した自分のメールアドレス';
const redirectURL = 'リンクをクリックするとリダイレクトされるページ';

const login = async () => {
  try {
    const { error } = await supabase.auth.signInWithOtp({
      email: targetEmail,
      options: {
        shouldCreateUser: false,
        emailRedirectTo: redirectURL,
      },
    });
    
    alert('入力したメールアドレスにログイン確認メールを送信しました.');
    router.push('/');
  } catch (error) {
    alert(error.message)
  }
};
</script>

Magic Linkの編集

Supabseメニューの「Authentications」

「Email Templates」-> Magic LinkでHTMLメールが修正できる。

終わりに

結局公式ドキュメントに書いてある通りではある。
しかし普通に調べているとすぐ見つからなかった。React向けのページは多いけれども...