Are you exhausted with the messy and time-consuming flow involved in authenticating users into your apps? mlAuth is here to help. For a two-step process that promises the same results and more, authenticate users into your apps, and let them forget about passwords for good.

Let developers use all that extra time to work on the most important parts of your projects.

The Problem

While creating every single project that involves users, developers always arrive at that point where there comes a need to decide a manner in which users have to be authenticated.

You first have to figure out how you are going to authenticate users, then decide if you want to do it on your own, and if so, your tasks involve setting up user registration flow which further involves setting up the database for authentication credentials. Afterwards you need to set up account confirmation and the respective database schema remodeling task, or deciding to skipping that altogether. You also have to keep in mind that users sometimes forget their passwords, so you need implement that into your registration flow, which involves reworking your data schema further.

You might decide not to do it on your own, and opt for social authentication, which in itself proves to be a handful task, with its own issues. Social authentication's issues can be but not limited to, complying with several legal clauses and demands from the social network companies to be allowed into their developer programs, providing so much personal information to the point you feel uncomfortable, followed by all the strenuous screenings which might sometimes take days just to be allowed to use their APIs.

Then you have to read their documentations and familiarize yourself with their APIs and practices, or decide to use third party clients, which aren't short of issues themselves.

On top of that you have to be careful how you store the user keys you are given access to, otherwise you might be responsible for many kinds of not so nice things.

You get the point. It can be messy, and definitely time-consuming.

The Solution

mlAuth, derived from - magic link Authentication, is a service that enables developers to easily implement user authenticate flows into projects that they are working on.

It promises to help you skip most of the bottlenecks involved by giving you a solution which simply works.

To skip most of the authentication fuss, mlAuth lets you do two things.

One, make login requests which resolves to your users receiving a magic url to login into your app.

Two, verify if your users' magic links are credible, and proceed to register, authenticate, or denying them access to your app.

That's it.

mlAuth handles all the "not so fancy" authentication tasks on your behalf. It supports you, both at the development and production stages of your projects.

You, and your users can forget about passwords, and recovering them altogether.

How To Use mlAuth

To use mlAuth, you need to create an account on mlAuth, register your apps, then, with the help of its JavaScript driver - mlauth-js, you can authenticate users into your apps.

The JavaScript package works for both front and back-end JavaScript apps. For apps built in other languages, the documentation has further instructions on how you can send the login requests and verify magic links.

Various Pages

Here is a preview of mlAuth pages in various states.

Landing Page

Dashboard - App list.

Dashboard - creating a new app (dark mode).

Documentation.

Account Settings (dark mode).

Building mlAuth

mlAuth is broken into an API back-end and a front-end client (the website). Most work of the service is handled on the Express back-end, while the front-end helps developers manage their apps and accounts.

Fun fact: The front-end is the first example of an app using mlAuth to authenticate users. You will see mlAuth's magic link authentication in action while using it.

Technologies Used

The following were the technologies used in creating mlAuth.

Planetscale

Planetscale was used as the database, managing all user, magic links, apps and session data generated and used in the project.

Why Planetscale?

Well, first, they are sponsoring this hackathon and what a great way it is to introduce a product to developers (quite better than spamming 🙂).

Second, the product itself is awesome, not only is it because I got to work with a relational database (for free) but it's cool how you can change the database schema at any time by simply pushing schema changes to the online database branches and never have to worry about anything else, it just works.

The PlanetScale CLI is intuitive and easy to use, you can do quite a lot with it, was quite useful setting up the database branches from the command-line and running SQL scripts to preview tables and data within the database, which was very useful for troubleshooting.

Third and most important is their support, top-notch 👏. I had issues integrating with Prisma (the db ORM) in the early stages of development, and when I emailed them my troubles I received a quick response with in-depth assistance.

Also, they have support for a number of languages and frameworks as listed here.

Prisma

The ORM tool has been used in the project to model the data schema for the Planetscale database. It has also been used as the ORM to manipulate and fetch data from Planetscale.

Prisma has a beefy documentation, but when you get past that initial part, it's quite a great ORM to work with.

Why Prisma?

It's an ORM tool for databases and does a good job.

