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

​
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:

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.

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 && (
			<Frame><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 && (
			<Frame><img src={connector.icon} width={20} height={20} />
		)}
		Connect {connector.name}
	</button>
))}

Was this page helpful?