Say you've got a JAMStack app with authentication. Works great, loads fast, some pages need login.
That part's easy with something like useAuth, a manual integration with Auth0, or any number of 3rd party providers.
You have some code that asks "Is this user logged in?". Show them the page or some "Please Login" interface. There's a button somewhere that starts the login flow.
Something like this for example:
Now what if you want to add an area that only some users have access to? How would you do that?
User roles are the simplest approach to granular permissions. Everything else I've tried gets out of hand super fast.
Is this user a student or not? Access to course.
Does this user have module X? Access.
You can go as detailed as you want. Admin vs. not-admin is often the first and only role-based permission. Some apps eventually need more.
The more roles you add, the more complex it all gets. But trust me, roles are the only approach that scales at all.
A friend of mine lived through a horror story where it took an entire team and 3 years to build a robust permission system for a large app. 3 years 😳
Roles are way easier.
Hot off the presses, useAuth 0.7.0 adds a helper to check for user roles. Still just for Auth0, soon for others I promise.
Here's what you do:
And that's pretty much it, really.
isAuthorized method verifies your user is currently logged-in and that they have the
You'll need to add a rule to your Auth0 config as well. They don't send this info by default. Don't know why, I tried everything. 😔
And you have to make sure that namespace matches a config in the
<AuthProvider> that wraps your whole component tree. That's how
useAuth hooks into the React context and keeps track of everything.
No, I don't know why the namespace needs to be a full URL. The Auth0 documentation isn't clear on that part and I was unable to hunt down details on the forums.
Ah yes, adding roles to users. That part is a little tricky.
Here's an article I wrote on Connecting Gumroad to Auth0 for paywalled JAMStack apps ❤️
The TL;DR is that your checkout provider triggers your cloud function through a webhook and that adds a role to your user. You can also do it manually.
I use Gumroad, Stripe works too. I use AWS Lambda, a Netlify or Vercel cloud function should be fine.
Full details in the Connecting Gumroad to Auth0 for paywalled JAMStack apps article.
This is where life gets tricky. The more roles you have, the trickier. 😅
Somewhere in your code there's going to be a component like this.
Like I said, messy. And there's nothing you can do about it.
Might look a little better, if you bake it into your router and use individual checks on individual pages. But the complexity remains. Somewhere something has to check this stuff. 🤷♀️
Using different components for different content pages makes it easier – check authorization in the component itself. But I'm using some MDX shenanigans and the
<Content> component doesn't know what it's showing.
So a nice big truth table is what I gotta do.
Same principle my friend. You get the role for your user and you ask "Does this role have access to this page?"
Here's how it works 👇
And get thoughtful letters 💌 on mindsets, tactics, and technical skills for your career. Real lessons from building production software. No bullshit.
"Man, love your simple writing! Yours is the only newsletter I open and only blog that I give a fuck to read & scroll till the end. And wow always take away lessons with me. Inspiring! And very relatable. 👌"
Ready to Stop copy pasting D3 examples and create data visualizations of your own? Learn how to build scalable dataviz components your whole team can understand with React for Data Visualization
Curious about Serverless and the modern backend? Check out Serverless Handbook, modern backend for the frontend engineer.
Ready to learn how it all fits together and build a modern webapp from scratch? Learn how to launch a webapp and make your first 💰 on the side with ServerlessReact.Dev
By the way, just in case no one has told you it yet today: I love and appreciate you for who you are ❤️