@tulip-systems/core 0.3.0 → 0.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tulip-systems/core",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "type": "module",
   "sideEffects": false,
   "license": "MIT",
@@ -104,6 +104,7 @@
     "superjson": "^2.2.2",
     "tailwind-merge": "^3.0.2",
     "tailwindcss-animate": "^1.0.7",
+    "urlpattern-polyfill": "^10.1.0",
     "use-debounce": "^10.0.4",
     "uuid": "^13.0.0",
     "vaul": "^1.1.2",

package/src/components/layouts/admin-layout.tsx

@@ -1,6 +1,6 @@
-import { AuthGuard } from "@/modules/auth/components/guard";
+import { AuthGuard } from "@/modules/auth/components/guard.client";
 import { PropsWithChildren } from "react";
-import { SidebarProvider } from "../entry.client";
+import { SidebarProvider } from "../ui/sidebar.client";
 
 export function AdminLayout(props: PropsWithChildren) {
   return (

package/src/components/layouts/not-found-page.tsx

@@ -1,9 +1,17 @@
 import { NotFoundSection } from "./not-found-section";
 
+export function AdminNotFoundPage() {
+  return (
+    <div className="relative z-0 grid h-[100dvh] w-full place-items-center">
+      <NotFoundSection href="/admin" />
+    </div>
+  );
+}
+
 export function NotFoundPage() {
   return (
     <div className="relative z-0 grid h-[100dvh] w-full place-items-center">
-      <NotFoundSection href="/" />
+      <NotFoundSection />
     </div>
   );
 }

package/src/components/layouts/not-found-section.tsx

@@ -4,7 +4,7 @@ import { HomeIcon } from "lucide-react";
 import type { Route } from "next";
 import Link from "next/link";
 
-export function NotFoundSection({ href }: { href: Route }) {
+export function NotFoundSection({ href }: { href?: Route }) {
   return (
     <div className="flex flex-col items-center gap-12 text-center">
       <span className="text-foreground space-y-2">
@@ -12,10 +12,15 @@ export function NotFoundSection({ href }: { href: Route }) {
         <h1 className="text-2xl font-bold lg:text-3xl">Oeps, deze pagina is niet gevonden.</h1>
       </span>
 
-      <Link href={href} className={cn(buttonVariants({ variant: "secondary" }), "text-foreground")}>
-        <HomeIcon className="mr-2 size-4" />
-        Terug naar home
-      </Link>
+      {href && (
+        <Link
+          href={href}
+          className={cn(buttonVariants({ variant: "secondary" }), "text-foreground")}
+        >
+          <HomeIcon className="mr-2 size-4" />
+          Terug naar home
+        </Link>
+      )}
     </div>
   );
 }

package/src/modules/auth/components/auth-loading.tsx

@@ -2,7 +2,7 @@ import { Skeleton } from "@/components/ui/skeleton";
 
 export function AuthLoading() {
   return (
-    <div className="flex flex-col gap-4">
+    <div className="mx-auto flex w-full flex-col gap-4 sm:w-[350px]">
       <Skeleton className="h-7 w-full" />
       <Skeleton className="h-48 w-full" />
       <Skeleton className="h-12 w-full" />

package/src/modules/auth/components/login-page.client.tsx

@@ -5,10 +5,10 @@ import { Button } from "@/components/ui/button";
 import { Form, FormControl, FormField, FormItem, FormMessage } from "@/components/ui/form.client";
 import { Input } from "@/components/ui/input";
 import { standardSchemaResolver } from "@hookform/resolvers/standard-schema";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
 import Link from "next/link";
 import { useRouter } from "next/navigation";
 import { parseAsString, useQueryState } from "nuqs";
-import React from "react";
 import { useForm } from "react-hook-form";
 import { toast } from "sonner";
 import * as z from "zod";
@@ -16,11 +16,50 @@ import { authClient } from "../handler/client.client";
 import { loginSchema } from "../lib/validators";
 
 export function LoginPage() {
+  const queryClient = useQueryClient();
   const [callbackURL] = useQueryState("callbackURL", parseAsString);
 
   const router = useRouter();
 
-  const [isPending, startTransition] = React.useTransition();
+  const { mutate, isPending } = useMutation({
+    mutationFn: async (data: z.infer<typeof loginSchema>) => {
+      const result = await authClient.signIn.email(data);
+      if (result.error) throw result.error;
+
+      const session = await authClient.getSession();
+      if (session.error) throw session.error;
+
+      queryClient.setQueryData(["session"], session.data);
+
+      return result.data;
+    },
+    onSuccess: () => {
+      router.push(callbackURL ?? "/admin");
+      toast.success("Succesvol ingelogd");
+    },
+    onError: (err) => {
+      console.error("Login error: ", err);
+
+      if ("status" in err) {
+        if (err.status === 401) {
+          toast.error("Ongeldige email of wachtwoord");
+          return;
+        }
+
+        if (err.status === 403) {
+          toast.error("Account is geblokkeerd");
+          return;
+        }
+
+        if (err.status === 429) {
+          toast.error("Te veel login pogingen");
+          return;
+        }
+      }
+
+      toast.error("Er is iets misgegaan");
+    },
+  });
 
   const form = useForm<z.infer<typeof loginSchema>>({
     resolver: standardSchemaResolver(loginSchema),
@@ -38,39 +77,7 @@ export function LoginPage() {
       </div>
 
       <Form {...form}>
-        <form
-          className="space-y-6"
-          onSubmit={form.handleSubmit((data) =>
-            startTransition(async () => {
-              await authClient.signIn.email(data, {
-                onSuccess: () => {
-                  router.replace(callbackURL ?? "/");
-                  toast.success("Succesvol ingelogd");
-                },
-                onError: ({ error }) => {
-                  console.error("Login error: ", error);
-
-                  if (error.status === 401) {
-                    toast.error("Ongeldige email of wachtwoord");
-                    return;
-                  }
-
-                  if (error.status === 403) {
-                    toast.error("Account is geblokkeerd");
-                    return;
-                  }
-
-                  if (error.status === 429) {
-                    toast.error("Te veel login pogingen");
-                    return;
-                  }
-
-                  toast.error("Er is iets misgegaan");
-                },
-              });
-            }),
-          )}
-        >
+        <form className="space-y-6" onSubmit={form.handleSubmit((data) => mutate(data))}>
           <div className="flex flex-col gap-3">
             <FormField
               control={form.control}

package/src/modules/auth/entry.server.ts

@@ -1,4 +1,4 @@
-export * from "./components/allowed.server";
 export * from "./components/auth-layout.server";
+export * from "./handler/proxy.server";
 export * from "./handler/route.server";
 export * from "./lib/helpers.server";

package/src/modules/auth/handler/proxy.server.ts

@@ -0,0 +1,28 @@
+import { getSessionCookie } from "better-auth/cookies";
+import { NextRequest, NextResponse } from "next/server";
+import { URLPattern } from "urlpattern-polyfill";
+import { authCookiePrefix } from "./server.server";
+
+/**
+ * Create auth proxy
+ */
+export function createAuthProxy(props: { publicRoutes: string[] }) {
+  return (req: NextRequest) => {
+    // 1. Check if the current route is protected or public
+    const pathname = req.nextUrl.pathname;
+
+    const isPublicRoute = props.publicRoutes.some((route) =>
+      new URLPattern({ pathname: route }).test({ pathname }),
+    );
+
+    // 2. Check if a session cookie is present
+    const sessionCookie = getSessionCookie(req, { cookiePrefix: authCookiePrefix });
+
+    // 3. Redirect to /auth/login if the user is not authenticated
+    if (!isPublicRoute && !sessionCookie) {
+      return NextResponse.redirect(new URL("/auth/login", req.nextUrl));
+    }
+
+    return NextResponse.next();
+  };
+}

package/src/modules/auth/handler/server.server.ts

@@ -10,6 +10,8 @@ import { nextCookies } from "better-auth/next-js";
 import { admin, emailOTP } from "better-auth/plugins";
 import { Resend } from "resend";
 
+export const authCookiePrefix = "tulip";
+
 type CreateServerAuthParams<TSchema extends TDatabaseSchema> = Pick<
   TulipConfig<TSchema>,
   "email" | "auth"
@@ -23,6 +25,9 @@ export const createServerAuth = <TSchema extends TDatabaseSchema>(
   config: CreateServerAuthParams<TSchema>,
 ) =>
   betterAuth({
+    advanced: {
+      cookiePrefix: authCookiePrefix,
+    },
     database: drizzleAdapter(config.db, {
       provider: "pg",
       schema: config.schema,

package/src/modules/auth/lib/helpers.server.ts

@@ -5,7 +5,6 @@ import { GetTulipReturn } from "@/modules/config/lib/resolve.server";
 import { ServerError } from "@/modules/config/router/error.server";
 import { eq } from "drizzle-orm";
 import { headers } from "next/headers";
-import { redirect } from "next/navigation";
 import { users } from "../entry";
 import { CreateUserSchema, UpdateUserSchema } from "./validators";
 
@@ -15,10 +14,7 @@ import { CreateUserSchema, UpdateUserSchema } from "./validators";
 export async function getSession<TSchema extends TDatabaseSchema>({
   auth,
 }: Pick<GetTulipReturn<TSchema>, "auth">) {
-  const session = await auth.api.getSession({ headers: await headers() });
-  if (!session) redirect("/auth/login");
-
-  return session;
+  return auth.api.getSession({ headers: await headers() });
 }
 
 /**

package/dist/modules/auth/components/allowed.server.d.ts

@@ -1,23 +0,0 @@
-import { Permission } from "../lib/permissions.js";
-import { TDatabaseSchema } from "../../config/db/types.js";
-import { TulipConfig } from "../../config/lib/config.server.js";
-import * as react_jsx_runtime190 from "react/jsx-runtime";
-import { JSX } from "react";
-import "server-cli-only";
-
-//#region src/modules/auth/components/allowed.server.d.ts
-type AllowedProps<TSchema extends TDatabaseSchema> = {
-  config: TulipConfig<TSchema>;
-  permission: Permission;
-  fallback?: JSX.Element | string;
-  children: React.ReactNode;
-};
-declare function Allowed<TSchema extends TDatabaseSchema>({
-  config,
-  permission,
-  fallback,
-  children
-}: AllowedProps<TSchema>): Promise<react_jsx_runtime190.JSX.Element>;
-//#endregion
-export { Allowed };
-//# sourceMappingURL=allowed.server.d.ts.map

package/dist/modules/auth/components/allowed.server.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"allowed.server.d.ts","names":[],"sources":["../../../../src/modules/auth/components/allowed.server.tsx"],"sourcesContent":[],"mappings":";;;;;;;;KASK,6BAA6B;UACxB,YAAY;cACR;EAFT,QAAA,CAAA,EAGQ,GAAA,CAAI,OAHA,GAAA,MAAA;EAAA,QAAA,EAIL,KAAA,CAAM,SAJD;;AACK,iBAMA,OANA,CAAA,gBAMwB,eANxB,CAAA,CAAA;EAAA,MAAA;EAAA,UAAA;EAAA,QAAA;EAAA;AAAA,CAAA,EAWnB,YAXmB,CAWN,OAXM,CAAA,CAAA,EAWE,OAXF,CAWE,oBAAA,CAAA,GAAA,CAAA,OAAA,CAXF"}

package/dist/modules/auth/components/allowed.server.js

@@ -1,24 +0,0 @@
-import { getTulip } from "../../config/lib/resolve.server.js";
-import { getSession } from "../lib/helpers.server.js";
-import { Fragment, jsx } from "react/jsx-runtime";
-import "server-cli-only";
-
-//#region src/modules/auth/components/allowed.server.tsx
-async function Allowed({ config, permission, fallback, children }) {
-	const { auth } = await getTulip({ config });
-	const { user } = await getSession({ auth });
-	const { success, error } = await auth.api.userHasPermission({ body: {
-		userId: user.id,
-		permission
-	} });
-	if (error) {
-		console.error(error);
-		return /* @__PURE__ */ jsx(Fragment, { children: fallback });
-	}
-	if (success) return /* @__PURE__ */ jsx(Fragment, { children });
-	return /* @__PURE__ */ jsx(Fragment, { children: fallback });
-}
-
-//#endregion
-export { Allowed };
-//# sourceMappingURL=allowed.server.js.map

package/dist/modules/auth/components/allowed.server.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"allowed.server.js","names":[],"sources":["../../../../src/modules/auth/components/allowed.server.tsx"],"sourcesContent":["import \"server-cli-only\";\n\nimport { type Permission } from \"@/modules/auth/lib/permissions\";\nimport { type TDatabaseSchema } from \"@/modules/config/db/types\";\nimport { TulipConfig } from \"@/modules/config/lib/config.server\";\nimport { getTulip } from \"@/modules/config/lib/resolve.server\";\nimport { JSX } from \"react\";\nimport { getSession } from \"../lib/helpers.server\";\n\ntype AllowedProps<TSchema extends TDatabaseSchema> = {\n  config: TulipConfig<TSchema>;\n  permission: Permission;\n  fallback?: JSX.Element | string;\n  children: React.ReactNode;\n};\n\nexport async function Allowed<TSchema extends TDatabaseSchema>({\n  config,\n  permission,\n  fallback,\n  children,\n}: AllowedProps<TSchema>) {\n  const { auth } = await getTulip({ config });\n  const { user } = await getSession({ auth });\n\n  const { success, error } = await auth.api.userHasPermission({\n    body: {\n      userId: user.id,\n      permission,\n    },\n  });\n\n  if (error) {\n    console.error(error);\n    return <>{fallback}</>;\n  }\n\n  if (success) return <>{children}</>;\n\n  return <>{fallback}</>;\n}\n"],"mappings":";;;;;;AAgBA,eAAsB,QAAyC,EAC7D,QACA,YACA,UACA,YACwB;CACxB,MAAM,EAAE,SAAS,MAAM,SAAS,EAAE,QAAQ,CAAC;CAC3C,MAAM,EAAE,SAAS,MAAM,WAAW,EAAE,MAAM,CAAC;CAE3C,MAAM,EAAE,SAAS,UAAU,MAAM,KAAK,IAAI,kBAAkB,EAC1D,MAAM;EACJ,QAAQ,KAAK;EACb;EACD,EACF,CAAC;AAEF,KAAI,OAAO;AACT,UAAQ,MAAM,MAAM;AACpB,SAAO,0CAAG,WAAY;;AAGxB,KAAI,QAAS,QAAO,gCAAG,WAAY;AAEnC,QAAO,0CAAG,WAAY"}

package/dist/modules/auth/components/guard.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"guard.js","names":[],"sources":["../../../../src/modules/auth/components/guard.tsx"],"sourcesContent":["\"use client\";\n\nimport { redirect } from \"next/navigation\";\nimport { PropsWithChildren } from \"react\";\nimport { useSession } from \"../hooks/use-session\";\n\nexport function AuthGuard({ children }: PropsWithChildren) {\n  const session = useSession();\n  if (!session.data) redirect(\"/auth/login\");\n\n  return <>{children}</>;\n}\n"],"mappings":";;;;;;;;AAMA,SAAgB,UAAU,EAAE,YAA+B;AAEzD,KAAI,CADY,YAAY,CACf,KAAM,UAAS,cAAc;AAE1C,QAAO,gCAAG,WAAY"}

package/src/modules/auth/components/allowed.server.tsx

@@ -1,41 +0,0 @@
-import "server-cli-only";
-
-import { type Permission } from "@/modules/auth/lib/permissions";
-import { type TDatabaseSchema } from "@/modules/config/db/types";
-import { TulipConfig } from "@/modules/config/lib/config.server";
-import { getTulip } from "@/modules/config/lib/resolve.server";
-import { JSX } from "react";
-import { getSession } from "../lib/helpers.server";
-
-type AllowedProps<TSchema extends TDatabaseSchema> = {
-  config: TulipConfig<TSchema>;
-  permission: Permission;
-  fallback?: JSX.Element | string;
-  children: React.ReactNode;
-};
-
-export async function Allowed<TSchema extends TDatabaseSchema>({
-  config,
-  permission,
-  fallback,
-  children,
-}: AllowedProps<TSchema>) {
-  const { auth } = await getTulip({ config });
-  const { user } = await getSession({ auth });
-
-  const { success, error } = await auth.api.userHasPermission({
-    body: {
-      userId: user.id,
-      permission,
-    },
-  });
-
-  if (error) {
-    console.error(error);
-    return <>{fallback}</>;
-  }
-
-  if (success) return <>{children}</>;
-
-  return <>{fallback}</>;
-}