การรีเซ็ตรหัสผ่านและการยืนยันตัวตนด้วยลิงก์มหัศจรรย์
เพิ่มลิงก์มหัศจรรย์ที่ไม่ต้องใช้รหัสผ่านและขั้นตอนการรีเซ็ตรหัสผ่านที่ปลอดภัยให้กับระบบยืนยันตัวตนของ Supabase รวมถึงขั้นตอนการเปลี่ยนเส้นทางและแลกเปลี่ยนโทเค็น
การรีเซ็ตรหัสผ่านและการยืนยันตัวตนด้วยลิงก์มหัศจรรย์ เป็นบทเรียน Supabase Backend as a Service ฟรีบน CoddyKit นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน 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.
เรียนรู้ Supabase Backend as a Service ด้วย AI tutor — ฟรี
เขียนและเรียกใช้โค้ดจริงในเบราว์เซอร์ของคุณ รับความช่วยเหลือทันทีจาก AI tutor 24/7 และเรียนรู้ต่อจากที่คุณหยุดบนเว็บหรือในแอป
- คอร์ส
- 11
- บทเรียน
- 40
คำถามที่พบบ่อย
บทเรียน “การรีเซ็ตรหัสผ่านและการยืนยันตัวตนด้วยลิงก์มหัศจรรย์” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “การรีเซ็ตรหัสผ่านและการยืนยันตัวตนด้วยลิงก์มหัศจรรย์” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Supabase Backend as a Service ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Supabase Backend as a Service มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “การรีเซ็ตรหัสผ่านและการยืนยันตัวตนด้วยลิงก์มหัศจรรย์”
เพิ่มลิงก์มหัศจรรย์ที่ไม่ต้องใช้รหัสผ่านและขั้นตอนการรีเซ็ตรหัสผ่านที่ปลอดภัยให้กับระบบยืนยันตัวตนของ Supabase รวมถึงขั้นตอนการเปลี่ยนเส้นทางและแลกเปลี่ยนโทเค็น คุณปฏิบัติ Supabase Backend as a Service ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Supabase Backend as a Service หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน Supabase Backend as a Service บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน
บทเรียน “การรีเซ็ตรหัสผ่านและการยืนยันตัวตนด้วยลิงก์มหัศจรรย์” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน Supabase Backend as a Service นี้ได้ไหม
ได้ บทเรียน Supabase Backend as a Service ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- การลงทะเบียนผู้ใช้ด้วยอีเมลและรหัสผ่าน
- การเข้าสู่ระบบผ่านโซเชียล (ผู้ให้บริการ OAuth)
- การจัดการเซสชันและโปรไฟล์ผู้ใช้
- การรีเซ็ตรหัสผ่านและการยืนยันตัวตนด้วยลิงก์มหัศจรรย์