Next.js – Sign In, Sign Out, and Redirects

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

MonoCloud provides two ways to start authentication flows:

Client components for declarative UI
Redirect helpers for imperative navigation (server-only)

Use these helpers when you want to explicitly control authentication flows rather than relying on automatic redirects from protected routes.

When to use these helpers

Use these APIs when:

You need manual control over the authentication flow
You want explicit sign-in or sign-out buttons
You want to redirect users based on business logic
You’re building custom onboarding or logout flows

Auth Action Components & Redirects

MonoCloud provides UI components for common authentication actions such as signing in, signing out, and signing up.

These components:

<SignIn />, <SignUp />, and <SignOut /> can be rendered from both Server Components and Client Components
<RedirectToSignIn /> is a Client Component only
Perform redirects automatically
Require no event handlers
Work in both App Router and Pages Router

<SignIn /> renders a clickable element that redirects the user to sign in.

src/components/sign-in-button.tsx

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

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

With a return URL

tsx

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

Behavior

Redirects the user to MonoCloud-hosted sign-in page
Automatically returns the user to the current page (or returnUrl)
Respects middleware and return URL configuration

<SignUp /> redirects users to the MonoCloud-hosted sign-up flow.

src/components/sign-up-button.tsx

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

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 /> signs the user out and redirects them to the configured post-logout URL.

src/components/sign-out-button.tsx

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

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

Behavior

Clears the MonoCloud session
Redirects the user back to your application
Respects configured sign-out URLs

<RedirectToSignIn />

<RedirectToSignIn /> immediately redirects the user to the MonoCloud-hosted sign-in page when rendered.

<RedirectToSignIn /> is a Client Component only and must be rendered from a file with "use client".

Use this when:

You want to redirect as part of render logic
You don’t need a clickable button
You’re handling access-denied or empty states

src/components/require-auth.tsx

"use client";

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

export function RequireAuth() {
  return <RedirectToSignIn />;
}

With a return URL

tsx

<RedirectToSignIn returnUrl="/dashboard" />

Behavior

Redirects immediately when rendered
Does not render UI
Does not throw
Does not require middleware checks

Imperative redirects (App Router only, server-side)

For full control over navigation, use the redirect helpers provided by the SDK.

These helpers work only in the Next.js App Router and can be used from:

Server Components
Server Actions
API routes

redirectToSignIn()

Redirects the user to the MonoCloud sign-in flow.

This helper is only supported in the Next.js App Router.

tsx

await redirectToSignIn();

Common use cases

Conditional redirects
Server Actions
Optional authentication flows

redirectToSignOut()

Signs the user out and redirects them back to your app.

This helper is only supported in the Next.js App Router.

tsx

await redirectToSignOut();

Use this when sign-out is triggered from logic instead of UI.

Customize the return URL

Both helpers accept options to override where the user is sent after authentication.

tsx

await redirectToSignIn({
  returnUrl: "/dashboard",
});

tsx

await redirectToSignOut({
  returnUrl: "/dashboard",
});

Redirecting from a Server Action

src/app/actions.ts

"use server";

import { redirectToSignIn } from "@monocloud/auth-nextjs";

export async function startSignIn() {
  await redirectToSignIn({
    returnUrl: "/dashboard",
  });
}

The Server Action does not complete—the redirect happens immediately.

When to use components vs redirect helpers

Use case	Recommended
Clickable sign-in button	`<SignIn />`
Clickable sign-up button	`<SignUp />`
Clickable sign-out button	`<SignOut />`
Immediate redirect on render	`<RedirectToSignIn />`
Server-side redirect	`redirectToSignIn()`, `redirectToSignOut()`

Next steps

Continue securing your application:

App Router
Pages Router