useConnector

The useConnector() hook provides variables and methods to simplify handling connections with both custodial clients and wallets. It offers the following methods and variables:

• connect()

• connectAndSignIn()

• disconnect()

• isConnected

• connector

• isConnecting

• connectors

UseConnector methods

connect()

This method connects accounts using custodial clients (e.g., email, Google, Facebook, TikTok, and X ) and wallets (MetaMask, WalletConnect, Coinbase Wallet, and Xaman). It required one parameter:

• connector.id: ID of the connector.

Example:

import { useConnector } from '@futureverse/auth-react';
...

const { connect } = useConnector();
...
// Connecting Custodial clients
connect('futureverseCustodialEmail');
connect('futureverseCustodialGoogle');
connect('futureverseCustodialFacebook');
connect('futureverseCustodialX');
connect('futureverseCustodialTikTok');

// Connecting Web3
connect('walletConnect');
connect('metaMask');
connect('coinbaseWallet');
connect('xaman');

connectAndSignIn()

The method attempts to connect a wallet client and directly sign into Auth. It accepts two parameters:

• connector.id: ID of the connector.

• flow: Flow is an optional parameter and it can be redirect or popup. It defaults to redirect.

Example:

{connectors.map(connector => (
	<button
		key={connector.id}
		onClick={() =>
			connectAndSignIn(connector.id as ConnectorId, 'popup')
		}
	>
		Connect {connector.name}
	</button>
))}

disconnect()

This method disconnects accounts from custodial clients and wallets. It accepts one optional parameter.

• connector.id: ID of the connector.

Example:

if (connector?.id) {
				disconnect();
		}

isConnected

Boolean to perform conditional validations for connections.

Example:

{isConnected && (
	<button
		onClick={() => {
			if (connector?.id) {
				disconnect();
			}
		}}
	>
		Disconnect
	</button>
)}

connector

Object containing data of the connector used for the connection.

Example:

{connectors.map((connector) => (
	<button
		key={connector.id}
		onClick={() =>
			connectAndSignIn(connector.id as ConnectorId, 'popup')
		}
	>
		{connector.icon && (
			<img src={connector.icon} width={20} height={20} />
		)}
		Connect {connector.name}
	</button>
))}

isConnecting

A boolean value indicating whether the connection process is still ongoing (true if connecting, false when the connection is complete). This is useful for managing UI states.

return (
	{isConnecting ? (
		<Spinner />
	):(
		<>
			// Your UI, when the connection is complete goes here
		</>
	)}
);

connectors

Array of available connectors for both wallet providers and custodial clients supported by Pass:

Custodial Clients

• Email

• Google

• Facebook

• X (former Twitter)

• TikTok

Wallets

• MetaMask

• WalletConnect

• Coinbase Wallet

• Xaman

Example:

{connectors.map((connector) => (
	<button
		key={connector.id}
		onClick={() =>
			connectAndSignIn(connector.id as ConnectorId, 'popup')
		}
	>
		{connector.icon && (
			<img src={connector.icon} width={20} height={20} />
		)}
		Connect {connector.name}
	</button>
))}