Documentation

Check out our developer docs for guides and API documentation. You can also check out the demo on CodeSandbox:

Setup

Prerequisites

Your organization needs to sign up with /id to get access to the core SDK and an organization ID.

Your environment should have the following dependencies installed:

• node.js => v16+
• react => v16+
• @slashid/slashid => v1.8+

Installation

After obtaining your organization ID, log in to npm and install the package:

npm install @slashid/react

Basic Usage

Primary way of communicating with the /id APIs is by using the provided useSlashID hook. In order to do so, your app needs to be wrapped in the SlashIDProvider. This provider requires you to pass in the organization ID you received from /id as the value of the oid prop.

import { SlashIDProvider } from "@slashid/react";
import React from "react";
import ReactDOM from "react-dom/client";

ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
  <React.StrictMode>
    <SlashIDProvider oid="ORGANIZATION_ID">
      <App />
    </SlashIDProvider>
  </React.StrictMode>
);

function App() {
    const { user, logIn } = useSlashID();

    return (
      <>
        <button
          onClick={() =>
            logIn({
              handle: {
                type: "email_address",
                value: "[email protected]",
              },
              factor: { method: "email_link" },
            })
          }
        >
          Log in
        </button>
        <div>
          <code>{user}</code>
        </div>
      </>
  );
}

Once the logIn function resolves, your component will render again with the newly logged-in user object.

DynamicFlow

DynamicFlow asks for an identifier first and then picks the factors to offer from the getFactors callback.

getFactors decides what happens next:

• Two or more factors show the picker.
• A single factor is submitted directly, skipping the picker.
• An empty array means there is no way to sign this person in. The user is told so and sent back to the identifier step.

If getFactors throws, the user is shown a generic error with a retry button that calls it again with the same identifier. The rejection itself is not forwarded — catch it inside getFactors if you need to report or log it.

One-step SSO (attemptSSO)

<DynamicFlow attemptSSO getFactors={() => [{ method: "email_link" }, { method: "password" }]} />

With attemptSSO, DynamicFlow submits the hook factor right after the identifier step for email identifiers. The organization's identify_user webhook picks the factor (for example a SAML or OIDC provider), and the flow continues with it. When nothing is resolved, getFactors is called with the same identifier as usual: a single factor is submitted directly, otherwise the picker is shown. Other identifier types never attempt SSO.