Skip to main content

​
<NavigateToSignIn />

The <NavigateToSignIn /> component is a functional utility designed exclusively for routing. It does not render any visible user interface or DOM elements. The exact moment this component is mounted into your React tree, it executes an immediate, client-side redirect, shuttling the user to the specific Sign In page configured in your deployment settings.

​
Import

import { NavigateToSignIn } from "@wacht/react-router";

​
Usage

This utility is exceptionally useful as a “fallback” return value inside deeply nested layout boundaries, or when you need to forcibly clear an invalid session without writing tedious, imperative useEffect routing logic. 
import { NavigateToSignIn, useSession } from "@wacht/react-router";

export function GuardedAdminDashboard({ children }: { children: React.ReactNode }) {
  const { loading, session } = useSession();

  // 1. Wait for the SDK to parse the HTTP cookies natively
  if (loading) {
    return <div className="animate-pulse h-screen w-full bg-zinc-100 flex items-center justify-center">Loading...</div>;
  }
  
  // 2. If the user isn't authenticated, trigger the redirect instantly 
  // simply by returning this component instead of the page markup.
  if (!session) {
    return <NavigateToSignIn />;
  }

  // 3. User is authenticated, safe to render the dashboard
  return <div className="dashboard-layout">{children}</div>;
}