Skip to main content

​
useSSOCallback

The useSSOCallback hook handles OAuth and SSO callbacks from external identity providers like Google, GitHub, and enterprise SAML providers.

​
Return Value

​
loading
boolean
Whether the callback is being processed
​
error
Error | null
Any error that occurred during processing
​
session
Session | null
The session after successful sign-in
​
redirectUri
string | null
The URI to redirect to after processing
​
processed
boolean
Whether the callback has been processed
​
signinAttempt
SigninAttempt | null
The current sign-in attempt state
import { useSSOCallback } from "@wacht/react-router";

export default function SSOCallbackPage() {
  const { loading, processed, session, redirectUri, error } = useSSOCallback();

  if (loading) {
    return <div>Processing sign-in...</div>;
  }

  if (error) {
    return <div>Error: {error.message}</div>;
  }

  if (processed && redirectUri) {
    return <div>Redirecting...</div>;
  }

  return <div>Sign-in complete!</div>;
}

​
Behavior

The hook:
  1. Automatically reads OAuth parameters from the URL (code, state, error)
  2. Validates the OAuth state parameter
  3. Determines the callback type (sign-in or social connect)
  4. Calls the appropriate backend endpoint
  5. Handles errors appropriately

​
Error Handling

If the callback includes an error parameter, it will be available in the error return value.

​
OAuth State

The state parameter encodes:
  • sign_in - Standard sign-in flow
  • connect_social - Connecting a social account

​
Examples

​
SSO Callback Page

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

export default function SSOCallbackPage() {
  const { loading, processed, redirectUri, error } = useSSOCallback();

  useEffect(() => {
    if (processed && redirectUri) {
      window.location.href = redirectUri;
    }
  }, [processed, redirectUri]);

  if (loading) return <div>Processing...</div>;
  if (error) return <div>Error: {error.message}</div>;

  return <div>Sign-in successful! Redirecting...</div>;
}

​
With Error Display

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

export default function SSOCallbackPage() {
  const { loading, error, processed } = useSSOCallback();

  if (loading) {
    return <Spinner />;
  }

  if (error) {
    return (
      <div>
        <h1>Authentication Error</h1>
        <p>{error.message}</p>
        <a href="/signin">Try Again</a>
      </div>
    );
  }

  if (processed) {
    return <div>Sign-in complete!</div>;
  }

  return <div>Unexpected state</div>;
}

​
URL Parameters

The hook reads these parameters from the URL:
​
code
string
OAuth authorization code
​
state
string
Base64-encoded OAuth state with action and signature
​
error
string
OAuth error code
​
error_description
string
OAuth error description