After setting up Corbado in your React application, you now want to access authentication state and you want to use Corbado’s SDK to trigger certain authentication related functions (e.g. a logout). All of these functions and some basic state are exposed by the useCorbado() hook.

It gives you access to the following state:

StateTypeDescription
isAuthenticatedbooleanIndicates if the user is logged in.
loadingbooleanIf true, the SDK is still in a loading state. You should then not yet make use of the other states but wait until loading = false.
shortSessionstring | undefinedA JWT that proves that the user is authenticated. It can be used to make calls to your backend and thus should be included as an authorization header in the requests to such a backend. A value of undefined indicates that the user is not logged in.
userSessionUser | undefinedAn object that holds basic information about the user. A value of undefined indicates that the user is not logged in.

This is a very simple example that shows how you can use this hook to render a page that depends on the user’s authentication state.

HomePage.tsx
import { useCorbado } from "@corbado/react";
function HomePage() {
    const { loading, isAuthenticated, logout } = useCorbado();
    if (loading) {
        return <p>Loading...</p>;
    }

    if (!isAuthenticated) {
        return <p>You are not logged in.</p>;
    }

    const onLogout = async () => {
        await logout();
        //post logout functionalities can be performed here
    };

    return (
        <>
            <p>You are logged in.</p>
            <button onClick={() => void onLogout()}>Logout</button>
        </>
    );
}

Additionally, you can use it to trigger the following operations:

NameDescription
getFullUserGet the complete user object. In addition to the user state from above this gives you access to a user’s login identifiers.
getPasskeysGet all passkeys that are available for the current user.
appendPasskeyCreates a new passkey for an already authenticated user. This only works if the user has not already set up another passkey for the same device.
deletePasskeyDelete a passkey for the current user.
logoutLogs the user out of your application and cleans all local authentication state.

Note:

  • PasskeyList UI already makes use of getPasskeys, appendPasskey and deletePasskey to provide a passkey management interface.
  • Only if you want to build your custom UI components there is a need to make use of these operations yourself.
SetupSetup