feat(auth): add basic phone signin and signup

Author: unrevised6419

.gitignore

@@ -39,3 +39,6 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+queries/
+.idea/
+sqlite.db

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

@@ -0,0 +1,4 @@
+import { auth } from "@/lib/auth";
+import { toNextJsHandler } from "better-auth/next-js";
+
+export const { POST, GET } = toNextJsHandler(auth);

app/page.tsx

@@ -1,5 +1,60 @@
-import { ComponentExample } from "@/components/component-example";
+"use client";
+
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { phoneNumber, signOut, useSession } from "@/lib/auth-client";
+import { useState } from "react";
 
 export default function Page() {
-	return <ComponentExample />;
+	const session = useSession();
+	const [phone, setPhone] = useState("");
+
+	function sendOtp(event: React.FormEvent) {
+		event.preventDefault();
+		const formData = new FormData(event.target as HTMLFormElement);
+		const phone = formData.get("phone") as string;
+
+		setPhone(phone);
+
+		phoneNumber.sendOtp({
+			phoneNumber: phone,
+		});
+	}
+
+	function onVerify(event: React.FormEvent) {
+		event.preventDefault();
+
+		if (!phone) return;
+
+		const formData = new FormData(event.target as HTMLFormElement);
+		const otp = formData.get("otp") as string;
+
+		phoneNumber.verify({ phoneNumber: phone, code: otp });
+	}
+
+	return (
+		<main>
+			{session.data?.session ? (
+				<div>
+					<Button type="button" onClick={() => signOut()}>
+						Logout
+					</Button>
+					<pre>
+						<code>{JSON.stringify(session.data?.user ?? {}, null, "\t")}</code>
+					</pre>
+				</div>
+			) : (
+				<div>
+					<form className="flex" onSubmit={sendOtp}>
+						<Input type="text" name="phone" placeholder="Phone Number" />
+						<Button type="submit">Send</Button>
+					</form>
+					<form className="flex" onSubmit={onVerify}>
+						<Input type="text" name="otp" placeholder="Confirmation Code" />
+						<Button type="submit">Verify</Button>
+					</form>
+				</div>
+			)}
+		</main>
+	);
 }

better-auth_migrations/2025-12-26T15-31-50.552Z.sql

@@ -0,0 +1,13 @@
+create table "user" ("id" text not null primary key, "name" text not null, "email" text not null unique, "emailVerified" integer not null, "image" text, "createdAt" date not null, "updatedAt" date not null, "phoneNumber" text unique, "phoneNumberVerified" integer);
+
+create table "session" ("id" text not null primary key, "expiresAt" date not null, "token" text not null unique, "createdAt" date not null, "updatedAt" date not null, "ipAddress" text, "userAgent" text, "userId" text not null references "user" ("id") on delete cascade);
+
+create table "account" ("id" text not null primary key, "accountId" text not null, "providerId" text not null, "userId" text not null references "user" ("id") on delete cascade, "accessToken" text, "refreshToken" text, "idToken" text, "accessTokenExpiresAt" date, "refreshTokenExpiresAt" date, "scope" text, "password" text, "createdAt" date not null, "updatedAt" date not null);
+
+create table "verification" ("id" text not null primary key, "identifier" text not null, "value" text not null, "expiresAt" date not null, "createdAt" date not null, "updatedAt" date not null);
+
+create index "session_userId_idx" on "session" ("userId");
+
+create index "account_userId_idx" on "account" ("userId");
+
+create index "verification_identifier_idx" on "verification" ("identifier");

lib/auth-client.ts

@@ -0,0 +1,8 @@
+import { phoneNumberClient } from "better-auth/client/plugins";
+import { createAuthClient } from "better-auth/react";
+
+const authClient = createAuthClient({
+	plugins: [phoneNumberClient()],
+});
+
+export const { signIn, signUp, useSession, phoneNumber, signOut } = authClient;

lib/auth.ts

@@ -0,0 +1,20 @@
+import { betterAuth } from "better-auth";
+import { phoneNumber } from "better-auth/plugins";
+import Database from "better-sqlite3";
+
+export const auth = betterAuth({
+	database: new Database("./sqlite.db"),
+
+	plugins: [
+		phoneNumber({
+			sendOTP: ({ phoneNumber, code }, ctx) => {
+				console.log({ phoneNumber, code });
+			},
+			signUpOnVerification: {
+				getTempEmail: (phoneNumber) => {
+					return `${phoneNumber}@example.org`;
+				},
+			},
+		}),
+	],
+});