Skip to main content

Setup

Our React SDK is designed to be easy-to-use and flexible, creating a smooth developer experience by taking care of the common use cases. It is built on top of our core JavaScript SDK, which provides lower level access to /id entities.

This guide will help you set up the React SDK and get started with the implementation. Components and hooks are all SSR friendly, so the React SDK can be used with frameworks like Next.js.

Getting started​

Before you can start using the /id SDK and APIs, you need to register with /id and obtain an organization ID, which will be used to authenticate and authorize your API calls.

Installation​

Since the React SDK is built as a wrapper around the core SDK, it requires the core SDK to be installed too:

npm install @slashid/slashid @slashid/react

Provider setup​

While the core SDK is stateless, the React SDK will keep track of authentication state. To make use of the authentication state, wrap the application in a <SlashIDProvider>. After it initializes, this provider will re-render only when the authentication state changes. There should only be a single instance of this provider in the component tree at all times.

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>
);

Replace the ORGANIZATION_ID with the organization ID that was provided by /id when signing up.

Customizing the font​

The font used in React SDK by default is sans-serif. If you want to use a custom font, you need to:

  • include the font of your choice in your project - you can use Google Fonts, your own CDN or even self-host the font with a tool like Fontsource
  • set a --sid-font-family CSS variable on .sid-theme-root class
.sid-theme-root {
  --sid-font-family: Inter;
}

See the UI customization docs for reference.

Next.js​

The best place to render the <SlashIDProvider> is by wrapping the <Component> in pages/_app. This will make sure the provider does not mount again when a user navigates to another page.

import type { AppProps } from "next/app";
import { SlashIDProvider } from "@slashid/react";

export default function App({ Component, pageProps }: AppProps) {
  return (
    <SlashIDProvider oid="ORGANIZATION_ID">
      <Component {...pageProps} />
    </SlashIDProvider>
  );
}

You can check out our example Next.js app for more details.

Reference​