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

export const LoginButton = () => {
  const { connect, isConnected, disconnect } = useConnect();
};

Implement the Login Button

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

export const LoginButton = () => {
  const { connect, isConnected, disconnect } = useConnect();

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

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

3. 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 connect({ 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. 4. 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!