Skip to main content

Anonymous users

Anonymous users allow for fingerprinting and collection of user data prior to login, you can read more about it in Concept: Anonymous Persons.

This guide will show you how to create anonymous users, collect data and upgrade anonymous users to regular users via sign-in or sign-up.

We'll also touch on how conditional rendering works for anonymous users with our helpers:

  • <LoggedIn>
  • <LoggedOut>
  • <Groups>

Create an anonymous user

In the React SDK anonymous user creation is done automatically, simply enable the feature via <SlashIDProvider>.

<SlashIDProvider oid="ORGANIZATION_ID" anonymousUsersEnabled>  <App /></SlashIDProvider>

As soon as the SDK is loaded an anonymousUser instance will be available via the useSlash() hook. This instance does not co-exist with the user instance exposed from the same hook: when there is an authenticated user, the anonymousUser will be undefined.

import { useSlashID, SlashIDLoaded } from "@slashid/slashid"function App() {  const { anonymousUser } = useSlashID()  return <SlashIDLoaded>{}</SlashIDLoaded>}

Loading an existing anonymous user

We've made it possible to persist an anonymous user between sessions and load that user instead of creating a new one. This is particularly useful for fingerprinting users who never sign-up, or implementing a sign-up conversion strategy that spans across multiple sessions.

From storage

If you've enabled token storage, anonymous users will be automatically loaded from storage when the SDK is loaded.

Remember to enable token storage via <SlashIDProvider>.

<SlashIDProvider  oid="ORGANIZATION_ID"  anonymousUsersEnabled  tokenStorage="localStorage"  // or  tokenStorage="cookie">  ...</SlashIDProvider>

From Direct-ID

Direct-ID works exactly the same as it does for regular users.

See Get Direct-ID value for a person, then add the Direct-ID string to URL in the challenges query param when loading the page.

Instead of creating a new anonymous user, the anonymous user contained in the Direct-ID will be loaded.


If you have an anonymous user token elsewhere as a result of specific design or storage constraint with your particular product, you can load an anonymous user by providing the token when loading the SDK.

<SlashIDProvider oid="ORGANIZATION_ID" anonymousUsersEnabled initialToken="YOUR_ANONYMOUS_USER_TOKEN">  ...</SlashIDProvider>

Data collection

User attributes

Reading & writing data via user attributes works the same as it does for regular users.

See Working with user attributes.

const { anonymousUser } = useSlashID()if (!anonymousUser) returnconst bucket = await anonymousUser.getBucket("end_user_read_write")await bucket.set("example", { foo: "bar" })

Later when the anonymous user is upgraded via sign-in or sign-up, these attributes can be transferred to the logged-in user.

Collecting GDPR consent works the same as it does for regular users.

See <GDPRConsentDialog>, the useGDPRConsent() hook, and Storing GDPR consent.

Later when the anonymous user is upgraded via sign-in or sign-up, these consents can be transferred to the logged-in user.

& sign-up


To understand the semantics of transferring data between anonymous users and signed-in users, see Concept: Anonymous Persons > Sign-in & Sign-up.

Sign-in & sign-up works the same as if the user is logged out, and anonymous users were disabled.

You can have the user authenticate using the <Form> component, with no additional anonymous user related config required.

import { Form } from "@slashid/slashid"function App() {  return <Form />}

If you prefer, you can also authenticate the user programmatically using the useSlashID() hook.

import { useSlashID } from '@slashid/react'import { Factor, Handle } from '@slashid/slashid'function App () {  const { logIn } = useSlashID()  const handle: Handle = ...  const factor: Factor = ...  return (    <button onClick={() => logIn({ handle, factor })}>      Log in    </Button>  )}

Once the authentication is successful the user property of useSlashID() will be replaced with the logged-in user.

Conditional rendering helpers

<LoggedIn> and <LoggedOut>

For the purpose of conditional rendering, anonymous users are considered as logged-out.

You can continue to use the <LoggedIn> rendering helper to display information which should only be available to actually logged-in, non-anonymous users.

import { LoggedIn, LoggedOut } from '@slashid/react'function App () {  return (    <LoggedIn>      This will not render    </LoggedIn>    <LoggedOut>      This will render    </LoggedOut>  )}


Anonymous users can be given groups, the <Groups> rendering helper works exactly the same as it does for regular users.

import { Groups } from "@slashid/react"function App() {  return <Groups belongsTo="trial">User in 'trial' group, but may or may not be anonymous</Groups>}

You can combine <Groups> with the <LoggedIn> and <LoggedOut> helpers to create more fine-tuned rendering scenarios.

import { Groups, LoggedIn, LoggedOut } from "@slashid/react"function App() {  return (    <>      <LoggedIn>        <Groups belongsTo="trial">User is NOT anonymous, and in 'trial' group</Groups>      </LoggedIn>      <LoggedOut>        <Groups belongsTo="trial">User IS anonymous, and in 'trial' group</Groups>      </LoggedOut>      <Groups belongsTo="trial">User in 'trial' group, but may or may not be anonymous</Groups>    </>  )}