useSession

Access and manage the current user session.

useSession

The useSession hook provides access to the current user session and methods for session management including switching organizations/workspaces and signing out.

Return Value

session · Session | null

The current session object

loading · boolean

Whether session data is loading

error · Error | null

Any error that occurred

refetch

Show Refetch session data from server

returns · Promise<void>

Resolves when session data is refetched

switchSignIn

Show Switch to a different sign-in (multi-session)

signinId · string

The sign-in ID to switch to

returns · Promise<void>

Resolves when the sign-in is switched

signOut

Show Sign out (all or specific session)

options · { signInId?: string; all?: boolean }

Optional sign-in ID or sign out from all sessions

returns · Promise<void>

Resolves when signed out

getToken

Show Get a session token (optionally for a specific token template)

tokenTemplate · string

Optional token template name

returns · Promise<string>

The session token

switchOrganization

Show Switch active organization

organizationId · string

The organization ID to switch to

returns · Promise<void>

Resolves when the organization is switched

switchWorkspace

Show Switch active workspace

workspaceId · string

The workspace ID to switch to

returns · Promise<void>

Resolves when the workspace is switched

exchangeTicket

Show Exchange an impersonation ticket

ticket · string

The ticket token to exchange

returns · Promise<Session>

The session after ticket exchange

Session Object

interface Session {
  signins: SigninAttempt[];
  active_signin: {
    id: string;
    user: {
      id: string;
      first_name: string;
      last_name: string;
      username?: string;
      primary_email_address: EmailAddress;
      profile_picture_url?: string;
      has_passkeys: boolean;
    };
    active_organization_membership_id?: string;
    active_workspace_membership_id?: string;
  };
}

Examples

Get Session Data

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

function UserInfo() {
  const { session } = useSession();
  const user = session?.active_signin?.user;

  return (
    <div>
      <p>Name: {user?.first_name} {user?.last_name}</p>
      <p>Email: {user?.primary_email_address?.email}</p>
    </div>
  );
}

Sign Out

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

function SignOutButton() {
  const { signOut } = useSession();

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

Switch Organization

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

function OrgSwitcher() {
  const { session, switchOrganization } = useSession();

  const handleSwitch = async (orgId: string) => {
    await switchOrganization(orgId);
  };

  return <button onClick={() => handleSwitch("org_123")}>
    Switch Organization
  </button>;
}

Get Bearer Token for API Requests

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

async function fetchWithAuth(url: string) {
  const { getToken } = useSession();
  const token = await getToken();

  return fetch(url, {
    headers: {
      Authorization: `Bearer ${token}`,
    },
  });
}

Related

• useSignIn - Sign-in management
• useSignUp - Sign-up management
• useUser - User profile management