Authentication Forwarding Guide

The StreamLayer SDK provides a rich set of features.
Some features require user authentication, including points-based gamification, leaderboards, and invites.

The SDK supports multiple ways to authenticate users.
You can choose the approach that best fits your application.

Bypass Authentication

If your app already authenticates users using a token verification system,
you can forward that token to the StreamLayer SDK.

This allows your users to stay authenticated without needing to log in again inside the SDK.

Use StreamLayerLogin to forward credentials:

schema: Your authorization scheme (provided by StreamLayer)
token: Your authorization token

Example:

import { StreamLayerProvider } from '@streamlayer/react'
import { StreamLayerLogin } from '@streamlayer/react/auth'

<StreamLayerProvider {...providerProps}>
  {/* Place StreamLayerLogin anywhere in your app, but always inside StreamLayerProvider */}
  <StreamLayerLogin token={token} schema={schema} />
</StreamLayerProvider>

Anonymous Authentication

If you don’t use an authentication system,
you can enable anonymous authentication with a plugin.

Install the plugin:

npm install @streamlayer/sdk-web-anonymous-auth

Example usage:

import { StreamLayerProvider, useStreamLayer } from '@streamlayer/react'
import { anonymous } from '@streamlayer/sdk-web-anonymous-auth'

const plugins = new Set([anonymous])

const Login = () => {
  const sdk = useStreamLayer()

  useEffect(() => {
    sdk?.anonymousAuthorization()
  }, [sdk])

  return null
}

const App = () => (
  <StreamLayerProvider {...providerProps} plugins={plugins}>
    {/* Place Login anywhere in your app, but always inside StreamLayerProvider */}
    <Login />
  </StreamLayerProvider>
)