> ## 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.

# React प्रमाणीकरण क्विकस्टार्ट

> Didit की होस्टेड प्रमाणीकरण को React ऐप में जोड़ें, जिसमें कॉलबैक हैंडलिंग, लोडिंग स्टेट और सर्वर-सत्यापित एक्सेस शामिल हैं।

> [!WARNING]
>
> प्रमाणीकरण नया है: React प्रमाणीकरण पैकेज रिलीज़ पर निर्भर है। होस्टेड फ़्लो का उपयोग केवल सक्षम एप्लिकेशन के साथ करें। नीचे दी गई कॉम्पोनेंट सूची आगामी कॉन्ट्रैक्ट का वर्णन करती है, किसी वर्तमान में प्रकाशित पैकेज API का नहीं।

## होस्टेड प्रमाणीकरण से शुरू करें

1. एप्लिकेशन कॉन्फ़िगर करें और [JavaScript क्विकस्टार्ट](https://docs.didit.me/hi/authentication/quickstarts/javascript.md) से `auth.js` कॉपी करें।
2. अपने पंजीकृत `/auth/callback` को एक ऐसे पेज पर रूट करें जो `handleCallback()` को एक बार कॉल करे। डुप्लिकेट प्रभावों से बचें, जिसमें विकास परिवेश में प्रभाव का दोबारा चलना भी शामिल है: कोड केवल एक बार उपयोग किया जा सकता है।
3. लोडिंग, साइन-आउट, साइन-इन और विफल सत्र की स्थितियों को अलग-अलग रखें। साइन-इन की त्रुटियाँ दिखाएँ, लेकिन टोकन या कॉलबैक कोड कभी लॉग न करें।
4. अपने बैकएंड पर हर संरक्षित अनुरोध को मान्य करें। किसी कॉम्पोनेंट को छिपाना प्राधिकरण नहीं है।

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

कॉलबैक के बाद अपने उपयोगकर्ता दृश्य को डेटा से भरने के लिए `getSession()` कॉल करें। साइन-आउट पर उपयोगकर्ता-विशिष्ट कैश साफ़ करें और सर्वर पर निरस्तीकरण विफल होने को स्पष्ट रूप से संभालें। न्यूनतम JavaScript हेल्पर रीलोड के बाद सत्र को संग्रहीत नहीं करता।

## React पैकेज रिलीज़ प्रिव्यू

प्रस्तावित `@didit-protocol/auth-react` पैकेज एक `DiditAuth` रूट, `useAuth`, `useUser`, `SignIn`, `SignUp`, `UserButton`, `SignedIn`, `SignedOut` और `ConnectedAgents` प्रदान करता है। कॉम्पोनेंट प्रॉप्स, कॉलबैक रूटिंग और पैकेज वर्शन प्रकाशित रिलीज़ से ही लिए जाने चाहिए। यह मान न लें कि सत्यापन SDK ये कॉम्पोनेंट प्रदान करता है।

स्वचालित सिग्नल और `vendorData` प्रमाणीकरण कोर रिलीज़ पर निर्भर हैं। तब तक, मान्य `sub` से अपने बैकएंड की मैपिंग का उपयोग करें। साइन-इन के साथ-साथ सत्यापन और निगरानी के लिए [साझा इंटीग्रेशन प्रॉम्प्ट](https://docs.didit.me/hi/integration/integration-prompt.md) देखें।

रद्द किए गए रीडायरेक्ट, डबल-क्लिक किए गए साइन-इन, कॉलबैक रीफ़्रेश, समय-सीमा समाप्त सत्र, MFA और लॉगआउट का परीक्षण करें। लोडिंग और त्रुटि, दोनों स्थितियाँ रेंडर करें, और पिछले उपयोगकर्ता का संरक्षित डेटा कभी न दिखाएँ।


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