{"id":86873,"date":"2024-12-05T08:12:44","date_gmt":"2024-12-05T04:42:44","guid":{"rendered":"https:\/\/nabfollower.com\/blog\/username-and-password-authentication-with-betterauth-nextjs-prisma-shadcn-and-tailwindcss-1hc6\/"},"modified":"2024-12-05T08:12:44","modified_gmt":"2024-12-05T04:42:44","slug":"username-and-password-authentication-with-betterauth-nextjs-prisma-shadcn-and-tailwindcss-1hc6","status":"publish","type":"post","link":"https:\/\/nabfollower.com\/blog\/username-and-password-authentication-with-betterauth-nextjs-prisma-shadcn-and-tailwindcss-1hc6\/","title":{"rendered":"\u0627\u062d\u0631\u0627\u0632 \u0647\u0648\u06cc\u062a \u0646\u0627\u0645 \u06a9\u0627\u0631\u0628\u0631\u06cc \u0648 \u0631\u0645\u0632 \u0639\u0628\u0648\u0631 \u0628\u0627 Better_Auth\u060c Next.js\u060c Prisma\u060c Shadcn \u0648 TailwindCSS"},"content":{"rendered":"

Summarize this content to 400 words in Persian Lang
\n \u062f\u0631 \u0627\u06cc\u0646 \u0631\u0627\u0647\u0646\u0645\u0627 \u0627\u062c\u0631\u0627 \u062e\u0648\u0627\u0647\u06cc\u0645 \u06a9\u0631\u062f \u0627\u062d\u0631\u0627\u0632 \u0647\u0648\u06cc\u062a \u0646\u0627\u0645 \u06a9\u0627\u0631\u0628\u0631\u06cc \u0648 \u0631\u0645\u0632 \u0639\u0628\u0648\u0631 \u0628\u0631\u0627\u06cc \u06cc\u06a9 \u0628\u0631\u0646\u0627\u0645\u0647 \u0648\u0628 \u0645\u062f\u0631\u0646 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u067e\u0634\u062a\u0647 \u0627\u06cc \u0642\u0648\u06cc \u0648 \u0627\u06cc\u0645\u0646 \u0627\u0632 \u0627\u0628\u0632\u0627\u0631. \u0627\u06cc\u0646 \u0648\u06cc\u0698\u06af\u06cc \u0645\u0648\u062c\u0648\u062f \u0631\u0627 \u062a\u06a9\u0645\u06cc\u0644 \u062e\u0648\u0627\u0647\u062f \u06a9\u0631\u062f \u0627\u062d\u0631\u0627\u0632 \u0647\u0648\u06cc\u062a \u0627\u06cc\u0645\u06cc\u0644 \u0648 \u0631\u0645\u0632 \u0639\u0628\u0648\u0631 \u062f\u0631 \u0628\u0631\u0646\u0627\u0645\u0647. \u062f\u0631 \u067e\u0627\u06cc\u0627\u0646 \u0627\u06cc\u0646 \u0622\u0645\u0648\u0632\u0634\u060c \u0628\u0631\u0646\u0627\u0645\u0647 \u0634\u0645\u0627 \u0628\u0647 \u06a9\u0627\u0631\u0628\u0631\u0627\u0646 \u0627\u062c\u0627\u0632\u0647 \u0645\u06cc \u062f\u0647\u062f \u062a\u0627 \u0628\u0627 \u0647\u0631 \u06a9\u062f\u0627\u0645 \u0627\u0632 \u0622\u0646\u0647\u0627 \u0648\u0627\u0631\u062f \u0633\u06cc\u0633\u062a\u0645 \u0634\u0648\u0646\u062f \u0646\u0627\u0645 \u06a9\u0627\u0631\u0628\u0631\u06cc \u06cc\u0627 \u0627\u06cc\u0645\u06cc\u0644\u060c \u0628\u0627 \u0627\u062e\u062a\u06cc\u0627\u0631\u06cc \u0627\u062d\u0631\u0627\u0632 \u0647\u0648\u06cc\u062a \u062f\u0648 \u0639\u0627\u0645\u0644\u06cc \u0645\u0628\u062a\u0646\u06cc \u0628\u0631 OTP (2FA) \u0628\u0631\u0627\u06cc \u0627\u0645\u0646\u06cc\u062a \u0628\u06cc\u0634\u062a\u0631.<\/p>\n

\u067e\u0634\u062a\u0647 \u0641\u0646\u0627\u0648\u0631\u06cc<\/p>\n

\u062f\u0631 \u0627\u06cc\u0646\u062c\u0627 \u067e\u0634\u062a\u0647 \u0641\u0646\u0627\u0648\u0631\u06cc \u0627\u0633\u062a \u06a9\u0647 \u0645\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u062e\u0648\u0627\u0647\u06cc\u0645 \u06a9\u0631\u062f:<\/p>\n

Better_Auth \u0646\u0633\u062e\u0647 1: \u06cc\u06a9 \u06a9\u062a\u0627\u0628\u062e\u0627\u0646\u0647 \u0627\u062d\u0631\u0627\u0632 \u0647\u0648\u06cc\u062a TypeScript \u0633\u0628\u06a9 \u0648 \u0642\u0627\u0628\u0644 \u062a\u0648\u0633\u0639\u0647.<\/p>\n

Next.js: \u06cc\u06a9 \u0641\u0631\u06cc\u0645\u0648\u0631\u06a9 \u0642\u062f\u0631\u062a\u0645\u0646\u062f React \u0628\u0631\u0627\u06cc \u0633\u0627\u062e\u062a \u0628\u0631\u0646\u0627\u0645\u0647 \u0647\u0627\u06cc \u06a9\u0627\u0631\u0628\u0631\u062f\u06cc \u0631\u0646\u062f\u0631 \u0634\u062f\u0647 \u062a\u0648\u0633\u0637 \u0633\u0631\u0648\u0631.<\/p>\n

\u067e\u0631\u06cc\u0633\u0645\u0627: \u06cc\u06a9 ORM \u0645\u062f\u0631\u0646 \u0628\u0631\u0627\u06cc \u062a\u0639\u0627\u0645\u0644 \u06a9\u0627\u0631\u0622\u0645\u062f \u0648 \u0627\u06cc\u0645\u0646 \u0628\u0627 \u067e\u0627\u06cc\u06af\u0627\u0647 \u062f\u0627\u062f\u0647.<\/p>\n

ShadCN: \u06cc\u06a9 \u06a9\u062a\u0627\u0628\u062e\u0627\u0646\u0647 \u0645\u0624\u0644\u0641\u0647 \u0627\u0628\u0632\u0627\u0631 \u0627\u0648\u0644 \u0628\u0631\u0627\u06cc \u062a\u0648\u0633\u0639\u0647 \u0633\u0631\u06cc\u0639 \u0631\u0627\u0628\u0637 \u06a9\u0627\u0631\u0628\u0631\u06cc.<\/p>\n

TailwindCSS: \u06cc\u06a9 \u0686\u0627\u0631\u0686\u0648\u0628 CSS \u0645\u062d\u0628\u0648\u0628 \u0628\u0631\u0627\u06cc \u0633\u0627\u062e\u062a \u0631\u0627\u0628\u0637 \u0647\u0627\u06cc \u06a9\u0627\u0631\u0628\u0631\u06cc \u0645\u062f\u0631\u0646.<\/p>\n

\u0627\u0631\u0633\u0627\u0644 \u0645\u062c\u062f\u062f: \u06cc\u06a9 \u0633\u0631\u0648\u06cc\u0633 \u0627\u06cc\u0645\u06cc\u0644 \u0642\u0627\u0628\u0644 \u0627\u0639\u062a\u0645\u0627\u062f \u0628\u0631\u0627\u06cc \u0627\u0631\u0633\u0627\u0644 OTP.<\/p>\n

\u067e\u06cc\u0634 \u0646\u06cc\u0627\u0632\u0647\u0627<\/p>\n

\u0642\u0628\u0644 \u0627\u0632 \u0627\u062f\u0627\u0645\u0647\u060c \u0645\u0637\u0645\u0626\u0646 \u0634\u0648\u06cc\u062f \u06a9\u0647 \u0645\u0648\u0627\u0631\u062f \u0632\u06cc\u0631 \u0631\u0627 \u0622\u0645\u0627\u062f\u0647 \u06a9\u0631\u062f\u0647 \u0627\u06cc\u062f:<\/p>\n

Node.js (\u0646\u0633\u062e\u0647 LTS) \u0646\u0635\u0628 \u0634\u062f\u0647 \u0627\u0633\u062a.
\n\u0645\u062f\u06cc\u0631 \u0628\u0633\u062a\u0647 \u0645\u0627\u0646\u0646\u062f npm\u060c \u0646\u062e\u060c \u06cc\u0627 pnpm (\u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u062e\u0648\u0627\u0647\u06cc\u0645 \u06a9\u0631\u062f pnpm \u062f\u0631 \u0627\u06cc\u0646 \u0631\u0627\u0647\u0646\u0645\u0627).
\n\u0627\u0644\u0641 \u0646\u0645\u0648\u0646\u0647 \u067e\u0627\u06cc\u06af\u0627\u0647 \u062f\u0627\u062f\u0647 PostgreSQL (\u0645\u062d\u0644\u06cc \u06cc\u0627 \u0645\u06cc\u0632\u0628\u0627\u0646\u06cc \u0634\u062f\u0647\u060c \u0645\u0627\u0646\u0646\u062f \u0633\u0648\u067e\u0627 \u0628\u06cc\u0633 \u06cc\u0627 PlanetScale).<\/p>\n

\u0627\u06af\u0631 \u0628\u0647 \u0635\u0648\u0631\u062a \u0645\u062d\u0644\u06cc \u06a9\u0627\u0631 \u0645\u06cc \u06a9\u0646\u06cc\u062f\u060c \u062f\u0627\u06a9\u0631 \u06cc\u06a9 \u0631\u0627\u0647 \u0639\u0627\u0644\u06cc \u0628\u0631\u0627\u06cc \u062a\u0646\u0638\u06cc\u0645 \u0627\u06cc\u0646 \u0627\u0633\u062a.<\/p>\n

\u0622\u0634\u0646\u0627\u06cc\u06cc \u0628\u0627 TypeScript\u060c Next.js\u060c \u0648 \u067e\u0631\u06cc\u0633\u0645\u0627.<\/p>\n

\u0634\u0628\u06cc\u0647 \u0633\u0627\u0632\u06cc \u067e\u0631\u0648\u0698\u0647 \u0622\u063a\u0627\u0632\u06af\u0631:<\/p>\n

\u0627\u06cc\u0646 \u0631\u0627\u0647\u0646\u0645\u0627 \u0628\u0631 \u0627\u0633\u0627\u0633 \u0639\u0645\u0644\u06a9\u0631\u062f\u0647\u0627\u06cc\u06cc \u0645\u0627\u0646\u0646\u062f \u0627\u062d\u0631\u0627\u0632 \u0647\u0648\u06cc\u062a \u0627\u06cc\u0645\u06cc\u0644-\u06af\u0630\u0631\u0648\u0627\u0698\u0647 \u0648 \u062a\u0627\u06cc\u06cc\u062f \u0627\u06cc\u0645\u06cc\u0644. \u0634\u0645\u0627 \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f:<\/p>\n

\u0628\u0627 \u062f\u0646\u0628\u0627\u0644 \u06a9\u0631\u062f\u0646 \u0627\u06cc\u0646 \u0631\u0627\u0647\u0646\u0645\u0627\u0647\u0627 \u0627\u0632 \u0627\u0628\u062a\u062f\u0627 \u0634\u0631\u0648\u0639 \u06a9\u0646\u06cc\u062f:<\/p>\n

\u06cc\u0627 \u067e\u0631\u0648\u0698\u0647 \u0634\u0631\u0648\u0639 \u06a9\u0646\u0646\u062f\u0647 \u0631\u0627 \u0634\u0628\u06cc\u0647 \u0633\u0627\u0632\u06cc \u06a9\u0646\u06cc\u062f:<\/p>\n

git clone -b feat-username https:\/\/github.com\/Daanish2003\/better_auth_nextjs.git <\/p>\n

\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n

\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n

\u0628\u0647 \u062f\u0627\u06cc\u0631\u06a9\u062a\u0648\u0631\u06cc \u067e\u0631\u0648\u0698\u0647 \u0628\u0631\u0648\u06cc\u062f \u0648 \u0648\u0627\u0628\u0633\u062a\u06af\u06cc \u0647\u0627 \u0631\u0627 \u0646\u0635\u0628 \u06a9\u0646\u06cc\u062f:<\/p>\n

pnpm install <\/p>\n

\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n

\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n

\u0631\u0627\u0647 \u0627\u0646\u062f\u0627\u0632\u06cc<\/p>\n

1. \u067e\u06cc\u06a9\u0631\u0628\u0646\u062f\u06cc \u06a9\u0646\u06cc\u062f .env \u0641\u0627\u06cc\u0644<\/p>\n

\u0627\u06cc\u062c\u0627\u062f \u06cc\u06a9 .env \u062f\u0631 \u0631\u06cc\u0634\u0647 \u067e\u0631\u0648\u0698\u0647 \u062e\u0648\u062f \u0641\u0627\u06cc\u0644 \u06a9\u0646\u06cc\u062f \u0648 \u0627\u06cc\u0646 \u062a\u0646\u0638\u06cc\u0645\u0627\u062a \u0631\u0627 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f:<\/p>\n

# Authentication settings
\nBETTER_AUTH_SECRET=”your-secret-key” # Replace with a secure key
\nBETTER_AUTH_URL=”http:\/\/localhost:3000″
\nNEXT_PUBLIC_APP_URL=”http:\/\/localhost:3000″<\/p>\n

# Database settings
\nPOSTGRES_PASSWORD=”your-password”
\nPOSTGRES_USER=”your-username”
\nDATABASE_URL=”postgresql:\/\/your-username:your-password@localhost:5432\/mydb?schema=public”<\/p>\n

# Resend API Key
\nRESEND_API_KEY=”your-resend-api-key”<\/p>\n

\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n

\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n

\u0627\u06af\u0631 \u0627\u0632 Docker \u0628\u0631\u0627\u06cc PostgreSQL \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u06a9\u0646\u06cc\u062f\u060c \u06a9\u0627\u0646\u062a\u06cc\u0646\u0631 \u0631\u0627 \u0631\u0627\u0647 \u0627\u0646\u062f\u0627\u0632\u06cc \u06a9\u0646\u06cc\u062f:<\/p>\n

docker compose up -d<\/p>\n

\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n

\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n

\u062a\u0648\u062c\u0647:<\/p>\n

\u0642\u0628\u0644 \u0627\u0632 \u0627\u06cc\u0646\u06a9\u0647 \u0628\u0647 \u067e\u06cc\u0627\u062f\u0647 \u0633\u0627\u0632\u06cc \u0627\u062d\u0631\u0627\u0632 \u0647\u0648\u06cc\u062a \u0646\u0627\u0645 \u06a9\u0627\u0631\u0628\u0631\u06cc \u0648 \u0631\u0645\u0632 \u0639\u0628\u0648\u0631 \u062f\u0631 \u0628\u0631\u0646\u0627\u0645\u0647 \u06a9\u0627\u0645\u0644 \u067e\u0634\u062a\u0647 \u0634\u0645\u0627 \u0628\u067e\u0631\u062f\u0627\u0632\u06cc\u0645. \u0628\u0647 \u0627\u0637\u0644\u0627\u0639 \u0634\u0645\u0627 \u0645\u06cc\u200c\u0631\u0633\u0627\u0646\u0645 \u06a9\u0647 \u062f\u0631 \u0627\u06cc\u0646 \u0648\u0628\u0644\u0627\u06af \u0627\u062d\u0631\u0627\u0632 \u0647\u0648\u06cc\u062a \u0646\u0627\u0645 \u06a9\u0627\u0631\u0628\u0631\u06cc \u0648 \u0631\u0645\u0632 \u0639\u0628\u0648\u0631 \u0628\u0627 \u0627\u062d\u0631\u0627\u0632 \u0647\u0648\u06cc\u062a \u0627\u06cc\u0645\u06cc\u0644 \u0648 \u0631\u0645\u0632 \u0639\u0628\u0648\u0631 \u0645\u0648\u062c\u0648\u062f \u0631\u0627 \u067e\u06cc\u0627\u062f\u0647\u200c\u0633\u0627\u0632\u06cc \u0645\u06cc\u200c\u06a9\u0646\u06cc\u0645. \u0628\u0647 \u0637\u0648\u0631\u06cc \u06a9\u0647 \u06a9\u0627\u0631\u0628\u0631 \u0645\u06cc \u062a\u0648\u0627\u0646\u062f \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0627\u06cc\u0645\u06cc\u0644 \u06cc\u0627 \u0646\u0627\u0645 \u06a9\u0627\u0631\u0628\u0631\u06cc \u0648\u0627\u0631\u062f \u0633\u06cc\u0633\u062a\u0645 \u0634\u0648\u062f.<\/p>\n

\u0645\u0631\u062d\u0644\u0647 1: \u0628\u0647 \u0631\u0648\u0632 \u0631\u0633\u0627\u0646\u06cc schema.prisma \u0641\u0627\u06cc\u0644<\/p>\n

\u0628\u0627\u0632 \u06a9\u0646\u06cc\u062f schema.prisma\u0631\u0627 \u062f\u0631 \u067e\u0648\u0634\u0647 \u067e\u0631\u0648\u0698\u0647 \u062e\u0648\u062f \u0642\u0631\u0627\u0631 \u062f\u0647\u06cc\u062f \u0648 \u0633\u067e\u0633 \u0622\u0646 \u0631\u0627 \u0628\u0647 \u0631\u0648\u0632 \u06a9\u0646\u06cc\u062f user\u0645\u062f\u0644 \u062f\u0631 \u0637\u0631\u062d\u0648\u0627\u0631\u0647 \u0628\u0627 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0631\u062f\u0646 username \u0633\u062a\u0648\u0646 \u0628\u0627 \u0631\u0634\u062a\u0647 \u0646\u0648\u0639 \u0627\u062e\u062a\u06cc\u0627\u0631\u06cc \u0628\u0647 \u0622\u0646.<\/p>\n

model User {
\n id String @id @default(cuid())
\n name String
\n email String
\n emailVerified Boolean @default(false)
\n image String?
\n createdAt DateTime @default(now())
\n updatedAt DateTime @updatedAt
\n twoFactorEnabled Boolean @default(false)
\n \/\/ Add only username column with type of string and ignore other columns if you already implemented user model
\n username String?
\n isAnonymous Boolean?
\n Session Session[]\n Account Account[]\n TwoFactor TwoFactor[] \/\/ if you implemented 2FA add this column<\/p>\n

@@unique([email])
\n @@map(“user”)
\n}<\/p>\n

\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n

\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n

\u0633\u067e\u0633 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u062f\u0633\u062a\u0648\u0631 \u0632\u06cc\u0631 \u0641\u0627\u06cc\u0644 prisma \u0631\u0627 \u062a\u0648\u0644\u06cc\u062f \u0648 \u0627\u0646\u062a\u0642\u0627\u0644 \u062f\u0647\u06cc\u062f<\/p>\n

pnpx prisma generate
\npnpx prisma migrate dev –name username<\/p>\n

\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n

\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n

\u0645\u0631\u062d\u0644\u0647 2: \u0628\u0647 \u0631\u0648\u0632 \u0631\u0633\u0627\u0646\u06cc auth.ts \u0648 auth-client.ts\u0641\u0627\u06cc\u0644<\/p>\n

\u0628\u0627\u0632 \u06a9\u0646\u06cc\u062f auth.ts \u062f\u0631 \u0645\u062e\u0632\u0646 \u067e\u0631\u0648\u0698\u0647 \u062e\u0648\u062f \u0641\u0627\u06cc\u0644 \u06a9\u0646\u06cc\u062f \u0648 \u0633\u067e\u0633 \u0622\u0646 \u0631\u0627 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f username()\u067e\u0644\u0627\u06af\u06cc\u0646 \u0628\u0647 \u0622\u0631\u0627\u06cc\u0647 \u067e\u0644\u0627\u06af\u06cc\u0646 \u0627\u0632 \u062a\u0627\u0628\u0639 betterAuth.<\/p>\n

\/\/ src\/lib\/auth.ts
\nimport { betterAuth } from “better-auth”
\nimport { username } from “better-auth\/plugins”<\/p>\n

const auth = betterAuth({
\n \/\/ other config options
\n plugins: [
\n \/\/ other plugins
\n username()
\n ]\n})<\/p>\n

\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n

\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n

\u0633\u067e\u0633\u060c \u0628\u0627\u0632 \u06a9\u0646\u06cc\u062f auth-client.ts \u062f\u0631 \u0645\u062e\u0632\u0646 \u067e\u0631\u0648\u0698\u0647 \u062e\u0648\u062f \u0641\u0627\u06cc\u0644 \u06a9\u0646\u06cc\u062f \u0648 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f usernameClient() \u0639\u0645\u0644\u06a9\u0631\u062f \u067e\u0644\u0627\u06af\u06cc\u0646 \u0628\u0647 \u0622\u0631\u0627\u06cc\u0647 \u067e\u0644\u0627\u06af\u06cc\u0646<\/p>\n

\/\/ src\/lib\/auth-client.ts
\nimport { createAuthClient } from “better-auth\/client”
\nimport { usernameClient } from “better-auth\/client\/plugins”<\/p>\n

export const authClient = createAuthClient({
\n baseURL: process.env.NEXT_PUBLIC_APP_URL,
\n plugins: [
\n usernameClient()
\n ]\n})<\/p>\n

export const {
\n signIn,
\n signOut,
\n signUp,
\n useSession
\n} = authClient;<\/p>\n

\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n

\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n

\u0645\u0631\u062d\u0644\u0647 3: \u0628\u0647 \u0631\u0648\u0632 \u0631\u0633\u0627\u0646\u06cc login-schema.ts \u0648 signup-schema.ts \u0641\u0627\u06cc\u0644<\/p>\n

\u0628\u0627\u0632 \u06a9\u0646\u06cc\u062f login-schema.ts\u062f\u0631 \u0645\u062e\u0632\u0646 \u067e\u0631\u0648\u0698\u0647 \u062e\u0648\u062f \u0641\u0627\u06cc\u0644 \u06a9\u0646\u06cc\u062f \u0648 \u0637\u0631\u062d\u0648\u0627\u0631\u0647 \u0631\u0627 \u0628\u0627 \u06a9\u062f \u0632\u06cc\u0631 \u0628\u0647 \u0631\u0648\u0632 \u06a9\u0646\u06cc\u062f.<\/p>\n

\/\/ src\/helpers\/zod\/login-schema.ts
\nimport { z } from “zod”;<\/p>\n

const LoginSchema = z
\n .object({
\n \/\/ checks if the input given by the user is email or username
\n emailOrUsername: z
\n .string()
\n .min(1, { message: “Email or username is required” }),
\n password: z
\n .string()
\n .min(8, { message: “Password must be at least 8 characters long” })
\n .max(20, { message: “Password must be at most 20 characters long” }),
\n })
\n .refine(
\n (data) =>
\n \/\/ checks if the email or username is valid
\n \/^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$\/.test(data.emailOrUsername) || \/^[a-zA-Z0-9_.]+$\/.test(data.emailOrUsername),
\n {
\n message: “Provide a valid email or username”,
\n path: [“emailOrUsername”],
\n }
\n );<\/p>\n

export default LoginSchema<\/p>\n

\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n

\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n

\u0633\u067e\u0633\u060c \u0631\u0627 \u0628\u0627\u0632 \u06a9\u0646\u06cc\u062f signup-schema.ts \u062f\u0631 \u0645\u062e\u0632\u0646 \u067e\u0631\u0648\u0698\u0647 \u062e\u0648\u062f \u0641\u0627\u06cc\u0644 \u06a9\u0646\u06cc\u062f \u0648 \u0641\u06cc\u0644\u062f \u0646\u0627\u0645 \u06a9\u0627\u0631\u0628\u0631\u06cc \u0648 \u0646\u0648\u0639 \u0622\u0646 \u0631\u0627 \u062f\u0631 \u0637\u0631\u062d zod \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f.<\/p>\n

\/\/ src\/helpers\/zod\/signup-schema.ts
\nexport const SignupSchema = z
\n .object({
\n name: z
\n .string()
\n .min(2, { message: “Minimum 2 characters are required” })
\n .max(20, { message: “Maximum of 20 characters are allowed” }),
\n email: z
\n .string()
\n .email({ message: “Invalid email address” })
\n .min(1, { message: “Email is required” }),
\n password: z
\n .string()
\n .min(8, { message: “Password must be at least 8 characters long” })
\n .max(20, { message: “Password must be at most 20 characters long” }),
\n \/\/ Added the username field to check its type
\n username: z
\n .string()
\n .min(3, { message: “Username must be at least 3 characters long” })
\n .max(25, { message: “Username must be at most 25 characters long” })
\n .regex(\/^[a-zA-Z0-9_.]+$\/, { message: “Username can only contain letters, numbers, underscores, and dots” }),
\n })<\/p>\n

\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n

\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n

\u0645\u0631\u062d\u0644\u0647 4: \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f generateUsername \u0641\u0627\u06cc\u0644<\/p>\n

\u0627\u06cc\u062c\u0627\u062f \u06cc\u06a9 generate-username.ts \u062f\u0627\u062e\u0644 helper\/auth\/ \u067e\u0648\u0634\u0647 \u0648 \u06a9\u062f \u0631\u0627 \u0627\u0632 \u0632\u06cc\u0631 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/p>\n

\/\/ helpers\/auth\/generate-username.ts
\nexport const generateUsername = (name: string) => {
\n const randomNumbers = Math.floor(1000 + Math.random() * 9000); \/\/ Generate a random 4-digit number
\n return `${name.replace(\/\\s+\/g, ”).toLowerCase()}${randomNumbers}`;
\n};<\/p>\n

\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n

\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n

GenerateUsername\u062a\u0627\u0628\u0639 \u0628\u0631\u0627\u06cc \u062a\u0648\u0644\u06cc\u062f \u0646\u0627\u0645 \u06a9\u0627\u0631\u0628\u0631\u06cc \u062a\u0635\u0627\u062f\u0641\u06cc \u0627\u0632 \u0646\u0627\u0645 \u062f\u0627\u062f\u0647 \u0634\u062f\u0647 \u06a9\u0627\u0631\u0628\u0631 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u0634\u0648\u062f.<\/p>\n

\u0645\u0631\u062d\u0644\u0647 5: \u0645\u0624\u0644\u0641\u0647 SignIn \u0648 \u0645\u0624\u0644\u0641\u0647 Signup \u0631\u0627 \u0628\u0647 \u0631\u0648\u0632 \u06a9\u0646\u06cc\u062f<\/p>\n

\u062c\u0632\u0621 \u0648\u0631\u0648\u062f \u0628\u0647 \u0633\u06cc\u0633\u062a\u0645:<\/p>\n

\/\/ src\/components\/auth\/sign-in.tsx
\n“use client”
\nimport React from ‘react’
\nimport CardWrapper from ‘..\/card-wrapper’
\nimport FormError from ‘..\/form-error’
\nimport { FormSuccess } from ‘..\/form-success’
\nimport { FcGoogle } from ‘react-icons\/fc’
\nimport SocialButton from ‘.\/social-button’
\nimport { FaGithub } from ‘react-icons\/fa’
\nimport { useAuthState } from ‘@\/hooks\/useAuthState’
\nimport { useForm } from ‘react-hook-form’
\nimport { zodResolver } from ‘@hookform\/resolvers\/zod’
\nimport { z } from ‘zod’
\nimport { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from ‘..\/ui\/form’
\nimport { Input } from ‘..\/ui\/input’
\nimport { Button } from ‘..\/ui\/button’
\nimport { SignupSchema } from ‘@\/helpers\/zod\/signup-schema’
\nimport { signUp } from ‘@\/lib\/auth-client’
\nimport { generateUsername } from ‘@\/helpers\/auth\/generate-username’<\/p>\n

const SignUp = () => {
\n const { error, success, loading, setLoading, setError, setSuccess, resetState } = useAuthState();<\/p>\n

const form = useForm<z.infer<typeof SignupSchema>>({
\n resolver: zodResolver(SignupSchema),
\n defaultValues: {
\n name: ”,
\n email: ”,
\n password: ”,
\n username: ”, \/\/ Added username field
\n }
\n })<\/p>\n

const onSubmit = async (values: z.infer<typeof SignupSchema>) => {
\n try {
\n await signUp.email({
\n name: values.name,
\n email: values.email,
\n password: values.password,
\n username: values.username, \/\/ Add the username fields
\n callbackURL: ‘\/’
\n }, {
\n onResponse: () => {
\n setLoading(false)
\n },
\n onRequest: () => {
\n resetState()
\n setLoading(true)
\n },
\n onSuccess: () => {
\n setSuccess(“Verification link has been sent to your mail”)
\n },
\n onError: (ctx) => {
\n setError(ctx.error.message);
\n },
\n });
\n } catch (error) {
\n console.error(error)
\n setError(“Something went wrong”)
\n }<\/p>\n

}<\/p>\n

return (
\n <CardWrapper
\n cardTitle=’SignUp’
\n cardDescription=’Create an new account’
\n cardFooterLink=’\/signin’
\n cardFooterDescription=’Already have an account?’
\n cardFooterLinkTitle=’Signin’
\n >
\n <Form {…form}>
\n {\/* Make changes to only name field of the form*\/}
\n <form className=’space-y-4′ onSubmit={form.handleSubmit(onSubmit)}>
\n <FormField
\n control={form.control}
\n name=”name”
\n render={({ field }) => (
\n <FormItem>
\n <FormLabel>NameFormLabel>
\n <FormControl>
\n <Input
\n disabled={loading}
\n type=”text”
\n placeholder=’john’
\n {…field}
\n onChange={(e) => {
\n field.onChange(e); \/\/ Update form state
\n const username = generateUsername(e.target.value);
\n form.setValue(‘username’, username); \/\/ Auto-fill username
\n }}
\n \/>
\n FormControl>
\n <FormMessage \/>
\n FormItem>
\n )}
\n \/>
\n {\/* All other exisitng formfields like email and password *\/}
\n form>
\n Form>
\n CardWrapper>
\n )
\n}<\/p>\n

export default SignUp<\/p>\n

\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n

\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n

\u0645\u0646\u0637\u0642 \u0646\u0627\u0645 \u06a9\u0627\u0631\u0628\u0631\u06cc \u0631\u0627 \u0628\u0647 \u0622\u0646 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f SignUp:<\/p>\n

\u062a\u0648\u0644\u06cc\u062f \u062e\u0648\u062f\u06a9\u0627\u0631 \u0646\u0627\u0645 \u0647\u0627\u06cc \u06a9\u0627\u0631\u0628\u0631\u06cc \u0628\u0631 \u0627\u0633\u0627\u0633 \u0646\u0627\u0645 \u06a9\u0627\u0631\u0628\u0631.<\/p>\n

\u062c\u0632\u0621 \u062b\u0628\u062a \u0646\u0627\u0645<\/p>\n

“use client”;<\/p>\n

import React from “react”;
\nimport { useForm } from “react-hook-form”;
\nimport { zodResolver } from “@hookform\/resolvers\/zod”;
\nimport { z } from “zod”;
\nimport { useRouter } from “next\/navigation”;
\nimport Link from “next\/link”;<\/p>\n

import CardWrapper from “..\/card-wrapper”;
\nimport FormError from “..\/form-error”;
\nimport { FormSuccess } from “..\/form-success”;
\nimport { FcGoogle } from “react-icons\/fc”;
\nimport { FaGithub } from “react-icons\/fa”;<\/p>\n

import SocialButton from “.\/social-button”;
\nimport LoginSchema from “@\/helpers\/zod\/login-schema”;
\nimport { useAuthState } from “@\/hooks\/useAuthState”;
\nimport { signIn } from “@\/lib\/auth-client”;
\nimport { requestOTP } from “@\/helpers\/auth\/request-otp”;<\/p>\n

import {
\n Form,
\n FormControl,
\n FormField,
\n FormItem,
\n FormLabel,
\n FormMessage,
\n} from “..\/ui\/form”;
\nimport { Input } from “..\/ui\/input”;
\nimport { Button } from “..\/ui\/button”;<\/p>\n

const SignIn = () => {
\n const router = useRouter();
\n \/\/ handles error, success, loading and resetState of a form
\n const { error, success, loading, setSuccess, setError, setLoading, resetState } = useAuthState();<\/p>\n

const form = useForm<z.infer<typeof LoginSchema>>({
\n resolver: zodResolver(LoginSchema),
\n defaultValues: {
\n emailOrUsername: “”, \/\/ update the field email to emailOrUsername
\n password: “”,
\n },
\n });<\/p>\n

\/\/ Check if the value is an email
\n const isEmail = (value: string) => \/^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$\/.test(value);<\/p>\n

const onSubmit = async (values: z.infer<typeof LoginSchema>) => {
\n const { emailOrUsername, password } = values;<\/p>\n

\/\/ Determine if the input is an email or username
\n const isEmailInput = isEmail(emailOrUsername);<\/p>\n

try {
\n \/\/ resetState of a form after resubmit
\n resetState();
\n setLoading(true);<\/p>\n

if (isEmailInput) {
\n \/\/ if user has given email and its true then signin using email and password
\n \/\/ also send 2FA code to the user’s email, if enabled
\n await signIn.email(
\n { email: emailOrUsername, password },
\n {
\n onRequest: () => setLoading(true),
\n onResponse: () => setLoading(false),
\n onSuccess: async (ctx) => {
\n if (ctx.data.twoFactorRedirect) {
\n const res = await requestOTP(); \/\/ request otp for 2fa
\n if (res?.data) {
\n setSuccess(“OTP has been sent to your email”);
\n router.push(“two-factor”);
\n } else if (res?.error) {
\n setError(res.error.message);
\n }
\n } else { \/\/ if didn’t enable 2FA show loggedIn message
\n setSuccess(“Logged in successfully”);
\n router.replace(“\/”);
\n }
\n },
\n onError: (ctx) => {
\n const errorMessage =
\n ctx.error.status === 403
\n ? “Please verify your email address”
\n : ctx.error.message;
\n setError(errorMessage);
\n },
\n }
\n );
\n } else {
\n \/\/ if user has given username then signin using username and password
\n \/\/ also send 2FA code to the user’s email, if enabled
\n await signIn.username(
\n { username: emailOrUsername, password },
\n {
\n onRequest: () => setLoading(true),
\n onResponse: () => setLoading(false),
\n onSuccess: async (ctx) => {
\n if (ctx.data.twoFactorRedirect) {
\n const res = await requestOTP();
\n if (res?.data) {
\n setSuccess(“OTP has been sent to your email”);
\n router.push(“two-factor”);
\n } else if (res?.error) {
\n setError(res.error.message);
\n }
\n } else {
\n setSuccess(“Logged in successfully”);
\n router.replace(“\/”);
\n }
\n },
\n onError: (ctx) => {
\n const errorMessage =
\n ctx.error.status === 403
\n ? “Please verify your email address”
\n : ctx.error.message;
\n setError(errorMessage);
\n },
\n }
\n );
\n }
\n } catch (err) { \/\/ catch the error
\n console.error(err);
\n setError(“Something went wrong. Please try again.”);
\n } finally { \/\/ set the loading to false after submitting the form
\n setLoading(false);
\n }
\n };<\/p>\n

return (
\n <CardWrapper
\n cardTitle=”Sign In”
\n {\/* change the cardDescription for email to email or password *\/}
\n cardDescription=”Enter your email or username below to login to your account”
\n cardFooterDescription=”Don’t have an account?”
\n cardFooterLink=”\/signup”
\n cardFooterLinkTitle=”Sign up”
\n >
\n <Form {…form}>
\n <form className=”space-y-4″ onSubmit={form.handleSubmit(onSubmit)}>
\n {\/* Email or Username Field *\/}
\n <FormField
\n control={form.control}
\n name=”emailOrUsername”
\n render={({ field }) => (
\n <FormItem>
\n <FormLabel>Email or UsernameFormLabel>
\n <FormControl>
\n <Input
\n disabled={loading}
\n type=”text” \/\/ update the type from email to text
\n placeholder=”Enter email or username” \/\/ update the placeholder
\n {…field}
\n \/>
\n FormControl>
\n <FormMessage \/>
\n FormItem>
\n )}
\n \/>
\n {\/* All other exisitng formfields like password and form message *\/}
\n form>
\n Form>
\n CardWrapper>
\n );
\n};<\/p>\n

export default SignIn;<\/p>\n

\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n

\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n

\u0648\u0631\u0648\u062f \u0628\u0627 \u0646\u0627\u0645 \u06a9\u0627\u0631\u0628\u0631\u06cc \u06cc\u0627 \u0627\u06cc\u0645\u06cc\u0644 \u0631\u0627 \u0641\u0639\u0627\u0644 \u06a9\u0646\u06cc\u062f SignIn:<\/p>\n

\u0631\u0627 \u0628\u0647 \u0631\u0648\u0632 \u06a9\u0646\u06cc\u062f email \u0645\u06cc\u062f\u0627\u0646 \u0628\u0647 emailOrUsername.
\n\u0628\u0631\u0627\u06cc \u062a\u0639\u06cc\u06cc\u0646 \u0627\u06cc\u0646\u06a9\u0647 \u0622\u06cc\u0627 \u0648\u0631\u0648\u062f\u06cc \u06cc\u06a9 \u0627\u06cc\u0645\u06cc\u0644 \u06cc\u0627 \u0646\u0627\u0645 \u06a9\u0627\u0631\u0628\u0631\u06cc \u0627\u0633\u062a \u0627\u0632 \u06cc\u06a9 \u062a\u0627\u0628\u0639 \u0627\u0628\u0632\u0627\u0631 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f.<\/p>\n

\u0645\u0631\u062d\u0644\u0647 6: \u0628\u0631\u0646\u0627\u0645\u0647 \u062e\u0648\u062f \u0631\u0627 \u0627\u062c\u0631\u0627 \u06a9\u0646\u06cc\u062f:<\/p>\n

\u0633\u0631\u0648\u0631 \u062a\u0648\u0633\u0639\u0647 \u062e\u0648\u062f \u0631\u0627 \u0631\u0627\u0647 \u0627\u0646\u062f\u0627\u0632\u06cc \u06a9\u0646\u06cc\u062f:<\/p>\n

pnpm dev<\/p>\n

\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n

\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n

\u0628\u0647 \u0633\u0645\u062a \u062e\u0648\u062f \u062d\u0631\u06a9\u062a \u06a9\u0646\u06cc\u062f sign-up \u0645\u0633\u06cc\u0631 \u0648 sign-in \u0645\u0633\u06cc\u0631 \u0648 \u0633\u0639\u06cc \u06a9\u0646\u06cc\u062f \u0627\u0628\u062a\u062f\u0627 \u06a9\u0627\u0631\u0628\u0631 \u0631\u0627 \u0628\u0627 \u0627\u06cc\u0645\u06cc\u0644\u060c \u0646\u0627\u0645 \u0648 \u0631\u0645\u0632 \u0639\u0628\u0648\u0631 \u062b\u0628\u062a \u0646\u0627\u0645 \u06a9\u0646\u06cc\u062f \u0648 \u0633\u067e\u0633 \u0627\u0632 \u0627\u06cc\u0645\u06cc\u0644 \u06cc\u0627 \u0646\u0627\u0645 \u06a9\u0627\u0631\u0628\u0631\u06cc \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f.<\/p>\n

\u0646\u062a\u06cc\u062c\u0647 \u06af\u06cc\u0631\u06cc<\/p>\n

\u062a\u0628\u0631\u06cc\u06a9 \u0645\u06cc \u06af\u0648\u06cc\u0645! \ud83c\udf89 \u0634\u0645\u0627 \u0628\u0627 \u0645\u0648\u0641\u0642\u06cc\u062a \u06cc\u06a9 \u0627\u062d\u0631\u0627\u0632 \u0647\u0648\u06cc\u062a \u0646\u0627\u0645 \u06a9\u0627\u0631\u0628\u0631\u06cc \u0648 \u0631\u0645\u0632 \u0639\u0628\u0648\u0631 \u0633\u06cc\u0633\u062a\u0645 \u062f\u0631 \u0628\u0631\u0646\u0627\u0645\u0647 \u0634\u0645\u0627 \u06a9\u0627\u0631\u0628\u0631\u0627\u0646 \u0634\u0645\u0627 \u0627\u06a9\u0646\u0648\u0646 \u0645\u06cc \u062a\u0648\u0627\u0646\u0646\u062f \u0628\u0627 \u0627\u06cc\u0645\u06cc\u0644 \u06cc\u0627 \u0646\u0627\u0645 \u06a9\u0627\u0631\u0628\u0631\u06cc \u062e\u0648\u062f \u0648\u0627\u0631\u062f \u0633\u06cc\u0633\u062a\u0645 \u0634\u0648\u0646\u062f \u0648 \u0627\u06cc\u0646 \u062a\u062c\u0631\u0628\u0647 \u0631\u0627 \u0627\u0646\u0639\u0637\u0627\u0641 \u067e\u0630\u06cc\u0631\u062a\u0631 \u0648 \u06a9\u0627\u0631\u0628\u0631 \u067e\u0633\u0646\u062f\u062a\u0631 \u0645\u06cc \u06a9\u0646\u062f.<\/p>\n

\u0644\u06cc\u0646\u06a9 \u0647\u0627\u06cc \u0648\u0628\u0644\u0627\u06af:<\/p>\n

\u0627\u062d\u0631\u0627\u0632 \u0647\u0648\u06cc\u062a \u062f\u0648 \u0639\u0627\u0645\u0644\u06cc \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 BetterAuth: https:\/\/dev.to\/daanish2003\/two-factor-authentication-using-betterauth-nextjs-prisma-shadcn-and-resend-1b5p<\/p>\n

Forgot and Reset Password with BetterAuth: https:\/\/dev.to\/daanish2003\/forgot-and-reset-password-using-betterauth-nextjs-and-resend-ilj<\/p>\n

\u0648\u0628\u0644\u0627\u06af \u062a\u0623\u06cc\u06cc\u062f \u0627\u06cc\u0645\u06cc\u0644: https:\/\/dev.to\/daanish2003\/email-verification-using-betterauth-nextjs-and-resend-37gn<\/p>\n

\u0627\u06cc\u0645\u06cc\u0644 \u0648 \u0631\u0645\u0632 \u0639\u0628\u0648\u0631 \u0628\u0627 Better_Auth: https:\/\/dev.to\/daanish2003\/email-and-password-auth-using-betterauth-nextjs-prisma-shadcn-and-tailwindcss-hgc<\/p>\n

\u0648\u0628\u0644\u0627\u06af OAuth: https:\/\/dev.to\/daanish2003\/oauth-using-betterauth-nextjs-prisma-shadcn-and-tailwindcss-45bp<\/p>\n

Better_Auth Docs: https:\/\/www.better-auth.com\/<\/p>\n

\u0627\u0633\u0646\u0627\u062f pnpm: https:\/\/pnpm.io\/<\/p>\n

Docker Docs: https:\/\/docs.docker.com\/<\/p>\n

Prisma Docs: https:\/\/www.prisma.io\/docs\/getting-started<\/p>\n

Shadcn Docs: https:\/\/ui.shadcn.com\/<\/p>\n

\u0627\u0633\u0646\u0627\u062f Next.js: https:\/\/nextjs.org\/<\/p>\n

Tailwindcss Docs: https:\/\/tailwindcss.com\/<\/p>\n

\u0645\u062e\u0632\u0646 Github: https:\/\/github.com\/Daanish2003\/better_auth_nextjs<\/p>\n

\n

\u062f\u0631 \u0627\u06cc\u0646 \u0631\u0627\u0647\u0646\u0645\u0627 \u0627\u062c\u0631\u0627 \u062e\u0648\u0627\u0647\u06cc\u0645 \u06a9\u0631\u062f \u0627\u062d\u0631\u0627\u0632 \u0647\u0648\u06cc\u062a \u0646\u0627\u0645 \u06a9\u0627\u0631\u0628\u0631\u06cc \u0648 \u0631\u0645\u0632 \u0639\u0628\u0648\u0631<\/strong> \u0628\u0631\u0627\u06cc \u06cc\u06a9 \u0628\u0631\u0646\u0627\u0645\u0647 \u0648\u0628 \u0645\u062f\u0631\u0646 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u067e\u0634\u062a\u0647 \u0627\u06cc \u0642\u0648\u06cc \u0648 \u0627\u06cc\u0645\u0646 \u0627\u0632 \u0627\u0628\u0632\u0627\u0631. \u0627\u06cc\u0646 \u0648\u06cc\u0698\u06af\u06cc \u0645\u0648\u062c\u0648\u062f \u0631\u0627 \u062a\u06a9\u0645\u06cc\u0644 \u062e\u0648\u0627\u0647\u062f \u06a9\u0631\u062f \u0627\u062d\u0631\u0627\u0632 \u0647\u0648\u06cc\u062a \u0627\u06cc\u0645\u06cc\u0644 \u0648 \u0631\u0645\u0632 \u0639\u0628\u0648\u0631<\/strong> \u062f\u0631 \u0628\u0631\u0646\u0627\u0645\u0647. \u062f\u0631 \u067e\u0627\u06cc\u0627\u0646 \u0627\u06cc\u0646 \u0622\u0645\u0648\u0632\u0634\u060c \u0628\u0631\u0646\u0627\u0645\u0647 \u0634\u0645\u0627 \u0628\u0647 \u06a9\u0627\u0631\u0628\u0631\u0627\u0646 \u0627\u062c\u0627\u0632\u0647 \u0645\u06cc \u062f\u0647\u062f \u062a\u0627 \u0628\u0627 \u0647\u0631 \u06a9\u062f\u0627\u0645 \u0627\u0632 \u0622\u0646\u0647\u0627 \u0648\u0627\u0631\u062f \u0633\u06cc\u0633\u062a\u0645 \u0634\u0648\u0646\u062f \u0646\u0627\u0645 \u06a9\u0627\u0631\u0628\u0631\u06cc<\/strong> \u06cc\u0627 \u0627\u06cc\u0645\u06cc\u0644<\/strong>\u060c \u0628\u0627 \u0627\u062e\u062a\u06cc\u0627\u0631\u06cc \u0627\u062d\u0631\u0627\u0632 \u0647\u0648\u06cc\u062a \u062f\u0648 \u0639\u0627\u0645\u0644\u06cc \u0645\u0628\u062a\u0646\u06cc \u0628\u0631 OTP<\/strong> (2FA) \u0628\u0631\u0627\u06cc \u0627\u0645\u0646\u06cc\u062a \u0628\u06cc\u0634\u062a\u0631.<\/p>\n

\n
\n

\u0641\u0647\u0631\u0633\u062a \u0645\u0637\u0627\u0644\u0628<\/p>\nToggle<\/span><\/path><\/svg><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n