JavaScript is not available.

For authentication, you usually want to use next-auth.js.org. Howeverrr, their DB schema is quite complex, and I like going around the database manually, so I decided to try my hand at it. Can I build a "magic link" email login flow, with just a User table? 🤔

Database schema required by NextAuth.js, which composes four tables ("User", "Account", "Session", and "VerificationToken").

read image description

ALT

4:52 PM · Oct 22, 2022

Replying to

This is the schema I want to use (using

@prisma

cuz it seems like the cleanest ORM for TypeScript, missing Eloquent tho 😅). You'll notice it doesn't include any session data or verification tokens (which you'd need for the magic login links). So, how did I make it work? 😁

read image description

ALT

First, let's cover the session. I'm using

@vvoyer

's iron-session package, which lets you store a small (encrypted) object inside a cookie. 🍪 I use this to store the ID of the user (and the current team as well in my case), and then fetch it from the database when I need them.

import prisma from '@/lib/prisma'

const handler = async (req, res) => {
if (!req.session.userId) {
return res.json({ authenticated: false })
}

return res.json({
authenticated: true,
user: await prisma.user.findUnique({
where: { id: req.session.userId }
}),
})
}

export default handler

read image description

ALT

Finally, what about the verification token? Here's where I'm taking a page from the Laravel playground, recreating their "signed links" feature. I'm encrypting an object (w/ Iron) with the user's email and an expiry date and using that as the token users get on their email! 🤩

$import Iron from '@hapi/iron' import { sendMagicLink } from '@/lib/mail' const BASE_VERIFY_URL = "https://scripty.studio/api/auth/login" const handler = async (req, res) => { if (!req.body.email) return res.status(400).end() const token = await Iron.seal({ email: req.body.email, expires: now().add(1, 'hours').toDate() }, process.env.APP_KEY, Iron.defaults) await sendMagicLink( req.body.email, `${BASE_VERIFY_URL}?email=${req.body.email}&token=${token}`, }) res.status(200).json({ message: 'Email sent!' }) }$

read image description

ALT

$import Iron from '@hapi/iron' const handler = async (req, res) => { const { email, token } = req.query if (!email || !token) return res.status(400).end() const loginData = await Iron.unseal( token as string, process.env.APP_KEY, Iron.defaults ) if (email != loginData.email || loginData.expires < now().toDate()) { // expired link (or someone is trying to swap the email lmeow) return res.status(400).end() } const user = await prisma.user.findUnique({ where: { email } }) if (!user) return res.status(400).end() req.session.userId = user.id await req.session.save() res.redirect('/dashboard') }$

read image description

ALT

Note this has the downside that links will work for as long as they are active, so I'd recommend to set it to a short period (I'm using 1h). The upside is a much much cleaner database, and clean code I really feel like I understand (which is huge!) 😁

As a bonus note, let's talk about how I'm crafting and sending emails! 📬 I write my emails in JSX using mjml-react (which comes with a pretty nifty VSCode extension w/ live-previews). When it's time to send, you can render to html from node, and send it using nodemailer. 🚀

And that's it! I'll keep tweeting lil DX hacks for making Next more manageable for big apps (at least from the perspective of someone used to MVC & lots of magic), so follow if you're into that i guess. Also, check out the app I'm building! I think it's pretty dope 😁 ✌️

Quote Tweet