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

npm install @futureverse/auth-react-native

Required peer dependencies:

npm install @tanstack/react-query viem

Basic Usage

Setup Providers

import React from 'react';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { AuthClient, AuthUiProvider, DefaultTheme } from '@futureverse/auth-react-native';

const queryClient = new QueryClient();

const authClient = new AuthClient({
  clientId: 'your-futureverse-client-id',
  postSignInredirectUri: 'your-app-redirect-uri',
  environment: 'production', // or 'staging'
});

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 AuthClient({
  clientId: string;
  postSignInredirectUri: string;
  environment: 'production' | 'staging';
});

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

Customize the authentication UI:

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

const customTheme = {
  ...DefaultTheme,
  colors: {
    ...DefaultTheme.colors,
    primaryBackground: '#your-color',
  },
};

Storage

The library uses secure storage by default:

• iOS: Keychain
• Android: Keystore

Related Packages

• @futureverse/auth - Core authentication library