@futureverse/auth-react
v3.5.13
Published
Provides a React authentication provider for [Futureverse Auth](https://www.npmjs.com/package/@futureverse/auth).
Downloads
2,268
Maintainers
Keywords
Readme
Futureverse Auth React
Provides a React authentication provider for Futureverse Auth.
Installation
NPM:
npm install @futureverse/auth-react --save
npm install wagmi [email protected] @tanstack/react-query
Yarn:
yarn add @futureverse/auth-react
yarn add wagmi [email protected] @tanstack/react-query
Usage
Config.ts
import React, { PropsWithChildren } from 'react';
import { FutureverseAuthClient } from '@futureverse/auth-react';
import { FutureverseAuthProvider, FutureverseWagmiProvider, useFutureverseSigner } from '@futureverse/auth-react';
import { createWagmiConfig } from '@futureverse/auth-react/wagmi';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { cookieStorage, createStorage } from 'wagmi';
// Demo application example for React authentication provider
const clientId = '<your-futureverse-client-id>';
const walletConnectProjectId = '<your-wallet-connect-project-id>';
const xamanAPIKey = '<your-xaman-application->';
export const authClient = new FutureverseAuthClient({
clientId,
environment: 'production',
redirectUri: '<your-app-redirect-endpoint>',
});
const queryClient = new QueryClient();
export const getWagmiConfig = async () => {
return createWagmiConfig({
walletConnectProjectId,
xamanAPIKey,
authClient,
// Optional if supporting SSR
ssr: true,
// Optional chains you wish to support
chains: [mainnet, sepolia, polygonAmoy],
// Optional if supporting SSR
storage: createStorage({
storage: cookieStorage,
}),
});
};
Providers.ts
// For NextJS App Router
'use client';
import {
FutureverseAuthProvider,
FutureverseWagmiProvider,
} from '@futureverse/auth-react';
import { QueryClientProvider } from '@tanstack/react-query';
import { State } from 'wagmi';
import { authClient, getWagmiConfig, queryClient } from './config';
export default function Providers({
children,
initialWagmiState,
}: {
children: React.ReactNode;
initialWagmiState?: State;
}) {
return (
<QueryClientProvider client={queryClient}>
<FutureverseWagmiProvider
getWagmiConfig={getWagmiConfig}
initialState={initialWagmiState}
>
<FutureverseAuthProvider authClient={authClient}>
{children}
</FutureverseAuthProvider>
</FutureverseWagmiProvider>
</QueryClientProvider>
);
}
Hooks
For the simplest sign in flow you can use the connectAndSignIn
method which will attempt to connect a wallet client and sign directly into FuturePass. Alternatively we recommend using @futureverse/auth-ui to handle sign in and connectors.
import { useAuth, useConnector } from '@futureverse/auth-react';
const { signIn, signOut, userSession, authMethod } = useAuth();
...
const { connect, connectAndSignIn, disconnect } = useConnector();
...
// Connect and sign into FuturePass
connectAndSignIn('futureverseCustodialEmail', 'popup')
...
// Connecting Custodial wallet clients
connect('futureverseCustodialEmail');
connect('futureverseCustodialGoogle');
connect('futureverseCustodialFacebook');
connect('futureverseCustodialX');
connect('futureverseCustodialTikTok');
// Connecting Web3 wallet clients
connect('walletConnect');
connect('metaMaskSDK');
connect('coinbaseWalletSDK');
connect('xaman');