[Hakanai](https://hakanai.io) has just been released, it's a SAAS I've been building over the last couple of weeks that lets you send a newsletter based on an RSS feed. It's obviously the tool I use for this blog's newsletter ;) And of course, SAAS means login screen. I'm not going to lie to you, it's rarely the most pleasant part to do. I've already made hundreds of login screens, and it's more time-consuming than interesting. So obviously I wanted to find a bookshop that would do everything for me. I even looked at [Supabase](https://supabase.com/) or [Clerk](https://clerk.com/), but I chose to keep control of my user base and not use these services. Are you interested in the details of the complete stack? [I talked about it in a previous post](https://eventuallycoding.com/2024/05/my-perfect-stack). Anyway, for this SAAS, I chose to use [nuxt-auth-utils](https://github.com/atinux/nuxt-auth-utils), written by [Sébastien Chopin](https://atinux.com/) who is quite simply the CEO of NuxtLabs, the company that publishes the Nuxt Framework. ## the magic link login Here's the [login form](https://hakanai.io/login) in question: ![Login form](https://writizzy.b-cdn.net/blogs/48b77143-02ee-4316-9d68-0e6e4857c5ce/media/1765805602023-login.png) which, by the way, is slightly different from the [signup form](https://hakanai.io/signup), because a user signup must always recall the value of the product. But that's another subject. ![Signup form](https://writizzy.b-cdn.net/blogs/48b77143-02ee-4316-9d68-0e6e4857c5ce/media/1765805602479-signup.png) You'll note that I only offer two choices: - a social signup/login via Google - a signup/login by email, without password! The second mode is what's known as a magic link login. A magic link is simply a link you receive in your e-mail inbox, enabling you to connect to an application. It's an option that eliminates the need for a password. It's also known as [passwordless authentication](https://en.wikipedia.org/wiki/Passwordless_authentication). I won't go into the details, but it's widely used today, for example on medium, supabase, clerk, microsoft live and so on. The big advantage I see is that I don't want to manage user passwords. I don't want to code all the necessary functionalities linked to password management: password reset, modification etc... And above all, I don't want to be responsible for your password, its reliability, its renewal, the way you secure it etc... In short, I've chosen to have only the social login and the magic link login. Now, Nuxt-auth-utils is used to manage social logins. So you're going to need a bit of elbow grease to manage this one. ## Sending the magic link Here's a very basic login form for Nuxt : ```vue ``` The user must enter their email, then click on the button that triggers sendMagicLink. The sendMagicLink function simply sends the email to the server, which will then send it to the user. ```typescript const sendMagicLinkForm = ref(null) const email = ref('') async function sendMagicLink() { if (!sendMagicLinkForm.value?.checkValidity()) { sendMagicLinkForm.value?.reportValidity() } try { await $fetch('/api/auth/signin/magic-link', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: { email: email.value, } }) } catch (error) { consola.error(error) } } ``` Here, you can use a [server route](https://nuxt.com/docs/guide/directory-structure/server#server-routes) on the Nuxt side. I use Spring Boot and Kotlin. But it's easy enough to transpose to another language. Here's the method that will send an email with the magic link ```kotlin @PostMapping("/api/account/signin/magic-link") fun signinViaMagicLink(email: String): ResponseEntity { val account = sendMagicLink(email) return ResponseEntity.ok().build() } fun sendMagicLink(email: String): Account { val account = accountRepository.findByEmail(email) ?: throw BadParameterException("Account not found") val magicLink = createMagicLink(account.id!!) val emailBody = emailContentBuilder.getMagicLinkContent(magicLink) emailSender.sendMagicLinkEmail(email, "Signin to Hakanai", emailBody) return account } ``` The email sending code is not the most important thing. The creation of the magic link itself can use UUID mechanisms. What is important, however, is to ensure that the magic link is valid for no more than x minutes. You can use a TTL if the database allows it, or simply check the link creation date before validating it. Because yes, it's not over yet. We now need to validate the link AND create the user session. ## Magic link validation The user will receive an email with this link: ![Magic link received by email](https://writizzy.b-cdn.net/blogs/48b77143-02ee-4316-9d68-0e6e4857c5ce/media/1765805603059-signinlink.png) At this stage, the user can click on the link, which will send him/her to the site, authenticated. Validating the magic link on the Kotlin side is relatively straightforward: here we compare the two tokens, the one in the database and the one on the link. Note that the link is also deleted once it has been used. A link can only be used once. ```kotlin @PostMapping("/api/account/signin/magic-link/verify") fun confirmSigninViaMagicLink(token: String): ResponseEntity { val account = magicLinkService.verifyMagicLink(token) return ResponseEntity.ok().build() } @Transactional fun verifyMagicLink(token: String): Account { val magicLink = magicLinkRepository.findByToken(token) ?: throw BadParameterException("Magic link not found") val since = LocalDateTime.now().minusHours(2) if (magicLink.expirationDate.isBefore(since)) { throw BadParameterException("Magic link expired") } accountRepository.findById(magicLink.account.id!!).orElseThrow { BadParameterException("Account not here anymore") } magicLinkRepository.deleteByToken(token) return magicLink.account } ``` But now we need to create the user session. ## Creating the user session In reality, the email link doesn't go directly to the kotlin server, so this time we'll use a Nuxt server route Here's what it looks like: ```typescript export default defineEventHandler(async (event) => { try { const token = getRouterParam(event, 'token') as string await confirmSigninFromSigninLink(event, token) return sendRedirect(event, '/campaigns') } catch (error: any) { throw await errorManager(error, true) } }) async function confirmSigninFromSigninLink(event: H3Event, token: string): Promise { try { // call to the kotlin backend const account = await api.confirmSigninViaMagicLink({token}) await setUserSession(event, { user: { login: account.name, email: account.email, loggedInAt: new Date().toISOString(), }, }) return account } catch (error: any) { throw await errorManager(error, false) } } ``` Two things are extremely important to understand here: - the use of **setUserSession** to modify our user's current session - returning the client-side session with the redirect `sendRedirect(event, '/campaigns')`. At this stage, the link has been consumed and the user redirected, with a valid session. That's all for today. I hope this little tutorial has helped you understand how to implement a magic link login with Nuxt-auth-utils.

Articles tagged with tutorial

Using Nuxt-auth-utils to implement a magic link login

How to make a Nuxt module protected by a licensing system delivered by Lemonsqueezy?