Hooks

React hooks for React SDK reference for Crossmint authentication

useCrossmintAuth()

Access Crossmint authentication state and actions: login, logout, the current user, jwt, and auth status. Must be used within a CrossmintAuthProvider.

Returns

crossmintAuth · any

The underlying Crossmint auth client instance.

getUser · () => void

Fetch and refresh the current authenticated user.

jwt · string

Current JWT authentication token, if authenticated.

login · (defaultEmail: string | MouseEvent<Element, MouseEvent>) => void

Trigger the login flow. Optionally pass a default email.

loginMethods · LoginMethod[]

Configured login methods.

loginWithOAuth · (provider: OAuthProvider) => Promise<void>

Initiate a login flow with the specified OAuth provider (e.g. “google”, “twitter”).

logout · () => Promise<void>

Log the user out and clear the session.

status · AuthStatus

Authentication status: “logged-in” | “logged-out” | “in-progress” | “initializing”.

user · SDKExternalUser

The currently authenticated user object.

Usage

import { useCrossmintAuth } from "@crossmint/client-sdk-react-ui";

function LoginButton() {
    const { login, logout, user, status } = useCrossmintAuth();

    if (status === "logged-in") {
        return (
            <div>
                <p>Welcome, {user?.email}</p>
                <button onClick={logout}>Logout</button>
            </div>
        );
    }

    return <button onClick={() => login()}>Sign In</button>;
}