@futureverse/auth-react-native

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