> ## 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 للمصادقة تعتمد على الإصدار. استخدم التدفق المستضاف فقط مع تطبيق مفعّل. يصف كتالوج المكوّنات أدناه العقد المتوقع مستقبلاً، وليس واجهة برمجية لحزمة منشورة حالياً.

## البدء بالمصادقة المستضافة

1. اضبط التطبيق وانسخ `auth.js` من [دليل البدء السريع لجافاسكريبت](https://docs.didit.me/ar/authentication/quickstarts/javascript.md).
2. وجّه `/auth/callback` المسجّل لديك إلى صفحة تستدعي `handleCallback()` مرة واحدة. تجنّب تشغيل التأثيرات المكررة، بما فيها إعادة تشغيل التأثيرات في بيئة التطوير، فالرمز يُستخدم مرة واحدة فقط.
3. افصل بوضوح بين حالات التحميل ومسجّل الخروج ومسجّل الدخول وفشل الجلسة. اعرض أخطاء تسجيل الدخول دون تسجيل أي token أو رموز الاستدعاء.
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()` بعد معالجة الاستدعاء لتعبئة واجهة المستخدم ببيانات المستخدم. عند تسجيل الخروج، امسح الذاكرة المؤقتة الخاصة بالمستخدم وعالج فشل الإبطال على الخادم بشكل صريح. لا يحتفظ مساعد جافاسكريبت المبسّط بالجلسات بعد إعادة تحميل الصفحة.

## معاينة إصدار حزمة React

توفر الحزمة المخطط لها `@didit-protocol/auth-react` مكوّن الجذر `DiditAuth` والدالتين `useAuth` و`useUser` والمكوّنات `SignIn` و`SignUp` و`UserButton` و`SignedIn` و`SignedOut` و`ConnectedAgents`. يجب أخذ خصائص المكوّنات وتوجيه الاستدعاء وإصدارات الحزمة من الإصدار المنشور. لا تفترض أن SDK الخاص بالتحقق يوفّر هذه المكوّنات.

تعتمد الإشارات التلقائية و`vendorData` على إصدار نواة المصادقة. إلى أن يصدر، استخدم الربط الذي يوفّره خادمك بالاعتماد على `sub` الذي تم التحقق منه. راجع [تعليمات التكامل المشتركة](https://docs.didit.me/ar/integration/integration-prompt.md) للتحقق والمراقبة إلى جانب تسجيل الدخول.

اختبر إعادة التوجيه الملغاة، والنقر المزدوج على تسجيل الدخول، وتحديث صفحة الاستدعاء، والجلسة منتهية الصلاحية، وMFA، وتسجيل الخروج. اعرض حالتي التحميل والخطأ دون إظهار بيانات محمية من مستخدم سابق.


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