Skip to main content

React SDK

Setup​

Prerequisites​

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

Your environment should have the following dependencies installed:

  • node.js >= 16
  • react >= 16
  • @slashid/slashid >= 3.12

Installation​

After signing up with /id, log in to npm and install the package:

npm install @slashid/react

The React SDK is open source and can be found on:

Basic Usage​

The primary way of communicating with the /id APIs is by using the 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: "example@email.com",
              },
              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.

Server side rendering (SSR)​

The React SDK is implemented with SSR in mind. It depends on the @slashid/slashid package and the SlashID class which is used to perform authentication client-side. The React SDK will defer initializing the SlashID until it reaches the browser - it will skip initializing it server side.

UI components exported from the React SDK will render in their initial state server side, and will update once SlashID is initialized in the browser.

If you want to render a component that depends on the SlashID instance being initialized, you can use the <SlashIDLoaded> component.

If you want to work with a User instance server side, please check the @slashid/slashid docs on server side rendering.