Under the Hood

Many users encounter difficulties logging in, even when utilizing services like Google and Twitter. To combat user drop-off rates, passwordless authentication has emerged as a solution. While it’s possible to create a similar custom process without third-party modules, this discussion will focus on implementing passwordless authentication via a service called Magic.

Getting Started

Magic offers a JavaScript SDK designed for integrating passwordless authentication. The process is straightforward: you gather a valid email address from the user and send a login link to that email. This link is then used to authenticate the user seamlessly. Fortunately, we don’t need to delve into the technicalities of what happens when the user clicks the link, as Magic manages that for us.

However, I will provide a brief overview of how to develop a custom passwordless authentication system in-house.

Execution Steps

The implementation can be broken down into several steps:

1. Create an account on the Magic website.
2. Retrieve the API key from your dashboard.
3. Install the Magic JavaScript SDK on the client-side.
4. Build an interface for users to input their email address.
5. Create a protected route for authenticated users.
6. Redirect authenticated users to the protected route.

I won't cover the account creation process in detail; simply visit this link to set up your account and initiate a free trial. After completing this, you will be redirected to the dashboard where your published key (API key) will be available. Make sure to save this key, as it will be necessary to use the methods provided by the Magic JavaScript SDK.

Installing the JavaScript SDK

You can install the Magic SDK using the following command:

yarn add magic-sdk

Preparing Interfaces

The concept is simple: we will design an email input field along with a submit button, and a protected route that users can access only after successful authentication. For clarity, I will provide images of the UI at the end, along with the complete codebase.

Grabbing User Credentials

Once the user logs in using the magic-user method, we can retrieve the logged-in state and relevant details after successful authentication.

Collecting User Details

The Magic instance we've created allows us to retrieve the logged-in user's details. Although we already have the email from the input field, it is prudent to save the email returned from the magic-user method for verification purposes.

The Magic instance also provides the isLoggedIn method to confirm authentication and redirect the user accordingly.

Redirecting Users

Most applications redirect users post-authentication. By utilizing the isLoggedIn method, we can store user information in the database and seamlessly redirect them to the protected route.

Questions to Consider

Even though we have achieved passwordless authentication using just an email address, this solution raises two important questions:

1. Since we are using a free trial of the Magic SDK, we will need to pay for it once the trial period ends.
2. Users must still open a new tab or access their Gmail account to verify their email, potentially adding an additional step in the onboarding process, which could affect user retention.

Conclusion

The Magic SDK is relatively new in the market, and its trial on our website remains a topic of discussion. We are closely monitoring the product, and once it gains broader acceptance, we will consider integrating it into our platform. Until next time, take care!