TwoFactorAuth

twofactorauth-1779369848680.tsx

'use client';

import { useState, useEffect } from 'react';

interface TwoFactorAuthProps {
  onSubmit: (code: string) => void;
}

const TwoFactorAuth = ({ onSubmit }: TwoFactorAuthProps) => {
  const [code, setCode] = useState(['', '', '', '', '', '']);
  const [resendTimer, setResendTimer] = useState(60);
  const [isResendEnabled, setIsResendEnabled] = useState(false);

  useEffect(() => {
    const intervalId = setInterval(() => {
      if (resendTimer > 0) {
        setResendTimer(resendTimer - 1);
      } else {
        setIsResendEnabled(true);
      }
    }, 1000);

    return () => clearInterval(intervalId);
  }, [resendTimer]);

  const handleInputChange = (index: number, value: string) => {
    const newCode = [...code];
    newCode[index] = value;
    setCode(newCode);

    if (index < 5 && value !== '') {
      const nextInput = document.getElementById(`input-${index + 1}`);
      if (nextInput) {
        nextInput.focus();
      }
    }
  };

  const handlePaste = (event: React.ClipboardEvent<HTMLInputElement>) => {
    const pastedCode = event.clipboardData.getData('text');
    if (pastedCode && pastedCode.length === 6) {
      setCode(pastedCode.split(''));
    }
  };

  const handleSubmit = () => {
    const codeValue = code.join('');
    if (codeValue.length === 6) {
      onSubmit(codeValue);
    }
  };

  const handleResend = () => {
    setIsResendEnabled(false);
    setResendTimer(60);
  };

  return (
    <div className="flex flex-col items-center justify-center h-screen bg-zinc-950">
      <h2 className="text-2xl text-gold mb-4">2FA Authentication</h2>
      <div className="flex justify-center mb-4">
        {code.map((digit, index) => (
          <input
            key={index}
            id={`input-${index}`}
            type="number"
            value={digit}
            onChange={(e) => handleInputChange(index, e.target.value)}
            onPaste={handlePaste}
            className={`w-12 h-12 mx-2 text-2xl text-gold bg-zinc-900 border-2 border-gold rounded-lg focus:outline-none focus:ring-gold ${
              index < 5 && digit !== '' ? 'animate-slide-right' : ''
            }`}
          />
        ))}
      </div>
      <button
        className="px-4 py-2 text-gold bg-zinc-900 border-2 border-gold rounded-lg hover:bg-gold hover:text-zinc-950 transition duration-300"
        onClick={handleSubmit}
      >
        Submit
      </button>
      <div className="mt-4 text-gold">
        Didn't receive the code?{' '}
        <button
          className={`text-gold hover:text-zinc-950 transition duration-300 ${
            isResendEnabled ? 'cursor-pointer' : 'cursor-not-allowed opacity-50'
          }`}
          onClick={handleResend}
          disabled={!isResendEnabled}
        >
          Resend {isResendEnabled ? '' : `(${resendTimer})`}
        </button>
      </div>
    </div>
  );
};

export default TwoFactorAuth;

Component info

CategoryAuthentication

Frameworkreact

TierFREE

Copies0

About

2FA authentication code entry

More from Authentication

'use client';

import React, { useState } from 'react';

interface LoginFormProps {
  onSubmit: (email: string, password: string) => void;
}

const LoginForm: React.FC<LoginFormProps> = ({ onSubmit }) => {
  const [email, setEmail] = useState('');

LoginForm

Authentication

'use client';

import { useState } from 'react';

interface SignupFormProps {
  // No props for this component
}

const SignupForm: React.FC<SignupFormProps> = () => {
  const [step, setStep] = useState(1);
  const [email, setEmail] = useState('');

SignupForm

Authentication

'use client';

import React, { useState } from 'react';

interface ForgotPasswordProps {
  // No props needed for this component
}

const ForgotPassword: React.FC<ForgotPasswordProps> = () => {
  const [email, setEmail] = useState('');
  const [isSub

ForgotPassword

Authentication

'use client'
import { useState } from 'react'

type State = 'idle' | 'sending' | 'sent' | 'error'

export default function MagicLinkAuth() {
  const [email, setEmail] = useState('')
  const [state, setState] = useState<State>('idle')

  async functio

MagicLinkAuth

Authentication