Bits & Pieces Part 1: They Said Passwordless Was Easy. They Lied. Here's How I Beat It Anyway.

Passwords are so 2004. Forget the endless string of forgotten passwords and “Reset your password” emails. In this first installment of our “Bits & Pieces” series, we’re peeling back the curtain on how to build a truly seamless, production‑ready passwordless authentication flow—complete with magic links, SMTP wizardry, and rock‑solid database integration.  Why am I doing this you might ask? I want an app that feels like magic—one click and you’re in. No typing, no typos, no ‘forgot password?’ panic. Onward!But isn’t that just convenience?”Convenience is just the tip of the iceberg. Underneath, it’s about seamless onboarding. Imagine a SaaS platform that reduces the friction logins brings. The Hidden Perils of Passwords Users today juggle dozens of credentials—two‑thirds of Americans, for instance, admit to reusing the same password across multiple accounts, exponentially raising breach risk.Weak, easily guessed passwords like “123456” remain the most common worldwide, used over 4.5 million times in leaked datasets. In 2021 alone, breaches exposed over 22 billion records—many traced back to compromised or reused passwords. Requiring users to memorize or reset passwords not only creates friction but also fuels those poor habits—and ultimately undermines security and UX  Magic Links: and Passwordless authentication: How They Work & Security Trade‑Offs When a user submits their email, your backend generates a one‑time token, embeds it in a time‑limited link, and emails it via SMTP. Clicking the link validates the token, establishes a session, and logs them in—no password needed .Short lifespans (e.g., 5–15 minutes) dramatically shrink the window for attackers to hijack a stolen link . Malicious sites can overlay invisible iframes or mimic your brand to trick users into clicking links they think are legitimate, always implement X‑Frame‑Options and clear branding in your email templates.Some clients strip HTML links; including a plain‑text URL ensures deliverability but also gives attackers a copy‑paste vector—protect tokens with HTTPS and CSRF tokens on the endpoint. Invalidating tokens immediately after first use, prevents replay attacks—store a “used” flag in your database adapter Let's hack this thing already.  Well, first of all—a simple how-to on implementing passwordless authentication would suffice, right? Sure. Except that’s not how this really goes down. I wanted to understand this inside-out. Not just slap a package together and hope the auth gods smile on me. No. I wanted to own this flow. Because if a user is going to click one link and get inside my app, that link better be bulletproof. Ironclad. Magical.So I started where anyone would—Google. "passwordless authentication Next.js". The trail leads to Auth.js, formerly known as NextAuth.js. Ah. Rebranded. Just like a startup trying to sound cooler. Whatever. At least the docs exist. First impression? It’s good. Maybe too good. Like that one CS major who turns in perfect assignments but you know they're pasting from somewhere. The magic link section is buried under “Email Provider”—like it doesn’t want to be found. Classic.But I read it. Twice. Then once more. Here’s what clicked:- You give it an email.- It fires off a POST request to `/api/auth/signin/email`.- Behind the scenes, a one-time-use token is generated.- That token is embedded into a link and emailed via your chosen SMTP provider.- User clicks. Token is validated. Boom—they're in.But here's where reality smacks you in the face: email providers. Ah yes. You can’t just send email. This isn’t the Wild West. Every provider has opinions.Four hours. That’s how long I spent spinning up Mailgun, Resend, SendGrid, and Brevo. One rejected me. Another ghosted. Two others wanted "domain verification." And then I found Postmark.Clean. Straightforward. But—requires a verified work email. Not Gmail. Not Yahoo. A real domain. Classic gatekeeping.Fine.So I hacked the system. Spun up a domain in Google Cloud. Used their $300 free trial to register a real work email. Slapped that on Postmark. Verified. Approved. API key in hand. No payment needed. Production-grade email: unlocked. Now that’s a hack. Next stop: Auth.js integration.Here's the plan:1. Add Auth.js to our Next.js app.2. Configure the email provider with Postmark using the API key.3. Create the `/api/auth/[...nextauth].ts` file.4. Use `providers: [EmailProvider({...})]` to hook in the magic link flow.5. ENV file gets `POSTMARK_API_TOKEN`, `NEXTAUTH_SECRET`, and the rest. Boom. From 0 to passwordless in under 100 lines of code.But this isn’t just about setup. It’s about **user experience**. Clean, crisp emails. Branded links. Instant sessions. No janky redirects. No weird toast notifications. Just… magic. And trust me, we’re just getting started. Next up: **building a custom login UI**, session callbacks, edge cases like expired links, and how to make this thing feel like you’re *signing into the future

Other insights from Matthew Okadinya