Início rápido React para autenticação

​

Começar com a autenticação alojada

1. Configure a aplicação e copie auth.js do guia de início rápido de JavaScript.
2. Encaminhe o /auth/callback registado para uma página que chame handleCallback() uma única vez. Proteja-se contra efeitos duplicados, incluindo a repetição de efeitos em desenvolvimento: um código só pode ser usado uma vez.
3. Mantenha distintos os estados de carregamento, de sessão terminada, de sessão iniciada e de falha da sessão. Mostre os erros de início de sessão sem registar tokens nem códigos de callback.
4. Valide cada pedido protegido 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é-visualização da versão do pacote React