Quickstart React per l'autenticazione

​

Inizia con l’autenticazione ospitata

1. Configura l’applicazione e copia auth.js dalla guida rapida JavaScript.
2. Indirizza il tuo /auth/callback registrato a una pagina che chiama handleCallback() una sola volta. Proteggiti dagli effetti duplicati, incluso la riesecuzione degli effetti in sviluppo: un codice è monouso.
3. Mantieni distinti gli stati di caricamento, di disconnessione, di connessione e di sessione con errore. Mostra gli errori di accesso senza registrare token o codici di callback.
4. Valida ogni richiesta protetta sul tuo backend. Nascondere un componente non equivale ad autorizzazione.

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

​

Anteprima della release del pacchetto React