Skip to main content

​
<SSOCallback />

The <SSOCallback /> component is the crucial final puzzle piece of any social OAuth (Google, GitHub) or enterprise SAML Single Sign-On flow. When a user initiates a login via a third-party Identity Provider (IdP), they are temporarily redirected away from your application to authenticate. Upon success, that provider deflects them back to a specific route in your application, appending a highly sensitive, short-lived authorization code into the URL parameters. This component’s entire job is to capture that temporary code, cryptographically verify it directly with the Wacht backend, and securely establish the browser session.

​
Import

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

​
Usage

You must mount this component on the exact, dedicated route that you have configured as your “OAuth Callback URI” within the Wacht Dashboard. For the vast majority of applications, this is simply /sso-callback. While the component is actively processing the network requests (which typically takes ~500ms depending on network latency), it automatically renders a sleek, centered loading spinner to assure the user that work is happening. 
import { SSOCallback } from "@wacht/react-router";

export default function CallbackRoute() {
  return (
    <div className="min-h-screen flex items-center justify-center bg-zinc-50">
      {/* 
        This component natively parses the ?code= or ?state= URL params.
        No manual useEffect data fetching is required.
      */}
      <SSOCallback />
    </div>
  );
}

​
Internal Mechanism

It is helpful to understand what is happening under the hood when this component mounts on the client:
  1. Parameter Extraction: It parses the ?code=, ?state=, or ?token= parameters cleanly from the window.location.
  2. Key Exchange: It initiates a secure POST request to the Wacht Frontend API to exchange the short-lived credential for a long-lived JWT session token.
  3. Session Establishment: It provisions a first-party HTTP cookie locally.
  4. Deflection: It executes a seamless client-side redirect back to the application dashboard (or wherever the ?redirect_uri= pointed).