Autentikasi React: Panduan Cepat

​

Mulai dengan autentikasi yang di-hosting

1. Konfigurasikan aplikasi dan salin auth.js dari panduan cepat JavaScript.
2. Arahkan /auth/callback yang telah didaftarkan ke halaman yang memanggil handleCallback() satu kali. Cegah efek ganda, termasuk pemutaran ulang efek saat pengembangan, karena kode hanya dapat digunakan sekali.
3. Pisahkan status memuat, saat pengguna keluar, saat pengguna masuk, dan saat sesi gagal. Tampilkan kesalahan masuk tanpa mencatat token atau kode callback.
4. Validasi setiap permintaan yang dilindungi di backend Anda. Menyembunyikan komponen bukan berarti otorisasi.

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

​

Pratinjau rilis paket React