Inici ràpid d'autenticació amb React

​

Comença amb l’autenticació allotjada

1. Configura l’aplicació i copia auth.js des de la guia ràpida de JavaScript.
2. Enruta el teu /auth/callback registrat a una pàgina que crida handleCallback() una sola vegada. Protegeix-te dels efectes duplicats, inclosa la repetició d’efectes en desenvolupament: un codi només es pot usar una vegada.
3. Mantén diferenciats els estats de càrrega, de sessió tancada, de sessió iniciada i de sessió fallida. Mostra els errors d’inici de sessió sense registrar tokens ni codis de callback.
4. Valida cada sol·licitud protegida al teu backend. Amagar un component no és autorització.

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>;
}

​

Previsualització del llançament del paquet React