Improved auth

src/app/auth/CreateAccount.tsx

@@ -5,8 +5,8 @@ import { Input } from "@/components/ui/input";
 import axios from "axios";
 import { useState } from "react";
 import Link from "next/link";
-import { CardContent, CardHeader, CardTitle } from "../ui/card";
+import { CardContent, CardHeader, CardTitle } from "@/components/ui/card";
-import { Label } from "../ui/label";
+import { Label } from "@/components/ui/label";
 import { toast } from "sonner";
 import { useRouter } from "next/navigation";
 import Cookies from "js-cookie";

src/app/auth/Login.tsx

@@ -6,7 +6,7 @@ import axios from "axios";
 import { useState } from "react";
 import Cookies from "js-cookie";
 import { useRouter } from "next/navigation";
-import { CardContent, CardHeader, CardTitle } from "../ui/card";
+import { CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 
 export default function Login() {
   const [email, setEmail] = useState("");

src/app/auth/page.tsx

@@ -1,14 +1,19 @@
 "use client";
 
-import { Card } from "../ui/card";
+import { Card } from "@/components/ui/card";
-import { Tabs, TabsContent, TabsList, TabsTrigger } from "../ui/tabs";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import CreateAccount from "./CreateAccount";
 import Login from "./Login";
+import { useSearchParams } from "next/navigation";
+
+export default function Auth() {
+  const params = useSearchParams();
+  const pt = params.get("t");
+  const tab = pt === "create" || pt === "login" ? pt : "create";
 
-export default function Auth({ kind }: { kind: "login" | "create" }) {
   return (
     <div className="h-screen flex items-center">
-      <Tabs defaultValue={kind} className="mx-auto">
+      <Tabs defaultValue={tab} className="mx-auto">
         <TabsList className="mx-auto">
           <TabsTrigger value="login">Login</TabsTrigger>
           <TabsTrigger value="create">Create Account</TabsTrigger>

src/app/login/page.tsx

@@ -1,7 +0,0 @@
-"use client";
-
-import Auth from "@/components/auth/Auth";
-
-export default function Login() {
-  return <Auth kind="login" />;
-}

src/app/page.tsx

@@ -24,10 +24,12 @@ export default function LandingPage() {
           <Logo />
         </motion.div>
         <div className="flex gap-4">
-          <Button variant="ghost" onClick={() => router.push("/login")}>
+          <Button variant="ghost" onClick={() => router.push("/auth?t=login")}>
             Login
           </Button>
-          <Button onClick={() => router.push("/signup")}>Get Started</Button>
+          <Button onClick={() => router.push("/auth?t=create")}>
+            Get Started
+          </Button>
         </div>
       </header>
 
@@ -46,7 +48,7 @@ export default function LandingPage() {
           with real-time messaging, secure channels, and seamless collaboration.
         </p>
         <div className="flex gap-3">
-          <Button size="lg" onClick={() => router.push("/signup")}>
+          <Button size="lg" onClick={() => router.push("/auth?t=create")}>
             Get Started
           </Button>
           <Button

src/app/signup/page.tsx

@@ -1,7 +0,0 @@
-"use client";
-
-import Auth from "@/components/auth/Auth";
-
-export default function SignUp() {
-  return <Auth kind="create" />;
-}

src/hooks/get-user.ts

@@ -20,7 +20,7 @@ export default function useUser() {
       try {
         setUser((await get("/api/profile", (r) => setUser(r.data))).data);
       } catch (e: any) {
-        router.push("/login");
+        router.push("/auth?t=login");
         toast.error(`Error: ${e}`);
       }
     }