Provides React Native authentication components and providers for Futureverse Auth. This library enables seamless Pass authentication integration in React Native and Expo applications.
npm install @futureverse/auth-react-native
Required peer dependencies:
npm install @tanstack/react-query viem
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>
);
}
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>
);
}
Main authentication client for React Native applications.
const authClient = new AuthClient({
clientId: string;
postSignInredirectUri: string;
environment: 'production' | 'staging';
});
- AuthUiProvider: Main provider with built-in authentication UI
- AuthThemeProvider: Theme customization provider
- useAuth(): Access authentication state and client
- useAuthUi(): Control login modal state
Customize the authentication UI:
import { DefaultTheme } from '@futureverse/auth-react-native';
const customTheme = {
...DefaultTheme,
colors: {
...DefaultTheme.colors,
primaryBackground: '#your-color',
},
};
The library uses secure storage by default:
- iOS: Keychain
- Android: Keystore
- @futureverse/auth - Core authentication library