# Better Auth React Setup: External Server Guide সাধারণত Better Auth নিয়ে যত টিউটোরিয়াল পাওয়া যায় তার প্রায় সবগুলোই Next.js এর সাথে ইন্টিগ্রেশন নিয়ে লেখা। কিন্তু বাস্তব প্রজেক্টে অনেক সময় এমন সিচুয়েশন আসে যেখানে React ফ্রন্টএন্ড আলাদা থাকে আর একটা ডেডিকেটেড এক্সটার্নাল সার্ভার থাকে, আর সেখান থেকে API কল করে অথেন্টিকেশন করাতে হয়। এই ব্লগে আমরা ঠিক এই কাজটাই করব — একটা সম্পূর্ণ Better Auth React Setup, যেখানে ফ্রন্টএন্ড এবং ব্যাকএন্ড সম্পূর্ণ আলাদা প্রজেক্ট হিসেবে থাকবে। ## কেন External Server দিয়ে Better Auth React Setup করবেন Next.js এ Better Auth বসানো তুলনামূলক সহজ, কারণ একই প্রজেক্টে API রুট আর ফ্রন্টএন্ড দুটোই থাকে। কিন্তু যখন React (Vite) দিয়ে বানানো ফ্রন্টএন্ডের জন্য আলাদা একটা Express সার্ভার ব্যবহার করতে হয়, তখন cookie, CORS আর credentials নিয়ে কাজটা কিছুটা ট্রিকি হয়ে যায়। এই আর্কিটেকচারটা কাজে লাগে যখন একই ব্যাকএন্ড দিয়ে একাধিক ফ্রন্টএন্ড (ওয়েব, মোবাইল অ্যাপ) সার্ভ করতে হয়, অথবা টিমে ফ্রন্টএন্ড আর ব্যাকএন্ড আলাদাভাবে ডেভেলপ ও ডিপ্লয় করা হয়। ## প্রজেক্ট আর্কিটেকচার ওভারভিউ পুরো Better Auth React Setup প্রজেক্টটাকে দুইটা আলাদা ফোল্ডারে ভাগ করা হয়েছে — একটা ক্লায়েন্ট, একটা সার্ভার। | ফোল্ডার | টেকনোলজি | কাজ | |---|---|---| | better-auth-client | React 19 + Vite + Tailwind CSS | UI, reusable components এবং auth client দিয়ে API কল | | better-auth-server | Express 5 + MongoDB | Better Auth instance হোস্ট করা | ### Client Side (React + Vite + Tailwind) ক্লায়েন্ট সাইডে থাকে `better-auth/react` থেকে আসা auth client, একটা কাস্টম `useAuth` হুক, আর কয়েকটা reusable UI কম্পোনেন্ট (AuthCard, AuthForm, FormInput, SubmitButton, UserProfile)। UI স্টাইলিং করা হয়েছে Tailwind CSS দিয়ে, তাই ইনলাইন স্টাইলের বদলে ক্লিন ক্লাসনেম ব্যবহার হয়েছে। ### Server Side (Express + MongoDB) সার্ভার সাইডে থাকে আসল Better Auth instance, যেটা MongoDB এর সাথে কানেক্ট থাকে এবং সব authentication রিকোয়েস্ট হ্যান্ডেল করে। ## Backend সেটআপ ধাপে ধাপে এই পুরো সেটআপের সবচেয়ে গুরুত্বপূর্ণ অংশ হলো ব্যাকএন্ড, কারণ এখানেই আসল auth instance তৈরি হয়। ### প্রয়োজনীয় প্যাকেজ ইনস্টল সার্ভার প্রজেক্টে নিচের প্যাকেজগুলো লাগবে: - `better-auth` এবং `@better-auth/mongo-adapter` - `express` - `cors` - `mongodb` - `dotenv` ```bash pnpm add better-auth @better-auth/mongo-adapter express cors mongodb dotenv ``` or using npm ```bash npm install better-auth @better-auth/mongo-adapter express cors mongodb dotenv ``` ### Environment Variables কনফিগার করা `.env` ফাইলে চারটা ভ্যারিয়েবল রাখতে হবে, আর একটা `env.js` ফাইলে সেগুলো এক জায়গায় এক্সপোর্ট করা হয়: ```javascript import dotenv from 'dotenv' dotenv.config() export const envVar = { MONGODB_URI: process.env.MONGODB_URI, PORT: process.env.PORT, BASE_URL: process.env.BASE_URL, BETTER_AUTH_SECRET: process.env.BETTER_AUTH_SECRET, } ``` ### MongoDB Connection সেটআপ MongoDB এর সাথে কানেকশনের জন্য একটা আলাদা `mongodb.js` ফাইল রাখা ভালো অভ্যাস, যাতে পরে অন্য কোথাও দরকার হলে reuse করা যায়: ```javascript import { MongoClient } from 'mongodb' import { envVar } from './env' const uri = envVar.MONGODB_URI export const client = new MongoClient(uri) ``` ### Better Auth Instance তৈরি করা এবার আসল কাজ — Better Auth instance তৈরি করা এবং MongoDB adapter এর সাথে যুক্ত করা: ```javascript import { betterAuth } from 'better-auth' import { mongodbAdapter } from 'better-auth/adapters/mongodb' import { client } from './mongodb' import { envVar } from './env' export const auth = betterAuth({ database: mongodbAdapter(client.db()), baseURL: envVar.BASE_URL, secret: envVar.BETTER_AUTH_SECRET, trustedOrigins: ['http://localhost:5173'], emailAndPassword: { enabled: true, }, }) ``` এখানে `trustedOrigins` অংশটা সবচেয়ে বেশি গুরুত্বপূর্ণ, কারণ এখানেই বলে দেওয়া হয় কোন ফ্রন্টএন্ড ডোমেইন থেকে রিকোয়েস্ট গ্রহণযোগ্য। ### Express Server ও CORS কনফিগারেশন সবশেষে Express অ্যাপে auth instance টাকে মাউন্ট করতে হবে: ```javascript import express from 'express' import cors from 'cors' import { auth } from './lib/auth' import { toNodeHandler } from 'better-auth/node' import { client } from './lib/mongodb' import { envVar } from './lib/env' const app = express() await client.connect() app.use(express.json()) app.use( cors({ origin: 'http://localhost:5173', credentials: true, }), ) app.all('/api/auth/*path', toNodeHandler(auth)) app.listen(envVar.PORT, () => { console.log(`Server running On PORT ${envVar.PORT}`) }) ``` `toNodeHandler` ফাংশনটা Better Auth এর সব রুট (signup, login, session, logout) একসাথে `/api/auth/*` পাথে হ্যান্ডেল করে দেয়, আলাদা করে প্রতিটা রুট লেখার দরকার হয় না। ## Frontend সেটআপ ধাপে ধাপে ব্যাকএন্ড রেডি হওয়ার পর এবার React সাইডে ক্লায়েন্ট অংশটা করতে হবে। আপডেটেড ভার্সনে ফ্রন্টএন্ডটা আর একটা সিঙ্গেল ফাইলে বন্দি না — এখানে auth লজিক আর UI আলাদা আলাদা ফাইলে ভাগ করা হয়েছে, যাতে কোড পরিষ্কার আর reusable থাকে। ```text src/ ├── components/auth/ │ ├── AuthCard.jsx │ ├── AuthForm.jsx │ ├── FormInput.jsx │ ├── SubmitButton.jsx │ └── UserProfile.jsx ├── hooks/ │ └── useAuth.js ├── lib/ │ └── auth-client.js └── App.jsx ``` ### Auth Client তৈরি করা React (Vite) প্রজেক্টে `better-auth` প্যাকেজ ইনস্টল করে একটা auth client বানাতে হয়, যেখানে ব্যাকএন্ড সার্ভারের URL দিতে হবে: ```javascript import { createAuthClient } from 'better-auth/react' export const authClient = createAuthClient({ baseURL: 'http://localhost:8000', }) ``` প্রজেক্টে এখন একটা `.env.example` ফাইলও যোগ করা হয়েছে (`VITE_API_URL="http://localhost:8000"`), যাতে ভবিষ্যতে চাইলে এই URL টাকে হার্ডকোড না করে environment variable থেকে নেওয়া যায়। ### useAuth কাস্টম হুক দিয়ে Logic আলাদা করা সবচেয়ে বড় পরিবর্তন এখানেই — register, login, logout, session চেক করার পুরো লজিকটা এখন একটা কাস্টম হুকে রাখা হয়েছে, যাতে যেকোনো কম্পোনেন্ট থেকে সহজেই ব্যবহার করা যায়: ```javascript export default function useAuth() { const [user, setUser] = useState(null) const [loading, setLoading] = useState(false) const [initialLoading, setInitialLoading] = useState(true) const [error, setError] = useState('') const getSession = async () => { const { data, error } = await authClient.getSession() setUser(data?.user ?? null) setInitialLoading(false) return data?.user } const login = async ({ email, password }) => { setLoading(true) const { data, error } = await authClient.signIn.email({ email, password }) if (!error) setUser(data?.user ?? null) setLoading(false) return { success: !error, data, error } } const register = async ({ name, email, password }) => { const { data, error } = await authClient.signUp.email({ name, email, password }) if (!error) setUser(data?.user ?? null) return { success: !error, data, error } } const logout = async () => { await authClient.signOut() setUser(null) } useEffect(() => { getSession() }, []) return { user, error, loading, initialLoading, login, register, logout, getSession } } ``` `initialLoading` স্টেটটা খুব দরকারি একটা যোগ — অ্যাপ প্রথমবার লোড হওয়ার সময় সেশন চেক করার আগেই যেন ইউজারকে লগইন ফর্ম দেখানো না হয়ে যায়, সেটা এই স্টেট দিয়েই কন্ট্রোল করা হয়। ### Reusable Auth Components দিয়ে UI সাজানো লজিক থেকে UI আলাদা রাখার জন্য পাঁচটা ছোট ছোট কম্পোনেন্ট বানানো হয়েছে: | কম্পোনেন্ট | কাজ | |---|---| | `AuthCard` | Title, subtitle সহ কার্ড লেআউট ধরে রাখে | | `FormInput` | লেবেলসহ একটা reusable input field | | `SubmitButton` | Loading স্টেট অনুযায়ী বাটনের টেক্সট বদলায় | | `AuthForm` | Login/Register দুই মোডেই ব্যবহারযোগ্য একটা ফর্ম | | `UserProfile` | লগইন করা ইউজারের তথ্য এবং Logout বাটন দেখায় | `AuthForm` কম্পোনেন্টটা `mode` prop এর মান অনুযায়ী (`login` বা `register`) ফর্মের ফিল্ড আর টেক্সট বদলে দেয়, তাই আলাদা করে দুইটা ফর্ম বানাতে হয়নি: ```jsx ``` ### App.jsx তে সব একসাথে জোড়া লাগানো সবশেষে `App.jsx` এ `useAuth` হুক আর কম্পোনেন্টগুলো একসাথে যুক্ত করা হয়েছে। ইউজার লগইন করা থাকলে `UserProfile` দেখাবে, না থাকলে `AuthForm` দেখাবে, আর `mode` স্টেট দিয়ে Login/Register টগল করা যাবে: ```jsx const { user, login, register, logout, loading, initialLoading, error } = useAuth() const [mode, setMode] = useState('login') if (initialLoading) return

