@tulip-systems/core 0.4.0 → 0.4.1

package/src/modules/auth/components/create-first-user-page.client.tsx

@@ -0,0 +1,167 @@
+"use client";
+
+import { Icons } from "@/components/common/icons";
+import { Button } from "@/components/ui/button";
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/components/ui/form.client";
+import { Input } from "@/components/ui/input";
+import { useMutation } from "@tanstack/react-query";
+import { parseAsString, useQueryState } from "nuqs";
+import { toast } from "sonner";
+import * as z from "zod";
+import { createUserSchema } from "../lib/validators";
+
+import { standardSchemaResolver } from "@hookform/resolvers/standard-schema";
+import { Eye, EyeOff } from "lucide-react";
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+import { useForm } from "react-hook-form";
+import { authClient } from "../handler/client.client";
+
+export function CreateFirstUserPage() {
+  const router = useRouter();
+  const [callbackURL] = useQueryState("callbackURL", parseAsString);
+  const [showPassword, setShowPassword] = useState(false);
+
+  const createFirstUserMutation = useMutation({
+    mutationFn: async (data: z.infer<typeof createUserSchema>) => {
+      const result = await authClient.signUp.email({
+        email: data.email,
+        password: data.password,
+        name: `${data.firstName} ${data.lastName}`,
+        firstName: data.firstName,
+        lastName: data.lastName,
+        callbackURL: callbackURL ?? "/admin",
+      });
+
+      if (result.error) throw result.error;
+
+      return result.data;
+    },
+    onError: (err: Error) => {
+      console.error("Create First User error: ", err);
+      toast.error("Er is iets misgegaan");
+    },
+    onSuccess: () => {
+      router.replace(callbackURL ?? "/admin");
+      toast.success("Account succesvol aangemaakt!");
+    },
+  });
+
+  const disabled = createFirstUserMutation.isPending;
+
+  const form = useForm<z.infer<typeof createUserSchema>>({
+    resolver: standardSchemaResolver(createUserSchema),
+    defaultValues: { email: "", firstName: "", lastName: "", password: "" },
+    disabled,
+  });
+
+  return (
+    <div className="mx-auto flex w-full flex-col justify-center space-y-6 sm:w-[350px]">
+      <div className="flex flex-col space-y-2 text-center">
+        <h1 className="text-3xl font-semibold tracking-tight">Welkom eerste gebruiker</h1>
+        <p className="text-muted-foreground text-sm">Maak eerst een account aan om in te loggen</p>
+      </div>
+
+      <Form {...form}>
+        <form
+          className="space-y-6"
+          onSubmit={form.handleSubmit((data) => createFirstUserMutation.mutate(data))}
+        >
+          <div className="flex flex-col gap-3">
+            <FormField
+              control={form.control}
+              name="firstName"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Voornaam</FormLabel>
+                  <FormControl>
+                    <Input placeholder="Voornaam" {...field} />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            <FormField
+              control={form.control}
+              name="lastName"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Achternaam</FormLabel>
+                  <FormControl>
+                    <Input placeholder="Achternaam" {...field} />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            <FormField
+              control={form.control}
+              name="email"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Email</FormLabel>
+                  <FormControl>
+                    <Input placeholder="email@example.be" {...field} />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            <FormField
+              control={form.control}
+              name="password"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Wachtwoord</FormLabel>
+                  <FormControl>
+                    <div className="relative">
+                      <Input
+                        type={showPassword ? "text" : "password"}
+                        placeholder="********"
+                        {...field}
+                      />
+                      <Button
+                        type="button"
+                        variant="ghost"
+                        size="sm"
+                        className="absolute right-0 top-0 h-full px-3 py-2 hover:bg-transparent"
+                        onClick={() => setShowPassword(!showPassword)}
+                        disabled={disabled}
+                      >
+                        {showPassword ? (
+                          <EyeOff className="text-muted-foreground h-4 w-4" />
+                        ) : (
+                          <Eye className="text-muted-foreground h-4 w-4" />
+                        )}
+                      </Button>
+                    </div>
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+          </div>
+
+          <div className="space-y-3">
+            <Button disabled={disabled} className="w-full">
+              {createFirstUserMutation.isPending && (
+                <Icons.spinner className="mr-2 h-4 w-4 animate-spin" />
+              )}
+              Account aanmaken
+            </Button>
+          </div>
+        </form>
+      </Form>
+    </div>
+  );
+}

