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 .

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

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.

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:

Google Login
Facebook Login
X (Twitter) Login
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),
      })
    })

PreviousInstallation NextAuthentication flow

Last updated 2 months ago

FutureverseProvider configuration

FutureverseAuthClient configuration

Custodial Auth Options

Default Configuration

Feature Flags

Auth client user state listeners

Example

`FutureverseProvider` configuration

`FutureverseAuthClient` configuration