return user ? ( ) : ( ) ``` এভাবে পুরো Better Auth React Setup এর ফ্রন্টএন্ড অংশটা একটা প্রোডাকশন-রেডি স্ট্রাকচারে দাঁড়িয়ে যায় — logic হুকে, UI কম্পোনেন্টে, আর স্টাইলিং Tailwind ক্লাসে আলাদা আলাদাভাবে সাজানো। ## CORS এবং Credentials নিয়ে সবচেয়ে বেশি হওয়া ভুল External server দিয়ে Better Auth React Setup করার সময় বেশিরভাগ সমস্যা হয় cookie আর CORS নিয়ে। যেহেতু ফ্রন্টএন্ড আর ব্যাকএন্ড আলাদা পোর্টে চলে (5173 বনাম 8000), তাই কুকি ঠিকমতো সেট না হলে session কাজ করবে না। - CORS কনফিগারেশনে `credentials: true` অবশ্যই দিতে হবে। - ফ্রন্টএন্ডের `fetch` বা auth client কল যেন `credentials: 'include'` মোডে যায়, তা better-auth নিজেই হ্যান্ডেল করে দেয়। - `trustedOrigins` এ ঠিক সেই URL দিতে হবে যেটা থেকে ফ্রন্টএন্ড রান হচ্ছে, নাহলে রিকোয়েস্ট ব্লক হয়ে যাবে। ## প্রজেক্ট রান এবং টেস্ট করা দুইটা ফোল্ডারেই এখন একটা করে `.env.example` ফাইল দেওয়া আছে — সেটা কপি করে `.env` বানিয়ে নিজের `MONGODB_URI` আর `BETTER_AUTH_SECRET` বসিয়ে নিতে হবে। তারপর দুইটা টার্মিনালে দুইটা প্রজেক্ট আলাদাভাবে রান করতে হয়: ```bash # সার্ভার (better-auth-server ফোল্ডারে) pnpm dev # ক্লায়েন্ট (better-auth-client ফোল্ডারে) pnpm dev ``` সার্ভার সাধারণত `http://localhost:8000` এ আর ক্লায়েন্ট `http://localhost:5173` এ রান হবে। Register বাটনে ক্লিক করে একটা টেস্ট ইউজার বানিয়ে, তারপর Login করে দেখা যেতে পারে session ঠিকমতো তৈরি হচ্ছে কিনা। ### Project Demo