package/src/modules/auth/components/guard-first-user.server.tsx

@@ -0,0 +1,28 @@
+import { TDatabaseSchema, TulipContext } from "@/modules/config/entry";
+
+import { redirect } from "next/navigation";
+import { PropsWithChildren } from "react";
+import { users } from "../db/schema";
+
+type AuthGuardFirstUserProps<TSchema extends TDatabaseSchema> = PropsWithChildren<
+  Pick<TulipContext<TSchema>, "db"> & { login?: boolean }
+>;
+
+export async function AuthGuardFirstUser<TSchema extends TDatabaseSchema>({
+  children,
+  db,
+  login = false,
+}: AuthGuardFirstUserProps<TSchema>) {
+  const allUsers = await db.select().from(users).limit(1);
+  const usersExist = allUsers.length > 0;
+
+  if (login) {
+    if (!usersExist) redirect("/auth/create-first-user");
+  } else {
+    if (usersExist) redirect("/auth/login");
+  }
+
+  
+
+  return <>{children}</>;
+}

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

@@ -0,0 +1,22 @@
+import { TDatabaseSchema, TulipContext } from "@/modules/config/entry";
+import { getQueryClient } from "@/modules/router/lib/query-client";
+import { HydrateClient } from "@/modules/router/lib/query-client.server";
+import { redirect } from "next/navigation";
+import { PropsWithChildren } from "react";
+import { getSession } from "../lib/helpers.server";
+
+export async function AuthGuard<TSchema extends TDatabaseSchema>({
+  children,
+  auth,
+}: PropsWithChildren<Pick<TulipContext<TSchema>, "auth">>) {
+  const session = await getSession({ auth });
+  if (!session) redirect("/auth/login");
+
+  const queryClient = getQueryClient();
+  queryClient.prefetchQuery({
+    queryKey: ["session"],
+    queryFn: async () => session,
+  });
+
+  return <HydrateClient>{children}</HydrateClient>;
+}

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

@@ -5,38 +5,39 @@ 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 { useMutation } from "@tanstack/react-query";
+import { Eye, EyeOff, FingerprintIcon } from "lucide-react";
 import Link from "next/link";
 import { useRouter } from "next/navigation";
 import { parseAsString, useQueryState } from "nuqs";
+import { useState } from "react";
 import { useForm } from "react-hook-form";
 import { toast } from "sonner";
 import * as z from "zod";
 import { authClient } from "../handler/client.client";
 import { loginSchema } from "../lib/validators";
 
