Although they are often conflated with each other, Authentication and Authorization, represent two fundamentally different aspects of security that work together in order to protect sensitive information. In this blog, we will go over some of the key differences between the two.

The Foundation: What Is Authentication?

Authentication is the process of verifying the identity of a user or entity attempting to gain access to a system or resource. It answers the fundamental question, “Who are you?” to ensure that the individual or device claiming access is, indeed, who they say they are. This identity verification process serves as the initial gatekeeper, protecting against unauthorized entry and mitigating threats like unlicensed access.

Compared to a couple of years ago, open-source authentication has seen huge progress. In this post, we’ll compare three of the leading open-source authentication providers - Ory, Keycloak, and SuperTokens.

Each of these providers has its own set of pros and cons. We’ll evaluate each independently and summarize the relative strengths and weaknesses towards the end of the post.

High-Level Refresher

Django is a high-level Python framework that follows the model-template-views architectural pattern. Django is one of the most popular web frameworks due to its security, scalability, and flexible design. Companies like Instagram, Reddit, and Dropbox all use Django.

Bootstrap is an open-source CSS framework that provides pre-built HTML, CSS, and JavaScript components. This includes elements such as navigation bars, forms, buttons, modals, and more. Originally created by Twitter, Bootstrap is now maintained by a large developer community.

Passwordless authentication is becoming an increasingly popular choice for developers. Even notable names like Slack, Notion, and PayPal are all transitioning to SMS, email, or social logins for their authentication.

A driving factor for its increasing adoption is that it’s inherently less prone to cyberattacks. Since not even password hashes are stored in a database (which have varying degrees of security based on the hashing & salting scheme used), there’s no exposed attack surface with user credentials for malicious actors to target.

One of the most frustrating things as a React developer is investing time and effort into building an application only to find it slow and unresponsive.

In this post, we'll go over five tips to improve the performance of your React app.

Cross-Origin Resource Sharing (CORS) is a mechanism that supports secure requests and data transfers from outside origins (domain, scheme, or port).

For example, example.com uses a text font that's hosted on fonts.com. When visiting, the user's browser will make a request for the font from fonts.com. Because fonts.com and example.com are two different origins, this is a cross-origin request. If fonts.com allows cross-origin resource sharing to example.com, then the browser will proceed with loading the font. Otherwise, the browser will cancel the request.

Role-based access control (RBAC) is a security approach that uses roles to define what a user is and isn’t allowed to do. In an RBAC system, users are assigned roles with varying permissions for different resources, including files, databases, and applications.

So, when a user tries to access a resource, the system will first find the roles associated with the user and then check if any of the roles have the appropriate permission. If so, the user is allowed to access the resource. If not, the user is denied access.

This post will guide you on how to add authentication to a VueJS app with SuperTokens using your own UI. We will be building our own authentication forms and will be using supertokens-web-js to make those forms work.

What Is SuperTokens?

SuperTokens is an open-source project that lets you quickly add authentication to your app. It offers various authentication methods (called recipes).

What Is Authorization?

Authorization is about answering the question, “Is this user allowed to do a certain operation?”. This is different from Authentication, in which we answer the question, “Which user is this request coming from?”

Both are essential to most applications, and as such, we first go through authentication flows to identify who the user is. Then we go through authorization flows in which we decide if the user has permission to do certain operations.

This blog will take you through connecting the SuperTokens core service with a MySQL or a PostgreSQL database with and without Docker.

This is only applicable if you are self-hosting the SuperTokens core service.

SuperTokens is an open-source project which enables you to add auth to your app quickly. It gives you a pre-built auth UI and backend APIs for an end-to-end integration experience.

Before we dive into the code, let’s discuss the overall architecture.