2026 में क्लर्क के साथ रिएक्ट ऐप में प्रमाणीकरण कैसे जोड़ें

शुरुआत से प्रमाणीकरण बनाना जटिल और त्रुटि-प्रवण है – साइन-अप प्रवाह, पासवर्ड रीसेट, सामाजिक लॉगिन, सत्र प्रबंधन और सुरक्षा। क्लर्क यह सब ड्रॉप-इन रिएक्ट घटकों के साथ संभालता है। यह मार्गदर्शिका रिएक्ट ऐप में त्वरित और सुरक्षित रूप से पूर्ण प्रमाणीकरण जोड़ती है।

क्लर्क का उपयोग क्यों करें?

• पूर्व-निर्मित यूआई घटक: साइन-इन, साइन-अप और उपयोगकर्ता प्रोफ़ाइल घटक उपयोग के लिए तैयार हैं
• सामाजिक लॉगिन अंतर्निहित: न्यूनतम कॉन्फ़िगरेशन के साथ Google, GitHub और बहुत कुछ
• कठोर भागों को संभालता है: सत्र, पासवर्ड रीसेट, ईमेल सत्यापन, एमएफए
• डिफ़ॉल्ट रूप से सुरक्षित: सुरक्षा संबंधी सर्वोत्तम प्रक्रियाओं का पालन करता है जिन्हें आपको लागू करने की आवश्यकता नहीं है
• उपयोगकर्ता प्रबंधन: उपयोगकर्ताओं को देखने और प्रबंधित करने के लिए एक डैशबोर्ड

सेटअप

npm install @clerk/clerk-react

# Create an app at clerk.com, get your publishable key, add to .env
VITE_CLERK_PUBLISHABLE_KEY=pk_test_xxx

अपने ऐप को क्लर्कप्रोवाइडर

// main.jsx
import { ClerkProvider } from '@clerk/clerk-react';

const PUBLISHABLE_KEY = import.meta.env.VITE_CLERK_PUBLISHABLE_KEY;

ReactDOM.createRoot(document.getElementById('root')).render(
  <ClerkProvider publishableKey={PUBLISHABLE_KEY}>
    <App />
  </ClerkProvider>
);

के साथ लपेटें साइन-इन और साइन-अप जोड़ें

import {
  SignedIn, SignedOut, SignInButton, SignUpButton, UserButton
} from '@clerk/clerk-react';

function Header() {
  return (
    <header>
      <SignedOut>
        {/* Shown only when signed OUT */}
        <SignInButton />
        <SignUpButton />
      </SignedOut>

      <SignedIn>
        {/* Shown only when signed IN - includes profile/sign-out menu */}
        <UserButton />
      </SignedIn>
    </header>
  );
}

पूर्ण साइन-इन/साइन-अप पृष्ठ

import { SignIn, SignUp } from '@clerk/clerk-react';

// Dedicated sign-in page with the full Clerk UI
function SignInPage() {
  return <SignIn routing="path" path="/sign-in" />;
}

function SignUpPage() {
  return <SignUp routing="path" path="/sign-up" />;
}
// These render complete, styled auth flows with social login,
// password reset, email verification - all handled for you

मार्गों की सुरक्षा

import { SignedIn, SignedOut, RedirectToSignIn } from '@clerk/clerk-react';

function ProtectedPage() {
  return (
    <>
      <SignedIn>
        {/* Protected content - only for signed-in users */}
        <Dashboard />
      </SignedIn>
      <SignedOut>
        {/* Redirect signed-out users to sign in */}
        <RedirectToSignIn />
      </SignedOut>
    </>
  );
}

उपयोगकर्ता डेटा तक पहुंच

import { useUser, useAuth } from '@clerk/clerk-react';

function Profile() {
  const { isLoaded, isSignedIn, user } = useUser();

  if (!isLoaded) return <div>Loading...</div>;
  if (!isSignedIn) return <div>Not signed in</div>;

  return (
    <div>
      <h1>Hello, {user.firstName}!</h1>
      <p>Email: {user.primaryEmailAddress?.emailAddress}</p>
      <img src={user.imageUrl} alt="avatar" />
    </div>
  );
}

प्रामाणिक टोकन के साथ अपने बैकएंड को कॉल करना

import { useAuth } from '@clerk/clerk-react';

function useApi() {
  const { getToken } = useAuth();

  const callApi = async (endpoint) => {
    const token = await getToken();   // Clerk session token
    const res = await fetch(endpoint, {
      headers: { Authorization: `Bearer ${token}` },
    });
    return res.json();
  };

  return { callApi };
}
// Your backend verifies the Clerk token to authenticate the request

बैकएंड सत्यापन (Node.js)

npm install @clerk/backend

import { verifyToken } from '@clerk/backend';

async function authenticate(req, res, next) {
  const token = req.headers.authorization?.replace('Bearer ', '');
  if (!token) return res.status(401).json({ error: 'No token' });

  try {
    const payload = await verifyToken(token, {
      secretKey: process.env.CLERK_SECRET_KEY,
    });
    req.userId = payload.sub;   // Clerk user ID
    next();
  } catch {
    res.status(401).json({ error: 'Invalid token' });
  }
}

