# Custom UI for Authentication

> Overview of implementing custom authentication UI in your React app

> For the complete documentation index, see [llms.txt](/docs/llms.txt).

Pre-built UI components are available for authentication, but 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 Wallet APIs hooks.

<Tip>
  Tailwind CSS is a required dependency for using Wallet APIs UI
  components. However, Wallet APIs hooks function independently and do
  not require Tailwind.
</Tip>

## Available Authentication Methods

Several authentication methods are available for you to 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](/docs/wallets/authentication/login-methods/email-otp) - One-time password sent via email
* [Email Magic Link](/docs/wallets/authentication/login-methods/email-magic-link) - Authentication links sent via email
* [Social Login](/docs/wallets/authentication/login-methods/social-login) - Authentication with providers like Google and Facebook
* [Custom Social Providers](/docs/wallets/react/login-methods/social-providers) - Add custom OAuth providers via Auth0
* [Passkey Signup](/docs/wallets/react/login-methods/passkey-login) - Create accounts with passkeys
* [Passkey Login](/docs/wallets/react/login-methods/passkey-login) - Authenticate with existing passkeys
* [Multi-Factor Authentication](/docs/wallets/react/mfa/setup-mfa) - Add an additional verification layer after initial login using an authenticator app
* [EOA Login](/docs/wallets/react/login-methods/eoa-login) - Bring in your own EOAs


<Info>
  **Visit each method's dedicated page** for specific implementation details,
  including the exact parameters to use with the `useAuthenticate` hook for that
  authentication method.
</Info>

## 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.

<Tip>
  If MFA is required (e.g., the user has added an authenticator app), the
  authenticate function will throw an MfaRequiredError or request a
  multiFactorCode. See the MFA docs for a detailed example of handling TOTP
  codes.
</Tip>

```tsx twoslash
import React from "react";
import { useAuthenticate } from "@account-kit/react";

function MyAuthComponent() {
  const { authenticate, authenticateAsync, 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 Externally Owned Account (EOA) or from a smart wallet. This is the best way to check if a user is logged in regardless of account type.

```tsx twoslash
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 wallet instance for the authenticated user. It's primarily used to get the smart wallet address and interact with the account.

```tsx twoslash
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 wallet instance (`account`) when the user is logged in
* Provides the smart wallet address, not the owner 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 only 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.