useAuth

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

• signIn()
• signOutPass()
• 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>
</>
);

​

signOutPass()

Method for sign-out. It can accept an object as parameter with the following attributes:

• onBeforeRedirect: Function to be executed before redirecting the user to logout page. Default is undefined.
• flow: This parameter determines the sign-in flow, Silent or Redirect. It defaults to redirect.
• disableConsent: Boolean to skip the logout consent page. Default is set to true.
• postRedirecturi: URL to redirect the user after logout, it must be pre-registered in the client configuration. Default is undefined.

Example:

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

<button
	onClick={() => {
		isConnected && disconnect();
		signOutPass();
	}}
	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)

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>
		</>
	)}
);