Guides
Start typing to search…

Deep Linking Guide

Handle deep link behavior in your web application. Process invite links, manage authentication, and redirect users to the correct SDK event using the onDeepLinkHandled callback.

Overview

Handle deep-link behavior in your app. Users create an invite link and share it with friends. When a recipient opens the link, the app processes login and redirects to the SDK StreamLayer Element, where the welcome screen appears. The onDeepLinkHandled prop manages this behavior.

For details, see Deep Link.

type DeepLinkUrlParams = {
  // StreamLayer user ID
  sldl_uid?: string
  // StreamLayer event ID
  sldl_eid?: string
  // Masters event ID
  sldl_e_eid?: string
}
type OnDeepLinkHandled = ({ sldl_uid, sldl_eid, sldl_e_eid }: DeepLinkUrlParams) => void

How it works

When the app opens from a deep link and the SDK detects it, the SDK invokes the callback. At that point, evaluate the current view and authentication state, perform login if needed, and redirect to the appropriate page or activate the correct SDK event.

import { StreamLayerProvider, StreamLayerSDKReact, StreamLayerSDKPoints } from '@streamlayer/react'

const deepLinkHandledCallback = ({ sldl_uid, sldl_eid, sldl_e_eid }: DeepLinkUrlParams) => {
  // If the user isn't logged in
  if (!user) {
    // Perform login
    // Redirect to the appropriate page
  } else {
    // Redirect to the appropriate page
  }
}

...
<StreamLayerProvider {...providerProps} onDeepLinkHandled={deepLinkHandledCallback}>
  {/* other components */}
</StreamLayerProvider>
...

Related

Updated 21 days ago