useAuth

The useAuth() hook provides access to essential authentication methods and user session data from FutureverseAuthProvider. It exposes the following methods and variables:

• signIn()

• signOut()

• authClient

• userSession

• authMethod

• isFetchingSession

Example:

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

const { userSession } = useAuth();
...

  if (!userSession) {
    return <h1>Sign in to send funds</h1>;
  }

useAuth methods

signIn()

This method is used for signing in when not using the auth-ui library, ideal for building custom authentication flows. It accepts two parameters:

• {SignInOptions}: A Sign-in options object. The object can include the required type of authentication method, and the optionals the signer, and the account address.

• flow: It is an optional parameter that determines the sign-in flow, which can be redirect or popup. It defaults to redirect.

Example:

const { signIn } = useAuth();
...

return(
<>
	<button
		onClick={ async() => {
			await signIn({ type: 'eoa', signer, address }, flow);
		}}
		className="green"
	>
		Sign In
	</button>
</>
);

signOut()

Method for sign-out. It can accept one parameter:

Example:

const { signOut } = useAuth();
...

<button
	onClick={() => {
		isConnected && disconnect();
		signOut();
	}}
	className="green"
>
	Log Out
</button>

authClient

Initialisation of FutureverseAuthClient.

Example:

const authClient = new FutureverseAuthClient({
  clientId,
  environment: 'production',
  redirectUri: '<your-app-redirect-endpoint>',
});

userSession

An object containing the user session data:

• EOA (Externally Owned Account)

• Chain ID

• Custodian

• FuturePass

• Linked Address (an array)

• User (OICD or null)

More information about the acronyms mentioned above can be found in the Glossary section.

Example:

const {  userSession } = useAuth();

...
// UI code
return(
	<>
		<div className="row">User EOA: {userSession.eoa}</div>
		<div className="row">User Chain ID: {userSession.chainId}</div>
		<div className="row">User Custodian: {userSession.custodian}</div>
		<div className="row">User Futurepass: {userSession.futurepass}</div>
		<div className="row">User Linked Address: {userSession.linked[0]}</div>
		<div className="row">User OICD: {userSession.user}</div>
	</>
);

authMethod

Method that returns the type of authentication method used:

• EOA

• Google

• Facebook

• X (former Twitter)

• TikTok

• Email

Example:

const {  userSession, authMethod } = useAuth();

...
// UI code
return(
	<>
		<div className="row">Authentication Method: {authMethod}</div>
		<div className="row">User Chain ID: {userSession.chainId}</div>
	</>
);

isFetchingSession

A boolean that indicates whether the session data is still being fetched (true if loading, false once complete). Use it to manage loading states in your UI.

const {  userSession, authMethod, isFetchingSession } = useAuth();

...
// UI code

return (
	{isFetchingSession ? (
		<div>Loading User...</div>
	):(
		<>
			<div className="row">Authentication Method: {authMethod}</div>
			<div className="row">User Chain ID: {userSession.chainId}</div>
		</>
	)}
);