Auth0 Multi-Tenancy with React. Part1: Introductory word

It’s a set of articles that go you along throw possible ways to build Multi-Tenancy Architecture using React and Auth0. We will implement POC (Proof Of Concept) for each available option and highlight the pros and cons for each of them. It gets you clear insight into which options to choose for your current project.

Content of article series:

1. Auth0 Multi-Tenancy with React. Part1: Introductory word — We are reading this article now
2. Auth0 Multi-Tenancy with React. Part2: Multi-tenancy with one Auth0 tenant attaching tenant-specific metadata to the user
3. Auth0 Multi-Tenancy with React. Part3: Multi-tenancy with one Auth0 tenant with different DB Connections
4. Auth0 Multi-Tenancy with React. Part4: Multi-tenancy with multiple Auth0 tenants — TBD

You may implement authorization on your own, but it is not applicable for enterprise applications where more likely you will use already implemented decisions like Auth0, Azure Active Directory, and so on. Here we’re going to consider deeper Auth0.

There are many articles that help integrate Auth0 for single-tenant applications published by Auth0 for any well-known technology (React, Angular, Vue, NodeJS, etc): Get Started with Auth0.

Here we will focus on multi-tenancy architecture and some possible ways to implement this. There’re several ways to do it.

What is multi-tenancy is?

Multi-tenancy is when a single instance of software runs on a server that is accessible to multiple groups of users.

When may multi-tenancy be applicable?

For example, you’re developing an application that may be used by different organizations and you have some domain-specific entities that have to be visible only for users belonging to specific organizations. Keeping all personal data of the users in one DB may be a good idea when your app is considered as a start-up and it’s small, but when it grows it’s better to separate users of each organization. Sometimes also it may help split infrastructure costs between organizations in a more fair way (the more users organization have, the more cost should be paid). All those business cases should be considered in advance and reflected in architecture decisions. Or you should develop a roadmap for the project and dependently how the project is successful, move from Single Tenant Architecture to Multiple Tenant one and have a look at all options to migrate and estimate how much efforts may be required.

Also if your application is supposed to work with different regions like the USA, Europe, some legal requirements may force you to store users in DB physically located into the particular region from which a user comes (figure 1).

Figure 1 — Reasons to apply multi-tenancy architecture

Auth0 provides several ways to separate users:

1. Auth0 allows storing any application-related properties attached to a user in special properties app_metadata or user_metadata , where you may save which organization the user belongs to, for example. These properties may be saved via Auth0 Dashboard or via Auth0 Management API during user creation
2. Auth0 allows creating multiple connections within one tenant, each connection stores users in a separate DB.
3. Auth0 allows the creation of multiple tenants per organization, where you may choose which region is more appropriate for you

We will review each of the available options and there will be a bunch of articles, where each article is devoted to each option. We will consider the pros and cons and it gets insight into where each of the options may be applicable.

But before going further, let’s integrate Auth0 in React Application for Single-Tenant Architecture.

Setup Auth0 Tenant

You may skip this section if you already know how to do it, but it will be used for the next articles as well, at least just a quick review of this section.

Tenant creation

Before going forward, I just quickly follow you throw the process of tenant creation. As soon as you create your Auth0 account (it’s free), you need to create the first tenant (figure 2).

Figure 2 — Tenant creation

Here you need to come up with a Tenant Domain name and choose the required region according to your legal requirements.

Application creation

We’re going to develop a Single Page Application, therefore let’s create an application for this purpose:

Figure 3 — Application creation flow

Define application name and app type as SPA:

Figure 4 — Create an Application for SPA

As soon as you create Application in the Settings tab you will see Domain and ClientID which we are going to use in our React app a little bit later:

Figure 5 — Application settings

Before we go further, we need to finish Application settings and define the following fields: Allowed Callback URL, Allowed Logout URLs, Allowed Web Origins. We are going to develop React application locally and it will run in http://localhost:3000, therefore we need to set this URL for all mentioned fields:

Figure 6 — Tenant redirect URI settings

We finished with Auth0 Application settings for now.

Auth0 integration with Auth0 for Single Tenant Architecture

Let’s scaffold our React App with create-react-app and install Auth0 React SDK developed by the Auth0 team and material-uias a library for all necessary components:

npx create-react-app auth0-multitenancy --template typescript
npm i -S @auth0/auth0-react @material-ui/core

First of all, let’s create Layout component which renders static header with Logout button with any content for any page:

After that let’s implement one page which would render user personal information:

And finally, put this page in App.tsx component and wrap it with Auth0Provider from Auth0 library:

Pay your attention, that we wrap our IndexPage with withAuthenticationRequired High Order Component (line 5), HOC (more details about the HOC pattern you may review in this article), and this page is visible only for authorized users, otherwise, the user will be redirected to Auth0 Server to Universal Login page. Before running the application, make sure that you define two variables from figure 5 in .env file:

REACT_APP_AUTH0_DOMAIN=YOUR_DOMAIN_NAME
REACT_APP_AUTH0_CLIENT_ID=YOUR_CLIENT_ID

The full code you may find in this repo in the master branch.

Let’s create the first user via Auth0 Dashboard. Go to User Management/Users tab and create a user here setting email and password:

After the application run, when you go to localhost:3000 URL, the application redirects you to the Auth0 Universal login page. As soon as you fill in email and password you will see this page: