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 today’s story, we will cover passwordless authentication using a third party called Magic.
If you want to watch the video below is the link. Please feel free to subscribe to show support.
Watch the video
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.
The approach can be divided into the following steps —
Create an account on the Magic website
- Grab the API key from the dashboard.
- 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
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
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.
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.
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.
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.
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.