Better auth

src/app/api/user/route.ts

@@ -5,10 +5,10 @@ import { supabase } from "../supa";
 /**
  * POST /api/user
  * Register new user
- * Body: { name, username, email, password }
+ * Body: { username, email, password }
  */
 export async function POST(req: NextRequest) {
-  const { name, username, email, password } = await req.json();
+  const { username, email, password } = await req.json();
 
   if (!email || !password || !username)
     return NextResponse.json(
@@ -28,29 +28,35 @@ export async function POST(req: NextRequest) {
       { status: StatusCodes.CONFLICT }
     );
 
-  const { data: authData, error: authError } =
-    await supabase.auth.admin.createUser({
-      email,
-      password,
-      email_confirm: true,
-      user_metadata: { name, username },
-    });
+  const { data: authData, error: authError } = await supabase.auth.signUp({
+    email,
+    password,
+  });
 
   if (authError)
     return NextResponse.json(
       { message: authError.message },
-      { status: StatusCodes.BAD_REQUEST }
+      { status: StatusCodes.INTERNAL_SERVER_ERROR }
+    );
+
+  if (!authData.user)
+    return NextResponse.json(
+      { message: "User is null" },
+      { status: StatusCodes.INTERNAL_SERVER_ERROR }
     );
 
   await supabase.from("profiles").insert({
     id: authData.user.id,
-    name,
     username,
+    display_name: username,
+    avatar_url: "",
+    node_address: "",
   });
 
   return NextResponse.json({
-    message: "ok",
-    user_id: authData.user.id,
+    message: "User registered. Please check your email to verify your account.",
+    user_id: authData.user?.id,
+    email_sent: true,
   });
 }
 
@@ -61,30 +67,14 @@ export async function POST(req: NextRequest) {
  */
 export async function GET(req: NextRequest) {
   const params = new URL(req.url).searchParams;
-  const [username, password] = [params.get("username"), params.get("password")];
+  const [email, password] = [params.get("email"), params.get("password")];
 
-  if (!username || !password)
+  if (!email || !password)
     return NextResponse.json(
-      { message: "Params username and password are required" },
+      { message: "Params email and password are required" },
       { status: StatusCodes.BAD_REQUEST }
     );
 
-  let email = username;
-  if (!username.includes("@")) {
-    const { data } = await supabase
-      .from("profiles")
-      .select("email")
-      .eq("email", username)
-      .maybeSingle();
-    email = data?.email;
-  }
-
-  if (!email)
-    return NextResponse.json(
-      { message: "Invalid username" },
-      { status: StatusCodes.UNAUTHORIZED }
-    );
-
   const { data, error } = await supabase.auth.signInWithPassword({
     email,
     password,
@@ -104,7 +94,6 @@ export async function GET(req: NextRequest) {
     user_id: session?.user?.id,
   });
 
-  // Optionally set cookie
   res.cookies.set("token", session?.access_token ?? "", { httpOnly: true });
 
   return res;

src/app/api/verify/route.ts

@@ -0,0 +1,40 @@
+import { NextRequest, NextResponse } from "next/server";
+import { supabase } from "../supa";
+import { StatusCodes } from "http-status-codes";
+
+export async function GET(req: NextRequest) {
+  const email = req.nextUrl.searchParams.get("email");
+  const password = req.nextUrl.searchParams.get("password");
+
+  if (!email || !password)
+    return NextResponse.json(
+      { message: "Missing email or password" },
+      { status: StatusCodes.BAD_REQUEST }
+    );
+
+  const { data, error } = await supabase.auth.signInWithPassword({
+    email,
+    password,
+  });
+
+  if (error)
+    return NextResponse.json(
+      { message: error.message },
+      { status: StatusCodes.INTERNAL_SERVER_ERROR }
+    );
+
+  if (!data)
+    return NextResponse.json(
+      { verified: false, message: "User not found" },
+      { status: StatusCodes.NOT_FOUND }
+    );
+
+  const res = NextResponse.json({
+    verified: !!data.user.email_confirmed_at,
+    user_id: data.user.id,
+    access_token: data.session.access_token,
+    refresh_token: data.session.refresh_token,
+  });
+
+  return res;
+}

src/components/Sidebar.tsx

@@ -106,9 +106,7 @@ export default function AppSidebar({
     ];
 
     setServers(updatedServers);
-    Cookies.set("servers", updatedServers.map((x) => x.join("@")).join(","), {
-      expires: 7,
-    });
+    Cookies.set("servers", updatedServers.map((x) => x.join("@")).join(","));
     setNewServer({ name: "", ip: "" });
   };
 

src/components/auth/CreateAccount.tsx

@@ -3,12 +3,13 @@
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import axios from "axios";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import Cookies from "js-cookie";
 import { useRouter } from "next/navigation";
 import Link from "next/link";
 import { CardContent, CardHeader, CardTitle } from "../ui/card";
 import { Label } from "../ui/label";
+import { toast } from "sonner";
 
 export default function CreateAccount() {
   const [username, setUsername] = useState("");
@@ -20,9 +21,40 @@ export default function CreateAccount() {
   const [feedback, setFeedback] = useState<
     undefined | { kind: "error" | "info"; message: string }
   >();
+  const [verify, setVerify] = useState<string | undefined>();
 
   const router = useRouter();
 
+  // Verify interval
+  useEffect(() => {
+    if (verify) {
+      const i = setInterval(async () => {
+        const { data } = await axios.get("/api/verify", {
+          params: { email, password },
+        });
+        const response = data as {
+          verified: boolean;
+          user_id: string;
+          access_token?: string;
+          refresh_token?: string;
+        };
+        if (response.verified) {
+          clearInterval(i);
+          setFeedback({
+            message: "Email verified, redirecting...",
+            kind: "info",
+          });
+          if (response.access_token) {
+            Cookies.set("token", response.access_token);
+            setTimeout(() => router.push("/chat"), 500);
+          } else {
+            console.log(response);
+          }
+        }
+      }, 8000);
+    }
+  }, [verify]);
+
   const validateInput = ():
     | { kind: "error" | "info"; message: string }
     | undefined => {
@@ -36,7 +68,7 @@ export default function CreateAccount() {
       return {
         kind: "error",
         message:
-          "Username must be 3–20 characters and only letters, numbers, or underscores.",
+          "Username must be 3-20 characters and only letters, numbers, or underscores.",
       };
     }
     if (password.length < 6) {
@@ -67,11 +99,25 @@ export default function CreateAccount() {
 
     try {
       setLoading(true);
-      const res = await axios.post("/api/user", { username, password, email });
-      Cookies.set("token", (res.data as any).token);
-
-      setFeedback({ kind: "info", message: "Account created! Redirecting..." });
-      setTimeout(() => router.push("/chat"), 1000);
+      const { data } = await axios.post("/api/user", {
+        username,
+        password,
+        email,
+      });
+      const response = data as {
+        message: string;
+        email_sent: boolean;
+        user_id: string;
+      };
+      if (response.email_sent) {
+        toast.info(
+          "We sent you a verification email. Please verify to continue."
+        );
+        setFeedback(undefined);
+        setVerify(response.user_id);
+      } else {
+        setFeedback({ message: response.message, kind: "error" });
+      }
     } catch (err: any) {
       setFeedback({
         kind: "error",
@@ -87,69 +133,77 @@ export default function CreateAccount() {
   return (
     <>
       <CardHeader>
-        <CardTitle className="text-3xl mx-auto">Create an Account</CardTitle>
+        <CardTitle className="text-3xl mx-auto">
+          {verify ? "Verify" : "Create an Account"}
+        </CardTitle>
       </CardHeader>
       <CardContent className="gap-3 flex flex-col">
-        <span>
-          Email
-          <Input
-            onChange={(e) => setEmail(e.target.value)}
-            placeholder="[email protected]"
-            type="email"
-          />
-        </span>
-        <span>
-          Username
-          <Input
-            onChange={(e) => setUsername(e.target.value)}
-            placeholder="john_doe"
-          />
-        </span>
-        <span>
-          Password
-          <Input
-            onChange={(e) => setPassword(e.target.value)}
-            type="password"
-          />
-        </span>
-        <span>
-          Confirm Password
-          <Input
-            onChange={(e) => setConfirmPassword(e.target.value)}
-            onKeyDown={(e) => {
-              if (e.key === "Enter") signup();
-            }}
-            type="password"
-          />
-        </span>
+        {verify ? (
+          `We sent you a verification email at (${email}). Please verify to continue.`
+        ) : (
+          <>
+            <span>
+              Email
+              <Input
+                onChange={(e) => setEmail(e.target.value)}
+                placeholder="[email protected]"
+                type="email"
+              />
+            </span>
+            <span>
+              Username
+              <Input
+                onChange={(e) => setUsername(e.target.value)}
+                placeholder="john_doe"
+              />
+            </span>
+            <span>
+              Password
+              <Input
+                onChange={(e) => setPassword(e.target.value)}
+                type="password"
+              />
+            </span>
+            <span>
+              Confirm Password
+              <Input
+                onChange={(e) => setConfirmPassword(e.target.value)}
+                onKeyDown={(e) => {
+                  if (e.key === "Enter") signup();
+                }}
+                type="password"
+              />
+            </span>
 
-        <Label className="flex items-center gap-2 text-sm">
-          <input
-            type="checkbox"
-            checked={acceptTerms}
-            onChange={(e) => setAcceptTerms(e.target.checked)}
-          />
-          I agree to the{" "}
-          <Link className="underline" href="/terms">
-            terms & conditions
-          </Link>
-        </Label>
+            <Label className="flex items-center gap-2 text-sm">
+              <input
+                type="checkbox"
+                checked={acceptTerms}
+                onChange={(e) => setAcceptTerms(e.target.checked)}
+              />
+              I agree to the{" "}
+              <Link className="underline" href="/terms">
+                terms & conditions
+              </Link>
+            </Label>
 
-        {feedback && (
-          <div
-            className={`text-sm rounded-md p-2 ${
-              feedback.kind === "error"
-                ? "bg-red-500/20 text-red-400"
-                : "bg-green-500/20 text-green-400"
-            }`}
-          >
-            {feedback.message}
-          </div>
+            {feedback && (
+              <div
+                className={`text-sm rounded-md p-2 ${
+                  feedback.kind === "error"
+                    ? "bg-red-500/20 text-red-400"
+                    : "bg-green-500/20 text-green-400"
+                }`}
+              >
+                {feedback.message}
+              </div>
+            )}
+
+            <Button onClick={signup} disabled={loading}>
+              {loading ? "Signing Up..." : "Sign Up"}
+            </Button>
+          </>
         )}
-
-        <Button onClick={signup} disabled={loading}>
-          {loading ? "Signing Up..." : "Sign Up"}
-        </Button>
       </CardContent>
     </>
   );

src/components/auth/Login.tsx

@@ -6,18 +6,10 @@ import axios from "axios";
 import { useState } from "react";
 import Cookies from "js-cookie";
 import { useRouter } from "next/navigation";
-import { Label } from "@/components/ui/label";
-import Link from "next/link";
-import {
-  CardContent,
-  CardDescription,
-  CardFooter,
-  CardHeader,
-  CardTitle,
-} from "../ui/card";
+import { CardContent, CardHeader, CardTitle } from "../ui/card";
 
 export default function Login() {
-  const [username, setUsername] = useState("");
+  const [email, setEmail] = useState("");
   const [password, setPassword] = useState("");
   const [feedback, setFeedback] = useState<
     undefined | { kind: "error" | "info"; message: string }
@@ -29,7 +21,7 @@ export default function Login() {
     setFeedback(undefined);
     try {
       const res = await axios.get("/api/user", {
-        params: { username, password },
+        params: { email, password },
       });
 
       Cookies.set("token", (res.data as any).token);
@@ -57,7 +49,7 @@ export default function Login() {
       <CardContent className="gap-3 flex flex-col">
         <span>
           Email
-          <Input onChange={(e) => setUsername(e.target.value)} type="email" />
+          <Input onChange={(e) => setEmail(e.target.value)} type="email" />
         </span>
         <span>
           Password

src/hooks/get-user.ts

@@ -17,12 +17,6 @@ export default function useUser() {
 
   useEffect(() => {
     async function fetchUser() {
-      const token = Cookies.get("token");
-      if (!token) {
-        router.push("/login");
-        return;
-      }
-
       try {
         setUser((await get("/api/profile")).data);
       } catch (e: any) {