Connect

Adding the Connection Button

Moving out of the index file and into your main App component, now you will need to include a Connect button in your application. We can use the useConnect hook from the INTU Web Kit which will allow users to authenticate using the configured providers and manage their session with no effort or technical knowledge needed.

Import and set up the useConnect hook

This hook provides all the necessary methods to manage user authentication, including connecting, disconnecting, and retrieving the connected status of the user.

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

export const LoginButton = () => {
    const { connectIntu, isIntuConnected, disconnectIntu, userIntuInfo } =
    useConnect();
};

Implement the Login Button

Next, you’ll create a login button that will handle the user’s authentication status.

export const LoginButton = () => {
    const { connectIntu, isIntuConnected, disconnectIntu, userIntuInfo } =
    useConnect();

  const connectHandler = async () => {
    await connectIntu(); // Call the connect method to initiate the login process
  };

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

// Handling Custom Authentication/ JWT Authentication (Optional) This step is optional. If you're using custom authentication, you may need to pass a JWT token during the connection process. Here's how you can do that:

const jwtToken = "your-jwt-token-here"; // Replace with your actual JWT token

const connectHandler = async () => {
  await connectIntu({ token: jwtToken });
};

Now, when the "Connect" button is clicked, the connect function will handle either the standard or custom authentication flow depending on your configuration.

Integrate the Button into Your App Finally, you can use this LoginButton in your main app or wherever you need to provide the authentication functionality. Now you have successfully integrated the INTU Connect functionality to your application!

User Connection Functions

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.

connectIntu

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/web-kit";

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

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

isIntuConnected

This property is a boolean value that indicates whether a user is currently connected. The isIntuConnected 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/web-kit";

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

disconnectIntu

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

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

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

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

userIntuInfo

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

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

   const { connectIntu, isIntuConnected, disconnectIntu, userIntuInfo } = useConnect();

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