React – Sign In, Sign Up, and Sign Out

This guide shows how to trigger sign-in, sign-up, and sign-out flows in a React application using MonoCloud.

MonoCloud provides two ways to start authentication flows:

Components (<SignIn />, <SignUp />, <SignOut />) for declarative buttons
Hook actions (signIn, signOut from useAuth()) for imperative control

When to use which

Use the components when you want a ready-made button. Use the hook actions when you need to start a flow from your own handler or based on business logic.

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>

Components

Each component renders a <button> and accepts standard button attributes (such as className and disabled) alongside the authentication options.

<SignIn /> renders a button that starts the sign-in flow when clicked.

src/SignInButton.tsx

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

export function SignInButton() {
  return <SignIn>Sign in</SignIn>;
}

With a return URL

Pass returnUrl to control where the user lands after authentication completes.

tsx

<SignIn returnUrl="/dashboard">Sign in</SignIn>

Sending users to a specific authenticator

tsx

<SignIn authenticatorHint="google">Sign in with Google</SignIn>

<SignUp /> renders a button that starts the sign-up (registration) flow.

src/SignUpButton.tsx

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

export function SignUpButton() {
  return <SignUp>Create account</SignUp>;
}

Use this when you want to send users directly to registration instead of sign-in.

<SignOut />

<SignOut /> renders a button that signs the user out and redirects them to the configured post-logout URL.

src/SignOutButton.tsx

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

export function SignOutButton() {
  return <SignOut>Sign out</SignOut>;
}

Sign out of MonoCloud

By default the SDK ends the session at MonoCloud too (single sign-out). Pass federatedSignOut to make this explicit, or set it to false to only clear the local session.

tsx

<SignOut federatedSignOut>Sign out</SignOut>

Hook actions

useAuth() exposes signIn and signOut for imperative control. They accept the same options as the components.

src/Header.tsx

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

export function Header() {
  const { isAuthenticated, signIn, signOut } = useAuth();

  if (!isAuthenticated) {
    return <button onClick={() => signIn()}>Sign in</button>;
  }

  return <button onClick={() => signOut()}>Sign out</button>;
}

Sign In, Sign Up, and Sign Out

When to use which

Before you begin

Components

<SignIn />

<SignUp />

<SignOut />

Hook actions

Next steps