FirstStep() — supabase Function Reference

Source Code

apps/studio/components/interfaces/Account/TOTPFactors/AddNewFactorModal.tsx lines 65–91

const FirstStep = ({ visible, name, enroll, setName, isEnrolling, onClose }: FirstStepProps) => {
  return (
    <ConfirmationModal
      size="medium"
      visible={visible}
      title="Add a new authenticator app as a factor"
      confirmLabel="Generate QR"
      confirmLabelLoading="Generating QR"
      disabled={name.length === 0}
      loading={isEnrolling}
      onCancel={onClose}
      onConfirm={() => {
        enroll({
          factorType: 'totp',
          friendlyName: name,
        })
      }}
    >
      <Input
        label="Provide a name to identify this app"
        descriptionText="A string will be randomly generated if a name is not provided"
        value={name}
        onChange={(e) => setName(e.target.value)}
      />
    </ConfirmationModal>
  )
}