Supabase Backend as a Service · 课时

密码重置与魔法链接身份验证

为 Supabase 身份验证添加免密码魔法链接和安全的密码重置流程,其中包括重定向和令牌交换步骤。

第 4 / 4 课13 个步骤

密码重置与魔法链接身份验证 是 CoddyKit 上的免费 Supabase Backend as a Service 课时。 这是第 4 节课,共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 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.

免费开始

用 AI 导师学习 Supabase Backend as a Service — 免费

在浏览器中编写并运行真实代码,获得全天候 AI 导师的即时帮助,并在网页或应用中继续学习。

课程
11
课程
40

常见问题解答

「密码重置与魔法链接身份验证」课时是免费的吗?

是的 — 「密码重置与魔法链接身份验证」的完整文本可在网页上免费阅读。要进行交互式练习(内置代码编辑器和全天候 AI 导师)并解锁 Supabase Backend as a Service 课程的其余内容,请升级到 CoddyKit PRO。 Supabase Backend as a Service 课程共包含 4 节课。

「密码重置与魔法链接身份验证」这节课中我会学到什么?

为 Supabase 身份验证添加免密码魔法链接和安全的密码重置流程,其中包括重定向和令牌交换步骤。 你通过在浏览器中直接运行的动手代码来练习 Supabase Backend as a Service,全天候 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 反馈 — 无需本地设置。

此课程中的所有课时

  1. 使用电子邮件和密码注册用户
  2. 社交登录(OAuth 提供商)
  3. 管理用户会话与个人资料
  4. 密码重置与魔法链接身份验证
← 返回 Supabase Backend as a Service