-export function LoginPage() {
-  const queryClient = useQueryClient();
-  const [callbackURL] = useQueryState("callbackURL", parseAsString);
+type LoginPageProps = {
+  options?: {
+    enablePasskey?: boolean;
+  };
+};
 
+export function LoginPage(props: LoginPageProps) {
   const router = useRouter();
+  const [callbackURL] = useQueryState("callbackURL", parseAsString);
+  const [showPassword, setShowPassword] = useState(false);
 
-  const { mutate, isPending } = useMutation({
+  const loginWithEmailMutation = useMutation({
     mutationFn: async (data: z.infer<typeof loginSchema>) => {
-      const result = await authClient.signIn.email(data);
+      const result = await authClient.signIn.email({
+        ...data,
+        callbackURL: callbackURL ?? "/admin",
+      });
       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);
 
@@ -61,10 +62,29 @@ export function LoginPage() {
     },
   });
 
+  const loginWithPasskeyMutation = useMutation({
+    mutationFn: async () => {
+      const result = await authClient.signIn.passkey();
+      if (result.error) throw result.error;
+
+      return result.data;
+    },
+    onSuccess: () => {
+      router.replace(callbackURL ?? "/admin");
+      toast.success("Succesvol ingelogd");
+    },
+    onError: (err) => {
+      console.error("Login error: ", err);
+      toast.error("Er is iets misgegaan");
+    },
+  });
+
+  const disabled = loginWithEmailMutation.isPending || loginWithPasskeyMutation.isPending;
+
   const form = useForm<z.infer<typeof loginSchema>>({
     resolver: standardSchemaResolver(loginSchema),
     defaultValues: { email: "", password: "" },
-    disabled: isPending,
+    disabled,
   });
 
   return (
@@ -77,7 +97,10 @@ export function LoginPage() {
       </div>
 
       <Form {...form}>
-        <form className="space-y-6" onSubmit={form.handleSubmit((data) => mutate(data))}>
+        <form
+          className="space-y-6"
+          onSubmit={form.handleSubmit((data) => loginWithEmailMutation.mutate(data))}
+        >
           <div className="flex flex-col gap-3">
             <FormField
               control={form.control}
@@ -98,7 +121,27 @@ export function LoginPage() {
               render={({ field }) => (
                 <FormItem>
                   <FormControl>
-                    <Input type="password" placeholder="********" {...field} />
+                    <div className="relative">
+                      <Input
+                        type={showPassword ? "text" : "password"}
+                        placeholder="********"
+                        {...field}
+                      />
+                      <Button
+                        type="button"
+                        variant="ghost"
+                        size="sm"
+                        className="absolute right-0 top-0 h-full px-3 py-2 hover:bg-transparent"
+                        onClick={() => setShowPassword(!showPassword)}
+                        disabled={disabled}
+                      >
+                        {showPassword ? (
+                          <EyeOff className="text-muted-foreground h-4 w-4" />
+                        ) : (
+                          <Eye className="text-muted-foreground h-4 w-4" />
+                        )}
+                      </Button>
+                    </div>
                   </FormControl>
                   <FormMessage />
                 </FormItem>
@@ -106,10 +149,31 @@ export function LoginPage() {
             />
           </div>
 
-          <Button disabled={form.formState.disabled} className="w-full">
-            {isPending && <Icons.spinner className="mr-2 h-4 w-4 animate-spin" />}
-            Inloggen
-          </Button>
+          <div className="space-y-3">
+            <Button disabled={disabled} className="w-full">
+              {loginWithEmailMutation.isPending && (
+                <Icons.spinner className="mr-2 h-4 w-4 animate-spin" />
+              )}
+              Inloggen
+            </Button>
+
+            {props.options?.enablePasskey && (
+              <Button
+                className="w-full"
+                type="button"
+                variant="outline"
+                disabled={disabled}
+                onClick={() => loginWithPasskeyMutation.mutate()}
+              >
+                {loginWithPasskeyMutation.isPending ? (
+                  <Icons.spinner className="mr-2 h-4 w-4 animate-spin" />
+                ) : (
+                  <FingerprintIcon className="mr-2 h-4 w-4" />
+                )}
+                Inloggen met passkey
+              </Button>
+            )}
+          </div>
         </form>
       </Form>
 

package/src/modules/auth/components/reset-password-page.client.tsx

@@ -12,8 +12,9 @@ import {
 } from "@/components/ui/form.client";
 import { Input } from "@/components/ui/input";
 import { standardSchemaResolver } from "@hookform/resolvers/standard-schema";
+import { Eye, EyeOff } from "lucide-react";
 import { useRouter } from "next/navigation";
-import React, { use } from "react";
+import React, { use, useState } from "react";
 import { useForm } from "react-hook-form";
 import { toast } from "sonner";
 import * as z from "zod";
@@ -26,6 +27,8 @@ export function ResetPasswordPage(params: {
   const { email, otp } = use(params.searchParams);
 
   const router = useRouter();
+  const [showPassword, setShowPassword] = useState(false);
+  const [showPasswordConfirm, setShowPasswordConfirm] = useState(false);
 
   const [isPending, startTransition] = React.useTransition();
 
@@ -38,7 +41,7 @@ export function ResetPasswordPage(params: {
     <div className="mx-auto flex w-full flex-col justify-center space-y-6 sm:w-[350px]">
       <div className="flex flex-col space-y-2 text-center">
         <h1 className="text-3xl font-semibold tracking-tight">Wachtwoord herstellen</h1>
-        <p className="text-muted-foreground text-sm">K</p>
+        <p className="text-muted-foreground text-sm">Vul je nieuwe wachtwoord in</p>
       </div>
 
       <Form {...form}>
@@ -74,7 +77,27 @@ export function ResetPasswordPage(params: {
                 <FormItem>
                   <FormLabel>Wachtwoord</FormLabel>
                   <FormControl>
-                    <Input type="password" placeholder="********" {...field} />
+                    <div className="relative">
+                      <Input
+                        type={showPassword ? "text" : "password"}
+                        placeholder="********"
+                        {...field}
+                      />
+                      <Button
+                        type="button"
+                        variant="ghost"
+                        size="sm"
+                        className="absolute right-0 top-0 h-full px-3 py-2 hover:bg-transparent"
+                        onClick={() => setShowPassword(!showPassword)}
+                        disabled={form.formState.disabled}
+                      >
+                        {showPassword ? (
+                          <EyeOff className="text-muted-foreground h-4 w-4" />
+                        ) : (
+                          <Eye className="text-muted-foreground h-4 w-4" />
+                        )}
+                      </Button>
+                    </div>
                   </FormControl>
                   <FormMessage />
                 </FormItem>
@@ -88,7 +111,27 @@ export function ResetPasswordPage(params: {
                 <FormItem>
                   <FormLabel>Herhaal Wachtwoord</FormLabel>
                   <FormControl>
-                    <Input type="password" placeholder="********" {...field} />
+                    <div className="relative">
+                      <Input
+                        type={showPasswordConfirm ? "text" : "password"}
+                        placeholder="********"
+                        {...field}
+                      />
+                      <Button
+                        type="button"
+                        variant="ghost"
+                        size="sm"
+                        className="absolute right-0 top-0 h-full px-3 py-2 hover:bg-transparent"
+                        onClick={() => setShowPasswordConfirm(!showPasswordConfirm)}
+                        disabled={form.formState.disabled}
+                      >
+                        {showPasswordConfirm ? (
+                          <EyeOff className="text-muted-foreground h-4 w-4" />
+                        ) : (
+                          <Eye className="text-muted-foreground h-4 w-4" />
+                        )}
+                      </Button>
+                    </div>
                   </FormControl>
                   <FormMessage />
                 </FormItem>

package/src/modules/auth/components/update-password-command.tsx

@@ -20,21 +20,34 @@ import {
   CommandFormDialogTrigger,
 } from "@/modules/commands/components/form-dialog-command.client";
 import { standardSchemaResolver } from "@hookform/resolvers/standard-schema";
+import { DefaultError, MutationOptions } from "@tanstack/react-query";
 import React from "react";
 import { useForm } from "react-hook-form";
 import { updatePasswordSchema, UpdatePasswordSchema } from "../lib/validators";
 
-export type UpdatePasswordCommandProps = {
-  action: (data: UpdatePasswordSchema) => Promise<unknown>;
+export type UpdatePasswordCommandProps<
+  TData = unknown,
+  TError = DefaultError,
+  TVariables = undefined,
+  TOnMutateResult = unknown,
+> = {
+  variables: (values: UpdatePasswordSchema) => TVariables;
+  mutation: MutationOptions<TData, TError, TVariables, TOnMutateResult>;
   defaultValues?: Partial<UpdatePasswordSchema>;
   children?: React.ReactNode;
 };
 
-export function UpdatePasswordCommand({
-  action,
+export function UpdatePasswordCommand<
+  TData = unknown,
+  TError = DefaultError,
+  TVariables = undefined,
+  TOnMutateResult = unknown,
+>({
+  variables,
+  mutation,
   defaultValues,
   children,
-}: UpdatePasswordCommandProps) {
+}: UpdatePasswordCommandProps<TData, TError, TVariables, TOnMutateResult>) {
   const form = useForm<UpdatePasswordSchema>({
     resolver: standardSchemaResolver(updatePasswordSchema),
     defaultValues,
@@ -45,7 +58,7 @@ export function UpdatePasswordCommand({
       {children}
 
       <Form {...form}>
-        <CommandFormDialogContent action={action} message="Succesvol aangepast">
+        <CommandFormDialogContent variables={variables} mutation={mutation}>
           <CommandFormDialogHeader>
             <CommandFormDialogTitle>Wachtwoord wijzigen</CommandFormDialogTitle>
           </CommandFormDialogHeader>

package/src/modules/auth/db/schema.ts

@@ -1,6 +1,9 @@
-import { sql, SQL } from "drizzle-orm";
+import { relations, sql, SQL } from "drizzle-orm";
 import { pgTable } from "drizzle-orm/pg-core";
 
+/**
+ * Users
+ */
 export const users = pgTable("users", (t) => ({
   id: t.text().primaryKey(),
   name: t
@@ -20,6 +23,16 @@ export const users = pgTable("users", (t) => ({
   banExpires: t.timestamp(),
 }));
 
+export const usersRelations = relations(users, ({ many }) => ({
+  sessions: many(sessions),
+  accounts: many(accounts),
+  verifications: many(verifications),
+  passkeys: many(passkeys),
+}));
+
+/**
+ * Sessions
+ */
 export const sessions = pgTable("sessions", (t) => ({
   id: t.text().primaryKey(),
   expiresAt: t.timestamp().notNull(),
@@ -35,6 +48,16 @@ export const sessions = pgTable("sessions", (t) => ({
   impersonatedBy: t.text(),
 }));
 
+export const sessionsRelations = relations(sessions, ({ one }) => ({
+  user: one(users, {
+    fields: [sessions.userId],
+    references: [users.id],
+  }),
+}));
+
+/**
+ * Accounts
+ */
 export const accounts = pgTable("accounts", (t) => ({
   id: t.text().primaryKey(),
   accountId: t.text().notNull(),
@@ -54,6 +77,16 @@ export const accounts = pgTable("accounts", (t) => ({
   updatedAt: t.timestamp().notNull(),
 }));
 
+export const accountsRelations = relations(accounts, ({ one }) => ({
+  user: one(users, {
+    fields: [accounts.userId],
+    references: [users.id],
+  }),
+}));
+
+/**
+ * Verifications
+ */
 export const verifications = pgTable("verifications", (t) => ({
   id: t.text().primaryKey(),
   identifier: t.text().notNull(),
@@ -63,6 +96,40 @@ export const verifications = pgTable("verifications", (t) => ({
   updatedAt: t.timestamp(),
 }));
 
+export const verificationsRelations = relations(verifications, ({ one }) => ({
+  user: one(users, {
+    fields: [verifications.identifier],
+    references: [users.id],
+  }),
+}));
+
+/**
+ * Passkeys
+ */
+export const passkeys = pgTable("passkeys", (t) => ({
+  id: t.text().primaryKey(),
+  name: t.text(),
+  publicKey: t.text().notNull(),
+  credentialID: t.text().notNull(),
+  counter: t.integer().notNull(),
+  deviceType: t.text().notNull(),
+  backedUp: t.boolean().notNull(),
+  transports: t.text(),
+  createdAt: t.timestamp("created_at"),
+  aaguid: t.text(),
+  userId: t
+    .text()
+    .notNull()
+    .references(() => users.id, { onDelete: "cascade" }),
+}));
+
+export const passkeysRelations = relations(passkeys, ({ one }) => ({
+  user: one(users, {
+    fields: [passkeys.userId],
+    references: [users.id],
+  }),
+}));
+
 /**
  * Auth schema
  */

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

@@ -1,4 +1,5 @@
 export * from "./components/allowed.client";
+export * from "./components/create-first-user-page.client";
 export * from "./components/forget-password-page.client";
 export * from "./components/login-page.client";
 export * from "./components/reset-password-page.client";

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

@@ -1,4 +1,18 @@
+/**
+ * Components
+ */
 export * from "./components/auth-layout.server";
+export * from "./components/guard-first-user.server";
+export * from "./components/guard.server";
+
+/**
+ * Handlers
+ */
+export * from "./handler/init";
 export * from "./handler/proxy.server";
 export * from "./handler/route.server";
+
+/**
+ * Lib
+ **/
 export * from "./lib/helpers.server";

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

@@ -1,22 +1,12 @@
 "use client";
 
-import { type ClientOptions } from "better-auth";
+import { passkeyClient } from "@better-auth/passkey/client";
 import { adminClient, emailOTPClient, inferAdditionalFields } from "better-auth/client/plugins";
 import { createAuthClient } from "better-auth/react";
-import { type ServerAuth } from "./server.server";
-
-type AuthClientOptions = Omit<ClientOptions, "plugins"> & {
-  plugins: [
-    ReturnType<typeof emailOTPClient>,
-    ReturnType<typeof adminClient>,
-    ReturnType<typeof inferAdditionalFields<ServerAuth>>,
-  ];
-};
-
-type AuthClient = ReturnType<typeof createAuthClient<AuthClientOptions>>;
+import { AuthClient } from "./init";
 
 export const authClient = createAuthClient({
-  plugins: [emailOTPClient(), adminClient(), inferAdditionalFields<ServerAuth>()],
+  plugins: [emailOTPClient(), passkeyClient(), adminClient(), inferAdditionalFields<AuthClient>()],
 });
 
 export type ClientAuth = typeof authClient;