@futureverse/auth-react

React provider + hooks (<FutureverseAuthProvider>, useAuth()) on top of @futureverse/auth.

Futureverse winddown

Futureverse (the publisher of @futureverse/*) is in winddown. The hosted services this package talked to (auth.futureverse.app, pass-api.futureverse.app, signer.futureverse.app) have been re-hosted by gen3labs at futurepass.gen3labs.tech (issuer) and fpsigner.gen3labs.tech (signer). For new projects, switch to the matching @gen3labs/* package — drop-in surface, default URLs already point at the gen3labs infra. The Asset Register API has no community replacement yet; see the Migration playbook for the per-package map.

Version

5.0.4

Published

2025-09-16

License

n/a

Status

fv-winddown

npm

https://www.npmjs.com/package/@futureverse/auth-react

Types

./index.d.ts

Maintainers

admin-futureverse, garethdainesnpm, jcsanpedro

Depends on

@futureverse/auth · @futureverse/signer

Peer deps

viem · react · wagmi · @tanstack/react-query

Recent versions

4.2.2 · 4.3.0 · 4.4.0 · 5.0.0 · 5.0.1 · 5.0.2 · 5.0.3 · 5.0.4

## Technical notes

Why use it

You are building React and want context-based access to the auth session and a clean signIn()/signOut() surface.

When to skip it

Non-React stack (Vue, Svelte, plain JS) — drop down to @futureverse/auth directly.

Pairs with

• @futureverse/auth — core
• @futureverse/auth-ui — rendered components
• @futureverse/transact-react — tx submission hooks

Alternatives

• @gen3labs/futurepass-auth-react (fork-active) — community fork

Example

import { FutureverseAuthProvider, useAuth } from '@futureverse/auth-react';

export default function App() {
  return (
    <FutureverseAuthProvider clientId="..." environment="production">
      <Inner />
    </FutureverseAuthProvider>
  );
}
function Inner() {
  const { isAuthenticated, signIn, userSession } = useAuth();
  return isAuthenticated
    ? <p>Hi {userSession?.eoa}</p>
    : <button onClick={signIn}>Sign in</button>;
}

Gotchas

• environment switches issuer URLs — staging points at pass-api.futureverse.cloud.

Upstream README

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 { 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>
  );
}

Source: https://www.npmjs.com/package/@futureverse/auth-react · captured 2026-05-02