jazz-tools 0.18.5 → 0.18.7

package/src/better-auth/auth/tests/server.test.ts

@@ -12,100 +12,44 @@ import {
 } from "vitest";
 import { OAuth2Server } from "oauth2-mock-server";
 import { jazzPlugin } from "../server.js";
-import { genericOAuth } from "better-auth/plugins";
-
-describe("Better Auth - Signup and Login Tests", async () => {
-  const providerId = "test";
-  const clientId = "test-client-id";
-  const clientSecret = "test-client-secret";
-  const server = new OAuth2Server();
-  await server.start();
-  const oauthPort = Number(server.issuer.url?.split(":")[2]!);
-
-  let auth: ReturnType<
-    typeof betterAuth<{
-      plugins: ReturnType<typeof jazzPlugin | typeof genericOAuth>[];
-    }>
-  >;
-  let accountCreationSpy: Mock;
-  let verificationCreationSpy: Mock;
-
-  beforeAll(async () => {
-    await server.issuer.keys.generate("RS256");
-
-    server.service.on("beforeUserinfo", (userInfoResponse) => {
-      userInfoResponse.body = {
-        email: "oauth2@test.com",
-        name: "OAuth2 Test",
-        sub: "oauth2",
-        picture: "https://test.com/picture.png",
-        email_verified: true,
-      };
-      userInfoResponse.statusCode = 200;
-    });
-  });
-
-  afterAll(async () => {
-    await server.stop();
-  });
-
-  beforeEach(() => {
-    accountCreationSpy = vi.fn();
-    verificationCreationSpy = vi.fn();
-
-    // Create auth instance with in-memory database
-    auth = betterAuth({
-      database: memoryAdapter({
-        user: [],
-        session: [],
-        verification: [],
-        account: [],
-      }),
-      baseURL: "http://localhost:3000",
-      plugins: [
-        jazzPlugin(),
-        genericOAuth({
-          config: [
-            {
-              providerId,
-              discoveryUrl: `http://localhost:${oauthPort}/.well-known/openid-configuration`,
-              authorizationUrl: `http://localhost:${oauthPort}/authorize`,
-              clientId: clientId,
-              clientSecret: clientSecret,
-              pkce: true,
-            },
-          ],
+import { emailOTP, genericOAuth } from "better-auth/plugins";
+
+describe("Better-Auth server plugin", async () => {
+  describe("Email & Password", () => {
+    let auth: ReturnType<
+      typeof betterAuth<{
+        plugins: ReturnType<typeof jazzPlugin>[];
+      }>
+    >;
+
+    let accountCreationSpy: Mock;
+
+    beforeEach(() => {
+      accountCreationSpy = vi.fn();
+
+      // Create auth instance with in-memory database
+      auth = betterAuth({
+        database: memoryAdapter({
+          user: [],
+          session: [],
+          verification: [],
+          account: [],
         }),
-      ],
-      emailAndPassword: {
-        enabled: true,
-        requireEmailVerification: false, // Disable for testing
-      },
-      socialProviders: {
-        github: {
-          clientId: "123",
-          clientSecret: "123",
-        },
-      },
-      databaseHooks: {
-        user: {
-          create: {
-            after: accountCreationSpy,
-          },
+        plugins: [jazzPlugin()],
+        emailAndPassword: {
+          enabled: true,
+          requireEmailVerification: false, // Disable for testing
         },
-        verification: {
-          create: {
-            after: verificationCreationSpy,
+        databaseHooks: {
+          user: {
+            create: {
+              after: accountCreationSpy,
+            },
           },
         },
-      },
-      session: {
-        expiresIn: 60 * 60 * 24 * 7, // 7 days
-      },
+      });
     });
-  });
 
-  describe("User Registration (Signup)", () => {
     it("should successfully register a new user with email and password", async () => {
       const userData = {
         name: "test",
@@ -203,9 +147,7 @@ describe("Better Auth - Signup and Login Tests", async () => {
         expect.any(Object),
       );
     });
-  });
 
-  describe("User login (Signin)", () => {
     it("should successfully login a new user with email and password", async () => {
       const userData = {
         name: "test",
@@ -250,7 +192,90 @@ describe("Better Auth - Signup and Login Tests", async () => {
     });
   });
 
-  describe("Social Login", () => {
+  describe("OAuth/Social plugin", async () => {
+    const providerId = "test";
+    const clientId = "test-client-id";
+    const clientSecret = "test-client-secret";
+    const server = new OAuth2Server();
+    await server.start();
+    const oauthPort = Number(server.issuer.url?.split(":")[2]!);
+
+    let auth: ReturnType<
+      typeof betterAuth<{
+        plugins: ReturnType<typeof jazzPlugin | typeof genericOAuth>[];
+      }>
+    >;
+    let accountCreationSpy: Mock;
+    let verificationCreationSpy: Mock;
+
+    beforeAll(async () => {
+      await server.issuer.keys.generate("RS256");
+
+      server.service.on("beforeUserinfo", (userInfoResponse) => {
+        userInfoResponse.body = {
+          email: "oauth2@test.com",
+          name: "OAuth2 Test",
+          sub: "oauth2",
+          picture: "https://test.com/picture.png",
+          email_verified: true,
+        };
+        userInfoResponse.statusCode = 200;
+      });
+    });
+
+    afterAll(async () => {
+      await server.stop();
+    });
+
+    beforeEach(() => {
+      accountCreationSpy = vi.fn();
+      verificationCreationSpy = vi.fn();
+
+      // Create auth instance with in-memory database
+      auth = betterAuth({
+        database: memoryAdapter({
+          user: [],
+          session: [],
+          verification: [],
+          account: [],
+        }),
+        baseURL: "http://localhost:3000",
+        plugins: [
+          jazzPlugin(),
+          genericOAuth({
+            config: [
+              {
+                providerId,
+                discoveryUrl: `http://localhost:${oauthPort}/.well-known/openid-configuration`,
+                authorizationUrl: `http://localhost:${oauthPort}/authorize`,
+                clientId: clientId,
+                clientSecret: clientSecret,
+                pkce: true,
+              },
+            ],
+          }),
+        ],
+        socialProviders: {
+          github: {
+            clientId: "123",
+            clientSecret: "123",
+          },
+        },
+        databaseHooks: {
+          user: {
+            create: {
+              after: accountCreationSpy,
+            },
+          },
+          verification: {
+            create: {
+              after: verificationCreationSpy,
+            },
+          },
+        },
+      });
+    });
+
     it("should store jazzAuth in verification table when using social provider", async () => {
       await auth.api.signInSocial({
         body: {
@@ -266,13 +291,11 @@ describe("Better Auth - Signup and Login Tests", async () => {
         },
       });
 
-      expect(verificationCreationSpy).toHaveBeenCalledTimes(1);
-      expect(verificationCreationSpy).toHaveBeenCalledWith(
-        expect.objectContaining({
-          value: expect.stringContaining('"accountID":"123"'),
-        }),
-        expect.any(Object),
-      );
+      expect(verificationCreationSpy).toHaveBeenCalledTimes(2);
+      expect(verificationCreationSpy.mock.calls[1]?.[0]).toMatchObject({
+        identifier: expect.stringMatching("jazz-auth-"),
+        value: expect.stringContaining('"accountID":"123"'),
+      });
     });
 
     it("should create a new account with jazz auth when using social provider", async () => {
@@ -311,4 +334,159 @@ describe("Better Auth - Signup and Login Tests", async () => {
       );
     });
   });
+
+  describe("Email OTP plugin", () => {
+    let auth: ReturnType<
+      typeof betterAuth<{
+        plugins: ReturnType<typeof jazzPlugin | typeof emailOTP>[];
+      }>
+    >;
+
+    let accountCreationSpy: Mock;
+    let verificationCreationSpy: Mock;
+    let sendVerificationOTPSpy: Mock;
+
+    beforeEach(() => {
+      accountCreationSpy = vi.fn();
+      verificationCreationSpy = vi.fn();
+      sendVerificationOTPSpy = vi.fn();
+      // Create auth instance with in-memory database
+      auth = betterAuth({
+        database: memoryAdapter({
+          user: [],
+          session: [],
+          verification: [],
+          account: [],
+        }),
+        plugins: [
+          jazzPlugin(),
+          emailOTP({
+            allowedAttempts: 5,
+            otpLength: 6,
+            expiresIn: 600,
+            sendVerificationOTP: sendVerificationOTPSpy,
+          }),
+        ],
+        emailAndPassword: {
+          enabled: true,
+          requireEmailVerification: false, // Disable for testing
+        },
+        databaseHooks: {
+          user: {
+            create: {
+              after: accountCreationSpy,
+            },
+          },
+          verification: {
+            create: {
+              after: verificationCreationSpy,
+            },
+          },
+        },
+      });
+    });
+
+    it("should create a new account with jazz auth when using email OTP", async () => {
+      let OTP: string = "";
+
+      sendVerificationOTPSpy.mockImplementationOnce(({ otp }) => {
+        OTP = otp;
+      });
+
+      await auth.api.sendVerificationOTP({
+        headers: {
+          "x-jazz-auth": JSON.stringify({
+            accountID: "123",
+            secretSeed: [1, 2, 3],
+            accountSecret: "123",
+          }),
+        },
+        body: {
+          email: "email@email.it",
+          type: "sign-in",
+        },
+      });
+
+      expect(accountCreationSpy).toHaveBeenCalledTimes(0);
+      expect(sendVerificationOTPSpy).toHaveBeenCalledTimes(1);
+      expect(verificationCreationSpy).toHaveBeenCalledTimes(2);
+      expect(verificationCreationSpy.mock.calls[0]?.[0]).toMatchObject(
+        expect.objectContaining({
+          identifier: "jazz-auth-sign-in-otp-email@email.it",
+          value: expect.stringContaining('"accountID":"123"'),
+        }),
+      );
+
+      await auth.api.signInEmailOTP({
+        body: {
+          email: "email@email.it",
+          otp: OTP,
+        },
+      });
+
+      expect(accountCreationSpy).toHaveBeenCalledTimes(1);
+      expect(accountCreationSpy).toHaveBeenCalledWith(
+        expect.objectContaining({ accountID: "123" }),
+        expect.any(Object),
+      );
+    });
+
+    it("should not expect Jazz's credentials using Email OTP for sign-in an already registered user", async () => {
+      // 1. User registration
+      const userData = {
+        name: "test",
+        email: "test@example.com",
+        password: "securePassword123",
+      };
+
+      const jazzAuth = {
+        accountID: "123",
+        secretSeed: [1, 2, 3],
+        accountSecret: "123",
+        provider: "better-auth",
+      };
+
+      await auth.api.signUpEmail({
+        body: userData,
+        headers: {
+          "x-jazz-auth": JSON.stringify(jazzAuth),
+        },
+      });
+
+      expect(accountCreationSpy).toHaveBeenCalledTimes(1);
+
+      // 2. Try to sign-in with OTP
+      let OTP: string = "";
+
+      sendVerificationOTPSpy.mockImplementationOnce(({ otp }) => {
+        OTP = otp;
+      });
+
+      await auth.api.sendVerificationOTP({
+        body: {
+          email: "test@example.com",
+          type: "sign-in",
+        },
+      });
+
+      expect(sendVerificationOTPSpy).toHaveBeenCalledTimes(1);
+      expect(verificationCreationSpy).toHaveBeenCalledTimes(1);
+
+      const result = await auth.api.signInEmailOTP({
+        body: {
+          email: "test@example.com",
+          otp: OTP,
+        },
+      });
+
+      expect(accountCreationSpy).toHaveBeenCalledTimes(1); // still only 1
+      expect(result).toMatchObject({
+        user: {
+          id: expect.any(String),
+          email: "test@example.com",
+          name: "test",
+        },
+      });
+    });
+  });
 });

package/src/inspector/custom-element.tsx

@@ -1,6 +1,6 @@
 import { Account } from "jazz-tools";
 import { createRoot } from "react-dom/client";
-import { JazzInspectorInternal } from "./index.js";
+import { JazzInspectorInternal } from "./viewer/new-app.js";
 
 export class JazzInspectorElement extends HTMLElement {
   private root: ReturnType<typeof createRoot> | null = null;

package/src/inspector/index.tsx

@@ -0,0 +1,44 @@
+import React from "react";
+
+export { JazzInspectorInternal } from "./viewer/new-app.js";
+export { PageStack } from "./viewer/page-stack.js";
+export { Breadcrumbs } from "./viewer/breadcrumbs.js";
+export { AccountOrGroupText } from "./viewer/account-or-group-text.js";
+
+export { Button } from "./ui/button.js";
+export { Input } from "./ui/input.js";
+export { Select } from "./ui/select.js";
+export { Icon } from "./ui/icon.js";
+export { GlobalStyles } from "./ui/global-styles.js";
+
+export {
+  resolveCoValue,
+  useResolvedCoValue,
+} from "./viewer/use-resolve-covalue.js";
+
+export type { PageInfo } from "./viewer/types.js";
+
+import { setup } from "goober";
+import { useJazzContext } from "jazz-tools/react-core";
+import { Account } from "jazz-tools";
+
+import { JazzInspectorInternal } from "./viewer/new-app.js";
+import { Position } from "./viewer/inspector-button.js";
+
+export function JazzInspector({ position = "right" }: { position?: Position }) {
+  const context = useJazzContext<Account>();
+  const localNode = context.node;
+  const me = "me" in context ? context.me : undefined;
+
+  if (process.env.NODE_ENV !== "development") return null;
+
+  return (
+    <JazzInspectorInternal
+      position={position}
+      localNode={localNode}
+      accountId={me?.$jazz.raw.id}
+    />
+  );
+}
+
+setup(React.createElement);

package/src/inspector/ui/button.tsx

@@ -2,7 +2,7 @@ import { styled } from "goober";
 import { forwardRef } from "react";
 
 interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
-  variant?: "primary" | "secondary" | "link" | "plain";
+  variant?: "primary" | "secondary" | "link" | "plain" | "destructive";
   children?: React.ReactNode;
   className?: string;
   disabled?: boolean;
@@ -29,6 +29,9 @@ const StyledButton = styled("button")<{ variant: string; disabled?: boolean }>`
           border-color: var(--j-primary-color);
           color: white;
           font-weight: 500;
+          &:hover {
+            opacity: 0.8;
+          }
         `;
       case "secondary":
         return `
@@ -47,6 +50,17 @@ const StyledButton = styled("button")<{ variant: string; disabled?: boolean }>`
             text-decoration: underline;
           }
         `;
+      case "destructive":
+        return `
+          padding: 0.375rem 0.75rem;
+          background-color: var(--j-destructive-color);
+          border-color: var(--j-destructive-color);
+          color: white;
+          font-weight: 500;
+          &:hover {
+            opacity: 0.8;
+          }
+        `;
       default:
         return "";
     }

package/src/inspector/ui/heading.tsx

@@ -10,6 +10,11 @@ const StyledHeading = styled("h1")<{ className?: string }>`
 export function Heading({
   children,
   className,
-}: React.PropsWithChildren<{ className?: string }>) {
-  return <StyledHeading className={className}>{children}</StyledHeading>;
+  id,
+}: React.PropsWithChildren<{ className?: string; id?: string }>) {
+  return (
+    <StyledHeading className={className} id={id}>
+      {children}
+    </StyledHeading>
+  );
 }

package/src/inspector/ui/input.tsx

@@ -27,7 +27,7 @@ const StyledInput = styled("input")`
   box-shadow: var(--j-shadow-sm);
   font-weight: 500;
   background-color: white;
-  color: var(--text-color-strong);
+  color: var(--j-text-color-strong);
 
   @media (prefers-color-scheme: dark) {
     background-color: var(--j-foreground);
@@ -41,7 +41,11 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(
 
     return (
       <Container className={className}>
-        <label htmlFor={id} className={hideLabel ? "j-sr-only" : ""}>
+        <label
+          htmlFor={id}
+          className={hideLabel ? "j-sr-only" : ""}
+          style={{ color: "var(--j-text-color)" }}
+        >
           {label}
         </label>
         <StyledInput ref={ref} {...inputProps} id={id} />

package/src/inspector/ui/modal.tsx

@@ -0,0 +1,158 @@
+import { styled } from "goober";
+import { forwardRef, useEffect, useRef } from "react";
+import { Button } from "./button.js";
+import { Heading } from "./heading.js";
+
+interface ModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  heading: string;
+  text?: string;
+  children?: React.ReactNode;
+  confirmText?: string;
+  cancelText?: string;
+  onConfirm?: () => void;
+  onCancel?: () => void;
+  showButtons?: boolean;
+  className?: string;
+}
+
+const ModalContent = styled("dialog")`
+  background-color: var(--j-background);
+  border-radius: var(--j-radius-lg);
+  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
+  border: 1px solid var(--j-border-color);
+  max-width: 32rem;
+  margin-block: auto;
+  margin-inline: auto;
+  &::backdrop {
+    background-color: rgba(0, 0, 0, 0.7);
+  }
+  
+`;
+
+const ModalHeader = styled("div")`
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  padding: 1.5rem 1.5rem 0 1.5rem;
+  gap: 1rem;
+`;
+
+const ModalBody = styled("div")`
+  padding: 1rem 1.5rem;
+  flex: 1;
+`;
+
+const ModalFooter = styled("div")`
+  display: flex;
+  justify-content: flex-end;
+  gap: 0.75rem;
+  padding: 0 1.5rem 1.5rem 1.5rem;
+`;
+
+const CloseButton = styled("button")`
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 0.25rem;
+  border-radius: var(--j-radius-sm);
+  color: var(--j-text-color);
+  font-size: 1.25rem;
+  line-height: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 2rem;
+  min-height: 2rem;
+  
+  &:hover {
+    background-color: var(--j-foreground);
+  }
+  
+  &:focus-visible {
+    outline: 2px solid var(--j-border-focus);
+    outline-offset: 2px;
+  }
+`;
+
+export const Modal = forwardRef<HTMLDialogElement, ModalProps>(
+  (
+    {
+      isOpen,
+      onClose,
+      heading,
+      text,
+      children,
+      confirmText = "Confirm",
+      cancelText = "Cancel",
+      onConfirm,
+      onCancel,
+      showButtons = true,
+      className,
+    },
+    ref,
+  ) => {
+    const modalRef = useRef<HTMLDialogElement>(null);
+
+    useEffect(() => {
+      if (isOpen) {
+        modalRef.current?.showModal();
+      } else {
+        onClose();
+        modalRef.current?.close();
+      }
+    }, [isOpen, onClose]);
+
+    const handleConfirm = () => {
+      onConfirm?.();
+      onClose();
+    };
+
+    const handleCancel = () => {
+      onCancel?.();
+      onClose();
+    };
+
+    if (!isOpen) return null;
+
+    return (
+      <ModalContent
+        ref={ref || modalRef}
+        className={className}
+        role="dialog"
+        aria-labelledby="modal-heading"
+        onClose={onClose}
+      >
+        <ModalHeader>
+          <Heading id="modal-heading">{heading}</Heading>
+          <CloseButton onClick={onClose} aria-label="Close modal" type="button">
+            ×
+          </CloseButton>
+        </ModalHeader>
+
+        <ModalBody>
+          {text && (
+            <p style={{ margin: "0 0 1rem 0", color: "var(--j-text-color)" }}>
+              {text}
+            </p>
+          )}
+          {children}
+        </ModalBody>
+
+        {showButtons && (
+          <ModalFooter>
+            <Button variant="secondary" onClick={handleCancel}>
+              {cancelText}
+            </Button>
+            <Button variant="primary" onClick={handleConfirm}>
+              {confirmText}
+            </Button>
+          </ModalFooter>
+        )}
+      </ModalContent>
+    );
+  },
+);
+
+Modal.displayName = "Modal";