It's simple and intuitive, it's queries helped simplify data transaction to and from the database minimizing the amount of code that was needed to interact with the database.

Felt quite familiar and reminded me of Laravel's database migrations and data models.

With the prisma studio command, you get a real-time local preview of your data, data tables and their relationships inside your Planetscale database branch. It is a great alternative for those that don't favor working on the commandline with Planetscale's CLI and its SQL shell.

Linode

Linode was used to host both the Express API and Vue.js front-end website.

Another fun fact: I've had this idea for a while, and wanted to participate in the last hackathon, but I couldn't find the time in the last month. So I ended up registering on Linode and not using the free credits effectively. Fast-forward July 1 and the announcement of the Planetscale hackathon.

One way or the other, I had to use the free Linode credits, and I can say it was a worthy experience. I felt quite at home on the Linux shell. Ditching Windows for Linux last year seems a wiser decision by the day 💻.

The hosting is done on a 1GB RAM shared CPU (nanode), Ubuntu 22.04 server.

pm2 keeps the Express API up and running, while the Nginx is the server taking care of proxying incoming and outgoing requests, SSL certificate and everything else in between.

This was my first experience with Nginx, hence there was a lot of learning involved, with documentations, video tutorials, forums and stackoverflow-ing 😅. Spent a minute troubleshooting an issue timing out pre-flight requests, only to realize I wasn't returning a 204 status code on the server.

Why Linode?

First, there's the issue of the free credits 🙂.

Second, I couldn't pass the opportunity learning how to use a new technology, in this case to host a website from the ground up with Linux.

I am familiar with the cPanel Linux hosting setup, but this is way different as I got to see how things work behind everything else. I can surely say I now understand how the web works a bit better compared to previous month.

Getting to work with Nginx and pm2 was also another valuable learning step.

Express

The Express framework has been used to make the mlAuth API. The API makes up the largest part of the project. If I was to set this project up for personal use, this would have been the only part developed, its importance can't be stated strong enough.

Why Express?

It's a developer's framework of choice when it comes to developing APIs in NodeJs.

It's ability to handle routing, parse forms and json out of the box can't be overstated. The simplicity involved in plugging in of middlewares is one of the best features, and has been quite useful in this project.

Vue.js

The front-end portal, landing, and documentation pages are all built with Vue.js. Routing on the front-end is handled by Vue.js' own vue-router. The front-end app's state is managed by Vue.js' own store - vuex.

Why Vue.js?

Of all front-end frameworks, I'm most comfortable with Vue.js given I've been using it since around its conception. It's easy to use, progressive, has a rich ecosystem (router, store) and an active and growing support. Pairing that with the power of Vite on local development, it was a breeze.

Other Technologies used that deserve a mention

• SSL certificates are signed by Let's Encrypt.
  • Front-end styled with Tailwindcss.
  • Email templates inspired by Maizzle.
  • The landing page inspired by tailwindtoolbox.

Examples

Here are example projects demonstrating how to use the mlAuth's Javascript driver to authenticate users into your apps.

mlAuth Back-end Demo (repo)

This is a back-end example repository demonstrating how to use mlAuth's JavaScript driver to send magic and verify magic links inside your project. This example created using the Express framework for the NodeJs environment.

mlAuth Front-end Demo (repo)

This is an example done in Vue.js demonstrating how to make and verify magic links in a front-end setup.

The best front-end example demonstrating how to integrate a front-end app with mlAuth is the mlauth.ml website. Visit the source code to see how the web-client uses its own service to authenticate itself. You read that right 😁.

Moving Forward

I would like to set up a Linux email server to handle the sending of emails, something like Postfix. This is because the current email service being used has a cap on the number of outgoing emails per day (free tier).

I would also want to add SMS messaging as an additional magic link delivery gateway to complement emails.

Also, I look forward to submissions for clients for other languages that can simplify integration with mlAuth as the mlauth-js driver is for JavaScript. With that, I would also welcome more example projects that demonstrate using the JavaScript driver (ml-auth) in other frameworks other than the two demonstrated here. These examples will be listed on the README pages of mlAuth and its driver's repositories.