@hexclave/tanstack-start 1.0.64 → 1.0.66

package/dist/{quetzal-translations-CK45_4Dm.d.ts.map → quetzal-translations-XeH3zQ9l.d.ts.map}

@@ -1 +1 @@
-{"version":3,"file":"quetzal-translations-CK45_4Dm.d.ts","names":[],"sources":["../src/generated/quetzal-translations.ts"],"mappings":";cAUa,WAAA,EAAW,GAAA;AAAA,cAqTX,cAAA,EAAc,GAAA,mIAAA,GAAA,66qBAAA,GAAA,usnBAAA,GAAA,iyrBAAA,GAAA,g+qBAAA,GAAA,8srBAAA,GAAA,2trBAAA,GAAA,41pBAAA,GAAA,m3eAAA,GAAA,oreAAA,GAAA,swpBAAA,GAAA,+0qBAAA,GAAA,8wbAAA,GAAA"}
+{"version":3,"file":"quetzal-translations-XeH3zQ9l.d.ts","names":[],"sources":["../src/generated/quetzal-translations.ts"],"mappings":";cAUa,WAAA,EAAW,GAAA;AAAA,cAqTX,cAAA,EAAc,GAAA,mIAAA,GAAA,66qBAAA,GAAA,usnBAAA,GAAA,iyrBAAA,GAAA,g+qBAAA,GAAA,8srBAAA,GAAA,2trBAAA,GAAA,41pBAAA,GAAA,m3eAAA,GAAA,oreAAA,GAAA,swpBAAA,GAAA,+0qBAAA,GAAA,8wbAAA,GAAA"}

package/dist/{translation-provider-DQ3BJepJ.d.ts → translation-provider-WOaZXqAz.d.ts}

