> ## Documentation Index
> Fetch the complete documentation index at: https://docs.getpara.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Two-Factor Authentication

> Implementing secure wallet recovery with Two-Factor Authentication in Para

export const Card = ({imgUrl, iconUrl, fontAwesomeIcon, title, description, href, horizontal = false}) => {
  return <div className="relative group my-2" style={{
    padding: "1px",
    background: "#e5e7eb",
    borderRadius: "12px"
  }} onMouseOver={e => {
    e.currentTarget.style.background = "linear-gradient(45deg, #FF4E00, #874AE3)";
  }} onMouseOut={e => {
    e.currentTarget.style.background = "#e5e7eb";
  }}>
      <a href={href} className={`
          block not-prose font-normal h-full
          bg-white dark:bg-background-dark 
          overflow-hidden w-full cursor-pointer
          flex ${horizontal ? "flex-row" : "flex-col"}
        `} style={{
    borderRadius: "11px"
  }}>
        {(imgUrl || iconUrl) && <div className={`
              relative overflow-hidden flex-shrink-0
              ${horizontal ? "rounded-l" : ""}
              ${!imgUrl ? "bg-white dark:bg-background-dark p-4" : ""}
            `} style={{
    width: horizontal ? "30%" : "100%"
  }}>
            {imgUrl && <img src={`https://mintlify.s3-us-west-1.amazonaws.com/getpara${imgUrl}`} alt={title} className="w-full h-full object-cover" />}
            {(iconUrl || fontAwesomeIcon) && <div className={`
                ${imgUrl ? "absolute inset-0" : ""}
                flex items-center justify-center
              `}>
                <div className="relative w-8 h-8">
                  <img src={iconUrl ? `https://mintlify.s3-us-west-1.amazonaws.com/getpara${iconUrl}` : fontAwesomeIcon} alt={title} className="w-full h-full object-contain" style={{
    filter: "brightness(0) invert(1)"
  }} />
                </div>
              </div>}
          </div>}
        <div className={`
            flex-grow px-6 py-5
            ${horizontal && (imgUrl || iconUrl) ? "flex flex-col justify-center" : ""}
          `} style={{
    width: horizontal ? "70%" : "100%"
  }}>
          {title && <h2 className="font-semibold text-base text-gray-800 dark:text-white">{title}</h2>}
          {description && <div className={`
              font-normal text-sm text-gray-600 dark:text-gray-400 leading-6
              ${horizontal || !imgUrl && !iconUrl ? "mt-0" : "mt-1"}
            `}>
              <p>{description}</p>
            </div>}
        </div>
      </a>
    </div>;
};

export const Link = ({href, label}) => <a href={href} style={{
  display: "inline-block",
  position: "relative",
  color: "#000000",
  fontWeight: 600,
  cursor: "pointer",
  borderBottom: "none",
  textDecoration: "none"
}} onMouseEnter={e => {
  e.currentTarget.querySelector("#underline").style.height = "2px";
}} onMouseLeave={e => {
  e.currentTarget.querySelector("#underline").style.height = "1px";
}}>
    {label}
    <span id="underline" style={{
  position: "absolute",
  left: 0,
  bottom: 0,
  width: "100%",
  height: "1px",
  borderRadius: "2px",
  background: "linear-gradient(45deg, #FF4E00, #874AE3)",
  transition: "height 0.3s"
}}></span>

  </a>;

Para supports Two-Factor Authentication (2FA) to enhance wallet recovery security by requiring users to provide two different authentication factors when verifying their identity.

## Implementation Options

There are two ways to implement 2FA with Para:

1. **Using ParaModal (Recommended)**: The simplest approach with 2FA built-in and a complete user interface.
2. **Custom Implementation**: For applications with custom UIs, manually implement 2FA using Para's methods as described below.

<Tip>
  The ParaModal enables 2FA by default. See the <Link href="/v1/web/guides/customization/modal" label="Customizing Para Guide" /> if you need to disable this feature.
</Tip>

## Custom Implementation Process

Follow these steps to implement 2FA in your custom UI:

### 1. Check 2FA Status

Begin by checking if 2FA is already enabled for the user:

```typescript theme={null}
const checkTwoFactorStatus = async () => {
  const { isSetup } = await para.check2FAStatus();
  
  if (isSetup) {
    // 2FA is already set up - proceed to verification if needed
  } else {
    // 2FA needs to be set up - proceed to setup flow
  }
};
```

### 2. Set Up 2FA

If 2FA isn't configured, initiate the setup process:

```typescript theme={null}
const setupTwoFactor = async () => {
  const { uri } = await para.setup2FA();
  
  if (uri) {
    // Display the QR code to the user or provide the secret for manual entry
  } else {
    // Handle case where no URI is returned
  }
};
```

<Tip>
  The returned `uri` can be used to generate a QR code or extracted to provide the secret key. Most authenticator apps
  (like Google Authenticator, Authy, or Microsoft Authenticator) can scan this QR code directly.
</Tip>

### 3. Enable 2FA

After the user has added the 2FA secret to their authenticator app, verify and enable 2FA:

```typescript theme={null}
const enableTwoFactor = async (verificationCode: string) => {
  await para.enable2FA({ verificationCode });
  // Notify the user of successful 2FA setup
};
```

### 4. Verify 2FA

When the user authenticates, verify their 2FA code:

```typescript theme={null}
const verifyTwoFactor = async (email: string, verificationCode: string) => {
  await para.verify2FA({ email, verificationCode });
  // Proceed with the authentication process
};
```

## Next Steps

After integrating Para, you can explore other features and integrations to enhance your Para experience.

<CardGroup cols={3}>
  <Card title="EVM Integration" imgUrl="/images/v1/network-evm.png" href="/v1/web/guides/evm" description="Learn how to use Para with EVM-compatible libraries like ethers.js, viem, and wagmi." />

  <Card title="Solana Integration" imgUrl="/images/v1/network-solana.png" href="/v1/web/guides/solana" description="Discover how to integrate Para with solana-web3.js." />

  <Card title="Cosmos Integration" imgUrl="/images/v1/network-cosmos.png" href="/v1/web/guides/cosmos" description="Explore Para integration with Cosmos ecosystem using CosmJS, Cosmos Kit, and Graz." />
</CardGroup>
