If you look at a website like Twitter, each user has their own unique URL with their username in it, like:
In a B2B product, like Amplitude, you’ll see the same pattern:
Instead of an individual user’s username, the path includes the name of the company and every employee of that company has access to it. We’ll look at how to do this in React using react-router and PropelAuth.
To get started, we’ll create a React application:
And we’ll install both react-router and PropelAuth’s React library
Both libraries require a top level provider, so let’s add those to our index.js
BrowserRouter manages our user’s URL history and RequiredAuthProvider manages our user’s authentication information. We’re using RequiredAuthProvider instead of AuthProvider which means if the user isn’t logged in, they are redirected to our login page. This means we never need to worry about the case where a user is not logged in.
Creating our application’s routes
We’ll have two routes. One base route which shows the user all the organizations they are a member of and one route which will display information specific to one organization.
:orgName is a path parameter, and we’ll see how we can access it’s value when we implement the ViewOrg component.
Next, we’ll build out our Home component:
orgHelper allows us to easily get all the organizations that the user is a member of.
If the user isn’t a member of any organizations, we can prompt them to create one:
Alternatively, we could always redirect them if we want to make sure all users have at least one organization.
If they are a member of some organizations, we can display them:
With PropelAuth’s hosted pages, our users can create organizations and manage their membership already, so all we have to do is read and display the information in our React app.
Checking organization membership
The only remaining component is ViewOrg. For a first version, what if we wrote it like this:
The good news is that if our users click on one of the links, we’ll see the right message:
The bad news is that if our users manually type in any organization name, they’ll get the same message, even if they aren’t a member of that organization:
We need to check to make sure the user is actually a member of that organization, or display an error. Luckily, this is pretty easy to do with our orgHelper from before:
A note on checking client-side vs server-side
Any check that runs in the browser should not be considered secure. In the above case, for example, a user could modify the orgHelper to always return an org and make it seem like they are a member of whichever org they like.
We prefer to check things like organization membership on the server, because the user doesn’t have control of the server.
If we were using Express, as an example, we can verify the user is a member of the organization like this:
But if we’re verifying access on the server, why did we also check in our React application? It’s because it provides a better user experience. It’s much better to tell the user they don’t have access immediately instead of waiting for a fetch to fail.
If you are building a B2B/multi-tenant application, you’ll want to have some dynamic way to know which organization your users are accessing at any point in time. With PropelAuth and react-router, you can set this up in minutes and go back to building the rest of your product.