Supabase Backend as a Service · レッスン

パスワードリセットとマジックリンク認証

Supabase Authにパスワード不要のマジックリンクと安全なパスワードリセットフローを追加し、リダイレクトとトークン交換の手順も扱います。

「パスワードリセットとマジックリンク認証」はCoddyKit上の無料Supabase Backend as a Serviceレッスンです。これはレッスン4/4です。下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。これはSupabase Backend as a Service学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Supabase Backend as a Serviceコースには全4レッスンが含まれています。

このレッスンの一部はまだ翻訳されておらず、英語で表示されています。

Beyond Passwords

Supabase supports passwordless sign-in via magic links and a built-in password reset flow. Both rely on emailing a secure link to the user.

How Magic Links Work

The user enters an email, Supabase emails a one-time link, and clicking it signs them in, no password needed.

Link contains a single-use token
Token is exchanged for a session

Sending a Magic Link

Call signInWithOtp with the email and a redirect URL.

const { error } = await supabase.auth.signInWithOtp({
  email: 'user@example.com',
  options: { emailRedirectTo: 'https://app.example.com/welcome' }
});

Configuring Redirect URLs

In the dashboard under Authentication > URL Configuration, allow-list your redirect URLs. Links to non-listed URLs are rejected for security.

Completing the Sign-In

When the user returns, Supabase detects the token in the URL and establishes the session automatically with detectSessionInUrl enabled.

const { data } = await supabase.auth.getSession();
console.log(data.session ? 'Signed in' : 'No session');

Starting a Password Reset

Trigger a reset email with resetPasswordForEmail. The link sends the user to a page where they set a new password.

await supabase.auth.resetPasswordForEmail(
  'user@example.com',
  { redirectTo: 'https://app.example.com/update-password' }
);

Setting the New Password

On the redirect page, the user is in a temporary recovery session. Update the password with updateUser.

const { error } = await supabase.auth.updateUser({
  password: 'a-strong-new-password'
});

Validating Password Strength

Enforce a minimum standard before submitting to reduce weak credentials.

function strong(pw) {
  return pw.length >= 8 && /[0-9]/.test(pw) && /[A-Za-z]/.test(pw);
}
console.log(strong('abc12345'));

Token Expiry

Magic links and reset tokens are short-lived and single use. Expired links must trigger a fresh request, so always handle the expiry error gracefully.

Customizing Email Templates

Under Authentication > Email Templates you can brand the magic link and recovery emails so they match your product.

Putting It Together

Magic links remove password friction, and the reset flow gives users a safe recovery path. Both depend on allow-listed redirects and short-lived tokens.

Quick Check

Test your understanding of magic links and resets.

Recap

You added magic link sign-in with signInWithOtp, built a password reset flow with resetPasswordForEmail and updateUser, and learned why allow-listed redirects and short-lived tokens keep it secure.

よくある質問

「パスワードリセットとマジックリンク認証」レッスンは無料ですか？

はい。「パスワードリセットとマジックリンク認証」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Supabase Backend as a Serviceコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Supabase Backend as a Serviceコースには全4レッスンが含まれています。

「パスワードリセットとマジックリンク認証」で何を学びますか？

Supabase Authにパスワード不要のマジックリンクと安全なパスワードリセットフローを追加し、リダイレクトとトークン交換の手順も扱います。ブラウザで直接実行するハンズオンコードでSupabase Backend as a Serviceを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

Supabase Backend as a Serviceを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのSupabase Backend as a Serviceは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。これはレッスン4/4です。

「パスワードリセットとマジックリンク認証」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このSupabase Backend as a Serviceレッスンでコードを書いて実行できますか？

はい。すべてのSupabase Backend as a Serviceレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

← Supabase Backend as a Serviceに戻る