Supabase Magic Link Login
Clean, minimal magic link authentication email for Supabase-powered SaaS apps.
Preview
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html dir="ltr" lang="en"><head><link rel="preload" as="image" href="/static/company-logo.png"/><link rel="preload" as="image" href="https://placehold.in/32x32@2x.png/3B82F6"/><meta content="text/html; charset=UTF-8" http-equiv="Content-Type"/><meta name="x-apple-disable-message-reformatting"/><style></style><style>
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 400;
mso-font-alt: 'Arial';
src: url(https://fonts.gstatic.com/s/inter/v13/UcCO3FwrK3iLTeHuS_fvQtMwCp50KnMw2boKoduKmMEVuLyfAZ9hiJ-Ek-_EeA.woff2) format('woff2');
}
* {
font-family: 'Inter', Arial;
}
</style><style>
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 600;
mso-font-alt: 'Arial';
src: url(https://fonts.gstatic.com/s/inter/v13/UcCO3FwrK3iLTeHuS_fvQtMwCp50KnMw2boKoduKmMEVuI6fAZ9hiJ-Ek-_EeA.woff2) format('woff2');
}
* {
font-family: 'Inter', Arial;
}
</style></head><body style="background-color:rgb(248,250,252);margin:0"><!--$--><!--html--><div style="display:none;overflow:hidden;line-height:1px;opacity:0;max-height:0;max-width:0" data-skip-in-text="true">Your sign-in link for AppName — valid for 60 minutes<div> </div></div><!--head--><!--body--><table border="0" width="100%" cellPadding="0" cellSpacing="0" role="presentation" align="center"><tbody><tr><td style="background-color:rgb(248,250,252);margin:0rem;padding:0rem;font-family:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji""><table align="center" width="100%" border="0" cellPadding="0" cellSpacing="0" role="presentation" style="background-color:rgb(248,250,252);padding-bottom:2.5rem;padding-top:2.5rem;padding-right:1rem;padding-left:1rem"><tbody><tr><td><table align="center" width="100%" border="0" cellPadding="0" cellSpacing="0" role="presentation" style="max-width:36rem;width:100%;margin-right:auto;margin-left:auto"><tbody><tr style="width:100%"><td><table align="center" width="100%" border="0" cellPadding="0" cellSpacing="0" role="presentation" style="background-color:rgb(255,255,255);border-top-left-radius:1rem;border-top-right-radius:1rem;border-style:solid;border-width:1px;border-bottom-style:solid;border-bottom-width:0px;border-color:rgb(226,232,240);padding-right:2.5rem;padding-left:2.5rem;padding-top:2.5rem;padding-bottom:1.5rem"><tbody><tr><td><table align="center" width="100%" border="0" cellPadding="0" cellSpacing="0" role="presentation"><tbody style="width:100%"><tr style="width:100%"><td data-id="__react-email-column" style="text-align:left"><img alt="AppName logo" height="32" src="/static/company-logo.png" style="display:block;outline:none;border:none;text-decoration:none" width="120"/></td><td data-id="__react-email-column" style="text-align:right"><p style="font-size:0.75rem;line-height:1;color:rgb(144,161,185);margin:0rem;margin-top:0rem;margin-bottom:0rem;margin-left:0rem;margin-right:0rem">Transactional Email</p></td></tr></tbody></table></td></tr></tbody></table><table align="center" width="100%" border="0" cellPadding="0" cellSpacing="0" role="presentation" style="background-color:#3B82F6;height:3px;width:100%"><tbody><tr><td></td></tr></tbody></table><table align="center" width="100%" border="0" cellPadding="0" cellSpacing="0" role="presentation" style="background-color:rgb(255,255,255);border-style:solid;border-width:1px;border-top-style:solid;border-top-width:0px;border-bottom-style:solid;border-bottom-width:0px;border-color:rgb(226,232,240);padding-right:2.5rem;padding-left:2.5rem;padding-top:2.5rem;padding-bottom:2rem"><tbody><tr><td><table align="center" width="100%" border="0" cellPadding="0" cellSpacing="0" role="presentation"><tbody style="width:100%"><tr style="width:100%"><td data-id="__react-email-column" style="text-align:center;padding-bottom:1.5rem"><div style="display:inline-block;background-color:#EFF6FF;border-radius:50%;width:64px;height:64px;line-height:64px;text-align:center;margin:0 auto"><img alt="" height="32" src="https://placehold.in/32x32@2x.png/3B82F6" style="display:block;outline:none;border:none;text-decoration:none;margin:16px auto" width="32"/></div></td></tr></tbody></table><table align="center" width="100%" border="0" cellPadding="0" cellSpacing="0" role="presentation"><tbody style="width:100%"><tr style="width:100%"><td data-id="__react-email-column"><h1 style="color:rgb(15,23,43);font-size:1.5rem;line-height:1.25;font-weight:600;text-align:center;margin:0rem;margin-bottom:0.75rem;font-family:Inter, Arial, sans-serif">Sign in to AppName</h1><p style="font-size:1rem;line-height:1.625;color:rgb(98,116,142);text-align:center;margin:0rem;margin-bottom:2rem;font-family:Inter, Arial, sans-serif;margin-top:0rem;margin-left:0rem;margin-right:0rem">Here is your sign-in link — no password needed.<br/>Click the button below to access your account.</p></td></tr></tbody></table><table align="center" width="100%" border="0" cellPadding="0" cellSpacing="0" role="presentation"><tbody style="width:100%"><tr style="width:100%"><td data-id="__react-email-column" style="text-align:center"><a href="https://app.appname.io/auth/confirm?token=placeholder-token-value" style="line-height:1.5;text-decoration:none;display:inline-block;max-width:100%;mso-padding-alt:0px;background-color:#3B82F6;color:#ffffff;font-size:16px;font-weight:600;border-radius:12px;padding-right:40px;padding-left:40px;padding-bottom:14px;padding-top:14px;text-align:center;text-decoration-line:none;font-family:Inter, Arial, sans-serif;padding:14px 40px" target="_blank"><span><!--[if mso]><i style="mso-font-width:500%;mso-text-raise:21" hidden>    </i><![endif]--></span><span style="max-width:100%;display:inline-block;line-height:120%;mso-padding-alt:0px;mso-text-raise:10.5px">Sign In to Your Account</span><span><!--[if mso]><i style="mso-font-width:500%" hidden>    ​</i><![endif]--></span></a></td></tr></tbody></table><table align="center" width="100%" border="0" cellPadding="0" cellSpacing="0" role="presentation"><tbody style="width:100%"><tr style="width:100%"><td data-id="__react-email-column" style="text-align:center;padding-top:1.25rem"><p style="font-size:0.75rem;line-height:1.625;color:rgb(144,161,185);margin:0rem;font-family:Inter, Arial, sans-serif;margin-top:0rem;margin-bottom:0rem;margin-left:0rem;margin-right:0rem">Button not working? Copy and paste this link into your browser:</p><a href="https://app.appname.io/auth/confirm?token=placeholder-token-value" style="color:#3B82F6;text-decoration-line:none;font-size:12px;line-height:1.3333333333333333;word-break:break-all;font-family:Inter, Arial, sans-serif" target="_blank">https://app.appname.io/auth/confirm?token=placeholder-token-value</a></td></tr></tbody></table><hr style="width:100%;border:none;border-top:1px solid #eaeaea;border-color:#F1F5F9;margin-bottom:2rem;margin-top:2rem;margin:32px 0"/><table align="center" width="100%" border="0" cellPadding="0" cellSpacing="0" role="presentation"><tbody style="width:100%"><tr style="width:100%"><td data-id="__react-email-column"><table align="center" width="100%" border="0" cellPadding="0" cellSpacing="0" role="presentation" style="background-color:#FFFBEB;border-radius:12px;padding-right:1.5rem;padding-left:1.5rem;padding-bottom:1.25rem;padding-top:1.25rem;padding:20px 24px"><tbody><tr><td><h2 style="color:#B45309;font-size:13px;line-height:1.4285714285714286;font-weight:600;margin:0 0 8px 0;margin-bottom:0.5rem;font-family:Inter, Arial, sans-serif">Security Notice</h2><p style="font-size:13px;line-height:1.6;color:#92400E;margin:0;font-family:Inter, Arial, sans-serif;margin-top:0;margin-bottom:0;margin-left:0;margin-right:0">This link expires in<!-- --> <strong style="font-weight:600">60 minutes</strong> and can only be used once. For your security, do not share this link with anyone. AppName staff will never ask you for this link.</p></td></tr></tbody></table></td></tr></tbody></table></td></tr></tbody></table><table align="center" width="100%" border="0" cellPadding="0" cellSpacing="0" role="presentation" style="background-color:#F8FAFC;border-bottom-right-radius:1rem;border-bottom-left-radius:1rem;border-style:solid;border-width:1px;border-top-style:solid;border-top-width:0px;border-color:rgb(226,232,240);padding-right:2.5rem;padding-left:2.5rem;padding-bottom:2rem;padding-top:2rem"><tbody><tr><td><table align="center" width="100%" border="0" cellPadding="0" cellSpacing="0" role="presentation"><tbody style="width:100%"><tr style="width:100%"><td data-id="__react-email-column" style="text-align:center"><p style="font-size:13px;line-height:1.6;color:#6B7280;margin:0 0 24px 0;margin-bottom:1.5rem;font-family:Inter, Arial, sans-serif;text-align:center;margin-top:0;margin-right:0;margin-left:0">If you did not request this sign-in link, you can safely ignore this email. Your account will remain secure and no action is required.</p></td></tr></tbody></table><hr style="width:100%;border:none;border-top:1px solid #eaeaea;border-color:#E2E8F0;margin-bottom:1.5rem;margin:0 0 24px 0"/><table align="center" width="100%" border="0" cellPadding="0" cellSpacing="0" role="presentation"><tbody style="width:100%"><tr style="width:100%"><td data-id="__react-email-column" style="text-align:center"><img alt="AppName" height="22" src="/static/company-logo.png" style="display:block;outline:none;border:none;text-decoration:none;margin-right:auto;margin-left:auto;margin-bottom:0.75rem;margin:0 auto 12px auto" width="80"/><p style="font-size:12px;line-height:1.625;color:#9CA3AF;margin:0 0 4px 0;margin-bottom:0.25rem;font-family:Inter, Arial, sans-serif;text-align:center;margin-top:0;margin-right:0;margin-left:0">AppName Inc. — 340 Pine Street, Suite 800, San Francisco, CA 94104</p><p style="font-size:12px;line-height:1.625;color:#9CA3AF;margin:0;font-family:Inter, Arial, sans-serif;text-align:center;margin-top:0;margin-bottom:0;margin-left:0;margin-right:0">This is a transactional email related to your account security.<!-- --> <a href="https://app.appname.io/settings/notifications" style="color:#9CA3AF;text-decoration-line:underline;text-decoration:underline" target="_blank">Manage preferences</a> <!-- -->|<!-- --> <a href="https://app.appname.io/privacy" style="color:#9CA3AF;text-decoration-line:underline;text-decoration:underline" target="_blank">Privacy Policy</a></p><p style="font-size:11px;line-height:1.3333333333333333;color:#CBD5E1;margin:12px 0 0 0;margin-top:0.75rem;font-family:Inter, Arial, sans-serif;text-align:center;margin-right:0;margin-bottom:0;margin-left:0">Copyright 2026 AppName Inc. All rights reserved.</p></td></tr></tbody></table></td></tr></tbody></table></td></tr></tbody></table></td></tr></tbody></table></td></tr></tbody></table><!--/$--></body></html>