Futureverse Auth React

Provides a React authentication provider for Futureverse Auth.

Installation

NPM:

    npm install @futureverse/auth-react --save

    npm install wagmi viem@2.x @tanstack/react-query

Yarn:

    yarn add @futureverse/auth-react
    yarn add wagmi viem@2.x @tanstack/react-query

Usage

Config.ts

import React, { PropsWithChildren } from 'react';
import { FutureverseAuthClient } from '@futureverse/auth-react';
import { FutureverseAuthProvider, FutureverseWagmiProvider, useFutureverseSigner } from '@futureverse/auth-react';
import { createWagmiConfig } from '@futureverse/auth-react/wagmi';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { cookieStorage, createStorage } from 'wagmi';

// Demo application example for React authentication provider
const clientId = '<your-futureverse-client-id>';
const walletConnectProjectId = '<your-wallet-connect-project-id>';
const xamanAPIKey = '<your-xaman-application->';

export const authClient = new FutureverseAuthClient({
  clientId,
  environment: 'production',
  redirectUri: '<your-app-redirect-endpoint>',
  postLogoutRedirectUri: '<your-app-post-logout-redirect-endpoint>',
});
const queryClient = new QueryClient();

export const getWagmiConfig = async () => {
  return createWagmiConfig({
    walletConnectProjectId,
    xamanAPIKey,
    authClient,
    // Optional if supporting SSR
    ssr: true,
    // Optional chains you wish to support
    chains: [mainnet, sepolia, polygonAmoy],
    // Optional if supporting SSR
    storage: createStorage({
      storage: cookieStorage,
    }),
  });
};

Providers.ts

// For NextJS App Router
'use client';

import {
  FutureverseAuthProvider,
  FutureverseWagmiProvider,
} from '@futureverse/auth-react';
import { QueryClientProvider } from '@tanstack/react-query';
import { State } from 'wagmi';
import { authClient, getWagmiConfig, queryClient } from './config';

export default function Providers({
  children,
  initialWagmiState,
}: {
  children: React.ReactNode;
  initialWagmiState?: State;
}) {
  return (
    <QueryClientProvider client={queryClient}>
      <FutureverseWagmiProvider
        getWagmiConfig={getWagmiConfig}
        initialState={initialWagmiState}
      >
        <FutureverseAuthProvider authClient={authClient}>
            {children}
        </FutureverseAuthProvider>
      </FutureverseWagmiProvider>
    </QueryClientProvider>
  );
}

Hooks

For the simplest sign in flow you can use the connectAndSignIn method which will attempt to connect a wallet client and sign directly into FuturePass. Alternatively we recommend using @futureverse/auth-ui to handle sign in and connectors.

import { useAuth, useConnector } from '@futureverse/auth-react';
const { signIn, signOutPass, userSession, authMethod } = useAuth();
...

const { connect, connectAndSignIn, disconnect } = useConnector();
...
// Connect and sign into FuturePass
connectAndSignIn('futureverseCustodialEmail', 'popup')
...


// Connecting Custodial wallet clients
connect('futureverseCustodialEmail');
connect('futureverseCustodialGoogle');
connect('futureverseCustodialFacebook');
connect('futureverseCustodialX');
connect('futureverseCustodialTikTok');

// Connecting Web3 wallet clients
connect('walletConnect');
connect('metaMaskSDK');
connect('coinbaseWalletSDK');
connect('xaman');