Configuration

FutureverseProvider configuration

The core functionality is exposed through React Context, so you will need to wrap your application in a FutureverseProvider which has the following parameters:

Parameter	Description	Type
stage	This controls which set of constants will be available to use. If you have more than two stages in your project (e.g. staging or testing you can decide whether you’d like development or production constants).	'development', 'production'
Web3Provider	The Web3 Provider you’re using to interact with the blockchain in your app.	'wagmi'
authClient	An instance of FutureverseAuthClient with configured environment and any user state listeners.	See below for details.
requiredChains	An array of chains your application supports, required by WalletConnect. Defaults to ['ETHEREUM'] if left undefined. When picking chains, mainnet and testnet (Goerli or Porcini) are included.	['ETHEREUM'], ['TRN'], ['ETHEREUM', 'TRN']
walletConnectProjectId	Obtain it from WalletConnect Cloud, follow the instruction here.
isCustodialLoginEnabled	Set to true if you want to allow Custodial Accounts in your experience. Available only with version 1.1.0 and higher.	boolean
isXamanLoginEnabled	Set to true if you want to allow Xaman as an authentication option. Available only with version 1.1.6 and higher	boolean (defaults to true)
isTikTokLoginEnabled	Set to true if you want to allow TikTok as an authentication option. Available only with version 1.9.1 and higher	boolean (defaults to false)
isTwitterLoginEnabled	Set to true if you want to allow Twitter as an authentication option. Available only with version 1.9.1 and higher	boolean (defaults to false)
defaultAuthOptions	Use to pick whether Web3 (crypto wallets) or Web2 (email, SSO etc.) should be the default ones.	'web3' or 'web2'

FutureverseAuthClient configuration

FutureverseAuthClient has the following parameters:

Parameter	Description	Type
clientId	The client ID you obtained when integrating FuturePass Web SDK	string
redirectUri	The URI in your application that the successful authentication should redirect to. It’s the main URI you registered above.	string
userStore (optional)	This stores the user information in browser storage. Note: TTL for this store needs to be 7 days.	Storage
environment	An object containing the following properties:	object
chain	The TRN chain you want to interact with	mainnet / porcini
idpURL	The identity provider URL you want to interact with.	See below
signerURL	The signer URL you want to interact with.	See below

While the environment object is configurable and it can be especially useful if you’d like to point the app to a specific chain regardless of the stage you are running in, in most cases it’s best to use one of the provided environments from the @futureverse/experience-sdk package:

• sdk.ENVIRONMENTS.staging - for use with testnet and staging Custodial Signer and Identity Provider services. Use this for staging and development builds.

• sdk.ENVIRONMENTS.audit - for use only in specific cases as advised by the FuturePass team

• sdk.ENVIRONMENTS.production - for use with mainnet and production Custodial Signer and Identity Provider services. Use this for the production build.

💡 IMPORTANT: Staging environments may be volatile, and therefore, should never be relied upon for your production build. The services may become unavailable without warning and the data can be cleared. It is purely for development and testing purposes.

Ensure that you use the right client ID from the step “Register your experience” above. E.g. if you register your experience using the Development / Staging service and try to use it with your environment set to sdk.ENVIRONMENTS.production the service will respond with invalid client error.

Custodial Auth Options

The SDK offers four distinct Identity Provider (IDP) authentication options:

1. Google Login

2. Facebook Login

3. X (Twitter) Login

4. TikTok Login

Default Configuration

By default, the SDK is configured to enable only the Google and Facebook login options as long as the isCustodialLoginEnabled is set to true.

Feature Flags

To provide flexibility, the SDK includes two feature flags that allow developers to enable or disable the additional IDP options:

• isTikTokLoginEnabled: Controls the availability of TikTok login.

• isTwitterLoginEnabled: Controls the availability of X (Twitter) login.

Please note that isCustodialLoginEnabled also needs to be set to true when you want to enable X (Twitter) and TikTok login.

Auth client user state listeners

Additionally, you can register listeners for user state changes on the FutureverseAuthClient. The UserState can be:

• SignedIn

• SignedOut

• SignInFailed

One common use case is to disable silent authentication on SignedOut.

Example

import * as React from 'react'
import {
  FutureverseAuthClient,
  FutureverseProvider,
  TrnApiProvider,
  UserState,
} from '@futureverse/react'
import * as fvSdk from '@futureverse/experience-sdk'

export default function MyFutureverseExperience(): JSX.Element {
  const authClient = React.useMemo(() => {
    const client = new FutureverseAuthClient({
      clientId: <YOUR CLIENT ID>,
      environment: process.env.NODE_ENV === 'production'
					? fvSdk.ENVIRONMENTS.production
					: fvSdk.ENVIRONMENTS.development,
      redirectUri: <YOUR REDIRECT URI>,
			responseType: 'code' // required for Custodial Auth
    })

		// This is not necessary, just an example of adding an user state change listener
    client.addUserStateListener(userState => {
      if (userState === UserState.SignedOut) {
        sessionStorage.setItem(<YOUR SILENT AUTH STORAGE FLAG KEY>, 'disabled')
      }
    })
    return client
  }, [])

  return (
      <FutureverseProvider
          stage={
            config.public.environment.stage === 'production'
             ? 'production'
             : 'development'
          }
          authClient={authClient}
          Web3Provider="wagmi"
          walletConnectProjectId={config.public.walletConnectProjectId}
					isCustodialLoginEnabled={true | false} // required for Custodial Auth
          isTikTokLoginEnabled={true | false} // enable TikTok Login
          isTwitterLoginEnabled={true | false} // enable Twitter Login
        >
          <Component {...pageProps} />
        </FutureverseProvider>
  )
}

Experience can pass in custom cookie UserStore like following:

    const client = new FutureverseAuthClient({
      clientId: <YOUR CLIENT ID>,
      environment: process.env.NODE_ENV === 'production'
					? fvSdk.ENVIRONMENTS.production
					: fvSdk.ENVIRONMENTS.development,
      redirectUri: <YOUR REDIRECT URI>,
			responseType: 'code' // required for Custodial Auth,
			userStore: new CookieStorage({
        path: '/',
        sameSite: 'Strict',
        domain: (() => {
          return `.<YOUR HOSTNAME>`
        })(),
        expires: new Date(Date.now() + 7 * 24 * 60 * 60 * 1000),
      })
    })