Protected Component

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 existing UI
• You’re already inside a Client Component

Do not use <Protected /> to secure sensitive data. For enforcement, use protectPage(), protectApi(), or protect().

Before you begin

You should already have:

• A Next.js project
• Environment variables configured in .env.local
• Authentication middleware registered

Basic usage

Wrap UI that should only render for authenticated users.

"use client";

import { Protected } from "@monocloud/auth-nextjs/components/client";

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
• Does not redirect
• Does not throw

Render fallback content

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

"use client";

import { Protected } from "@monocloud/auth-nextjs/components/client";

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

Restrict by group

You can restrict rendering to users in specific groups.

"use client";

import { Protected } from "@monocloud/auth-nextjs/components/client";

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) if 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 fallback prop is only used when the user is not authenticated and is ignored during group authorization failures.

'use client';

import { Protected } from '@monocloud/auth-nextjs/components/client';

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

Next steps

Continue securing your application:

• App Router

  • Protect server components
  • Protect client components
  • Protect API routes
  • Protect server actions

• Pages Router

  • Protect server rendered pages
  • Protect client rendered pages
  • Protect API routes