Autenticação no React: guia rápido

​

Comece com a autenticação hospedada

1. Configure a aplicação e copie auth.js do guia de início rápido de JavaScript.
2. Direcione o seu /auth/callback registrado para uma página que chame handleCallback() uma única vez. Proteja-se contra efeitos duplicados, incluindo a reexecução de efeitos em desenvolvimento: um código é de uso único.
3. Mantenha distintos os estados de carregamento, desconectado, conectado e sessão com falha. Mostre os erros de login sem registrar tokens nem códigos de callback.
4. Valide cada requisição protegida no seu backend. Ocultar um componente não é autorização.

import { useState } from "react";
import { signIn } from "./auth.js";

export function SignInButton() {
  const [busy, setBusy] = useState(false);
  const [error, setError] = useState("");
  async function start() {
    setBusy(true);
    setError("");
    try {
      await signIn();
    } catch {
      setError("Could not start sign-in. Please try again.");
      setBusy(false);
    }
  }
  return <div>
    <button disabled={busy} onClick={start}>{busy ? "Opening sign-in…" : "Sign in"}</button>
    {error && <p role="alert">{error}</p>}
  </div>;
}

​

Prévia do lançamento do pacote React