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>{anonymousUser.id}</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.

Other​

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-in & sign-up​

info

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

<Groups>​

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>    </>  )}