feat: v1 — persistent shell, model gateway, artifact improvements (#1462)

app/(auth)/actions.ts

@@ -1,7 +1,10 @@
 "use server";
 
 import { z } from "zod";
-import { auth } from "@/lib/auth";
+
+import { createUser, getUser } from "@/lib/db/queries";
+
+import { signIn } from "./auth";
 
 const authFormSchema = z.object({
   email: z.string().email(),
@@ -22,11 +25,10 @@ export const login = async (
       password: formData.get("password"),
     });
 
-    await auth.api.signInEmail({
-      body: {
-        email: validatedData.email,
-        password: validatedData.password,
-      },
+    await signIn("credentials", {
+      email: validatedData.email,
+      password: validatedData.password,
+      redirect: false,
     });
 
     return { status: "success" };
@@ -59,17 +61,17 @@ export const register = async (
       password: formData.get("password"),
     });
 
-    const result = await auth.api.signUpEmail({
-      body: {
-        email: validatedData.email,
-        password: validatedData.password,
-        name: validatedData.email,
-      },
-    });
+    const [user] = await getUser(validatedData.email);
 
-    if (!result) {
-      return { status: "failed" };
+    if (user) {
+      return { status: "user_exists" } as RegisterActionState;
     }
+    await createUser(validatedData.email, validatedData.password);
+    await signIn("credentials", {
+      email: validatedData.email,
+      password: validatedData.password,
+      redirect: false,
+    });
 
     return { status: "success" };
   } catch (error) {
@@ -77,11 +79,6 @@ export const register = async (
       return { status: "invalid_data" };
     }
 
-    const message = error instanceof Error ? error.message : "";
-    if (message.includes("already exists") || message.includes("UNIQUE")) {
-      return { status: "user_exists" };
-    }
-
     return { status: "failed" };
   }
 };

app/(auth)/api/auth/[...nextauth]/route.ts

@@ -0,0 +1 @@
+export { GET, POST } from "@/app/(auth)/auth";

app/(auth)/api/auth/guest/route.ts

@@ -0,0 +1,26 @@
+import { NextResponse } from "next/server";
+import { getToken } from "next-auth/jwt";
+import { signIn } from "@/app/(auth)/auth";
+import { isDevelopmentEnvironment } from "@/lib/constants";
+
+export async function GET(request: Request) {
+  const { searchParams } = new URL(request.url);
+  const rawRedirect = searchParams.get("redirectUrl") || "/";
+  const redirectUrl =
+    rawRedirect.startsWith("/") && !rawRedirect.startsWith("//")
+      ? rawRedirect
+      : "/";
+
+  const token = await getToken({
+    req: request,
+    secret: process.env.AUTH_SECRET,
+    secureCookie: !isDevelopmentEnvironment,
+  });
+
+  if (token) {
+    const base = process.env.NEXT_PUBLIC_BASE_PATH ?? "";
+    return NextResponse.redirect(new URL(`${base}/`, request.url));
+  }
+
+  return signIn("guest", { redirect: true, redirectTo: redirectUrl });
+}

app/(auth)/auth.config.ts

@@ -0,0 +1,14 @@
+import type { NextAuthConfig } from "next-auth";
+
+const base = process.env.NEXT_PUBLIC_BASE_PATH ?? "";
+
+export const authConfig = {
+  basePath: "/api/auth",
+  trustHost: true,
+  pages: {
+    signIn: `${base}/login`,
+    newUser: `${base}/`,
+  },
+  providers: [],
+  callbacks: {},
+} satisfies NextAuthConfig;

app/(auth)/auth.ts

@@ -0,0 +1,99 @@
+import { compare } from "bcrypt-ts";
+import NextAuth, { type DefaultSession } from "next-auth";
+import type { DefaultJWT } from "next-auth/jwt";
+import Credentials from "next-auth/providers/credentials";
+import { DUMMY_PASSWORD } from "@/lib/constants";
+import { createGuestUser, getUser } from "@/lib/db/queries";
+import { authConfig } from "./auth.config";
+
+export type UserType = "guest" | "regular";
+
+declare module "next-auth" {
+  interface Session extends DefaultSession {
+    user: {
+      id: string;
+      type: UserType;
+    } & DefaultSession["user"];
+  }
+
+  interface User {
+    id?: string;
+    email?: string | null;
+    type: UserType;
+  }
+}
+
+declare module "next-auth/jwt" {
+  interface JWT extends DefaultJWT {
+    id: string;
+    type: UserType;
+  }
+}
+
+export const {
+  handlers: { GET, POST },
+  auth,
+  signIn,
+  signOut,
+} = NextAuth({
+  ...authConfig,
+  providers: [
+    Credentials({
+      credentials: {
+        email: { label: "Email", type: "email" },
+        password: { label: "Password", type: "password" },
+      },
+      async authorize(credentials) {
+        const email = String(credentials.email ?? "");
+        const password = String(credentials.password ?? "");
+        const users = await getUser(email);
+
+        if (users.length === 0) {
+          await compare(password, DUMMY_PASSWORD);
+          return null;
+        }
+
+        const [user] = users;
+
+        if (!user.password) {
+          await compare(password, DUMMY_PASSWORD);
+          return null;
+        }
+
+        const passwordsMatch = await compare(password, user.password);
+
+        if (!passwordsMatch) {
+          return null;
+        }
+
+        return { ...user, type: "regular" };
+      },
+    }),
+    Credentials({
+      id: "guest",
+      credentials: {},
+      async authorize() {
+        const [guestUser] = await createGuestUser();
+        return { ...guestUser, type: "guest" };
+      },
+    }),
+  ],
+  callbacks: {
+    jwt({ token, user }) {
+      if (user) {
+        token.id = user.id as string;
+        token.type = user.type;
+      }
+
+      return token;
+    },
+    session({ session, token }) {
+      if (session.user) {
+        session.user.id = token.id;
+        session.user.type = token.type;
+      }
+
+      return session;
+    },
+  },
+});

app/(auth)/layout.tsx

@@ -0,0 +1,43 @@
+import { ArrowLeftIcon } from "lucide-react";
+import Link from "next/link";
+import { SparklesIcon, VercelIcon } from "@/components/chat/icons";
+import { Preview } from "@/components/chat/preview";
+
+export default function AuthLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <div className="flex h-dvh w-screen bg-sidebar">
+      <div className="flex w-full flex-col bg-background p-8 xl:w-[600px] xl:shrink-0 xl:rounded-r-2xl xl:border-r xl:border-border/40 md:p-16">
+        <Link
+          className="flex w-fit items-center gap-1.5 text-[13px] text-muted-foreground transition-colors hover:text-foreground"
+          href="/"
+        >
+          <ArrowLeftIcon className="size-3.5" />
+          Back
+        </Link>
+        <div className="mx-auto flex w-full max-w-md flex-1 flex-col justify-center gap-10">
+          <div className="flex flex-col gap-2">
+            <div className="mb-2 flex size-9 items-center justify-center rounded-lg bg-muted/60 text-muted-foreground ring-1 ring-border/50">
+              <SparklesIcon size={14} />
+            </div>
+            {children}
+          </div>
+        </div>
+      </div>
+
+      <div className="hidden flex-1 flex-col overflow-hidden pl-12 xl:flex">
+        <div className="flex items-center gap-1.5 pt-8 text-[13px] text-muted-foreground/50">
+          Powered by
+          <VercelIcon size={14} />
+          <span className="font-medium text-muted-foreground">AI Gateway</span>
+        </div>
+        <div className="flex-1 pt-4">
+          <Preview />
+        </div>
+      </div>
+    </div>
+  );
+}

