Skip to main content
The useAuth() hook provides access to essential authentication methods and user session data from FutureverseAuthProvider. It exposes the following methods and variables: 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)
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>
		</>
	)}
);