Frontend Authorization
We’ve previously seen that we can use isLoggedIn on the frontend to display different information to logged in vs logged out users.
In this guide, we’ll see how we can display different information based on the organization the user is in, and their role/permissions within that organization.
React / Next.js
Javascript / Typescript
In our quick start guide, we created this component:
const YourApp = withAuthInfo((props) => {
const {redirectToLoginPage, redirectToSignupPage, redirectToAccountPage} = useRedirectFunctions()
const logoutFunction = useLogoutFunction()
// isLoggedIn and user are injected automatically from withAuthInfo
if (props.isLoggedIn) {
return <div>
<p>You are logged in as {props.user.email}</p>
<button onClick={redirectToAccountPage}>Account</button>
<button onClick={logoutFunction}>Logout</button>
</div>
} else {
return <div>
<p>You are not logged in</p>
<button onClick={redirectToLoginPage}>Login</button>
<button onClick={redirectToSignupPage}>Signup</button>
</div>
}
});
However, we didn’t cover the orgHelper or accessHelper props, which are also injected by withAuthInfo.
Checking to see if the user is in an organization
The orgHelper helps manage the current user’s organization information. Here’s an example where we make
sure the user is in a specified organization, or we display Not found.
const Example = withRequiredAuthInfo((props) => {
const {orgName} = // get org name from the path or localStorage
// This will get an org if the user is in that organization
const org = props.orgHelper.getOrgByName(orgName)
if (org) {
return <div>Welcome to {org.orgName}</div>
} else {
return <div>Not found</div>
}
})
Checking a user’s role within an organization
Similarly, the accessHelper helps us check role/permission information within the organization.
Let’s take the example above and add an additional check for the Admin role.
const Example = withRequiredAuthInfo(({orgHelper, accessHelper}) => {
const {orgName} = // get org name from the path or localStorage
const org = orgHelper.getOrgByName(orgName)
const isAdmin = accessHelper.isRole(org.orgId, "Admin")
if (org && isAdmin) {
return <div>You are an admin of {org.orgName}</div>
} else {
return <div>Not found</div>
}
})