Protected Component

The <Protected /> component lets you conditionally render UI based on the authentication state and group membership.

Use it for:

Navigation bars
Feature flags
Buttons and actions
Inline authorization checks

When to use <Protected />

You want to conditionally render UI based on authentication state or group membership
You don’t want automatic redirects
You need to perform authorization checks directly within UI

Before you begin

This guide assumes you’ve completed the React quickstart or the installation guide.

You should already have:

A Single Page App configured in MonoCloud
The @monocloud/auth-react SDK installed
Your app wrapped with <MonoCloudAuthProvider>

Basic usage

Wrap UI that should only render for authenticated users.

src/components/Header.tsx

import { Protected } from "@monocloud/auth-react";

export function Header() {
  return (
    <header>
      <Protected>
        <span>Welcome back</span>
      </Protected>
    </header>
  );
}

Behavior

Renders children if the user is authenticated
Renders nothing if the user is signed out
Renders nothing while the authentication state is loading
Does not redirect
Does not throw

Render fallback content

Use fallback to render alternate UI when the user is not authenticated.

src/components/Header.tsx

import { Protected, SignIn } from "@monocloud/auth-react";

export function Header() {
  return (
    <Protected fallback={<SignIn>Sign in</SignIn>}>
      <a href="/dashboard">Dashboard</a>
    </Protected>
  );
}

Restrict by group

You can restrict rendering to users in specific groups.

src/components/AdminOnly.tsx

import { Protected } from "@monocloud/auth-react";

export function AdminOnly() {
  return (
    <Protected groups={["admin"]}>
      <button>Delete user</button>
    </Protected>
  );
}

How it works

Renders children when the user is authenticated and belongs to any of the required groups
Renders nothing when the user is authenticated but does not belong to the required group
Renders nothing (or fallback, if provided) when the user is not authenticated

Handle access denied (Group authorization)

Use onGroupAccessDenied to render alternate UI when the user is authenticated but does not belong to the required group. The callback receives the authenticated user.

The fallback prop is only used when the user is not authenticated and is ignored during group authorization failures.

src/components/AdminPanel.tsx

import { Protected } from "@monocloud/auth-react";

export function AdminPanel() {
  return (
    <Protected
      groups={["admin"]}
      onGroupAccessDenied={(user) => (
        <p>User {user.email} does not have access.</p>
      )}
    >
      <section>Admin settings</section>
    </Protected>
  );
}

Enable group claims

To use group-based checks:

In the MonoCloud Dashboard, add groups to the application scopes
Request the scope on the provider:

src/main.tsx

<MonoCloudAuthProvider
  tenantDomain="https://<your-domain>"
  clientId="<your-client-id>"
  defaultAuthParams={{ scopes: "openid profile email groups" }}
>
  <App />
</MonoCloudAuthProvider>

After updating scopes, users must sign out and sign back in for the new claims to be included in their session.