2026 সালে ক্লার্কের সাথে একটি প্রতিক্রিয়া অ্যাপে প্রমাণীকরণ কীভাবে যুক্ত করবেন

স্ক্র্যাচ থেকে প্রমাণীকরণ তৈরি করা জটিল এবং ত্রুটি-প্রবণ — সাইন-আপ প্রবাহ, পাসওয়ার্ড রিসেট, সামাজিক লগইন, সেশন পরিচালনা এবং নিরাপত্তা। কেরানি ড্রপ-ইন প্রতিক্রিয়া উপাদানগুলির সাথে এটি সমস্ত পরিচালনা করে। এই নির্দেশিকাটি দ্রুত এবং নিরাপদে একটি প্রতিক্রিয়া অ্যাপে সম্পূর্ণ প্রমাণীকরণ যোগ করে।

কেন কেরানি ব্যবহার করবেন?

• পূর্ব-নির্মিত UI উপাদান: সাইন-ইন, সাইন আপ, এবং ব্যবহারকারী প্রোফাইল উপাদানগুলি ব্যবহারের জন্য প্রস্তুত সামাজিক লগইন বিল্ট ইন:
• ন্যূনতম কনফিগারেশন সহ Google, GitHub এবং আরও অনেক কিছুকঠিন অংশগুলি পরিচালনা করে:
• সেশন, পাসওয়ার্ড রিসেট, ইমেল যাচাইকরণ, MFAডিফল্টরূপে সুরক্ষিত:
• নিরাপত্তার সর্বোত্তম অনুশীলনগুলি অনুসরণ করে যা আপনাকে বাস্তবায়ন করতে হবে নাব্যবহারকারী ব্যবস্থাপনা:
• ব্যবহারকারীদের দেখতে এবং পরিচালনা করার জন্য একটি ড্যাশবোর্ডসেটআপ

ClerkProvider এর সাথে আপনার অ্যাপটি মোড়ানো

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

ব্যাকএন্ড যাচাইকরণ (Node.js)

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

প্রায়শই জিজ্ঞাসিত প্রশ্ন

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

প্রশ্ন: ক্লার্ক বনাম বিল্ডিং লেখক আমি?

উত্তর: ক্লার্ক জটিল, নিরাপত্তা-সমালোচনামূলক অংশগুলি (সেশন, পাসওয়ার্ড রিসেট, ইমেল যাচাইকরণ, MFA, সামাজিক লগইন) পূর্ব-নির্মিত উপাদানগুলির সাথে পরিচালনা করে — উল্লেখযোগ্য সময় বাঁচায় এবং নিরাপত্তা ঝুঁকি হ্রাস করে। নিজেকে auth তৈরি করা সম্পূর্ণ নিয়ন্ত্রণ দেয় তবে এই সমস্ত প্রবাহকে সঠিকভাবে বাস্তবায়ন এবং সুরক্ষিত করতে হবে। বেশিরভাগ অ্যাপের জন্য, ক্লার্ক (বা অনুরূপ) হল বাস্তবসম্মত পছন্দ।
প্রশ্ন: ক্লার্ক বনাম NextAuth বনাম Supabase Auth?

উত্তর: ক্লার্ক সবচেয়ে পালিশ পূর্ব-নির্মিত UI উপাদান এবং ব্যবহারকারী ব্যবস্থাপনা অফার করে। NextAuth (Auth.js) Next.js এবং স্ব-হোস্টেড নমনীয়তার জন্য দুর্দান্ত। একটি সুপাবেস ব্যাকএন্ডের সাথে সুপাবেস Auth জোড়া। সবগুলোই কঠিন — ক্লার্ক ড্রপ-ইন UI এবং DX-এ পারদর্শী; আপনার স্ট্যাকের উপর ভিত্তি করে চয়ন করুন এবং আপনি হোস্ট করা সুবিধা বা স্ব-হোস্টেড নিয়ন্ত্রণ চান কিনা।
প্রশ্ন: আমি কিভাবে ব্যাকএন্ড API রুট রক্ষা করব?

উত্তর: ফ্রন্টএন্ডে ক্লার্ক সেশন টোকেন পান
, এটি একটি বহনকারী টোকেন হিসাবে পাঠান, এবং এটি আপনার ব্যাকএন্ডেgetToken()দিয়ে যাচাই করুন৷ এর ভেরিফাই টোকেন। যাচাইকৃত টোকেন আপনাকে অনুরোধ অনুমোদন করার জন্য ব্যবহারকারী আইডি দেয়। এটি আদর্শ টোকেন-ভিত্তিক প্রবাহ।@clerk/backendপ্রশ্ন: ক্লার্ক কি সামাজিক লগইন সমর্থন করে?

