How better to secure your web application than by not having a password? It might sound crazy, but it has many benefits such as improved UX, and increased security. Yes, I said increased security.

But first, a quick rundown of passwordless auth.

What is Passwordless Auth

Traditionally when a user signs up to a website, they are presented with the dual-input boxes email and password to create a new account for the website, and then the user needs to verify their email address and activate their new account.

Passwordless auth does away with this, and just has the user enter their email. A special link (sometimes referred to as a Magic Link) is sent to the users email address, and upon clicking on the link the user is signed into the website. The process is the same for new and returning users. Thus, passwordless.

Benefits of Passwordless Auth

Increased Security

Looking at this with a security breach lense, there are 2 attack vectors to access a website when a user creates an account.

The first is to breach the account on the website directly. Users might reuse passwords, or use unsecure passwords. Unless the user is using a password manager, they are likely to fall into one of those 2 situations. A malicious player can thus try to gain access to the website directly. There is also the requirement of the website developers to ensure that the passwords are properly stored (hashed) and handle any data breaches correctly. Something which is all too common in the online world.

The 2nd attack vector is through the email address. The majority of websites have the email address as a recovery mechanism, meaning that no matter now strong the website account password is, if their email account is compromised then the malicious actor has access to all their accounts anyway.

Passwordless auth removes this security issue and relies on the strength of the email account (which they would already need to do anyway) without taking on added responsibility of the websites own auth.

Improved UX

Because the user doesn't need to create a password, they don't need to worry about creating a strong password that has never been used before. The user doesn't need to think "do I already have an account with this website" and try their email address and/or try to reset a password to an account they dont have. If they have forgotten their password, they need to go through the password reset process, create a new password, and then login using that new password.

Passwordless auth always has the same flow for all users, new and returning. They simply enter their email address and are logged in.

Setup Passwordless auth with NextAuth.js

NextAuth.js is a package to enable various authentication methods in a nextjs application. When setting up passwordless auth with NextAuth.js it is mandatory that a DB also be configured (to store the user & session details).

DynamoDb

I used DynamoDb for my DB provider, as my application is being deployed to AWS. The documentation does a great job of explaining the setup, and also provides CDK for creating a suitable table.

SES Email Provider

As my project needs to send emails for the auth to work, an Email Provider is required to do so. This can be done with NodeMailer, however I setup SES and provided these details to NextAuth.js.

New User & Custom Pages

You may want to provide a Welcome page, or create custom pages to fully customise the auth process of your application. Simply provide a path to the relevant page, and NextAuth.js will use that instead of its own page.

Conclusion

Passwordless auth is a great way to add auth to your website. It is quick and simple to use, and straight forward to setup.

NextAuth.js has exceedingly good documentation - be sure to check it out when setting up passwordless auth on your own project.