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

# Autenticação

> Telas de autenticação simples e divididas, recuperação, PIN, bloqueio e confirmação. São demonstrações visuais, sem autenticação real.

export const Exemplo = ({src, demo, titulo}) => {
  const [height, setHeight] = useState(520);
  const [theme, setTheme] = useState("dark");
  const [revision, setRevision] = useState(0);
  useEffect(() => {
    const receive = event => {
      if (event.origin !== "https://skin.growtify.me" || event.data?.type !== "growtify:example-size" || event.data?.demo !== demo) return;
      const value = Number(event.data.height);
      if (Number.isFinite(value) && value > 0 && value < 100000) setHeight(value);
    };
    window.addEventListener("message", receive);
    return () => window.removeEventListener("message", receive);
  }, [demo]);
  return <div style={{
    margin: "16px 0 40px"
  }}>
    <div style={{
    display: "flex",
    gap: 16,
    justifyContent: "flex-end",
    marginBottom: 8
  }}>
      <button onClick={() => setTheme(theme === "dark" ? "light" : "dark")}>{theme === "dark" ? "Ver Light" : "Ver Dark"}</button>
      <button onClick={() => setRevision(revision + 1)}>Repetir animação</button>
    </div>
    <iframe key={theme + revision} title={titulo} src={src + "&single=1&theme=" + theme} width="100%" height={height} style={{
    border: 0,
    display: "block",
    borderRadius: 12
  }} scrolling="no" loading="lazy" />
  </div>;
};

Os 18 exemplos desta categoria aparecem abaixo, um após o outro. Use o índice da página para ir direto ao modelo desejado.

## auth / delete account

<Exemplo src="https://skin.growtify.me/catalog/ubold?family=auth&demo=auth%2Fdelete-account" demo="auth/delete-account" titulo="auth / delete account" />

## auth / lock screen

<Exemplo src="https://skin.growtify.me/catalog/ubold?family=auth&demo=auth%2Flock-screen" demo="auth/lock-screen" titulo="auth / lock screen" />

## auth / login pin

<Exemplo src="https://skin.growtify.me/catalog/ubold?family=auth&demo=auth%2Flogin-pin" demo="auth/login-pin" titulo="auth / login pin" />

## auth / new pass

<Exemplo src="https://skin.growtify.me/catalog/ubold?family=auth&demo=auth%2Fnew-pass" demo="auth/new-pass" titulo="auth / new pass" />

## auth / reset pass

<Exemplo src="https://skin.growtify.me/catalog/ubold?family=auth&demo=auth%2Freset-pass" demo="auth/reset-pass" titulo="auth / reset pass" />

## auth / sign in

<Exemplo src="https://skin.growtify.me/catalog/ubold?family=auth&demo=auth%2Fsign-in" demo="auth/sign-in" titulo="auth / sign in" />

## auth / sign up

<Exemplo src="https://skin.growtify.me/catalog/ubold?family=auth&demo=auth%2Fsign-up" demo="auth/sign-up" titulo="auth / sign up" />

## auth / split / delete account

<Exemplo src="https://skin.growtify.me/catalog/ubold?family=auth&demo=auth%2Fsplit%2Fdelete-account" demo="auth/split/delete-account" titulo="auth / split / delete account" />

## auth / split / lock screen

<Exemplo src="https://skin.growtify.me/catalog/ubold?family=auth&demo=auth%2Fsplit%2Flock-screen" demo="auth/split/lock-screen" titulo="auth / split / lock screen" />

## auth / split / login pin

<Exemplo src="https://skin.growtify.me/catalog/ubold?family=auth&demo=auth%2Fsplit%2Flogin-pin" demo="auth/split/login-pin" titulo="auth / split / login pin" />

## auth / split / new pass

<Exemplo src="https://skin.growtify.me/catalog/ubold?family=auth&demo=auth%2Fsplit%2Fnew-pass" demo="auth/split/new-pass" titulo="auth / split / new pass" />

## auth / split / reset pass

<Exemplo src="https://skin.growtify.me/catalog/ubold?family=auth&demo=auth%2Fsplit%2Freset-pass" demo="auth/split/reset-pass" titulo="auth / split / reset pass" />

## auth / split / sign in

<Exemplo src="https://skin.growtify.me/catalog/ubold?family=auth&demo=auth%2Fsplit%2Fsign-in" demo="auth/split/sign-in" titulo="auth / split / sign in" />

## auth / split / sign up

<Exemplo src="https://skin.growtify.me/catalog/ubold?family=auth&demo=auth%2Fsplit%2Fsign-up" demo="auth/split/sign-up" titulo="auth / split / sign up" />

## auth / split / success mail

<Exemplo src="https://skin.growtify.me/catalog/ubold?family=auth&demo=auth%2Fsplit%2Fsuccess-mail" demo="auth/split/success-mail" titulo="auth / split / success mail" />

## auth / split / two factor

<Exemplo src="https://skin.growtify.me/catalog/ubold?family=auth&demo=auth%2Fsplit%2Ftwo-factor" demo="auth/split/two-factor" titulo="auth / split / two factor" />

## auth / success mail

<Exemplo src="https://skin.growtify.me/catalog/ubold?family=auth&demo=auth%2Fsuccess-mail" demo="auth/success-mail" titulo="auth / success mail" />

## auth / two factor

<Exemplo src="https://skin.growtify.me/catalog/ubold?family=auth&demo=auth%2Ftwo-factor" demo="auth/two-factor" titulo="auth / two factor" />

<Note>
  Dados demonstrativos. Exemplos de estados vazios ou de carregamento têm controles próprios para alternar o estado. As páginas originais UBold preservam seus componentes; não representam telas já implementadas no GHL.
</Note>