উত্তর: হ্যাঁ — Google, GitHub, এবং ন্যূনতম কনফিগারেশন সহ অন্যান্য অনেক প্রদানকারী। ক্লার্ক ড্যাশবোর্ডে তাদের সক্ষম করুন এবং সাইন-ইন/সাইন-আপ উপাদানগুলি স্বয়ংক্রিয়ভাবে সামাজিক লগইন বিকল্পগুলি দেখায়৷ কোনো ম্যানুয়াল OAuth বাস্তবায়নের প্রয়োজন নেই।
প্রশ্নঃ কেরানি কি মুক্ত?

উত্তর: ক্লার্ক অনেক অ্যাপের জন্য উপযুক্ত একটি বিনামূল্যের স্তর রয়েছে, উচ্চতর ব্যবহার এবং উন্নত বৈশিষ্ট্যগুলির জন্য অর্থপ্রদানের স্তর সহ। আপনার প্রত্যাশিত ব্যবহারকারীর সংখ্যার জন্য বর্তমান মূল্য পরীক্ষা করুন। শুরু করার জন্য এবং ছোট-থেকে-মাঝারি অ্যাপ্লিকেশানগুলির জন্য, বিনামূল্যের স্তরটি প্রায়শই যথেষ্ট।
উপসংহার

ক্লার্ক ড্রপ-ইন কম্পোনেন্ট সহ জটিল অংশগুলি — সেশন, পাসওয়ার্ড রিসেট, ইমেল যাচাইকরণ, MFA এবং সোশ্যাল লগইন — পরিচালনা করে একটি প্রতিক্রিয়া অ্যাপে দ্রুত এবং সুরক্ষিত প্রমাণীকরণ যোগ করে। কর্মপ্রবাহঃ

ClerkProvider-এ আপনার অ্যাপটি মোড়ানো, সঠিক UI দেখানোর জন্য SignedIn/SignedOut উপাদানগুলি ব্যবহার করুন, SignedIn/SignUp পৃষ্ঠাগুলি যোগ করুন, SignedIn + RedirectToSignIn দিয়ে রুটগুলি সুরক্ষিত করুন, UseUser দিয়ে ব্যবহারকারীর ডেটা অ্যাক্সেস করুন এবং আপনার ব্যাকএন্ডে Clerk টোকেনগুলি যাচাই করুন. আপনি একটি সম্পূর্ণ, সুরক্ষিত প্রমাণীকরণ সিস্টেম পাবেন পালিশড UI সহ এটি তৈরি করতে যে সময় লাগবে তার একটি ভগ্নাংশে, এবং ম্যানুয়ালি প্রমাণীকরণ প্রবাহ বাস্তবায়নের নিরাপত্তা ঝুঁকি ছাড়াই। প্রমাণীকরণের প্রয়োজন এমন বেশিরভাগ প্রতিক্রিয়া অ্যাপ্লিকেশনগুলির জন্য, ক্লার্ক (বা অনুরূপ পরিচালিত প্রমাণীকরণ প্রদানকারী) আপনাকে সুরক্ষিত প্রমাণীকরণ পুনরায় উদ্ভাবনের পরিবর্তে আপনার অ্যাপের প্রকৃত বৈশিষ্ট্যগুলিতে ফোকাস করতে দেয়।. আপনি একটি সম্পূর্ণ, সুরক্ষিত প্রমাণীকরণ সিস্টেম পাবেন পালিশড UI সহ এটি তৈরি করতে যে সময় লাগবে তার একটি ভগ্নাংশে, এবং ম্যানুয়ালি প্রমাণীকরণ প্রবাহ বাস্তবায়নের নিরাপত্তা ঝুঁকি ছাড়াই। প্রমাণীকরণের প্রয়োজন এমন বেশিরভাগ প্রতিক্রিয়া অ্যাপ্লিকেশনগুলির জন্য, ক্লার্ক (বা অনুরূপ পরিচালিত প্রমাণীকরণ প্রদানকারী) আপনাকে সুরক্ষিত প্রমাণীকরণ পুনরায় উদ্ভাবনের পরিবর্তে আপনার অ্যাপের প্রকৃত বৈশিষ্ট্যগুলিতে ফোকাস করতে দেয়।