Logging in and out

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 show you how you can log your users in and out of your apps. We'll start where we left off with the app in the setup guide.

Configuring the provider

By default the <SlashIDProvider> will keep the session state in memory, so the user token will persist as long as we perform client side navigation. In order to keep the token around, we'll set the tokenStorage prop value to localStorage:

<SlashIDProvider oid="ORGANIZATION_ID" tokenStorage="localStorage">
  <App />
</SlashIDProvider>

Keeping track of user state

With this setup, the <App> component and all other components rendered as children of <App> will now be able to consume the <SlashIDProvider> with the useSlashID() hook.

import { useSlashID } from "@slashid/react"

function App() {
  const { user } = useSlashID()

  return <p>{user ? "Logged in" : "Logged out"}</p>
}

The value of user variable will either be undefined or an instance of the User class.

Logging in

Let's create a login form following the same approach. We'll use the same hook to get the logIn function.

function LoginForm() {
  const { user, logIn } = useSlashID()
  const [email, setEmail] = useState("")

  return (
    <form
      onSubmit={(e) => {
        e.preventDefault()
        logIn({
          handle: {
            type: "email_address",
            value: "example@email.com",
          },
          factor: { method: "email_link" },
        })
      }}
    >
      <input value={email} onChange={(e) => setEmail(e.target.value)} />
      <button type="submit">Log in</button>
      <p>{user ? "Logged in" : "Logged out"}</p>
    </form>
  )
}

Once logIn resolves, this component will render again with the user variable now having a value. To learn more about the available authentication methods, please check SlashID.id().

Logging out

In order to log out we'll call the logOut function.

function LogoutButton() {
  const { logOut } = useSlashID()

  return <button onClick={logOut}>Log out</button>
}

Now all the components in the app that consume the useSlashID hook will render again, with the user variable again having the value of undefined.

Control Components

The React SDK also includes our first set of control components - <LoggedIn> and <LoggedOut>. These components will help you conditionally render the UI based on the SDK readiness and the user authentication states. Let's replace the ternary operator with these components.

function LoginForm() {
  const { logIn } = useSlashID()
  const [email, setEmail] = useState("")

  return (
    <form
      onSubmit={(e) => {
        e.preventDefault()
        logIn({
          handle: {
            type: "email_address",
            value: "example@email.com",
          },
          factor: { method: "email_link" },
        })
      }}
    >
      <input value={email} onChange={(e) => setEmail(e.target.value)} />
      <LoggedOut>
        <button type="submit">Log in</button>
      </LoggedOut>
      <LoggedIn>
        <LogoutButton />
      </LoggedIn>
    </form>
  )
}