Magic Links — Passwordless Auth for SaaS · Supabase

Passwords kill conversion. Every password field is friction. Reset flows, browser popups asking to save passwords, "I forgot my password at 2am" support tickets—they all cost you users. Velocity X dashboards ship magic links by default: users paste their email, check their inbox, click a link, and they're in. No password field. No reset flow. One click. It's fast, it's secure (one-time codes), and it turns password-anxiety into a frictionless onboarding moment. Supabase Auth handles the hard bits: generating time-limited codes, sending emails via Resend, and auto-signing users in when they click. The tradeoff is real—email delivery can fail, links can be misclicked, and some power users want a password—but the conversion lift justifies it. Here's the full pattern: magic link flow, Supabase Auth setup, Resend email template branding, link expiry tuning, fallback password gates for power users, and the 6 gotchas that bite production teams.

Why Passwords Are a Conversion Tax, Not a Feature

The average person has 100+ passwords. They forget them constantly. Password managers help, but they're not universal. A user lands on your SaaS signup form, sees a password field, and either (a) invents a weak password they'll forget, (b) uses the same password they use everywhere (security nightmare), or (c) bounces to a competitor with SSO. That's the tax. Magic links flip the equation: the thing users already trust (their email inbox) becomes the key. No password to invent, no manager to configure, no "I forgot" email—just click the link in your inbox. Conversion rates on magic-link flows are 20–30% higher than password flows, because the friction is lower. And from a support angle, you eliminate 40% of password-reset tickets. For Aidxn B2B clients, passwordless is the default, and password login is the fallback for admins who insist on it.

The Magic Link Flow: What Users See

Here's the UX: user lands on login, types their email, clicks "Send me a link." Your app sends an email with a one-time link (valid for 24 hours). User opens email, clicks link, and Supabase automatically signs them in—no password prompt. If the email bounces or gets marked spam, they can click "resend link" and try again. For a power user who wants a password, there's an "also set a password" option in account settings.

Magic Link Email Template

The email matters. A generic "Click here to sign in" gets marked as phishing spam 40% of the time. You need branding, clear CTA, link text preview, and a fallback code they can copy-paste if the link breaks. Resend (our email partner) makes this easy with React email templates.

// src/emails/MagicLinkEmail.jsx
import { Html, Body, Container, Text, Link, Button } from '@react-email/components';

export function MagicLinkEmail({ email, magicLink, code }) {
  return (
    <Html>
      <Body style={{ fontFamily: 'Inter, sans-serif', backgroundColor: '#fafafa' }}>
        <Container style={{ maxWidth: '600px', margin: '40px auto', padding: '20px' }}>
          {/* Header with logo */}
          <div style={{ textAlign: 'center', marginBottom: '32px' }}>
            <img src="https://aidxn.com/logo.svg" alt="Aidxn" style={{ height: '32px' }} />
          </div>

          {/* Main message */}
          <Text style={{ fontSize: '18px', fontWeight: 'bold', marginBottom: '8px' }}>
            Your magic link is ready
          </Text>
          <Text style={{ color: '#666', fontSize: '14px', marginBottom: '24px' }}>
            Click below to sign in to your dashboard. This link expires in 24 hours.
          </Text>

          {/* CTA Button */}
          <Button
            href={magicLink}
            style={{
              backgroundColor: '#7c3aed',
              color: 'white',
              padding: '12px 24px',
              borderRadius: '6px',
              textDecoration: 'none',
              fontWeight: 'bold',
              display: 'inline-block',
              margin: '24px 0',
            }}
          >
            Sign in to dashboard
          </Button>

          {/* Fallback code for people who can't click links */}
          <Text style={{ color: '#999', fontSize: '12px', marginTop: '24px', marginBottom: '8px' }}>
            Or copy this code to sign in manually:
          </Text>
          <pre style={{
            backgroundColor: '#f3f4f6',
            padding: '12px',
            borderRadius: '4px',
            fontFamily: 'monospace',
            fontSize: '14px',
            userSelect: 'all',
          }}>
            {code}



          {/* Footer */}
          
            Questions? Reply to this email or contact support@aidxn.com
          
        
      
    
  );
}

