Futureverse Auth React

Provides a React authentication provider for Futureverse Auth.

Installation

NPM:

    npm install @futureverse/auth-react --save

    npm install wagmi [email protected] @tanstack/react-query

Yarn:

    yarn add @futureverse/auth-react
    yarn add wagmi [email protected] @tanstack/react-query

Usage

Config.ts

import { FutureverseAuthClient } from '@futureverse/auth-react';
import { createWagmiConfig } from '@futureverse/wagmi-connectors';
import { QueryClient } from '@tanstack/react-query';
import { mainnet, sepolia } from 'viem/chains';
import { cookieStorage, createStorage } from 'wagmi';

// Create your auth client
export const authClient = new FutureverseAuthClient({
  clientId: '<your-futureverse-client-id>',
  redirectUri: 'http://localhost:3000',
  signInFlow: 'redirect', // 'redirect' | 'popup'
  // Optional configuration
  authorizationURL: 'https://login.passonline.cloud', // Optional - defaults to production
  signerURL: 'https://signer.passonline.cloud', // Optional - defaults to production
  postLogoutRedirectUri: 'http://localhost:3000',
  hostWeb3SigningDomain: 'localhost:3000',
  chainId: 7672, // Optional - defaults to TRN Mainnet 
});

// Create query client
export const queryClient = new QueryClient();

Providers.tsx

// For NextJS App Router if using NextJS client
'use client';

import { FutureverseAuthProvider } from '@futureverse/auth-react';
import { AuthUiProvider } from '@futureverse/auth-ui';
import { QueryClientProvider } from '@tanstack/react-query';
import { authClient, queryClient, wagmiConfig } from './config';

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