Deep Linking Guide

Overview

Handles the deep link behavior in the application. Users can create an invite link and send it to their friends. When the friend opens the link, the application will process the login and redirect to the SDK overlay, where the welcome screen is displayed. This behavior is handled by the onDeepLinkHandled prop.

For more information, see the 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 a page is opened through a deep link and we detect it - we will invoke the callback. At this point you should evaluate where the user is, auth state, perform login in if necessary and redirect to the correct page/activate correct SDK event.

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

const deepLinkHandledCallback = ({ sldl_uid, sldl_eid, sldl_e_eid }: DeepLinkUrlParams) => {
  // if user is not logged in
  if (!user) {
    // perform login
    // redirect to the correct page
  } else {
    // redirect to the correct page
  }
}

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

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 overlay, 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>
...

Updated 6 months ago