How to implement Magic Link Authentication with Next.js and Altogic
Tags: javascript, webdev, tutorial, nextjs
Published: 2022-05-05 05:16:57


## How to implement Magic Link Authentication with Next.js and Altogic

![How to implement Magic Link Authentication with Next.js and Altogic](https://cdn-images-1.medium.com/max/2560/1*q-FsWZkgNrdm9R5UYb0S6A.png)

## Introduction

This article will cover **magic-link authentication** basics using Next.js and [Altogic](https://altogic.com/), a backend-as-a-service platform using its client library. This authentication method allows users to sign in to the application **without** remembering their password.

To reduce UX friction and avoid remembering multiple passwords, some small/medium and even large organizations are moving out from the password-based authentication flow to magic authentication, depending on their risk appetite.

You can check out the [source code](https://github.com/altogic/altogic/tree/main/examples/nextjs-magic-link-authentication) and [demo app](https://altogic-nextjs-magic-link-auth.vercel.app/).

### Benefits

With the magic link authentication method, the user does not have to remember another password or enter it to access their account. So we can clearly understand that magic link authentication highly simplifies the login burden for users and provides a better user experience.

### Disadvantages

For that authentication method, the primary condition is that the link needs to be safe and can not be able to manipulated from outside of the application. And the links should have to be used for just a few minutes and only once. So except for these conditions, a passwordless authentication seems safer than one with a password.


> 💡 If you know any other disadvantages that you discover or faced before, please write in the comments section, we would love to discuss and learn.

### How is the magic link authentication flow in Altogic?

 1. Users who already have an account enter their email and click the “**Send magic link**” button.

 2. An email with the magic link is sent to the specified email address by **Altogic**.

 3. Users click on the link in the sent email.

 4. Altogic redirects users to specified “**Redirect URL**” with an access token in the query string parameter.

 5. This access token is used to get a session token, and users are directed to their profile page.

### Youtube Promo Video

You can check out the video below to see a live demonstration of our app.
{% embed https://www.youtube.com/embed/k4UEqFp9jFk  %}
## Set up the project

This project builds on top of the complete e-mail authentication app we created previously. You can follow the [tutorial](https://medium.com/altogic/altogic-email-authentication-with-next-js-and-altogic-4c036c36ea8f) to build the same app or clone the project from [here](https://github.com/altogic/altogic/tree/main/examples/nextjs-email-authentication) and continue with the rest of the tutorial.

## Let’s start coding!

We already have the **backend** and **frontend** of the **email authentication now**. We can start implementing the **magic link functionality**.

### Set up the magic link page

We need a page where we get the **email** input from the user.

Using the “altogic.auth.sendMagicLinkEmail(email)” we can send magic link mail to the specified email.

Here is the source code of the `/auth/send-magic-link` page:

{% gist https://gist.github.com/mertyerekapan/edd134d4aeff4ebf08bdb5b80a2e21b2.js %}
In the end, your screen should look like this:

![Altogic send magic link screen](https://cdn-images-1.medium.com/max/6912/1*ITH5HiwNrDfsNqZQduhp2A@2x.png)

### Magic Link Email

![Default magic link email Altogic sends](https://cdn-images-1.medium.com/max/3236/1*M45W1zKshZNXswHpAp5Rpw@2x.png)

You can also change all of the message templates from the **App settings → Authentication → Message templates** view of [**Altogic Designer**](https://designer.altogic.com/) and use **any HTML template** you want.

Here is how to do that:

![Change message templates in Altogic Designer](https://cdn-images-1.medium.com/max/7536/1*hwIXJvOSjdgBVsjHPo2xQg.png)

Now that we sent the email, users need to click on the link to sign in.

### Redirect URL route

When users click on the link, **Altogic** redirects to our specified Redirect URL, which is **/auth-redirect** in this case.

Here in **getServerSideProps,** we check the query string parameters, and according to each action, we perform some actions. Here is an **important** part!

getAuthGrant() function either takes a session token as a parameter **or** uses the one in the URL.

Here, we run this code **only on the server-side,** so we must **give** the session token as the parameter.
{% gist https://gist.github.com/mertyerekapan/67e9784d720e3dbb7cf6c0352d61c583.js %}
### What happens if we click on the link again?

Magic links are one-time links. If users click on the link a second time or after it expires, they get an error. This feature makes the magic link authentication method more secure.

![Magic link url when you use it again.](https://cdn-images-1.medium.com/max/3632/1*n2vu4W04Wm2mFfVC5u9KOA.png)

As we can see from the **URL**, the access token is already used or invalid.

> 💡 You can directly insert the error message from the link for convenience.


## Conclusion

This article added the magic link authentication method to our email authentication app using [**Next.js**](https://nextjs.org/) and [**Altogic Client Library**](https://clientapi.altogic.com/v1.2.2/modules.html). Thanks to [**Altogic**](https://altogic.com/), we can build this functionality with just a few lines of code.

You can check out the [GitHub repository](https://github.com/altogic/altogic/tree/main/examples/nextjs-magic-link-authentication) for other functionalities and the rest of the code. You can also clone it and build your app on top of it.