Custom UI for Authentication

While Account Kit provides pre-built UI components for authentication, you may want to create your own custom UI to match your application's design system. This section covers how to implement custom authentication flows using Account Kit hooks.

Available Authentication Methods

Account Kit supports several authentication methods that you can implement with custom UI. Each method has its own dedicated page with detailed implementation instructions, code examples, and specific parameters for the authentication hooks:

• Email OTP - One-time password sent via email
• Email Magic Link - Authentication links sent via email
• Social Login - Authentication with providers like Google and Facebook
• Custom Social Providers - Add custom OAuth providers via Auth0
• Passkey Signup - Create accounts with passkeys
• Passkey Login - Authenticate with existing passkeys

Core Hooks for Custom UI

The following section provides an overview of the main hooks you'll use when implementing custom authentication UI. These hooks are the foundation for all authentication methods, but their specific usage and parameters vary depending on the authentication method you choose.

useAuthenticate

The useAuthenticate hook is the foundation for all authentication methods. It provides the authenticate function that handles the authentication process.

import React from "react";
import { useAuthenticate } from "@account-kit/react";
 
function MyAuthComponent() {
  const { authenticate, isPending } = useAuthenticate();
 
  // Use authenticate with different parameters based on auth method
  // The specific parameters depend on the authentication method
  // See the individual authentication method pages for details
}

useUser

The useUser hook returns the current user information from either an External Owned Account (EOA) or from a Smart Contract Account (SCA). This is the best way to check if a user is logged in regardless of account type.

import React from "react";
import { useUser } from "@account-kit/react";
 
function MyComponent() {
  const user = useUser();
 
  if (!user) {
    return <div>Please log in</div>;
  }
 
  return (
    <div>
      <p>User address: {user.address}</p>
      <p>Account type: {user.type}</p> {/* "eoa" or "sca" */}
    </div>
  );
}

useAccount

The useAccount hook retrieves the smart contract account instance for the authenticated user. It's primarily used to get the smart contract account address and interact with the account.

import React from "react";
import { useAccount } from "@account-kit/react";
 
function MyComponent() {
  const { account, address, isLoadingAccount } = useAccount({
    type: "ModularAccountV2", // Specify the account type you're using
  });
 
  if (isLoadingAccount) {
    return <div>Loading account...</div>;
  }
 
  if (!account) {
    return <div>Please log in to access your account</div>;
  }
 
  return (
    <div>
      <p>Smart contract account address: {address}</p>
      {/* Now you can use the account instance for transactions */}
    </div>
  );
}

This hook:

• Returns a smart contract account instance (account) when the user is logged in
• Provides the smart contract account address, not the signer address
• Returns undefined for both account and address when the user is not logged in
• Includes an isLoadingAccount flag to handle loading states

Note: If you just need to check if a user is logged in (regardless of account type), consider using useUser instead.

Getting Started

To implement custom authentication UI:

1. Choose an authentication method from the list above and visit its dedicated page
2. Follow the method-specific implementation guidelines on that page
3. Use the core hooks described above following the method-specific parameters
4. Implement the UI components for your chosen authentication flow
5. Handle success and error states appropriately

Each authentication method page provides detailed code examples tailored to that specific method, showing exactly how to configure the hooks and implement the entire authentication flow.