Read Authentication State

This guide shows how to read authentication and authorization state in a React application using the useAuth() hook from the MonoCloud SDK.

These helpers are useful when you want to conditionally render UI, check permissions, or call APIs.

When to use the hook

Use useAuth() when you need information about the current session inside a component.

Typical use cases include:

Showing different UI for signed-in vs signed-out users
Reading the current user profile
Conditionally enabling features

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>

useAuth() can only be called from a component rendered inside <MonoCloudAuthProvider>. Calling it outside the provider throws a MonoCloudJsError.

The `useAuth()` hook

useAuth() returns the current authentication state along with the available actions.

src/Profile.tsx

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

export default function Profile() {
  const { isLoading, isAuthenticated, user } = useAuth();

  if (isLoading) {
    return <p>Loading...</p>;
  }

  if (!isAuthenticated) {
    return <p>Please sign in</p>;
  }

  return <p>Hi {user?.email}</p>;
}

State

Value	Description
`isLoading`	`true` while the authentication state is still being resolved
`isAuthenticated`	`true` when a session exists
`user`	The authenticated user's profile
`session`	The full session, including the user and tokens
`error`	The error encountered during authentication, if any

Actions

Action	Description
`signIn`	Starts the sign-in flow
`signOut`	Starts the sign-out flow
`signInSilent`	Restores the session silently via a hidden iframe (`prompt=none`)
`refreshSession`	Renews the tokens using the Refresh Token Grant
`refetchUserInfo`	Refetches the profile from the UserInfo endpoint
`getTokens`	Returns the active tokens, refreshing them if expired

Read the current user

The user object contains the profile claims returned by MonoCloud.

src/Profile.tsx

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

export default function Profile() {
  const { isAuthenticated, user } = useAuth();

  if (!isAuthenticated) {
    return null;
  }

  return (
    <div>
      <p>{user?.email}</p>
      <pre>{JSON.stringify(user, null, 2)}</pre>
    </div>
  );
}

Read the full session

The session includes the user and the tokens issued for the current session.

tsx

const { session } = useAuth();

console.log(session?.user.sub);

Access the underlying client

For advanced, lower-level operations that useAuth() does not cover, use the useClient() hook. It returns the underlying MonoCloudWebJSClient created by the provider - for example, to revoke a token via client.oidcClient.

Most applications only need useAuth(). Reach for useClient() only when you need an operation it does not expose.

src/RevokeButton.tsx

import { useAuth, useClient } from "@monocloud/auth-react";

export default function RevokeButton() {
  const { getTokens } = useAuth();
  const client = useClient();

  const revoke = async () => {
    const tokens = await getTokens();
    await client.oidcClient.revokeToken(tokens.accessToken);
  };

  return <button onClick={() => revoke()}>Revoke token</button>;
}

Like useAuth(), useClient() must be called from a component rendered inside <MonoCloudAuthProvider>, otherwise it throws a MonoCloudJsError.