## কমন এরর ও সমাধান Better Auth React Setup করার সময় নতুনদের সাধারণত যেসব এরর বেশি আসে: - **CORS error**: `trustedOrigins` আর cors middleware এর `origin` একই URL কিনা চেক করতে হবে। - **Session না পাওয়া**: cors এ `credentials: true` মিসিং থাকলে কুকি সেট হয় না। - **MongoDB connect না হওয়া**: `MONGODB_URI` ঠিক আছে কিনা এবং `client.connect()` সার্ভার স্টার্টের আগেই await করা হয়েছে কিনা দেখতে হবে। ## শেষ কথা External backend দিয়ে Better Auth React Setup করা প্রথমে একটু জটিল মনে হলেও, একবার CORS আর trustedOrigins এর কনসেপ্টটা পরিষ্কার হয়ে গেলে বাকি কাজ অনেকটাই straightforward। এই আর্কিটেকচারটা বিশেষভাবে কাজে লাগে যখন একই ব্যাকএন্ড দিয়ে একাধিক ফ্রন্টএন্ড সার্ভ করতে হয়। সম্পূর্ণ কোডটা [ismailjosim/better-auth-react GitHub রিপোজিটরিতে](https://github.com/ismailjosim/better-auth-react) পাওয়া যাবে, যেখানে ক্লায়েন্ট আর সার্ভার দুটো ফোল্ডারই আলাদাভাবে রাখা আছে। Better Auth এর অফিসিয়াল ডকুমেন্টেশন থেকে আরও গভীরে জানতে চাইলে দেখতে পারেন [Better Auth এর ইনস্টলেশন ডক্স](https://better-auth.com/docs/installation)। ---

Blog

Better Auth React Setup: External Server Guide

Content

Comments

Related Articles