# Two Factor Authentication 01 - Dashboard Two-Factor Verification

> A clean authentication screen where users enter a verification code, designed to add extra security while keeping the process simple and smooth.

A shadcn/ui block from the [@shadcn-space](https://shadcnspace.com) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/shadcn-space/two-factor-authentication-01).

- Page, with a live preview: https://shadcn.exchange/r/shadcn-space/two-factor-authentication-01
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/shadcn-space/two-factor-authentication-01-light-dbd8947d14752128.png
- Registry item: https://shadcnspace.com/r/two-factor-authentication-01.json
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://shadcnspace.com/r/two-factor-authentication-01.json
```

Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on.

## Dependencies

- Registry items: `card`, `button`, `field`, `input-otp`

## Files

### `src/components/shadcn-space/blocks/two-factor-authentication-01/page.tsx`

```tsx
import TwoFactorAuthForm from "@/components/shadcn-space/blocks/two-factor-authentication-01/two-factor-auth";

const Page = () => {
  return <TwoFactorAuthForm/>;
};

export default Page;
```

### `src/components/shadcn-space/blocks/two-factor-authentication-01/two-factor-auth.tsx`

```tsx
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { Field, FieldDescription, FieldGroup } from "@/components/ui/field";
import { InputOTP, InputOTPGroup, InputOTPSlot } from "@/components/ui/input-otp";

const TwoFactorAuthForm = () => {
  return (
    <section className="bg-foreground dark:bg-background min-h-screen relative flex items-center justify-center">
      <div className="pointer-events-none absolute inset-0 right-0 overflow-hidden md:block hidden">
        {/* Outer big circle */}
        <div className="absolute left-1/1 top-0 h-650 w-650 -translate-x-1/2 -translate-y-1/2 rounded-full bg-white/10" />
        {/* Inner circle */}
        <div className="absolute left-1/1 top-0  h-175 w-175 -translate-x-1/2 -translate-y-1/2 rounded-full bg-foreground dark:bg-background" />
      </div>

      <div className="py-10 md:py-20 max-w-lg px-4 sm:px-0 mx-auto w-full">
        <Card className="px-6 py-8 sm:p-12 relative gap-6">
          <CardHeader className="text-center gap-6 p-0">
            <div className="mx-auto">
              <a href="">
                <img
                  src="https://images.shadcnspace.com/assets/logo/logo-icon-black.svg"
                  alt="shadcnspace"
                  className="dark:hidden h-10 w-10"
                />
                <img
                  src="https://images.shadcnspace.com/assets/logo/logo-icon-white.svg"
                  alt="shadcnspace"
                  className="hidden dark:block h-10 w-10"
                />
              </a>
            </div>
            <div className="flex flex-col gap-1">
              <CardTitle className="text-2xl font-medium text-card-foreground">
                Two Factor Authentication
              </CardTitle>
              <CardDescription className="text-sm text-muted-foreground font-normal">
                Please confirm access to your account by entering the code
                provided by your authenticator application
              </CardDescription>
            </div>
          </CardHeader>
          <CardContent className="p-0">
            <form>
              <FieldGroup className="gap-6">
                <div className="flex flex-col items-center gap-4">
                  <InputOTP maxLength={6} id="otp" required>
                    <InputOTPGroup className="gap-1 *:data-[slot=input-otp-slot]:rounded-xl *:data-[slot=input-otp-slot]:border *:data-[slot=input-otp-slot]:size-9">
                      <InputOTPSlot index={0} />
                      <InputOTPSlot index={1} />
                      <InputOTPSlot index={2} />
                      <InputOTPSlot index={3} />
                      <InputOTPSlot index={4} />
                      <InputOTPSlot index={5} />
                    </InputOTPGroup>
                  </InputOTP>

                  <Field className="gap-6">
                    <FieldDescription className="text-center text-sm font-normal text-muted-foreground">
                      Didn't get the code?{" "}
                      <a
                        href="#"
                        className="font-medium text-card-foreground no-underline!"
                      >
                        Resend code
                      </a>
                    </FieldDescription>
                    <Button type="submit" size={"lg"} className="rounded-lg h-10 hover:bg-primary/80 cursor-pointer">
                      Confirm
                    </Button>
                  </Field>
                </div>
              </FieldGroup>
            </form>
          </CardContent>
        </Card>
      </div>
    </section>
  );
};

export default TwoFactorAuthForm;
```