app/(auth)/login/page.tsx

@@ -2,36 +2,30 @@
 
 import Link from "next/link";
 import { useRouter } from "next/navigation";
+import { useSession } from "next-auth/react";
 import { useActionState, useEffect, useState } from "react";
 
-import { AuthForm } from "@/components/auth-form";
-import { SubmitButton } from "@/components/submit-button";
-import { toast } from "@/components/toast";
-import { useSession } from "@/lib/client";
+import { AuthForm } from "@/components/chat/auth-form";
+import { SubmitButton } from "@/components/chat/submit-button";
+import { toast } from "@/components/chat/toast";
 import { type LoginActionState, login } from "../actions";
 
 export default function Page() {
   const router = useRouter();
-
   const [email, setEmail] = useState("");
   const [isSuccessful, setIsSuccessful] = useState(false);
 
   const [state, formAction] = useActionState<LoginActionState, FormData>(
     login,
-    {
-      status: "idle",
-    }
+    { status: "idle" }
   );
 
-  const { refetch } = useSession();
+  const { update: updateSession } = useSession();
 
-  // biome-ignore lint/correctness/useExhaustiveDependencies: router and refetch are stable refs
+  // biome-ignore lint/correctness/useExhaustiveDependencies: router and updateSession are stable refs
   useEffect(() => {
     if (state.status === "failed") {
-      toast({
-        type: "error",
-        description: "Invalid credentials!",
-      });
+      toast({ type: "error", description: "Invalid credentials!" });
     } else if (state.status === "invalid_data") {
       toast({
         type: "error",
@@ -39,8 +33,8 @@ export default function Page() {
       });
     } else if (state.status === "success") {
       setIsSuccessful(true);
-      refetch();
-      router.push("/");
+      updateSession();
+      router.refresh();
     }
   }, [state.status]);
 
@@ -50,30 +44,23 @@ export default function Page() {
   };
 
   return (
-    <div className="flex h-dvh w-screen items-start justify-center bg-background pt-12 md:items-center md:pt-0">
-      <div className="flex w-full max-w-md flex-col gap-12 overflow-hidden rounded-2xl">
-        <div className="flex flex-col items-center justify-center gap-2 px-4 text-center sm:px-16">
-          <h3 className="font-semibold text-xl dark:text-neutral-50">
-            Sign In
-          </h3>
-          <p className="text-gray-500 text-sm dark:text-neutral-400">
-            Use your email and password to sign in
-          </p>
-        </div>
-        <AuthForm action={handleSubmit} defaultEmail={email}>
-          <SubmitButton isSuccessful={isSuccessful}>Sign in</SubmitButton>
-          <p className="mt-4 text-center text-gray-600 text-sm dark:text-neutral-400">
-            {"Don't have an account? "}
-            <Link
-              className="font-semibold text-gray-800 hover:underline dark:text-neutral-200"
-              href="/register"
-            >
-              Sign up
-            </Link>
-            {" for free."}
-          </p>
-        </AuthForm>
-      </div>
-    </div>
+    <>
+      <h1 className="text-2xl font-semibold tracking-tight">Welcome back</h1>
+      <p className="text-sm text-muted-foreground">
+        Sign in to your account to continue
+      </p>
+      <AuthForm action={handleSubmit} defaultEmail={email}>
+        <SubmitButton isSuccessful={isSuccessful}>Sign in</SubmitButton>
+        <p className="text-center text-[13px] text-muted-foreground">
+          {"No account? "}
+          <Link
+            className="text-foreground underline-offset-4 hover:underline"
+            href="/register"
+          >
+            Sign up
+          </Link>
+        </p>
+      </AuthForm>
+    </>
   );
 }

app/(auth)/register/page.tsx

@@ -2,29 +2,26 @@
 
 import Link from "next/link";
 import { useRouter } from "next/navigation";
+import { useSession } from "next-auth/react";
 import { useActionState, useEffect, useState } from "react";
-import { AuthForm } from "@/components/auth-form";
-import { SubmitButton } from "@/components/submit-button";
-import { toast } from "@/components/toast";
-import { useSession } from "@/lib/client";
+import { AuthForm } from "@/components/chat/auth-form";
+import { SubmitButton } from "@/components/chat/submit-button";
+import { toast } from "@/components/chat/toast";
 import { type RegisterActionState, register } from "../actions";
 
 export default function Page() {
   const router = useRouter();
-
   const [email, setEmail] = useState("");
   const [isSuccessful, setIsSuccessful] = useState(false);
 
   const [state, formAction] = useActionState<RegisterActionState, FormData>(
     register,
-    {
-      status: "idle",
-    }
+    { status: "idle" }
   );
 
-  const { refetch } = useSession();
+  const { update: updateSession } = useSession();
 
-  // biome-ignore lint/correctness/useExhaustiveDependencies: router and refetch are stable refs
+  // biome-ignore lint/correctness/useExhaustiveDependencies: router and updateSession are stable refs
   useEffect(() => {
     if (state.status === "user_exists") {
       toast({ type: "error", description: "Account already exists!" });
@@ -36,11 +33,10 @@ export default function Page() {
         description: "Failed validating your submission!",
       });
     } else if (state.status === "success") {
-      toast({ type: "success", description: "Account created successfully!" });
-
+      toast({ type: "success", description: "Account created!" });
       setIsSuccessful(true);
-      refetch();
-      router.push("/");
+      updateSession();
+      router.refresh();
     }
   }, [state.status]);
 
@@ -50,30 +46,21 @@ export default function Page() {
   };
 
   return (
-    <div className="flex h-dvh w-screen items-start justify-center bg-background pt-12 md:items-center md:pt-0">
-      <div className="flex w-full max-w-md flex-col gap-12 overflow-hidden rounded-2xl">
-        <div className="flex flex-col items-center justify-center gap-2 px-4 text-center sm:px-16">
-          <h3 className="font-semibold text-xl dark:text-neutral-50">
-            Sign Up
-          </h3>
-          <p className="text-gray-500 text-sm dark:text-neutral-400">
-            Create an account with your email and password
-          </p>
-        </div>
-        <AuthForm action={handleSubmit} defaultEmail={email}>
-          <SubmitButton isSuccessful={isSuccessful}>Sign Up</SubmitButton>
-          <p className="mt-4 text-center text-gray-600 text-sm dark:text-neutral-400">
-            {"Already have an account? "}
-            <Link
-              className="font-semibold text-gray-800 hover:underline dark:text-neutral-200"
-              href="/login"
-            >
-              Sign in
-            </Link>
-            {" instead."}
-          </p>
-        </AuthForm>
-      </div>
-    </div>
+    <>
+      <h1 className="text-2xl font-semibold tracking-tight">Create account</h1>
+      <p className="text-sm text-muted-foreground">Get started for free</p>
+      <AuthForm action={handleSubmit} defaultEmail={email}>
+        <SubmitButton isSuccessful={isSuccessful}>Sign up</SubmitButton>
+        <p className="text-center text-[13px] text-muted-foreground">
+          {"Have an account? "}
+          <Link
+            className="text-foreground underline-offset-4 hover:underline"
+            href="/login"
+          >
+            Sign in
+          </Link>
+        </p>
+      </AuthForm>
+    </>
   );
 }