Supabase Auth Magic Links: Setup in 5 Minutes

Supabase Auth handles magic link generation, verification, and session management. You just need to wire up the email sender (Resend) and create a login flow.

1. Enable Magic Links in Supabase

Go to your Supabase dashboard → Authentication → Providers. Magic links are enabled by default, but you can tune link expiry (default 24 hours, configurable down to 15 minutes for extra security).

2. Configure Resend as Your Email Sender

// .env
SUPABASE_URL=https://your-project.supabase.co
SUPABASE_ANON_KEY=your-anon-key
RESEND_API_KEY=your-resend-key

// src/lib/email.ts
import { Resend } from 'resend';

export const resend = new Resend(process.env.RESEND_API_KEY);

In Supabase dashboard, go to Authentication → Email Templates. Select the "Confirm signup" template and edit it to include your Resend email ID. Or better: use Supabase's native Resend integration (Pro plan feature) which automatically wires them together.

3. Magic Link Signup and Login Flow

// src/components/MagicLinkForm.tsx
import { useState } from 'react';
import { supabase } from '@/lib/supabase';

export function MagicLinkForm() {
  const [email, setEmail] = useState('');
  const [loading, setLoading] = useState(false);
  const [message, setMessage] = useState('');
  const [error, setError] = useState('');

  const handleMagicLink = async (e: React.FormEvent) => {
    e.preventDefault();
    setLoading(true);
    setError('');
    setMessage('');

    const { error: err } = await supabase.auth.signInWithOtp({
      email,
      options: {
        emailRedirectTo: `${window.location.origin}/auth/callback`,
      },
    });

    if (err) {
      setError(err.message);
    } else {
      setMessage(`Check your email at ${email}. Link expires in 24 hours.`);
      setEmail('');
    }

    setLoading(false);
  };

  return (
    <form onSubmit={handleMagicLink} className="space-y-4">
      {message && (
        <div className="p-4 bg-green-50 border border-green-200 rounded text-green-700">
          {message}
        </div>
      )}

      {error && (
        <div className="p-4 bg-red-50 border border-red-200 rounded text-red-700">
          {error}
        </div>
      )}

      <input
        type="email"
        placeholder="you@company.com"
        value={email}
        onChange={(e) => setEmail(e.target.value)}
        required
        className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500"
      />

      <button
        type="submit"
        disabled={loading}
        className="w-full bg-purple-600 text-white py-2 rounded-lg font-semibold hover:bg-purple-700 disabled:opacity-50"
      >
        {loading ? 'Sending link...' : 'Send me a link'}
      </button>
    </form>
  );
}

4. Auth Callback Handler

When users click the email link, Supabase redirects them to your callback route with a session token. Validate it and redirect to the dashboard.

// src/pages/auth/callback.astro
---
const { code, type } = Astro.url.searchParams;

// Exchange the code for a session
const { data, error } = await supabase.auth.exchangeCodeForSession(code);

if (error) {
  return Astro.redirect('/login?error=invalid-link');
}

// User is now authenticated. Redirect to dashboard.
return Astro.redirect('/dashboard');
---

Link Expiry: Balancing Security and UX

Magic links have a window of vulnerability: if an attacker intercepts the email or the user leaves their browser open, the link grants instant access. Supabase defaults to 24 hours. That's reasonable for B2B (users check email daily). For high-security scenarios (fintech, healthcare), drop it to 1 hour or even 15 minutes. For consumer apps where users are slower, go 48 hours.

// Tune in Supabase dashboard:
// Authentication → Settings → Email Link Expiry
// Default: 86400 seconds (24 hours)
// Min: 900 seconds (15 minutes)
// Max: 604800 seconds (7 days)

Our recommendation: 24 hours for B2B SaaS. It's long enough for people to see the email, short enough that forgotten links aren't a security liability. If a user loses the link, they click "resend" and get a fresh one.

Fallback: Password for Power Users (Optional But Recommended)

Some admins, security teams, or power users will demand a password option. Don't fight it—give them one, but hide it behind an "advanced" toggle so it doesn't clutter your primary flow.

