Protect a Page and Route

This guide shows the core pattern you will use in a real application:

protect a frontend page with auth state
protect a backend route with role checks
use the admin dashboard to change a user’s role

The specific example is a small /chat page, but the pattern applies to any protected product feature.

What You Are Building

End Result

a protected /chat frontend route - a protected backend /chat endpoint - role-based access using the team role

Step 1: Protect The Frontend Route

In your frontend app, add a new /chat route and render it inside the authenticated application shell.

The key idea is:

use AuthProvider at the app boundary
use useAuth() inside the page
gate the page based on isAuthenticated and role data

If you want the React package context first, see React SDK.

Step 2: Require A Role In The UI

Inside the page, check the current user’s roles.

Example pattern:

const { isAuthenticated, hasScopedRole } = useAuth()
const hasAccess = hasScopedRole('team')

Use that to:

block unauthenticated access
show a “missing role” state when the user is signed in but not authorized
render the protected UI only when the required role is present

Step 3: Protect The Backend Route

Your backend still needs its own authorization boundary.

Typical shape in an Express app:

app.post('/chat', requireAuth({ cookieSecret }), requireRole('team'), (req, res) => {
  const { message } = req.body

  res.json({
    reply: `Echo: ${message}`,
  })
})

That keeps authorization explicit on the server even if the frontend also hides the feature.

If you want the package-level backend view, see Server SDKs.

Step 4: Test The Denied State

With a normal authenticated user who does not have team:

sign in
open /chat
confirm that the page stays blocked or limited

Chat example page with restricted access — The route is authenticated, but the role is still missing

Step 5: Grant The Role In The Admin UI

Then:

select the user
edit the user record
add the team role
sign out and sign back in as that user

Admin portal user edit modal — Roles can be updated from the dashboard

Step 6: Test The Allowed State

After the role is present:

sign back in
open /chat
confirm the protected UI renders
submit a request to the backend route

Chat example page with access granted — The protected page is available once the role is present

Key Takeaway

The pattern is always the same:

auth state on the frontend
role checks in the UI where helpful
authorization enforcement on the backend
role management through explicit user/admin flows

Protect a Page and Route