Autenticación en React: inicio rápido

​

Empieza con la autenticación alojada

1. Configura la aplicación y copia auth.js de la guía de inicio rápido de JavaScript.
2. Dirige tu ruta /auth/callback registrada a una página que llame a handleCallback() una sola vez. Protégete contra efectos duplicados, incluida la repetición de efectos en desarrollo: cada código es de un solo uso.
3. Mantén diferenciados los estados de carga, sesión no iniciada, sesión iniciada y sesión fallida. Muestra los errores de inicio de sesión sin registrar tokens ni códigos de callback.
4. Valida cada solicitud protegida en tu backend. Ocultar un componente no es autorización.

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

​

Vista previa del lanzamiento del paquete para React