// src/components/LoginForm.tsx
import { useState } from 'react';
import { MagicLinkForm } from './MagicLinkForm';
import { PasswordForm } from './PasswordForm';

export function LoginForm() {
  const [usePassword, setUsePassword] = useState(false);

  return (
    <div className="max-w-md mx-auto">
      {!usePassword ? (
        <>
          <MagicLinkForm />
          <button
            onClick={() => setUsePassword(true)}
            className="w-full text-center text-sm text-gray-600 hover:text-gray-900 mt-6"
          >
            Prefer a password? →
          </button>
        
      ) : (
        <>
          <PasswordForm />
          <button
            onClick={() => setUsePassword(false)}
            className="w-full text-center text-sm text-gray-600 hover:text-gray-900 mt-6"
          >
            ← Back to magic link
          </button>
        
      )}
    </div>
  );
}

Email Deliverability: The Silent Killer

Magic links only work if the email arrives. Use a professional email service (Resend, SendGrid, AWS SES) with SPF/DKIM/DMARC configured. If you send from noreply@localhost, Resend won't touch it. Test your email setup before launching—send a test link to your own inbox and verify it's not marked spam. Gmail, Outlook, and corporate email servers will trash any suspicious sender.

Resend handles this well: they manage sender reputation and warm-up. But you still need to configure your domain's email auth records. Resend's dashboard walks you through it.

Six Magic Link FAQs

What if the user never gets the email?

Resend's dashboard shows delivery logs. If emails aren't arriving, check: (a) domain auth records (SPF/DKIM), (b) email is not in spam, (c) user email is correct. Give users a "resend link" button that rate-limits after 3 attempts (prevents abuse). Offer a fallback: "Paste a recovery code instead" for enterprise users.

Can I use magic links for sensitive actions (password reset, payment)?

Yes, but add friction. For password resets, magic links are standard. For payments, add a second factor: user gets a link, clicks it, then must re-enter their password or use 2FA. For highly sensitive ops (delete account, transfer funds), require both email link AND SMS code or authenticator app.

What if a user clicks the link from a different device?

Supabase issues a session cookie. When they click the link on mobile, they're signed in on mobile. If they later open the app on desktop, they're not signed in (different browser). This is good—it prevents token theft. Users can stay signed in across devices by using a password and login from each device (or sync cookies if you manage that).

Do magic links work for multi-tenant SaaS?

Yes. When a user clicks their magic link, Supabase authenticates them and you redirect to /dashboard. In your dashboard logic, query their organization from the app_users table and load their tenant data. No special magic-link logic needed—it's just one OAuth/OIDC flow you already handle.

How do I prevent account takeover if someone has access to a user's email?

This is the real risk. If an attacker has email access, magic links are compromised. Mitigations: (a) require confirmation before changing email address (send "confirm email change" link), (b) add IP-based rate limiting (if 10 magic link requests in 1 minute, block), (c) add 2FA as optional but recommended, (d) notify users via SMS when their account is accessed from a new IP, (e) implement "deny all new logins for 24 hours" after password change.

Should I send magic links or use a button I click in the email?

Send a clickable button (easier) but include a fallback code in the email body for email clients that strip links. This covers everyone: power users click the button, cautious users who distrust links can copy the code and paste it on a form.

The Bottom Line

Passwords are 2000s tech. Magic links are faster, friendlier, and convert better. Supabase Auth + Resend gets you there in one afternoon. The tradeoff is email delivery (solve with domain auth), link expiry (tune to your risk tolerance), and a password fallback for power users (hide it, but build it). Velocity X dashboards ship magic links first because it works: users land, sign up, click their email, and they're in. No password anxiety, no reset flow, no friction. Get the email template right, monitor spam rates, and tune your link expiry. For more on auth security, see SSO for enterprise teams. Ready to build frictionless B2B auth? Check Aidxn Design's backend partnerships to ship passwordless that scales.

A look inside the gallery.

Magic Links — Why Aidxn Defaults to Passwordless Auth for B2B SaaS