@futureverse/auth-react-native

React Native + Expo provider that wraps the OIDC flow with platform-native session storage.

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

1.1.2

Published

2025-09-16

License

n/a

Status

fv-winddown

npm

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

Types

./index.esm.d.ts

Maintainers

admin-futureverse, garethdainesnpm, jcsanpedro

Depends on

wagmi · expo-font · expo-linking · @noble/hashes · @polkadot/api · @babel/runtime · oidc-client-ts · @polkadot/types · react-native-svg · @futureverse/auth · react-native-modal · react-native-keychain · @futureverse/signer-core · react-native-quick-crypto · react-native-url-polyfill · react-native-safe-area-context · @reown/appkit-wagmi-react-native · react-native-inappbrowser-reborn

Peer deps

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

Recent versions

0.1.7-beta.3 · 1.0.1 · 0.1.7-beta.4 · 1.0.2 · 0.1.7-beta.5 · 1.1.0 · 1.1.1 · 1.1.2

## Technical notes

Why use it

You ship a mobile app (RN or Expo) and want FuturePass auth without re-implementing the OAuth flow.

When to skip it

Web-only stack.

Pairs with

• @futureverse/auth — core

Gotchas

• Requires expo-auth-session or a configured deep-link scheme on bare RN.

Upstream README

Futureverse Auth React Native

Provides React Native authentication components and providers for Futureverse Auth. This library enables seamless Pass authentication integration in React Native and Expo applications.

Installation

This library supports Expo SDK 52:

npx create-expo-app my-app-name --template default@sdk-52

Install the package:

npm install @futureverse/auth-react-native

Required dependencies:

npm install @tanstack/react-query viem react-native-svg react-native-quick-crypto @walletconnect/react-native-compat react-native-get-random-values @react-native-async-storage/async-storage @react-native-community/netinfo react-native-keychain react-native-inappbrowser-reborn

If using android, install:

npm install expo-gradle-ext-vars

Then update your app.json file to ensure compatible in-app browser versions:

"plugins": [ ["expo-gradle-ext-vars", { "androidXBrowser": "1.6.0" }] ] }

Basic Usage

Setup Web3 Config

// config/wagmiUtils.ts

import { CreateConfigParameters } from 'wagmi';

import { arbitrum, mainnet, polygon, avalanche, bsc, optimism, gnosis, zkSync, zora, base, celo, aurora, sepolia } from '@wagmi/core/chains';

export const chains: CreateConfigParameters['chains'] = [mainnet, polygon, avalanche, arbitrum, bsc, optimism, gnosis, zkSync, zora, base, celo, aurora, sepolia];

// config/web3Config.ts

import { mainnet } from '@wagmi/core/chains';
import { defaultWagmiConfig } from '@reown/appkit-wagmi-react-native';
import { AppKitOptions } from '@reown/appkit-wagmi-react-native/lib/typescript/client';
import { supportedWallets, setupAppKit } from '@futureverse/auth-react-native';
import { chains } from './wagmiUtils';

export let appKitOptions: AppKitOptions;

export function configWeb3() {
  configAppKit();
  setupAppKit(appKitOptions);
}

function configAppKit() {
  const metadata = {
    name: 'wagmi-project-name',
    description: 'wagmi-project-description',
    url: 'project-url',
    icons: ['wagmi-project-icon'],
    redirect: {
      native: 'wagmi-project-native-redirect',
      universal: 'wagmi-project-universal-redirect',
      linkMode: true,
    },
  };

  const wagmiConfig = defaultWagmiConfig({
    chains,
    projectId: 'wagmi-project-id',
    metadata,
  });

  appKitOptions = {
    projectId: 'wagmi-project-id',
    wagmiConfig,
    featuredWalletIds: [supportedWallets.metamask], // Optional
    defaultChain: mainnet, // Optional
    enableAnalytics: false, // Optional - defaults to your Cloud configuration,
    metadata,
  };
}

Setup Providers

import React from 'react';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { AuthReactNativeClient, AuthUiProvider, DefaultTheme } from '@futureverse/auth-react-native';
import { appKitOptions, configWeb3 } from '@/config/web3config';

configWeb3(); // configure web3 before creating and using auth client

const queryClient = new QueryClient();

const authClient = new AuthReactNativeClient({
  clientId: 'your-futureverse-client-id',
  postSignInredirectUri: 'your-app-redirect-uri',
  authorizationURL: 'your-authorization-url',
  hostWeb3SigningDomain: '',
});

const themeConfig = {
  colors: {
    ...DefaultTheme.colors,
    primaryBackground: '#000000',
  },
};

export default function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <AuthUiProvider
        themeConfig={themeConfig}
        authClient={authClient}
        appKitOptions={appKitOptions} // Optional for wallet connections
      >
        {/* Your app components */}
      </AuthUiProvider>
    </QueryClientProvider>
  );
}

Using Auth Hooks

import React from 'react';
import { View, Button, Text } from 'react-native';
import { useAuth, useAuthUi } from '@futureverse/auth-react-native';

export default function HomeScreen() {
  const { openLogin } = useAuthUi();
  const { authClient, userSession } = useAuth();

  const handleLogin = () => {
    openLogin();
  };

  const handleLogout = async () => {
    await authClient.signOut();
  };

  return (
    <View>
      {userSession ? (
        <>
          <Text>Welcome! User ID: {userSession.user?.id_token}</Text>
          <Button title="Logout" onPress={handleLogout} />
        </>
      ) : (
        <Button title="Login" onPress={handleLogin} />
      )}
    </View>
  );
}

API Reference

AuthClient

Main authentication client for React Native applications.

const authClient = new AuthReactNativeClient({
  clientId: string;
  postSignInredirectUri: string;
  authorizationURL: string;
  hostWeb3SigningDomain: string;
});

Providers

• AuthUiProvider: Main provider with built-in authentication UI
• AuthThemeProvider: Theme customization provider

Hooks

• useAuth(): Access authentication state and client
• useAuthUi(): Control login modal state

Theme Configuration

Optionally customize the authentication UI:

import { DefaultTheme } from '@futureverse/auth-react-native';

const customTheme = {
  ...DefaultTheme,
  colors: {
    ...DefaultTheme.colors,
    primaryBackground: '#your-color',
  },
  images: {
    ...DefaultTheme.images,
    logo: require('path-to-your-logo.png'), // replace default auth UI title with logo (png/jpg)
  },
};

Storage

The library uses secure storage by default:

• iOS: Keychain
• Android: Keystore

Related Packages

• @futureverse/auth - Core authentication library

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