Passwordless Authentication of the users

Under the Hood
Most of the users face any issue in logging even using google and Twitter accounts. While finding a way around to decrease the drop in users, we come up with passwordless authentication. However, we can create the exact custom process that we will be discussing in the house without using any third-party module. But in todays story, we will cover passwordless authentication using a third party called Magic.

Getting Started
Magic is the third-party module that provides a javascript SDK to integrate passwordless authentication. The idea is simple: collect the valid email id from the user and send the log-in link to their respective email. The link sent over the email is then used to authenticate the user under the hood. We dont have to worry about what happens under the hood when the user clicks the magic link sent over email because Magic takes care of it.

But I will give an overview of how this can be achieved in-house and how we can create the custom in-house passwordless authentication.

Execution Steps
The approach can be divided into the following steps

Create an account on the Magic website

• Grab the API key from the dashboard.
• Install Javascript magic SDK on client-side
• Create the interface for the user to enter their email id
• Create another protected route for authenticated users
• Redirect the authenticated users to the protected route

I am not covering the first step, you can go to this link to create your account and start the free trial. Once it's done, you will be redirected to the dashboard, where you will get your published key or API key. Save this API key, as we will need this to invoke the methods provided by magic javascript SDK.

Installing Javascript SDK
Using the following command, we will install the magic SDK. You download the ready to use the repository from this link.

yarn add magic-SDK

Preparing Interfaces
The idea is simple: we will create an email input, the submit button, and a protected route to which the user will only be redirected or able to access when they are authenticated successfully.

I will share the entire codebase in the end, so attaching only the images of the UI here for better reference.

Grabbing user credentials
Once the user logged-in in using the magic-user method, we can fetch the user logged-in state and its corresponding details once the authentication is successful.

Gist code

Collecting user details
The magic instance we have created gives users a method to return the logged-in user details. Although the email we already have from the input field always saves the email return from the magic-user method to cross-verify and establish the double-check.

The magic instance also provides the isLoggedIn method to check and redirect the user when the authentication is completed successfully.

Redirecting user
Every application redirects the user after the authentication process is completed. So using the isLoggedIn method we can store the user information in the database and redirect the user to the protected route in one go.

Question
Although using only an email id and no password, we have achieved passwordless authentication. But this entire solution has raised 2 questions -

We are using a free trial of magic SDK means later we have to pay them once the free trials get to an end.
Users still have to go to the new tab or open the Gmail account to verify the email id, basically, we are adding one more step in the user onboarding process this might bring a drop in onboarding the users on the application.

Conclusion
Magic SDK is new in the market so giving it a trial on our website is still debatable.

Until, next time, have a good day, people.
Keep developing
Shrey
iHateReading