Tesseral React SDK

Tesseral’s React SDK lets you add B2B auth support to your clientside React app.

Getting Started

Install the Tesseral React SDK by running:

$
npm install @tesseral/tesseral-react

Then, in your React application, add a TesseralProvider at the root of your React application:

1
import { createRoot } from "react-dom/client";
2
import { TesseralProvider } from "@tesseral/tesseral-react";
3
4
const root = createRoot(...);
5
root.render(
6
  // see below for how to get your publishableKey
7
  <TesseralProvider publishableKey="publishable_key_...">
8
    <App />
9
  </TesseralProvider>
10
);

Replace publishable_key_... with your project’s Publishable Key. You can find it in the API Keys Settings of the Tesseral Console.

Once you’ve added TesseralProvider, all visitors to your React app will automatically be authenticated. Unauthenticated visitors are redirected to a Tesseral-hosted login flow before being redirected back to your application.

Accessing details about the authenticated user

The Tesseral React SDK makes information about your authenticated user available through a set of React hooks.

Tesseral’s React SDK hooks will throw an error if used outside of a child component of TesseralProvider.

useUser

To get the current logged-in User, call useUser:

1
import { useUser } from "@tesseral/tesseral-react";
2
3
const Example = () => {
4
  const { id, email } = useUser();
5
6
  return <h1>Your verified email is {email}, and your ID is {id}!</h1>;
7
}

useOrganization

To get the Organization that the User works for, call useOrganization:

1
import { useOrganization } from "@tesseral/tesseral-react";
2
3
const Example = () => {
4
  const { id, displayName } = useOrganization();
5
6
  return <h1>You work for {displayName} (org ID: {id})!</h1>;
7
}

useLogout

To force the current User to log out, call the callback returned from useLogout:

1
import { useLogout } from "@tesseral/tesseral-react";
2
3
const Example = () => {
4
    const logout = useLogout();
5
6
    return <button onClick={logout}>Log out</button>;
7
}

useUserSettingsUrl

Tesseral automatically provides a self-serve user settings UI to handle tasks like changing emails, resetting passwords, and configuring multi-factor authentication.

You can get a link to that UI using useUserSettingsUrl:

1
import { useUserSettingsUrl } from "@tesseral/tesseral-react";
2
3
const Example = () => {
4
  const userSettingsUrl = useUserSettingsUrl();
5
6
  return <a href={userSettingsUrl}>User Settings</a>;
7
}

useOrganizationSettingsUrl

Tesseral automatically provides a self-serve organization settings UI to handle tasks like managing collaborators, creating and revoking user invites, and customizing login methods.

You can get a link to that UI using useOrganizationSettingsUrl:

1
import { useOrganizationSettingsUrl } from "@tesseral/tesseral-react";
2
3
const Example = () => {
4
  const organizationSettingsUrl = useOrganizationSettingsUrl();
5
6
  return <a href={organizationSettingsUrl}>Organization Settings</a>;
7
}

useAccessToken

To directly access the User’s access token, call useAccessToken:

1
import { useAccessToken } from "@tesseral/tesseral-react";
2
3
const Example = () => {
4
  // returns an access token beginning with "eyJ..."
5
  const accessToken = useAccessToken();
6
  // do something with accessToken...
7
}

Advanced Usage

Tesseral provides polished, self-serve UIs for user and organization settings on your behalf, which you can redirect your users to using useUserSettingsUrl and useOrganizationSettingsUrl.

Everything those prebuilt UIs do, you can also do from your own clientside code. Doing so is an advanced feature, and is not required.

For details on how to do this, see the documentation for the Tesseral Frontend API.