Modern Auth Solution in Next.js

Authentication ဆိုတာ အခုနောက်ပိုင်း web app တွေမှာတော့ မပါမဖြစ် အရေးကြီးတဲ့နေရာကနေ ပါဝင်နေပါတယ်။ အဲ့လိုဆိုပေမယ့်လည်း beginner တို့အဖို့ဆိုရင် လွယ်ကူတဲ့ကိစ္စတစ်ခုတော့ မဟုတ်သလို လုပ်ဆောင်ရတဲ့ process တွေကလည်း များပါတယ်။ ဒီ blog မှာတော့ NextJs မှာ အလွယ်တကူနဲ့ functional ဖြစ်တဲ့ authentication ကိုတည်ဆောက်သွားမှာပါ။

ဒါကတော့ Live Demo ပါ။

ကျွန်တော်နဲ့အတူတူ လိုက်ရေးဖို့ဆိုရင် အနည်းဆုံး NextJs အခြေခံလောက် သိထားရင် လုံလောက်ပါတယ်။

What will we use?

ဘာကိုသုံးမှာလဲဆိုတော့ Better Auth ပါ။ Kinde တို့ Clerk တို့လို လွယ်ကူတဲ့ provider တွေနဲ့ ဘာကွာလဲဆိုရင် သူက framework agnostic ဖြစ်ပြီးတော့ ကိုယ့်ရဲ့ project scope အလိုက် scalable လုပ်နိုင်တဲ့အပြင် user data တွေကို manage လုပ်ချင်ရင်လည်း လွယ်ကူပါတယ်။

Getting Started

ပထမဆုံးအနေနဲ့ကတော့ Next.js app မှာ လိုအပ်တဲ့ package တွေကို install လုပ်ပါမယ်။

ကျွန်တော်ကတော့ package manager အနေနဲ့ bun ကိုပဲအသုံးပြုသွားမှာဖြစ်ပြီး အဲ့နေရာမှာ ကိုယ်ကြိုက်တာကို အစားထိုးအသုံးပြုနိုင်ပါတယ်။

Setting Environment Variable

Project root directory မှာပဲ .env ဆိုတဲ့ file တစ်ခုကိုတည်ဆောက်ပြီး အောက်က variable တွေ ထည့်ပေးရမှာပါ။

Creating Auth Instance

auth.ts ဆိုတဲ့ file ကို create လုပ်ပြီးတော့ auth instance ကို export လုပ်ပေးဖို့လိုပါမယ်။ ကျွန်တော်ကတော့ lib folder ထဲမှာ အောက်ကအတိုင်း create လုပ်လိုက်ပါမယ်။

./lib/auth.ts

သာမာန် email နဲ့ password auth logic ကိုမှ social provider အနေနဲ့ google ကိုအသုံးပြုပြီး configure လုပ်ထားပါတယ်။ အဲ့ဒီမှာ သတိထားရမှာကတော့ ကျွန်တော်တို့က server actions တွေခေါ်တဲ့နေရာမှာ cookies တွေကို အသုံးပြုရမယ့်အတွက် nextCookies ဆိုတဲ့ plugin လေးကို ထည့်ပေးရပါမယ်။

Configuring Database

Better Auth က database queries တွေအတွက် default အနေနဲ့ Kysely ကို အသုံးပြုပေမယ့် ကျွန်တော်ကတော့ Drizzle ORM နဲ့ Neon database ကို အသုံးပြုသွားမှာဖြစ်တဲ့အတွက် အခု အဲ့တာကို configure လုပ်ပါမယ်။

ပထမဆုံးအနေနဲ့ database instance ဆောက်ပါမယ်။

./db/index.ts

နောက်တစ်ဆင့်အနေနဲ့ ခုနက auth.ts မှာပဲ drizzleAdapter နဲ့ database ကို integrate လုပ်ပါမယ်။

အဲ့တာတွေပြီးရင်တော့ drizzle config ဆောက်ပြီး schema ကို အောက်က အတိုင်း schema ကို generate migrate လုပ်ပေးရင် ရပါပြီ။

./drizzle.config.ts

Creating Handlers

Api request တွေကို handle လုပ်ဖို့ကကျတော့ ကျွန်တော်တို့က catch-all route တွေ create ဖို့လိုပါတယ်။ အဲ့ဒီအတွက်က route.ts ကို ./app/api/auth/[...all]/route.ts မှာ အောက်ကအတိုင်း create လုပ်ရပါမယ်။

./app/api/auth/[...all]/route.ts

ဒါဆိုရင်တော့ server-side အတွက်ပြီးပါပြီ။

Server Actions

ကျွန်တော်တို့လိုအပ်တဲ့ server actions တွေက auth instance က api ဆိုတဲ့ object ကနေခေါ်လို့ရပါတယ်။ ကျွန်တော်ကတော့ app မှာလိုအပ်တဲ့ server actions တွေကိုစုပြီး actions.ts ဆိုပြီး သက်သက် ခွဲရေးလိုက်ပါတယ်။

./lib/actions.ts

ဒီ function တွေက useActionState hook နဲ့အသုံးပြုမှာဖြစ်တဲ့အတွက် prevState နဲ့ formData ဆိုပြီး parameters နှစ်ခုလက်ခံထားပါတယ်။ ကိုယ်လိုအပ်သလို server-side validation တွေကိုလည်း ထည့်သွင်းအသုံးပြုနိုင်ပါတယ်။

Component တွေမှာတော့ ဒီလိုအသုံးပြုနိုင်ပါတယ်။

./app/(auth)/login/page.tsx

Protecting Routes with Middleware

User က page တစ်ခုကိုဝင်တိုင်း authenticated ဖြစ်ရဲ့လား စစ်ဖို့ဆိုရင် root folder မှာပဲ middleware file တစ်ခုဆောက်ဖို့လိုပါမယ်။ အဲ့ဒီ middleware.ts မှာက user က request လုပ်တိုင်း seesion cookie ကိုစစ်ပြီး redirect လုပ်တာတွေကို အောက်ကအတိုင်းရေးပါမယ်။

./middleware.ts

ကိုယ် protect လုပ်ချင်တဲ့ routes တွေကို matcher မှာထည့်ပေးရပါမယ်။ ဒီမှာဆိုရင် / ဆိုတဲ့ route ကို user က request တဲ့အခါမှာ authenticated မဖြစ်ရင် signup page ကို redirect လုပ်သွားမှာပါ။

ဒါပါပဲ။ code အပြည့်အစုံကိုတော့ ဒီမှာကြည့်လို့ရပါတယ်

Repository: https://github.com/CraziiIvan/modern-auth
Live Demo: https://modern-auth.vercel.app

ကျေးဇူးပါ။ ✨