@@ -1,4 +1,4 @@
-import { n as quetzalLocales } from "./quetzal-translations-CK45_4Dm.js";
+import { n as quetzalLocales } from "./quetzal-translations-XeH3zQ9l.js";
 
 //#region src/providers/translation-provider.d.ts
 declare function TranslationProvider({
@@ -12,4 +12,4 @@ declare function TranslationProvider({
 }): import("react/jsx-runtime").JSX.Element;
 //#endregion
 export { TranslationProvider as t };
-//# sourceMappingURL=translation-provider-DQ3BJepJ.d.ts.map
+//# sourceMappingURL=translation-provider-WOaZXqAz.d.ts.map

package/dist/{translation-provider-DQ3BJepJ.d.ts.map → translation-provider-WOaZXqAz.d.ts.map}

@@ -1 +1 @@
-{"version":3,"file":"translation-provider-DQ3BJepJ.d.ts","names":[],"sources":["../src/providers/translation-provider.tsx"],"mappings":";;;iBAQgB,mBAAA;EAAsB,IAAA;EAAM,oBAAA;EAAsB;AAAA;EAChE,IAAA,EAAM,UAAA,QAAkB,cAAA,CAAe,GAAA;EACvC,oBAAA,GAAuB,MAAA;EACvB,QAAA,EAAU,KAAA,CAAM,SAAA;AAAA,gCACjB,GAAA,CAAA,OAAA"}
+{"version":3,"file":"translation-provider-WOaZXqAz.d.ts","names":[],"sources":["../src/providers/translation-provider.tsx"],"mappings":";;;iBAQgB,mBAAA;EAAsB,IAAA;EAAM,oBAAA;EAAsB;AAAA;EAChE,IAAA,EAAM,UAAA,QAAkB,cAAA,CAAe,GAAA;EACvC,oBAAA,GAAuB,MAAA;EACvB,QAAA,EAAU,KAAA,CAAM,SAAA;AAAA,gCACjB,GAAA,CAAA,OAAA"}

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/tanstack-start",
-  "version": "1.0.64",
+  "version": "1.0.66",
   "repository": "https://github.com/hexclave/hexclave",
   "sideEffects": false,
   "main": "./dist/index.js",
@@ -85,8 +85,8 @@
     "tailwindcss-animate": "^1.0.7",
     "rrweb": "^1.1.3",
     "yup": "^1.7.1",
-    "@hexclave/shared": "1.0.64",
-    "@hexclave/ui": "1.0.64"
+    "@hexclave/shared": "1.0.66",
+    "@hexclave/ui": "1.0.66"
   },
   "peerDependencies": {
     "@types/react": ">=18.0.0",

package/src/components/message-cards/no-auth-methods-message-card.tsx

@@ -0,0 +1,57 @@
+'use client';
+
+
+//===========================================
+// THIS FILE IS AUTO-GENERATED FROM TEMPLATE. DO NOT EDIT IT DIRECTLY UNLESS YOU ALSO EDIT THE CORRESPONDING FILE IN packages/template
+//===========================================
+
+import { Typography } from "@hexclave/ui";
+import { KeyRound } from "lucide-react";
+import { useTranslation } from "../../lib/translations";
+import { MaybeFullPage } from "../elements/maybe-full-page";
+
+const configSnippet = `auth: {
+  password: { allowSignIn: true },
+  otp: { allowSignIn: true },
+}`;
+
+/**
+ * Shown instead of the sign-in/sign-up form when a project has no auth methods at all (no password, no
+ * OTP, no passkey, no OAuth provider). Without this, the page would look broken: there is nothing the end
+ * user can do, and the developer gets no hint about what went wrong or how to fix it.
+ */
+export function NoAuthMethodsMessageCard(props: {
+  fullPage?: boolean,
+  projectDisplayName?: string,
+}) {
+  const { t } = useTranslation();
+
+  return (
+    <MaybeFullPage fullPage={!!props.fullPage}>
+      <div className='stack-scope flex flex-col items-stretch' style={{ maxWidth: '380px', flexBasis: '380px', padding: props.fullPage ? '1rem' : 0 }}>
+        <div className="flex flex-col items-center text-center">
+          <div className="mb-4 flex h-11 w-11 items-center justify-center rounded-2xl border border-black/[0.08] dark:border-white/[0.10]">
+            <KeyRound className="h-5 w-5 text-gray-500" />
+          </div>
+          <Typography type='h2'>{t("Sign-in is not available")}</Typography>
+          <Typography type='label' variant='secondary'>
+            {props.projectDisplayName == null
+              ? t("This app has no authentication methods enabled, so nobody can sign in yet.")
+              : t("{projectDisplayName} has no authentication methods enabled, so nobody can sign in yet.", { projectDisplayName: props.projectDisplayName })}
+          </Typography>
+        </div>
+
+        <div className="mt-6 rounded-xl border border-black/[0.08] p-4 text-left dark:border-white/[0.10]">
+          <Typography type='label'>{t("Are you the developer?")}</Typography>
+          <Typography type='label' variant='secondary'>
+            {t("Enable at least one sign-in method in your hexclave.config.ts:")}
+          </Typography>
+          <pre className="mt-2 overflow-x-auto rounded-lg border border-black/[0.06] p-3 font-mono text-xs leading-relaxed dark:border-white/[0.08]">{configSnippet}</pre>
+          <Typography type='label' variant='secondary'>
+            {t("Or turn one on in the Hexclave dashboard, under Auth Methods.")}
+          </Typography>
+        </div>
+      </div>
+    </MaybeFullPage>
+  );
+}

package/src/components-page/auth-page.tsx

@@ -19,6 +19,7 @@ import { SeparatorWithText } from '../components/elements/separator-with-text';
 import { StyledLink } from '../components/link';
 import { KnownErrorMessageCard } from '../components/message-cards/known-error-message-card';
 import { MessageCard } from '../components/message-cards/message-card';
+import { NoAuthMethodsMessageCard } from '../components/message-cards/no-auth-methods-message-card';
 import { MagicLinkSignIn } from '../components/magic-link-sign-in';
 import { PredefinedMessageCard } from '../components/message-cards/predefined-message-card';
 import { OAuthButtonGroup } from '../components/oauth-button-group';
@@ -137,6 +138,18 @@ function Inner(props: Props) {
   const hasPasskey = (project.config.passkeyEnabled === true && props.type === "sign-in");
   const enableSeparator = (project.config.credentialEnabled || project.config.magicLinkEnabled) && (hasOAuthProviders || hasPasskey);
 
+  // Note that we check passkeys regardless of `props.type` here (unlike `hasPasskey`); a project with only
+  // passkeys enabled can't sign up with them, but it is configured correctly, so the sign-up page should
+  // keep pointing at the sign-in page instead of claiming that the project is misconfigured.
+  const hasAnyAuthMethod = hasOAuthProviders
+    || project.config.passkeyEnabled === true
+    || project.config.credentialEnabled
+    || project.config.magicLinkEnabled;
+
+  if (!hasAnyAuthMethod) {
+    return <NoAuthMethodsMessageCard fullPage={props.fullPage} projectDisplayName={'displayName' in project ? project.displayName : undefined} />;
+  }
+
   return (
     <MaybeFullPage fullPage={!!props.fullPage}>
       <div className='stack-scope flex flex-col items-stretch' style={{ maxWidth: '380px', flexBasis: '380px', padding: props.fullPage ? '1rem' : 0 }}>
@@ -191,7 +204,11 @@ function Inner(props: Props) {
           props.type === 'sign-up' ? <CredentialSignUp noPasswordRepeat={props.noPasswordRepeat} /> : <CredentialSignIn />
         ) : project.config.magicLinkEnabled ? (
           <MagicLinkSignIn />
-        ) : !(hasOAuthProviders || hasPasskey) ? <Typography variant={"destructive"} className="text-center">{t("No authentication method enabled.")}</Typography> : null}
+        ) : !(hasOAuthProviders || hasPasskey) ? (
+          // Only reachable on the sign-up page of a passkey-only project: the project is configured
+          // correctly, there is just no way to create an account with a passkey alone.
+          <Typography variant="secondary" className="text-center">{t("New accounts can't be created with the sign-in methods enabled for this app. Sign in instead.")}</Typography>
+        ) : null}
         {props.extraInfo && (
           <div className={cn('flex flex-col items-center text-center text-sm text-gray-500', {
             'mt-2': project.config.credentialEnabled || project.config.magicLinkEnabled,

package/src/components-page/cli-auth-confirm.test.tsx

@@ -28,11 +28,13 @@ function createAppTestDouble(options: {
   signInWithTokens?: (tokens: { accessToken: string, refreshToken: string }) => Promise<void>,
   redirectToSignIn?: (options: { replace: true }) => Promise<void>,
   redirectToSignUp?: (options: { replace: true }) => Promise<void>,
+  redirectToOnboarding?: (options: { replace: true }) => Promise<void>,
 }) {
   const app = {
     useUser: () => options.user,
     redirectToSignIn: options.redirectToSignIn ?? vi.fn(async () => {}),
     redirectToSignUp: options.redirectToSignUp ?? vi.fn(async () => {}),
+    redirectToOnboarding: options.redirectToOnboarding ?? vi.fn(async () => {}),
     [hexclaveAppInternalsSymbol]: {
       sendRequest: options.sendRequest,
       signInWithTokens: options.signInWithTokens ?? vi.fn(async () => {}),
@@ -102,6 +104,7 @@ describe("useCliAuthConfirmation", () => {
     root = null;
     container = null;
     vi.restoreAllMocks();
+    sessionStorage.clear();
     window.history.replaceState({}, "", "/");
     Reflect.set(globalThis, "IS_REACT_ACT_ENVIRONMENT", previousActEnvironment);
   });
@@ -132,6 +135,58 @@ describe("useCliAuthConfirmation", () => {
     `);
   });
 
+  it("redirects restricted users to onboarding without completing CLI auth", async () => {
+    window.history.replaceState({}, "", "/handler/cli-auth-confirm?login_code=login-code");
+    const redirectToOnboarding = vi.fn(async (_options: { replace: true }) => {});
+    const sendRequest = vi.fn(async (_path: string, _requestOptions: RequestInit) => new Response(null, { status: 200 }));
+    const app = createAppTestDouble({
+      user: {
+        isRestricted: true,
+        isAnonymous: false,
+        currentSession: {
+          getTokens: vi.fn(async () => ({ refreshToken: "restricted-refresh-token" })),
+        },
+      },
+      sendRequest,
+      redirectToOnboarding,
+    });
+
+    await renderWithApp(app);
+    await act(async () => {
+      getButton("authorize").click();
+    });
+
+    expect(redirectToOnboarding).toHaveBeenCalledWith({ replace: true });
+    expect(sessionStorage.getItem("hexclave-cli-auth-confirmed")).toBe("login-code");
+    expect(sendRequest).not.toHaveBeenCalled();
+  });
+
+  it("redirects anonymous users to sign-up without completing CLI auth", async () => {
+    window.history.replaceState({}, "", "/handler/cli-auth-confirm?login_code=login-code");
+    const redirectToSignUp = vi.fn(async (_options: { replace: true }) => {});
+    const sendRequest = vi.fn(async (_path: string, _requestOptions: RequestInit) => new Response(null, { status: 200 }));
+    const app = createAppTestDouble({
+      user: {
+        isRestricted: true,
+        isAnonymous: true,
+        currentSession: {
+          getTokens: vi.fn(async () => ({ refreshToken: "anonymous-refresh-token" })),
+        },
+      },
+      sendRequest,
+      redirectToSignUp,
+    });
+
+    await renderWithApp(app);
+    await act(async () => {
+      getButton("authorize").click();
+    });
+
+    expect(redirectToSignUp).toHaveBeenCalledWith({ replace: true });
+    expect(sessionStorage.getItem("hexclave-cli-auth-confirmed")).toBe("login-code");
+    expect(sendRequest).not.toHaveBeenCalled();
+  });
+
   it("ignores duplicate authorize clicks before React re-renders", async () => {
     window.history.replaceState({}, "", "/handler/cli-auth-confirm?login_code=login-code");
     const getTokens = vi.fn(async () => ({ refreshToken: "refresh-token" }));

package/src/components-page/cli-auth-confirm.tsx

@@ -111,7 +111,7 @@ export function useCliAuthConfirmation(): CliAuthConfirmationState {
   }, [app, loginCode, user]);
 
   useEffect(() => {
-    if (!confirmed || !user || autoCompleteRef.current) {
+    if (!confirmed || !user || user.isRestricted || autoCompleteRef.current) {
       return;
     }
     autoCompleteRef.current = true;
@@ -144,6 +144,16 @@ export function useCliAuthConfirmation(): CliAuthConfirmationState {
       setError(null);
       setStatus("authorizing");
       if (user) {
+        if (user.isRestricted) {
+          markConfirmed(loginCode);
+          setStatus("redirecting");
+          await (
+            user.isAnonymous
+              ? app.redirectToSignUp({ replace: true })
+              : app.redirectToOnboarding({ replace: true })
+          );
+          return;
+        }
         await completeWithCurrentUser();
         clearConfirmed();
         setStatus("success");