अक्सर पूछे जाने वाले प्रश्न

प्रश्न: क्लर्क बनाम स्वयं भवन निर्माण?
उ: क्लर्क पूर्व-निर्मित घटकों के साथ जटिल, सुरक्षा-महत्वपूर्ण भागों (सत्र, पासवर्ड रीसेट, ईमेल सत्यापन, एमएफए, सामाजिक लॉगिन) को संभालता है – महत्वपूर्ण समय बचाता है और सुरक्षा जोखिम को कम करता है। स्वयं प्राधिकरण बनाने से पूर्ण नियंत्रण मिलता है लेकिन इन सभी प्रवाहों को सही ढंग से लागू करने और सुरक्षित करने की आवश्यकता होती है। अधिकांश ऐप्स के लिए, क्लर्क (या समान) व्यावहारिक विकल्प है।

प्रश्न: क्लर्क बनाम नेक्स्टऑथ बनाम सुपाबेस ऑथ?
उत्तर: क्लर्क सबसे परिष्कृत पूर्व-निर्मित यूआई घटक और उपयोगकर्ता प्रबंधन प्रदान करता है। NextAuth (Auth.js) Next.js और स्व-होस्टेड लचीलेपन के लिए बहुत अच्छा है। सुपाबेस ऑथ को सुपाबेस बैकएंड के साथ जोड़ा जाता है। सभी ठोस हैं – ड्रॉप-इन यूआई और डीएक्स में क्लर्क उत्कृष्टता प्राप्त करता है; अपने स्टैक के आधार पर चुनें और आप होस्टेड सुविधा चाहते हैं या स्व-होस्टेड नियंत्रण चाहते हैं।

प्रश्न: मैं बैकएंड एपीआई मार्गों की सुरक्षा कैसे करूं?
उत्तर:getToken()के साथ फ्रंटएंड पर क्लर्क सत्र टोकन प्राप्त करें , इसे बियरर टोकन के रूप में भेजें, और इसे अपने बैकएंड पर@clerk/backendके साथ सत्यापित करें का VerifyToken. सत्यापित टोकन आपको अनुरोधों को अधिकृत करने के लिए उपयोगकर्ता आईडी देता है। यह मानक टोकन-आधारित प्रवाह है.

प्रश्न: क्या क्लर्क सामाजिक लॉगिन का समर्थन करता है?
उत्तर: हाँ – Google, GitHub, और न्यूनतम कॉन्फ़िगरेशन वाले कई अन्य प्रदाता। उन्हें क्लर्क डैशबोर्ड में सक्षम करें, और साइन-इन/साइन-अप घटक स्वचालित रूप से सामाजिक लॉगिन विकल्प दिखाते हैं। किसी मैन्युअल OAuth कार्यान्वयन की आवश्यकता नहीं है.

प्रश्न: क्या क्लर्क मुफ़्त है?
उ: क्लर्क के पास कई ऐप्स के लिए उपयुक्त एक निःशुल्क टियर है, जिसमें उच्च उपयोग और उन्नत सुविधाओं के लिए सशुल्क टियर हैं। अपनी अपेक्षित उपयोगकर्ता संख्या के लिए वर्तमान मूल्य निर्धारण की जाँच करें। शुरुआत करने और छोटे-से-मध्यम ऐप्स के लिए, फ्री टियर अक्सर पर्याप्त होता है।

निष्कर्ष

क्लर्क ड्रॉप-इन घटकों के साथ जटिल भागों – सत्र, पासवर्ड रीसेट, ईमेल सत्यापन, एमएफए और सामाजिक लॉगिन – को संभालकर रिएक्ट ऐप में प्रमाणीकरण को तेजी से और सुरक्षित रूप से जोड़ता है। वर्कफ़्लो:अपने ऐप को क्लर्कप्रोवाइडर में लपेटें, सही यूआई दिखाने के लिए साइनइन/साइनडआउट घटकों का उपयोग करें, साइनइन/साइनअप पेज जोड़ें, साइनइन + रीडायरेक्टटूसाइनइन के साथ मार्गों की सुरक्षा करें, यूज़यूजर के साथ उपयोगकर्ता डेटा तक पहुंचें, और अपने बैकएंड पर क्लर्क टोकन सत्यापित करें. आपको इसे बनाने में लगने वाले समय के एक अंश में पॉलिश यूआई के साथ एक पूर्ण, सुरक्षित प्रमाणीकरण प्रणाली मिलती है, और मैन्युअल रूप से प्रमाणीकरण प्रवाह को लागू करने के सुरक्षा जोखिम के बिना। प्रमाणीकरण की आवश्यकता वाले अधिकांश रिएक्ट ऐप्स के लिए, क्लर्क (या एक समान प्रबंधित प्रमाणीकरण प्रदाता) आपको सुरक्षित प्रमाणीकरण को फिर से शुरू करने के बजाय अपने ऐप की वास्तविक सुविधाओं पर ध्यान केंद्रित करने देता है।