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:
- Auth0 Multi-Tenancy with React. Part1: Introductory word — We are reading this article now
- Auth0 Multi-Tenancy with React. Part2: Multi-tenancy with one Auth0 tenant attaching tenant-specific metadata to the user
- Auth0 Multi-Tenancy with React. Part3: Multi-tenancy with one Auth0 tenant with different DB Connections
- 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).
Auth0 provides several ways to separate users:
- Auth0 allows storing any application-related properties attached to a user in special properties
app_metadata
oruser_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 - Auth0 allows creating multiple connections within one tenant, each connection stores users in a separate DB.
- 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).
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:
Define application name and app type as 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:
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:
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-ui
as 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: