Skip to main content

Core Functionality

User Connection​

The Authentication Functionalities are handled by the useConnect component. It provides methods for connecting, checking if a user is connected, disconnecting, and retrieving user information. This hook would be useful to ensure that your users can securely log in, stay connected, and access their account information within the INTU ecosystem.

connect​

The connect function initiates the user connection process. Depending on the configurations you defined, it handles the authentication flow.
In the below example, clicking the Connect button triggers the authentication process.

import { useConnect } from "@intuweb3/exp-web-kit";

function LoginButtonComponent() {
  const { connect } = useConnect();

  return (
    <button onClick={() => connect()}>
      Connect
    </button>
  );
}

isConnected​

This property is a boolean value that indicates whether a user is currently connected. The isConnected button too can be used for occasions such as rendering UI elements. Below is an example of how this function can be used.

import { useConnect } from "@intuweb3/exp-web-kit";

    <div>
      {isConnected ? (
        <button onClick={disconnect}>Disconnect</button>
      ) : (
        <button onClick={connectHandler}>INTU Connect</button>
      )}
    </div>

disconnect​

The disconnect function logs out the user by removing their information from local storage and resetting the connection status.

import { useConnect } from "@intuweb3/exp-web-kit";

function LogoutButtonComponent() {
  const { disconnect } = useConnect();

  return (
    <button onClick={() => disconnect()}>
      Disconnect
    </button>
  );
}

userInfo​

This property provides information about the connected user, such as their ID, email, wallet address and etc.

import { useConnect } from "@intuweb3/exp-web-kit";

   const { connect, isConnected, disconnect, userInfo } = useConnect();

return(
    <div className="main-container">
       <CardComponent
         userData={{
             name: userInfo?.name || null,
             email: userInfo?.email || null,
             walletAddress: userInfo?.walletAddress || null,
          }}
        />
    </div>
)