@hexclave/next 1.0.123 → 1.0.126

package/dist/{url-targets-CWO0mjTr.d.ts.map → url-targets-DbhzuQtY.d.ts.map}

@@ -1 +1 @@
-{"version":3,"file":"url-targets-CWO0mjTr.d.ts","names":[],"sources":["../src/lib/hexclave-app/url-targets.ts"],"mappings":";;;cA2Ga,mBAAA,GAAuB,OAAA;EAAW,SAAA;EAAmB,QAAA;AAAA;AAAA,cA0BrD,uBAAA,GAA2B,OAAA;EACtC,SAAA;EACA,WAAA;EACA,aAAA;AAAA;AAAA,cA+DW,kBAAA,GAAsB,OAAA;EAAW,IAAA,EAAM,iBAAA;EAA+B,SAAA;AAAA,MAAsB,mBAmJxG;AAAA,cAEY,sBAAA,GAA0B,OAAA;EACrC,iBAAA,UAvNA;EAyNA,MAAA;EACA,SAAA;AAAA;AAAA,cAOW,oCAAA,GAAwC,OAAA;EACnD,aAAA,EAAe,uBAAuB;EACtC,SAAA;EACA,WAAA;AAAA;AAAA,iBAiBc,aAAA,CAAc,QAAA,UAAkB,cAAA;EAA4B,KAAA;EAAe,UAAA;EAAoB,aAAA;EAA8B,aAAA;AAAA;AAAA,cAuBhI,4BAAA,GAAgC,OAAA;EAAW,GAAA;EAAa,SAAA;AAAA"}
+{"version":3,"file":"url-targets-DbhzuQtY.d.ts","names":[],"sources":["../src/lib/hexclave-app/url-targets.ts"],"mappings":";;;cA2Ga,mBAAA,GAAuB,OAAA;EAAW,SAAA;EAAmB,QAAA;AAAA;AAAA,cA0BrD,uBAAA,GAA2B,OAAA;EACtC,SAAA;EACA,WAAA;EACA,aAAA;AAAA;AAAA,cA+DW,kBAAA,GAAsB,OAAA;EAAW,IAAA,EAAM,iBAAA;EAA+B,SAAA;AAAA,MAAsB,mBAmJxG;AAAA,cAEY,sBAAA,GAA0B,OAAA;EACrC,iBAAA,UAvNA;EAyNA,MAAA;EACA,SAAA;AAAA;AAAA,cAOW,oCAAA,GAAwC,OAAA;EACnD,aAAA,EAAe,uBAAuB;EACtC,SAAA;EACA,WAAA;AAAA;AAAA,iBAiBc,aAAA,CAAc,QAAA,UAAkB,cAAA;EAA4B,KAAA;EAAe,UAAA;EAAoB,aAAA;EAA8B,aAAA;AAAA;AAAA,cAuBhI,4BAAA,GAAgC,OAAA;EAAW,GAAA;EAAa,SAAA;AAAA"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "//": "THIS FILE IS AUTO-GENERATED FROM TEMPLATE. DO NOT EDIT IT DIRECTLY UNLESS YOU ALSO EDIT THE CORRESPONDING FILE IN packages/template (FOR package.json FILES, PLEASE EDIT package-template.json)",
   "name": "@hexclave/next",
-  "version": "1.0.123",
+  "version": "1.0.126",
   "repository": "https://github.com/hexclave/hexclave",
   "sideEffects": false,
   "main": "./dist/index.js",
@@ -74,9 +74,9 @@
     "tailwindcss-animate": "^1.0.7",
     "rrweb": "^1.1.3",
     "yup": "^1.7.1",
-    "@hexclave/sc": "1.0.123",
-    "@hexclave/ui": "1.0.123",
-    "@hexclave/shared": "1.0.123"
+    "@hexclave/sc": "1.0.126",
+    "@hexclave/shared": "1.0.126",
+    "@hexclave/ui": "1.0.126"
   },
   "peerDependencies": {
     "@types/react": ">=18.0.0",

package/src/components/message-cards/predefined-message-card.tsx

@@ -31,9 +31,11 @@ export function PredefinedMessageCard({
     case 'signedIn': {
       title = t("You are already signed in");
       primaryAction = () => hexclaveApp.redirectToHome();
-      secondaryAction = () => hexclaveApp.redirectToSignOut();
+      if (!hexclaveApp.isExternalAuthApp()) {
+        secondaryAction = () => hexclaveApp.redirectToSignOut();
+        secondaryButton = t("Sign out");
+      }
       primaryButton = t("Go home");
-      secondaryButton = t("Sign out");
       break;
     }
     case 'signedOut': {

package/src/components/user-button.test.tsx

@@ -0,0 +1,87 @@
+
+//===========================================
+// THIS FILE IS AUTO-GENERATED FROM TEMPLATE. DO NOT EDIT IT DIRECTLY UNLESS YOU ALSO EDIT THE CORRESPONDING FILE IN packages/template
+//===========================================
+// @vitest-environment jsdom
+
+import React, { act } from "react";
+import { createRoot, type Root } from "react-dom/client";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { UserButton } from "./user-button";
+
+type MockState = {
+  app: { isExternalAuthApp: () => boolean, redirectToAccountSettings: () => Promise<void> } | null,
+  user: { displayName: string, primaryEmail: string, signOut: () => Promise<void> } | null,
+};
+
+const previousActEnvironment = Reflect.get(globalThis, "IS_REACT_ACT_ENVIRONMENT");
+
+const state = vi.hoisted<MockState>(() => ({
+  app: null,
+  user: null,
+}));
+
+vi.mock("..", () => ({
+  useStackApp: () => state.app,
+  useUser: () => state.user,
+}));
+
+vi.mock("../lib/translations", () => ({
+  useTranslation: () => ({ t: (value: string) => value }),
+}));
+
+vi.mock("./elements/user-avatar", () => ({
+  UserAvatar: () => <div data-testid="user-avatar" />,
+}));
+
+vi.mock("@hexclave/ui", () => ({
+  DropdownMenu: (props: { children: React.ReactNode }) => <div>{props.children}</div>,
+  DropdownMenuContent: (props: { children: React.ReactNode }) => <div>{props.children}</div>,
+  DropdownMenuItem: (props: { children: React.ReactNode, onClick: () => void }) => <button onClick={props.onClick}>{props.children}</button>,
+  DropdownMenuLabel: (props: { children: React.ReactNode }) => <div>{props.children}</div>,
+  DropdownMenuSeparator: () => <hr />,
+  DropdownMenuTrigger: (props: { children: React.ReactNode }) => <div>{props.children}</div>,
+  Skeleton: () => <div />,
+  Typography: (props: { children: React.ReactNode }) => <div>{props.children}</div>,
+}));
+
+describe("UserButton", () => {
+  let root: Root | null = null;
+  let container: HTMLDivElement | null = null;
+
+  beforeEach(() => {
+    Reflect.set(globalThis, "IS_REACT_ACT_ENVIRONMENT", true);
+  });
+
+  afterEach(() => {
+    act(() => root?.unmount());
+    container?.remove();
+    root = null;
+    container = null;
+    state.app = null;
+    state.user = null;
+    Reflect.set(globalThis, "IS_REACT_ACT_ENVIRONMENT", previousActEnvironment);
+  });
+
+  it("hides external-auth sign out while keeping account settings", async () => {
+    state.app = {
+      isExternalAuthApp: () => true,
+      redirectToAccountSettings: vi.fn(async () => {}),
+    };
+    state.user = {
+      displayName: "External user",
+      primaryEmail: "user@example.com",
+      signOut: vi.fn(async () => {}),
+    };
+    container = document.createElement("div");
+    document.body.append(container);
+    root = createRoot(container);
+
+    await act(async () => {
+      root?.render(<UserButton />);
+    });
+
+    expect(container.textContent).toContain("Account settings");
+    expect(container.textContent).not.toContain("Sign out");
+  });
+});

package/src/components/user-button.tsx

@@ -77,7 +77,7 @@ function UserButtonInnerInner(props: UserButtonProps & { user: CurrentUser | nul
       <DropdownMenuTrigger className="outline-none stack-scope rounded-lg hover:bg-muted/50 transition-colors hover:transition-none p-1.5">
         <div className="flex gap-2 items-center">
           <UserAvatar user={user} />
-          {user && props.showUserInfo &&
+          {user != null && props.showUserInfo &&
             <div className="flex flex-col justify-center text-left min-w-0">
               <div className="max-w-40 truncate text-sm font-medium">{user.displayName}</div>
               <div className="max-w-40 truncate text-xs text-muted-foreground">{user.primaryEmail}</div>
@@ -90,14 +90,14 @@ function UserButtonInnerInner(props: UserButtonProps & { user: CurrentUser | nul
           <div className="flex gap-2 items-center">
             <UserAvatar user={user} />
             <div>
-              {user && <Typography className="max-w-40 truncate">{user.displayName}</Typography>}
-              {user && <Typography className="max-w-40 truncate" variant="secondary" type='label'>{user.primaryEmail}</Typography>}
-              {!user && <Typography>{t('Not signed in')}</Typography>}
+              {user != null && <Typography className="max-w-40 truncate">{user.displayName}</Typography>}
+              {user != null && <Typography className="max-w-40 truncate" variant="secondary" type='label'>{user.primaryEmail}</Typography>}
+              {user == null && <Typography>{t('Not signed in')}</Typography>}
             </div>
           </div>
         </DropdownMenuLabel>
         <DropdownMenuSeparator />
-        {user && <Item
+        {user != null && <Item
           text={t('Account settings')}
           onClick={async () => {
             if (props.mockUser) {
@@ -108,7 +108,7 @@ function UserButtonInnerInner(props: UserButtonProps & { user: CurrentUser | nul
           }}
           icon={<CircleUser {...iconProps} />}
         />}
-        {!user && <Item
+        {user == null && <Item
           text={t('Sign in')}
           onClick={async () => {
             if (props.mockUser) {
@@ -119,7 +119,7 @@ function UserButtonInnerInner(props: UserButtonProps & { user: CurrentUser | nul
           }}
           icon={<LogIn {...iconProps} />}
         />}
-        {!user && <Item
+        {user == null && <Item
           text={t('Sign up')}
           onClick={async () => {
             if (props.mockUser) {
@@ -130,7 +130,7 @@ function UserButtonInnerInner(props: UserButtonProps & { user: CurrentUser | nul
           }}
           icon={<UserPlus {...iconProps}/> }
         />}
-        {user && props.extraItems && props.extraItems.map((item, index) => (
+        {user != null && props.extraItems && props.extraItems.map((item, index) => (
           <Item key={index} {...item} />
         ))}
         {props.colorModeToggle && (
@@ -140,7 +140,7 @@ function UserButtonInnerInner(props: UserButtonProps & { user: CurrentUser | nul
             icon={<SunMoon {...iconProps} />}
           />
         )}
-        {user && <Item
+        {user != null && !app.isExternalAuthApp() && <Item
           text={t('Sign out')}
           onClick={async () => {
             if (props.mockUser) {

package/src/components-page/account-settings/settings/sign-out-section.tsx

@@ -3,13 +3,21 @@
 // THIS FILE IS AUTO-GENERATED FROM TEMPLATE. DO NOT EDIT IT DIRECTLY UNLESS YOU ALSO EDIT THE CORRESPONDING FILE IN packages/template
 //===========================================
 import { Button } from "@hexclave/ui";
+import { useStackApp } from "../../..";
 import { useUser } from "../../../lib/hooks";
 import { useTranslation } from "../../../lib/translations";
 import { Section } from "../section";
 
 export function SignOutSection(props?: { mockMode?: boolean }) {
   const { t } = useTranslation();
-  const user = useUser({ or: props?.mockMode ? "return-null" : "throw" });
+  const app = useStackApp();
+  // External-auth apps render nothing here, and the provider can clear its session (so Hexclave has no user)
+  // before this re-renders, so don't throw for them.
+  const user = useUser({ or: props?.mockMode || app.isExternalAuthApp() ? "return-null" : "throw" });
+
+  if (app.isExternalAuthApp()) {
+    return null;
+  }
 
   const handleSignOut = async () => {
     if (props?.mockMode) {

package/src/components-page/onboarding.test.tsx

@@ -45,6 +45,7 @@ function createAppTestDouble() {
   const app = {
     redirectToSignIn: vi.fn(async () => {}),
     redirectToAfterSignIn: vi.fn(async () => {}),
+    isExternalAuthApp: vi.fn(() => false),
   };
 
   // This test double intentionally implements only the StackClientApp surface that Onboarding touches.

package/src/components-page/onboarding.tsx

@@ -23,6 +23,7 @@ export function Onboarding(props: {
   const { t } = useTranslation();
   const hexclaveApp = useStackApp();
   const user = useUser({ or: "return-null", includeRestricted: true });
+  const canSignOut = !hexclaveApp.isExternalAuthApp();
 
   // If user is not restricted anymore, redirect to the intended destination
   // redirectToAfterSignIn automatically checks for after_auth_return_to in the URL
@@ -60,10 +61,10 @@ export function Onboarding(props: {
       <MessageCard
         title={t("Your account has been restricted")}
         fullPage={!!props.fullPage}
-        secondaryButtonText={t("Sign out")}
-        secondaryAction={async () => {
+        secondaryButtonText={canSignOut ? t("Sign out") : undefined}
+        secondaryAction={canSignOut ? async () => {
           await user.signOut();
-        }}
+        } : undefined}
       >
         {/* The public reason is set by the project's administrators (sign-up rules or manually), so it's the most
         helpful thing we can show; the generic sentence is only a fallback for when they didn't provide one. */}
@@ -77,10 +78,10 @@ export function Onboarding(props: {
     <MessageCard
       title={t("Complete your account setup")}
       fullPage={!!props.fullPage}
-      secondaryButtonText={t("Sign out")}
-      secondaryAction={async () => {
+      secondaryButtonText={canSignOut ? t("Sign out") : undefined}
+      secondaryAction={canSignOut ? async () => {
         await user.signOut();
-      }}
+      } : undefined}
     >
       <p>{t("You have not yet completed your account setup. Please reach out to support if you believe this is an error.")}</p>
     </MessageCard>
@@ -94,6 +95,7 @@ function AddEmailForm(props: {
   const { t } = useTranslation();
   const user = useUser({ or: "throw", includeRestricted: true });
   const hexclaveApp = useStackApp();
+  const canSignOut = !hexclaveApp.isExternalAuthApp();
   const [loading, setLoading] = useState(false);
 
   const emailSchema = yupObject({
@@ -120,10 +122,10 @@ function AddEmailForm(props: {
     <MessageCard
       title={t("Add your email address")}
       fullPage={!!props.fullPage}
-      secondaryButtonText={t("Sign out")}
-      secondaryAction={async () => {
+      secondaryButtonText={canSignOut ? t("Sign out") : undefined}
+      secondaryAction={canSignOut ? async () => {
         await user.signOut();
-      }}
+      } : undefined}
     >
       <Typography className="mb-4">
         {t("Please add an email address to complete your account setup. We'll send you a verification email.")}
@@ -154,6 +156,8 @@ function VerifyEmailScreen(props: {
 }) {
   const { t } = useTranslation();
   const { user, email } = props;
+  const hexclaveApp = useStackApp();
+  const canSignOut = !hexclaveApp.isExternalAuthApp();
   const [changingEmail, setChangingEmail] = useState(false);
 
   if (changingEmail) {
@@ -168,10 +172,10 @@ function VerifyEmailScreen(props: {
       primaryAction={async () => {
         await user.sendVerificationEmail();
       }}
-      secondaryButtonText={t("Sign out")}
-      secondaryAction={async () => {
+      secondaryButtonText={canSignOut ? t("Sign out") : undefined}
+      secondaryAction={canSignOut ? async () => {
         await user.signOut();
-      }}
+      } : undefined}
     >
       <Typography>
         {t("Please verify your email address ")}
@@ -190,4 +194,3 @@ function VerifyEmailScreen(props: {
     </MessageCard>
   );
 }
-