> ## Documentation Index
> Fetch the complete documentation index at: https://docs.didit.me/llms.txt
> Use this file to discover all available pages before exploring further.

# Autentikasi React: Panduan Cepat

> Panduan Didit untuk menambahkan autentikasi yang di-hosting ke aplikasi React, dengan penanganan callback, status loading, dan validasi akses di server.

> [!WARNING]
>
> Autentikasi adalah fitur baru: paket React Autentikasi bergantung pada rilis. Gunakan alur yang di-hosting hanya dengan aplikasi yang telah diaktifkan. Daftar komponen di bawah ini menjelaskan kontrak yang akan datang, bukan API paket yang sudah dipublikasikan saat ini.

## Mulai dengan autentikasi yang di-hosting

1. Konfigurasikan aplikasi dan salin `auth.js` dari [panduan cepat JavaScript](https://docs.didit.me/id/authentication/quickstarts/javascript.md).
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.

```jsx SignInButton.jsx theme={null}
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>;
}
```

Panggil `getSession()` setelah callback untuk mengisi tampilan pengguna Anda. Saat keluar, hapus cache khusus pengguna dan tangani kegagalan pencabutan di server secara eksplisit. Helper JavaScript minimal tidak menyimpan sesi setelah halaman dimuat ulang.

## Pratinjau rilis paket React

Paket `@didit-protocol/auth-react` yang direncanakan menyediakan root `DiditAuth`, `useAuth`, `useUser`, `SignIn`, `SignUp`, `UserButton`, `SignedIn`, `SignedOut`, dan `ConnectedAgents`. Props komponen, perutean callback, dan versi paket harus mengikuti rilis yang dipublikasikan. Jangan berasumsi bahwa SDK verifikasi menyediakan komponen ini.

Sinyal otomatis dan `vendorData` bergantung pada rilis inti Autentikasi. Sampai rilis tersebut tersedia, gunakan pemetaan di backend Anda dari `sub` yang telah divalidasi. Lihat [prompt integrasi bersama](https://docs.didit.me/id/integration/integration-prompt.md) untuk verifikasi dan pemantauan yang berjalan bersama proses masuk.

Uji pengalihan yang dibatalkan, klik ganda pada proses masuk, penyegaran halaman callback, sesi yang kedaluwarsa, MFA, dan keluar. Tampilkan status memuat dan status kesalahan tanpa menampilkan data terlindungi dari pengguna sebelumnya.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.