@stackframe/stack 2.6.16 → 2.6.17

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @stackframe/stack
 
+## 2.6.17
+
+### Patch Changes
+
+- Loading skeletons
+- Updated dependencies
+  - @stackframe/stack-shared@2.6.17
+  - @stackframe/stack-sc@2.6.17
+  - @stackframe/stack-ui@2.6.17
+
 ## 2.6.16
 
 ### Patch Changes

package/README.md

@@ -1,29 +1,26 @@
-# Stack
+# Stack Auth: Open-source Clerk/Auth0 alternative
 
-Stack is an open-source, self-hostable, and highly customizable authentication and user management system.
+## [📘 Docs](https://docs.stack-auth.com) | [☁️ Hosted Version](https://stack-auth.com/) | [✨ Demo](https://demo.stack-auth.com/) | [🎮 Discord](https://discord.stack-auth.com) | [GitHub](https://github.com/stack-auth/stack)
 
-We provide frontend and backend libraries for Next.js, React, and JavaScript. You can set it up in one minute and scale with the project as it grows.
+Stack Auth is a managed user authentication solution. It is developer-friendly and fully open-source (licensed under MIT and AGPL).
 
-## Features
+Stack gets you started in just five minutes, after which you'll be ready to use all of its features as you grow your project. Our managed service is completely optional and you can export your user data and self-host, for free, at any time.
 
-- Composable React components & hooks
-- OAuth (Google, Facebook, GitHub, etc.)
-- Email and password authentication (with email verification and password reset)
-- Easy to set up with proxied providers (no need to sign up and create OAuth endpoints yourself on all the providers)
-- User management & analytics
-- User-associated metadata with client-/server-specific permissions
-- Out-of-the-box Dark/Light mode support
-- suports switching out the underlying UI library, support MUI Joy out of the box
-- **100% open-source!**
+We support Next.js frontends, along with any backend that can use our [REST API](https://docs.stack-auth.com/rest-api/auth). Check out our [setup guide](https://docs.stack-auth.com/getting-started/setup) to get started.
 
-Currently, only Next.js is supported, but we are working on adding other frameworks.
+## 📦 Installation & Setup
 
-## Installation
+1. Run Stack’s installation wizard with the following command:
+    ```bash
+    npx @stackframe/init-stack@latest
+    ```
+2. Then, create an account on the [Stack Auth dashboard](https://app.stack-auth.com/projects), create a new project with an API key, and copy its environment variables into the .env.local file of your Next.js project:
+    ```
+    NEXT_PUBLIC_STACK_PROJECT_ID=<your-project-id>
+    NEXT_PUBLIC_STACK_PUBLISHABLE_CLIENT_KEY=<your-publishable-client-key>
+    STACK_SECRET_SERVER_KEY=<your-secret-server-key>
+    ```
+3. That's it! You can run your app with `npm run dev` and go to [http://localhost:3000/handler/signup](http://localhost:3000/handler/signup) to see the sign-up page. You can also check out the account settings page at [http://localhost:3000/handler/account-settings](http://localhost:3000/handler/account-settings).
 
-To get started with Stack, you need to [create a Next.js project](https://nextjs.org/docs/getting-started/installation) using the App router. Then, you can install Stack by running the following command:
 
-```bash
-npm install @stackframe/stack
-```
-
-For setup, refer to [our documentation](https://docs.stack-auth.com).
+Check out the [documentation](https://docs.stack-auth.com/getting-started/setup) for a more detailed guide.

package/dist/components/message-cards/predefined-message-card.d.mts

@@ -1,7 +1,7 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 
 declare function PredefinedMessageCard({ type, fullPage, }: {
-    type: 'signedIn' | 'signedOut' | 'emailSent' | 'passwordReset' | 'emailVerified' | 'unknownError' | 'signUpDisabled';
+    type: 'signedIn' | 'signedOut' | 'emailSent' | 'passwordReset' | 'unknownError' | 'signUpDisabled';
     fullPage?: boolean;
 }): react_jsx_runtime.JSX.Element;
 

package/dist/components/message-cards/predefined-message-card.d.ts

@@ -1,7 +1,7 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 
 declare function PredefinedMessageCard({ type, fullPage, }: {
-    type: 'signedIn' | 'signedOut' | 'emailSent' | 'passwordReset' | 'emailVerified' | 'unknownError' | 'signUpDisabled';
+    type: 'signedIn' | 'signedOut' | 'emailSent' | 'passwordReset' | 'unknownError' | 'signUpDisabled';
     fullPage?: boolean;
 }): react_jsx_runtime.JSX.Element;
 

package/dist/components/message-cards/predefined-message-card.js

@@ -35,7 +35,6 @@ function PredefinedMessageCard({
   fullPage = false
 }) {
   const stackApp = (0, import__.useStackApp)();
-  const user = (0, import__.useUser)();
   const { t } = (0, import_translations.useTranslation)();
   let title;
   let message = null;
@@ -80,18 +79,6 @@ function PredefinedMessageCard({
       primaryButton = t("Sign in");
       break;
     }
-    case "emailVerified": {
-      title = t("Email verified!");
-      message = t("Your have successfully verified your email.");
-      if (user) {
-        primaryAction = () => stackApp.redirectToSignIn({ noRedirectBack: true });
-        primaryButton = t("Sign in");
-      } else {
-        primaryAction = () => stackApp.redirectToHome();
-        primaryButton = t("Go to home");
-      }
-      break;
-    }
     case "unknownError": {
       title = t("An unknown error occurred");
       message = t("Please try again and if the problem persists, contact support.");

package/dist/components/message-cards/predefined-message-card.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/message-cards/predefined-message-card.tsx"],"sourcesContent":["\"use client\";\n\nimport { Typography } from \"@stackframe/stack-ui\";\nimport { useStackApp, useUser } from \"../..\";\nimport { MessageCard } from \"./message-card\";\nimport { useTranslation } from \"../../lib/translations\";\n\nexport function PredefinedMessageCard({\n  type,\n  fullPage=false,\n}: {\n  type: 'signedIn' | 'signedOut' | 'emailSent' | 'passwordReset' | 'emailVerified' | 'unknownError' | 'signUpDisabled',\n  fullPage?: boolean,\n}) {\n  const stackApp = useStackApp();\n  const user = useUser();\n  const { t } = useTranslation();\n\n  let title: string;\n  let message: string | null = null;\n  let primaryButton: string | null = null;\n  let secondaryButton: string | null = null;\n  let primaryAction: (() => Promise<void> | void) | null = null;\n  let secondaryAction: (() => Promise<void> | void) | null = null;\n\n  switch (type) {\n    case 'signedIn': {\n      title = t(\"You are already signed in\");\n      primaryAction = () => stackApp.redirectToHome();\n      secondaryAction = () => stackApp.redirectToSignOut();\n      primaryButton = t(\"Go to home\");\n      secondaryButton = t(\"Sign out\");\n      break;\n    }\n    case 'signedOut': {\n      title = t(\"You are not currently signed in.\");\n      primaryAction = () => stackApp.redirectToSignIn();\n      primaryButton = t(\"Sign in\");\n      break;\n    }\n    case 'signUpDisabled': {\n      title = t(\"Sign up for new users is not enabled at the moment.\");\n      primaryAction = () => stackApp.redirectToHome();\n      secondaryAction = () => stackApp.redirectToSignIn();\n      primaryButton = t(\"Go to home\");\n      secondaryButton = t(\"Sign in\");\n      break;\n    }\n    case 'emailSent': {\n      title = t(\"Email sent!\");\n      message = t(\"If the user with this e-mail address exists, an e-mail was sent to your inbox. Make sure to check your spam folder.\");\n      primaryAction = () => stackApp.redirectToHome();\n      primaryButton = t(\"Go to home\");\n      break;\n    }\n    case 'passwordReset': {\n      title = t(\"Password reset successfully!\");\n      message = t(\"Your password has been reset. You can now sign in with your new password.\");\n      primaryAction = () => stackApp.redirectToSignIn({ noRedirectBack: true });\n      primaryButton = t(\"Sign in\");\n      break;\n    }\n    case 'emailVerified': {\n      title = t(\"Email verified!\");\n      message = t(\"Your have successfully verified your email.\");\n      if (user) {\n        primaryAction = () => stackApp.redirectToSignIn({ noRedirectBack: true });\n        primaryButton = t(\"Sign in\");\n      } else {\n        primaryAction = () => stackApp.redirectToHome();\n        primaryButton = t(\"Go to home\");\n      }\n      break;\n    }\n    case 'unknownError': {\n      title = t(\"An unknown error occurred\");\n      message = t(\"Please try again and if the problem persists, contact support.\");\n      primaryAction = () => stackApp.redirectToHome();\n      primaryButton = t(\"Go to home\");\n      break;\n    }\n  }\n\n  return (\n    <MessageCard\n      title={title}\n      fullPage={fullPage}\n      primaryButtonText={primaryButton}\n      primaryAction={primaryAction}\n      secondaryButtonText={secondaryButton || undefined}\n      secondaryAction={secondaryAction || undefined}\n    >\n      {message && <Typography>{message}</Typography>}\n    </MessageCard>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,sBAA2B;AAC3B,eAAqC;AACrC,0BAA4B;AAC5B,0BAA+B;AAuFb;AArFX,SAAS,sBAAsB;AAAA,EACpC;AAAA,EACA,WAAS;AACX,GAGG;AACD,QAAM,eAAW,sBAAY;AAC7B,QAAM,WAAO,kBAAQ;AACrB,QAAM,EAAE,EAAE,QAAI,oCAAe;AAE7B,MAAI;AACJ,MAAI,UAAyB;AAC7B,MAAI,gBAA+B;AACnC,MAAI,kBAAiC;AACrC,MAAI,gBAAqD;AACzD,MAAI,kBAAuD;AAE3D,UAAQ,MAAM;AAAA,IACZ,KAAK,YAAY;AACf,cAAQ,EAAE,2BAA2B;AACrC,sBAAgB,MAAM,SAAS,eAAe;AAC9C,wBAAkB,MAAM,SAAS,kBAAkB;AACnD,sBAAgB,EAAE,YAAY;AAC9B,wBAAkB,EAAE,UAAU;AAC9B;AAAA,IACF;AAAA,IACA,KAAK,aAAa;AAChB,cAAQ,EAAE,kCAAkC;AAC5C,sBAAgB,MAAM,SAAS,iBAAiB;AAChD,sBAAgB,EAAE,SAAS;AAC3B;AAAA,IACF;AAAA,IACA,KAAK,kBAAkB;AACrB,cAAQ,EAAE,qDAAqD;AAC/D,sBAAgB,MAAM,SAAS,eAAe;AAC9C,wBAAkB,MAAM,SAAS,iBAAiB;AAClD,sBAAgB,EAAE,YAAY;AAC9B,wBAAkB,EAAE,SAAS;AAC7B;AAAA,IACF;AAAA,IACA,KAAK,aAAa;AAChB,cAAQ,EAAE,aAAa;AACvB,gBAAU,EAAE,qHAAqH;AACjI,sBAAgB,MAAM,SAAS,eAAe;AAC9C,sBAAgB,EAAE,YAAY;AAC9B;AAAA,IACF;AAAA,IACA,KAAK,iBAAiB;AACpB,cAAQ,EAAE,8BAA8B;AACxC,gBAAU,EAAE,2EAA2E;AACvF,sBAAgB,MAAM,SAAS,iBAAiB,EAAE,gBAAgB,KAAK,CAAC;AACxE,sBAAgB,EAAE,SAAS;AAC3B;AAAA,IACF;AAAA,IACA,KAAK,iBAAiB;AACpB,cAAQ,EAAE,iBAAiB;AAC3B,gBAAU,EAAE,6CAA6C;AACzD,UAAI,MAAM;AACR,wBAAgB,MAAM,SAAS,iBAAiB,EAAE,gBAAgB,KAAK,CAAC;AACxE,wBAAgB,EAAE,SAAS;AAAA,MAC7B,OAAO;AACL,wBAAgB,MAAM,SAAS,eAAe;AAC9C,wBAAgB,EAAE,YAAY;AAAA,MAChC;AACA;AAAA,IACF;AAAA,IACA,KAAK,gBAAgB;AACnB,cAAQ,EAAE,2BAA2B;AACrC,gBAAU,EAAE,gEAAgE;AAC5E,sBAAgB,MAAM,SAAS,eAAe;AAC9C,sBAAgB,EAAE,YAAY;AAC9B;AAAA,IACF;AAAA,EACF;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA,mBAAmB;AAAA,MACnB;AAAA,MACA,qBAAqB,mBAAmB;AAAA,MACxC,iBAAiB,mBAAmB;AAAA,MAEnC,qBAAW,4CAAC,8BAAY,mBAAQ;AAAA;AAAA,EACnC;AAEJ;","names":[]}
+{"version":3,"sources":["../../../src/components/message-cards/predefined-message-card.tsx"],"sourcesContent":["\"use client\";\n\nimport { Typography } from \"@stackframe/stack-ui\";\nimport { useStackApp, useUser } from \"../..\";\nimport { MessageCard } from \"./message-card\";\nimport { useTranslation } from \"../../lib/translations\";\n\nexport function PredefinedMessageCard({\n  type,\n  fullPage=false,\n}: {\n  type: 'signedIn' | 'signedOut' | 'emailSent' | 'passwordReset' | 'unknownError' | 'signUpDisabled',\n  fullPage?: boolean,\n}) {\n  const stackApp = useStackApp();\n  const { t } = useTranslation();\n\n  let title: string;\n  let message: string | null = null;\n  let primaryButton: string | null = null;\n  let secondaryButton: string | null = null;\n  let primaryAction: (() => Promise<void> | void) | null = null;\n  let secondaryAction: (() => Promise<void> | void) | null = null;\n\n  switch (type) {\n    case 'signedIn': {\n      title = t(\"You are already signed in\");\n      primaryAction = () => stackApp.redirectToHome();\n      secondaryAction = () => stackApp.redirectToSignOut();\n      primaryButton = t(\"Go to home\");\n      secondaryButton = t(\"Sign out\");\n      break;\n    }\n    case 'signedOut': {\n      title = t(\"You are not currently signed in.\");\n      primaryAction = () => stackApp.redirectToSignIn();\n      primaryButton = t(\"Sign in\");\n      break;\n    }\n    case 'signUpDisabled': {\n      title = t(\"Sign up for new users is not enabled at the moment.\");\n      primaryAction = () => stackApp.redirectToHome();\n      secondaryAction = () => stackApp.redirectToSignIn();\n      primaryButton = t(\"Go to home\");\n      secondaryButton = t(\"Sign in\");\n      break;\n    }\n    case 'emailSent': {\n      title = t(\"Email sent!\");\n      message = t(\"If the user with this e-mail address exists, an e-mail was sent to your inbox. Make sure to check your spam folder.\");\n      primaryAction = () => stackApp.redirectToHome();\n      primaryButton = t(\"Go to home\");\n      break;\n    }\n    case 'passwordReset': {\n      title = t(\"Password reset successfully!\");\n      message = t(\"Your password has been reset. You can now sign in with your new password.\");\n      primaryAction = () => stackApp.redirectToSignIn({ noRedirectBack: true });\n      primaryButton = t(\"Sign in\");\n      break;\n    }\n    case 'unknownError': {\n      title = t(\"An unknown error occurred\");\n      message = t(\"Please try again and if the problem persists, contact support.\");\n      primaryAction = () => stackApp.redirectToHome();\n      primaryButton = t(\"Go to home\");\n      break;\n    }\n  }\n\n  return (\n    <MessageCard\n      title={title}\n      fullPage={fullPage}\n      primaryButtonText={primaryButton}\n      primaryAction={primaryAction}\n      secondaryButtonText={secondaryButton || undefined}\n      secondaryAction={secondaryAction || undefined}\n    >\n      {message && <Typography>{message}</Typography>}\n    </MessageCard>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,sBAA2B;AAC3B,eAAqC;AACrC,0BAA4B;AAC5B,0BAA+B;AA0Eb;AAxEX,SAAS,sBAAsB;AAAA,EACpC;AAAA,EACA,WAAS;AACX,GAGG;AACD,QAAM,eAAW,sBAAY;AAC7B,QAAM,EAAE,EAAE,QAAI,oCAAe;AAE7B,MAAI;AACJ,MAAI,UAAyB;AAC7B,MAAI,gBAA+B;AACnC,MAAI,kBAAiC;AACrC,MAAI,gBAAqD;AACzD,MAAI,kBAAuD;AAE3D,UAAQ,MAAM;AAAA,IACZ,KAAK,YAAY;AACf,cAAQ,EAAE,2BAA2B;AACrC,sBAAgB,MAAM,SAAS,eAAe;AAC9C,wBAAkB,MAAM,SAAS,kBAAkB;AACnD,sBAAgB,EAAE,YAAY;AAC9B,wBAAkB,EAAE,UAAU;AAC9B;AAAA,IACF;AAAA,IACA,KAAK,aAAa;AAChB,cAAQ,EAAE,kCAAkC;AAC5C,sBAAgB,MAAM,SAAS,iBAAiB;AAChD,sBAAgB,EAAE,SAAS;AAC3B;AAAA,IACF;AAAA,IACA,KAAK,kBAAkB;AACrB,cAAQ,EAAE,qDAAqD;AAC/D,sBAAgB,MAAM,SAAS,eAAe;AAC9C,wBAAkB,MAAM,SAAS,iBAAiB;AAClD,sBAAgB,EAAE,YAAY;AAC9B,wBAAkB,EAAE,SAAS;AAC7B;AAAA,IACF;AAAA,IACA,KAAK,aAAa;AAChB,cAAQ,EAAE,aAAa;AACvB,gBAAU,EAAE,qHAAqH;AACjI,sBAAgB,MAAM,SAAS,eAAe;AAC9C,sBAAgB,EAAE,YAAY;AAC9B;AAAA,IACF;AAAA,IACA,KAAK,iBAAiB;AACpB,cAAQ,EAAE,8BAA8B;AACxC,gBAAU,EAAE,2EAA2E;AACvF,sBAAgB,MAAM,SAAS,iBAAiB,EAAE,gBAAgB,KAAK,CAAC;AACxE,sBAAgB,EAAE,SAAS;AAC3B;AAAA,IACF;AAAA,IACA,KAAK,gBAAgB;AACnB,cAAQ,EAAE,2BAA2B;AACrC,gBAAU,EAAE,gEAAgE;AAC5E,sBAAgB,MAAM,SAAS,eAAe;AAC9C,sBAAgB,EAAE,YAAY;AAC9B;AAAA,IACF;AAAA,EACF;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA,mBAAmB;AAAA,MACnB;AAAA,MACA,qBAAqB,mBAAmB;AAAA,MACxC,iBAAiB,mBAAmB;AAAA,MAEnC,qBAAW,4CAAC,8BAAY,mBAAQ;AAAA;AAAA,EACnC;AAEJ;","names":[]}

package/dist/components/selected-team-switcher.js

@@ -35,6 +35,12 @@ var import_translations = require("../lib/translations");
 var import_team_icon = require("./team-icon");
 var import_jsx_runtime = require("react/jsx-runtime");
 function SelectedTeamSwitcher(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react.Suspense, { fallback: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Fallback, {}), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Inner, { ...props }) });
+}
+function Fallback() {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.Skeleton, { className: "h-9 w-full max-w-64 stack-scope" });
+}
+function Inner(props) {
   const { t } = (0, import_translations.useTranslation)();
   const app = (0, import__.useStackApp)();
   const user = (0, import__.useUser)();

package/dist/components/selected-team-switcher.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/selected-team-switcher.tsx"],"sourcesContent":["'use client';\nimport { runAsynchronouslyWithAlert } from \"@stackframe/stack-shared/dist/utils/promises\";\nimport {\n  Button,\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectLabel,\n  SelectSeparator,\n  SelectTrigger,\n  SelectValue,\n  Typography\n} from \"@stackframe/stack-ui\";\nimport { PlusCircle, Settings } from \"lucide-react\";\nimport { useRouter } from \"next/navigation\";\nimport { useEffect, useMemo } from \"react\";\nimport { Team, useStackApp, useUser } from \"..\";\nimport { useTranslation } from \"../lib/translations\";\nimport { TeamIcon } from \"./team-icon\";\n\ntype SelectedTeamSwitcherProps = {\n  urlMap?: (team: Team) => string,\n  selectedTeam?: Team,\n  noUpdateSelectedTeam?: boolean,\n};\n\nexport function SelectedTeamSwitcher(props: SelectedTeamSwitcherProps) {\n  const { t } = useTranslation();\n  const app = useStackApp();\n  const user = useUser();\n  const project = app.useProject();\n  const router = useRouter();\n  const selectedTeam = user?.selectedTeam || props.selectedTeam;\n  const rawTeams = user?.useTeams();\n  const teams = useMemo(() => rawTeams?.sort((a, b) => b.id === selectedTeam?.id ? 1 : -1), [rawTeams, selectedTeam]);\n\n  useEffect(() => {\n    if (!props.noUpdateSelectedTeam && props.selectedTeam) {\n      runAsynchronouslyWithAlert(user?.setSelectedTeam(props.selectedTeam));\n    }\n  }, [props.noUpdateSelectedTeam, props.selectedTeam]);\n\n  return (\n    <Select\n      value={selectedTeam?.id}\n      onValueChange={(value) => {\n        runAsynchronouslyWithAlert(async () => {\n          const team = teams?.find(team => team.id === value);\n          if (!team) {\n            throw new Error('Team not found, this should not happen');\n          }\n\n          if (!props.noUpdateSelectedTeam) {\n            await user?.setSelectedTeam(team);\n          }\n          if (props.urlMap) {\n            router.push(props.urlMap(team));\n          }\n        });\n      }}\n    >\n      <SelectTrigger className=\"stack-scope max-w-64\">\n        <SelectValue placeholder=\"Select team\"/>\n      </SelectTrigger>\n      <SelectContent className=\"stack-scope\">\n        {user?.selectedTeam ? <SelectGroup>\n          <SelectLabel>\n            <div className=\"flex items-center justify-between\">\n              <span>\n                {t('Current team')}\n              </span>\n              <Button variant='ghost' size='icon' className=\"h-6 w-6\" onClick={() => router.push(`${app.urls.accountSettings}#team-${user.selectedTeam?.id}`)}>\n                <Settings className=\"h-4 w-4\"/>\n              </Button>\n            </div>\n          </SelectLabel>\n          <SelectItem value={user.selectedTeam.id}>\n            <div className=\"flex items-center gap-2\">\n              <TeamIcon team={user.selectedTeam} />\n              <Typography className=\"max-w-40 truncate\">{user.selectedTeam.displayName}</Typography>\n            </div>\n          </SelectItem>\n        </SelectGroup> : undefined}\n\n        {teams?.length ?\n          <SelectGroup>\n            <SelectLabel>{t('Other teams')}</SelectLabel>\n            {teams.filter(team => team.id !== user?.selectedTeam?.id)\n              .map(team => (\n                <SelectItem value={team.id} key={team.id}>\n                  <div className=\"flex items-center gap-2\">\n                    <TeamIcon team={team} />\n                    <Typography className=\"max-w-64 truncate\">{team.displayName}</Typography>\n                  </div>\n                </SelectItem>\n              ))}\n          </SelectGroup> :\n          <SelectGroup>\n            <SelectLabel>{t('No teams yet')}</SelectLabel>\n          </SelectGroup>}\n\n        {project.config.clientTeamCreationEnabled && <>\n          <SelectSeparator/>\n          <div>\n            <Button\n              onClick={() => router.push(`${app.urls.accountSettings}#team-creation`)}\n              className=\"w-full\"\n              variant='ghost'\n            >\n              <PlusCircle className=\"mr-2 h-4 w-4\"/> {t('Create a team')}\n            </Button>\n          </div>\n        </>}\n      </SelectContent>\n    </Select>\n  );\n}\n"],"mappings":"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","names":["team"]}
+{"version":3,"sources":["../../src/components/selected-team-switcher.tsx"],"sourcesContent":["'use client';\nimport { runAsynchronouslyWithAlert } from \"@stackframe/stack-shared/dist/utils/promises\";\nimport {\n  Button,\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectLabel,\n  SelectSeparator,\n  SelectTrigger,\n  SelectValue,\n  Skeleton,\n  Typography\n} from \"@stackframe/stack-ui\";\nimport { PlusCircle, Settings } from \"lucide-react\";\nimport { useRouter } from \"next/navigation\";\nimport { Suspense, useEffect, useMemo } from \"react\";\nimport { Team, useStackApp, useUser } from \"..\";\nimport { useTranslation } from \"../lib/translations\";\nimport { TeamIcon } from \"./team-icon\";\n\ntype SelectedTeamSwitcherProps = {\n  urlMap?: (team: Team) => string,\n  selectedTeam?: Team,\n  noUpdateSelectedTeam?: boolean,\n};\n\nexport function SelectedTeamSwitcher(props: SelectedTeamSwitcherProps) {\n  return <Suspense fallback={<Fallback />}>\n    <Inner {...props} />\n  </Suspense>;\n}\n\nfunction Fallback() {\n  return <Skeleton className=\"h-9 w-full max-w-64 stack-scope\" />;\n}\n\nfunction Inner(props: SelectedTeamSwitcherProps) {\n  const { t } = useTranslation();\n  const app = useStackApp();\n  const user = useUser();\n  const project = app.useProject();\n  const router = useRouter();\n  const selectedTeam = user?.selectedTeam || props.selectedTeam;\n  const rawTeams = user?.useTeams();\n  const teams = useMemo(() => rawTeams?.sort((a, b) => b.id === selectedTeam?.id ? 1 : -1), [rawTeams, selectedTeam]);\n\n  useEffect(() => {\n    if (!props.noUpdateSelectedTeam && props.selectedTeam) {\n      runAsynchronouslyWithAlert(user?.setSelectedTeam(props.selectedTeam));\n    }\n  }, [props.noUpdateSelectedTeam, props.selectedTeam]);\n\n  return (\n    <Select\n      value={selectedTeam?.id}\n      onValueChange={(value) => {\n        runAsynchronouslyWithAlert(async () => {\n          const team = teams?.find(team => team.id === value);\n          if (!team) {\n            throw new Error('Team not found, this should not happen');\n          }\n\n          if (!props.noUpdateSelectedTeam) {\n            await user?.setSelectedTeam(team);\n          }\n          if (props.urlMap) {\n            router.push(props.urlMap(team));\n          }\n        });\n      }}\n    >\n      <SelectTrigger className=\"stack-scope max-w-64\">\n        <SelectValue placeholder=\"Select team\"/>\n      </SelectTrigger>\n      <SelectContent className=\"stack-scope\">\n        {user?.selectedTeam ? <SelectGroup>\n          <SelectLabel>\n            <div className=\"flex items-center justify-between\">\n              <span>\n                {t('Current team')}\n              </span>\n              <Button variant='ghost' size='icon' className=\"h-6 w-6\" onClick={() => router.push(`${app.urls.accountSettings}#team-${user.selectedTeam?.id}`)}>\n                <Settings className=\"h-4 w-4\"/>\n              </Button>\n            </div>\n          </SelectLabel>\n          <SelectItem value={user.selectedTeam.id}>\n            <div className=\"flex items-center gap-2\">\n              <TeamIcon team={user.selectedTeam} />\n              <Typography className=\"max-w-40 truncate\">{user.selectedTeam.displayName}</Typography>\n            </div>\n          </SelectItem>\n        </SelectGroup> : undefined}\n\n        {teams?.length ?\n          <SelectGroup>\n            <SelectLabel>{t('Other teams')}</SelectLabel>\n            {teams.filter(team => team.id !== user?.selectedTeam?.id)\n              .map(team => (\n                <SelectItem value={team.id} key={team.id}>\n                  <div className=\"flex items-center gap-2\">\n                    <TeamIcon team={team} />\n                    <Typography className=\"max-w-64 truncate\">{team.displayName}</Typography>\n                  </div>\n                </SelectItem>\n              ))}\n          </SelectGroup> :\n          <SelectGroup>\n            <SelectLabel>{t('No teams yet')}</SelectLabel>\n          </SelectGroup>}\n\n        {project.config.clientTeamCreationEnabled && <>\n          <SelectSeparator/>\n          <div>\n            <Button\n              onClick={() => router.push(`${app.urls.accountSettings}#team-creation`)}\n              className=\"w-full\"\n              variant='ghost'\n            >\n              <PlusCircle className=\"mr-2 h-4 w-4\"/> {t('Create a team')}\n            </Button>\n          </div>\n        </>}\n      </SelectContent>\n    </Select>\n  );\n}\n"],"mappings":"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","names":["team"]}

package/dist/components/user-button.js

@@ -40,13 +40,7 @@ function Item(props) {
   ] }) });
 }
 function UserButton(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    import_react.Suspense,
-    {
-      fallback: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.Skeleton, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(UserButtonInnerInner, { ...props, user: null }) }),
-      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(UserButtonInner, { ...props })
-    }
-  );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react.Suspense, { fallback: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.Skeleton, { className: "h-[34px] w-[34px] rounded-full stack-scope" }), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(UserButtonInner, { ...props }) });
 }
 function UserButtonInner(props) {
   const user = (0, import__.useUser)();

package/dist/components/user-button.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/user-button.tsx"],"sourcesContent":["'use client';\n\nimport { runAsynchronouslyWithAlert } from \"@stackframe/stack-shared/dist/utils/promises\";\nimport { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, Skeleton, Typography } from \"@stackframe/stack-ui\";\nimport { CircleUser, LogIn, LogOut, SunMoon, UserPlus } from \"lucide-react\";\nimport React, { Suspense } from \"react\";\nimport { CurrentUser, useStackApp, useUser } from \"..\";\nimport { useTranslation } from \"../lib/translations\";\nimport { UserAvatar } from \"./elements/user-avatar\";\n\nfunction Item(props: { text: string, icon: React.ReactNode, onClick: () => void | Promise<void> }) {\n  return (\n    <DropdownMenuItem onClick={() => runAsynchronouslyWithAlert(props.onClick)}>\n      <div className=\"flex gap-2 items-center\">\n        {props.icon}\n        <Typography>{props.text}</Typography>\n      </div>\n    </DropdownMenuItem>\n  );\n}\n\ntype UserButtonProps = {\n  showUserInfo?: boolean,\n  colorModeToggle?: () => void | Promise<void>,\n  extraItems?: {\n    text: string,\n    icon: React.ReactNode,\n    onClick: () => void | Promise<void>,\n  }[],\n};\n\nexport function UserButton(props: UserButtonProps) {\n  return (\n    <Suspense\n      fallback={\n        <Skeleton>\n          <UserButtonInnerInner {...props} user={null} />\n        </Skeleton>\n      }\n    >\n      <UserButtonInner {...props} />\n    </Suspense>\n  );\n}\n\nfunction UserButtonInner(props: UserButtonProps) {\n  const user = useUser();\n  return <UserButtonInnerInner {...props} user={user} />;\n}\n\n\nfunction UserButtonInnerInner(props: UserButtonProps & { user: CurrentUser | null }) {\n  const { t } = useTranslation();\n  const user = props.user;\n  const app = useStackApp();\n\n  const iconProps = { size: 20, className: 'h-4 w-4' };\n\n  return (\n    <DropdownMenu>\n      <DropdownMenuTrigger className=\"outline-none stack-scope\">\n        <div className=\"flex gap-2 items-center\">\n          <UserAvatar user={user} />\n          {user && props.showUserInfo &&\n            <div className=\"flex flex-col justify-center text-left\">\n              <Typography className=\"max-w-40 truncate\">{user.displayName}</Typography>\n              <Typography className=\"max-w-40 truncate\" variant=\"secondary\" type='label'>{user.primaryEmail}</Typography>\n            </div>\n          }\n        </div>\n      </DropdownMenuTrigger>\n      <DropdownMenuContent className=\"stack-scope\">\n        <DropdownMenuLabel>\n          <div className=\"flex gap-2 items-center\">\n            <UserAvatar user={user} />\n            <div>\n              {user && <Typography className=\"max-w-40 truncate\">{user.displayName}</Typography>}\n              {user && <Typography className=\"max-w-40 truncate\" variant=\"secondary\" type='label'>{user.primaryEmail}</Typography>}\n              {!user && <Typography>{t('Not signed in')}</Typography>}\n            </div>\n          </div>\n        </DropdownMenuLabel>\n        <DropdownMenuSeparator />\n        {user && <Item\n          text={t('Account settings')}\n          onClick={async () => await app.redirectToAccountSettings()}\n          icon={<CircleUser {...iconProps} />}\n        />}\n        {!user && <Item\n          text={t('Sign in')}\n          onClick={async () => await app.redirectToSignIn()}\n          icon={<LogIn {...iconProps} />}\n        />}\n        {!user && <Item\n          text={t('Sign up')}\n          onClick={async () => await app.redirectToSignUp()}\n          icon={<UserPlus {...iconProps}/> }\n        />}\n        {user && props.extraItems && props.extraItems.map((item, index) => (\n          <Item key={index} {...item} />\n        ))}\n        {props.colorModeToggle && (\n          <Item\n            text={t('Toggle theme')}\n            onClick={props.colorModeToggle}\n            icon={<SunMoon {...iconProps} />}\n          />\n        )}\n        {user && <Item\n          text={t('Sign out')}\n          onClick={() => user.signOut()}\n          icon={<LogOut {...iconProps} />}\n        />}\n      </DropdownMenuContent>\n    </DropdownMenu>\n  );\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../src/components/user-button.tsx"],"sourcesContent":["'use client';\n\nimport { runAsynchronouslyWithAlert } from \"@stackframe/stack-shared/dist/utils/promises\";\nimport { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, Skeleton, Typography } from \"@stackframe/stack-ui\";\nimport { CircleUser, LogIn, LogOut, SunMoon, UserPlus } from \"lucide-react\";\nimport React, { Suspense } from \"react\";\nimport { CurrentUser, useStackApp, useUser } from \"..\";\nimport { useTranslation } from \"../lib/translations\";\nimport { UserAvatar } from \"./elements/user-avatar\";\n\nfunction Item(props: { text: string, icon: React.ReactNode, onClick: () => void | Promise<void> }) {\n  return (\n    <DropdownMenuItem onClick={() => runAsynchronouslyWithAlert(props.onClick)}>\n      <div className=\"flex gap-2 items-center\">\n        {props.icon}\n        <Typography>{props.text}</Typography>\n      </div>\n    </DropdownMenuItem>\n  );\n}\n\ntype UserButtonProps = {\n  showUserInfo?: boolean,\n  colorModeToggle?: () => void | Promise<void>,\n  extraItems?: {\n    text: string,\n    icon: React.ReactNode,\n    onClick: () => void | Promise<void>,\n  }[],\n};\n\nexport function UserButton(props: UserButtonProps) {\n  return (\n    <Suspense fallback={<Skeleton className=\"h-[34px] w-[34px] rounded-full stack-scope\" />}>\n      <UserButtonInner {...props} />\n    </Suspense>\n  );\n}\n\nfunction UserButtonInner(props: UserButtonProps) {\n  const user = useUser();\n  return <UserButtonInnerInner {...props} user={user} />;\n}\n\n\nfunction UserButtonInnerInner(props: UserButtonProps & { user: CurrentUser | null }) {\n  const { t } = useTranslation();\n  const user = props.user;\n  const app = useStackApp();\n\n  const iconProps = { size: 20, className: 'h-4 w-4' };\n\n  return (\n    <DropdownMenu>\n      <DropdownMenuTrigger className=\"outline-none stack-scope\">\n        <div className=\"flex gap-2 items-center\">\n          <UserAvatar user={user} />\n          {user && props.showUserInfo &&\n            <div className=\"flex flex-col justify-center text-left\">\n              <Typography className=\"max-w-40 truncate\">{user.displayName}</Typography>\n              <Typography className=\"max-w-40 truncate\" variant=\"secondary\" type='label'>{user.primaryEmail}</Typography>\n            </div>\n          }\n        </div>\n      </DropdownMenuTrigger>\n      <DropdownMenuContent className=\"stack-scope\">\n        <DropdownMenuLabel>\n          <div className=\"flex gap-2 items-center\">\n            <UserAvatar user={user} />\n            <div>\n              {user && <Typography className=\"max-w-40 truncate\">{user.displayName}</Typography>}\n              {user && <Typography className=\"max-w-40 truncate\" variant=\"secondary\" type='label'>{user.primaryEmail}</Typography>}\n              {!user && <Typography>{t('Not signed in')}</Typography>}\n            </div>\n          </div>\n        </DropdownMenuLabel>\n        <DropdownMenuSeparator />\n        {user && <Item\n          text={t('Account settings')}\n          onClick={async () => await app.redirectToAccountSettings()}\n          icon={<CircleUser {...iconProps} />}\n        />}\n        {!user && <Item\n          text={t('Sign in')}\n          onClick={async () => await app.redirectToSignIn()}\n          icon={<LogIn {...iconProps} />}\n        />}\n        {!user && <Item\n          text={t('Sign up')}\n          onClick={async () => await app.redirectToSignUp()}\n          icon={<UserPlus {...iconProps}/> }\n        />}\n        {user && props.extraItems && props.extraItems.map((item, index) => (\n          <Item key={index} {...item} />\n        ))}\n        {props.colorModeToggle && (\n          <Item\n            text={t('Toggle theme')}\n            onClick={props.colorModeToggle}\n            icon={<SunMoon {...iconProps} />}\n          />\n        )}\n        {user && <Item\n          text={t('Sign out')}\n          onClick={() => user.signOut()}\n          icon={<LogOut {...iconProps} />}\n        />}\n      </DropdownMenuContent>\n    </DropdownMenu>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/components-page/auth-page.d.mts

@@ -1,6 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 
-declare function AuthPage(props: {
+type Props = {
     noPasswordRepeat?: boolean;
     firstTab?: 'magic-link' | 'password';
     fullPage?: boolean;
@@ -18,6 +18,7 @@ declare function AuthPage(props: {
             }[];
         };
     };
-}): react_jsx_runtime.JSX.Element;
+};
+declare function AuthPage(props: Props): react_jsx_runtime.JSX.Element;
 
 export { AuthPage };

package/dist/components-page/auth-page.d.ts

@@ -1,6 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 
-declare function AuthPage(props: {
+type Props = {
     noPasswordRepeat?: boolean;
     firstTab?: 'magic-link' | 'password';
     fullPage?: boolean;
@@ -18,6 +18,7 @@ declare function AuthPage(props: {
             }[];
         };
     };
-}): react_jsx_runtime.JSX.Element;
+};
+declare function AuthPage(props: Props): react_jsx_runtime.JSX.Element;
 
 export { AuthPage };

package/dist/components-page/auth-page.js

@@ -36,10 +36,24 @@ var import_separator_with_text = require("../components/elements/separator-with-
 var import_magic_link_sign_in = require("../components/magic-link-sign-in");
 var import_predefined_message_card = require("../components/message-cards/predefined-message-card");
 var import_oauth_button_group = require("../components/oauth-button-group");
-var import_translations = require("../lib/translations");
 var import_passkey_button = require("../components/passkey-button");
+var import_translations = require("../lib/translations");
 var import_jsx_runtime = require("react/jsx-runtime");
 function AuthPage(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react.Suspense, { fallback: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Fallback, { ...props }), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Inner, { ...props }) });
+}
+function Fallback(props) {
+  const { t } = (0, import_translations.useTranslation)();
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_maybe_full_page.MaybeFullPage, { fullPage: !!props.fullPage, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "stack-scope flex flex-col items-stretch", style: { maxWidth: "380px", flexBasis: "380px", padding: props.fullPage ? "1rem" : 0 }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "text-center mb-6 flex flex-col", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.Skeleton, { className: "h-9 w-2/3 self-center" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.Skeleton, { className: "h-3 w-16 mt-8" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.Skeleton, { className: "h-9 w-full mt-1" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.Skeleton, { className: "h-3 w-24 mt-2" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.Skeleton, { className: "h-9 w-full mt-1" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.Skeleton, { className: "h-9 w-full mt-6" })
+  ] }) }) });
+}
+function Inner(props) {
   const stackApp = (0, import__.useStackApp)();
   const user = (0, import__.useUser)();
   const projectFromHook = stackApp.useProject();

package/dist/components-page/auth-page.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components-page/auth-page.tsx"],"sourcesContent":["'use client';\n\nimport { runAsynchronously } from '@stackframe/stack-shared/dist/utils/promises';\nimport { StyledLink, Tabs, TabsContent, TabsList, TabsTrigger, Typography, cn } from '@stackframe/stack-ui';\nimport { useEffect } from 'react';\nimport { useStackApp, useUser } from '..';\nimport { CredentialSignIn } from '../components/credential-sign-in';\nimport { CredentialSignUp } from '../components/credential-sign-up';\nimport { MaybeFullPage } from '../components/elements/maybe-full-page';\nimport { SeparatorWithText } from '../components/elements/separator-with-text';\nimport { MagicLinkSignIn } from '../components/magic-link-sign-in';\nimport { PredefinedMessageCard } from '../components/message-cards/predefined-message-card';\nimport { OAuthButtonGroup } from '../components/oauth-button-group';\nimport { useTranslation } from '../lib/translations';\nimport { PasskeyButton } from '../components/passkey-button';\n\nexport function AuthPage(props: {\n  noPasswordRepeat?: boolean,\n  firstTab?: 'magic-link' | 'password',\n  fullPage?: boolean,\n  type: 'sign-in' | 'sign-up',\n  automaticRedirect?: boolean,\n  extraInfo?: React.ReactNode,\n  mockProject?: {\n    config: {\n      signUpEnabled: boolean,\n      credentialEnabled: boolean,\n      passkeyEnabled: boolean,\n      magicLinkEnabled: boolean,\n      oauthProviders: {\n        id: string,\n      }[],\n    },\n  },\n}) {\n  const stackApp = useStackApp();\n  const user = useUser();\n  const projectFromHook = stackApp.useProject();\n  const project = props.mockProject || projectFromHook;\n  const { t } = useTranslation();\n\n  useEffect(() => {\n    if (props.automaticRedirect) {\n      if (user && !props.mockProject) {\n        runAsynchronously(props.type === 'sign-in' ? stackApp.redirectToAfterSignIn() : stackApp.redirectToAfterSignUp());\n      }\n    }\n  }, [user, props.mockProject, stackApp, props.automaticRedirect]);\n\n  if (user && !props.mockProject) {\n    return <PredefinedMessageCard type='signedIn' fullPage={props.fullPage} />;\n  }\n\n  if (props.type === 'sign-up' && !project.config.signUpEnabled) {\n    return <PredefinedMessageCard type='signUpDisabled' fullPage={props.fullPage} />;\n  }\n\n  const enableSeparator = (project.config.credentialEnabled || project.config.magicLinkEnabled) && project.config.oauthProviders.length > 0;\n\n  return (\n    <MaybeFullPage fullPage={!!props.fullPage}>\n      <div className='stack-scope flex flex-col items-stretch' style={{ maxWidth: '380px', flexBasis: '380px', padding: props.fullPage ? '1rem' : 0 }}>\n        <div className=\"text-center mb-6\">\n          <Typography type='h2'>\n            {props.type === 'sign-in' ? t(\"Sign in to your account\") : t(\"Create a new account\")}\n          </Typography>\n          {props.type === 'sign-in' ? (\n            project.config.signUpEnabled && (\n              <Typography>\n                {t(\"Don't have an account?\")}{\" \"}\n                <StyledLink href={stackApp.urls.signUp} onClick={(e) => {\n                  runAsynchronously(stackApp.redirectToSignUp());\n                  e.preventDefault();\n                }}>{t(\"Sign up\")}</StyledLink>\n              </Typography>\n            )\n          ) : (\n            <Typography>\n              {t(\"Already have an account?\")}{\" \"}\n              <StyledLink href={stackApp.urls.signIn} onClick={(e) => {\n                runAsynchronously(stackApp.redirectToSignIn());\n                e.preventDefault();\n              }}>{t(\"Sign in\")}</StyledLink>\n            </Typography>\n          )}\n        </div>\n        <div className='gap-4 flex flex-col items-stretch stack-scope'>\n          <OAuthButtonGroup type={props.type} mockProject={props.mockProject} />\n          {project.config.passkeyEnabled && props.type === \"sign-in\" && <PasskeyButton type={props.type} />}\n        </div>\n\n        {enableSeparator && <SeparatorWithText text={t('Or continue with')} />}\n        {project.config.credentialEnabled && project.config.magicLinkEnabled ? (\n          <Tabs defaultValue={props.firstTab || 'magic-link'}>\n            <TabsList className={cn('w-full mb-2', {\n              'flex-row-reverse': props.firstTab === 'password'\n            })}>\n              <TabsTrigger value='magic-link' className='flex-1'>{t(\"Email\")}</TabsTrigger>\n              <TabsTrigger value='password' className='flex-1'>{t(\"Email & Password\")}</TabsTrigger>\n            </TabsList>\n            <TabsContent value='magic-link'>\n              <MagicLinkSignIn/>\n            </TabsContent>\n            <TabsContent value='password'>\n              {props.type === 'sign-up' ? <CredentialSignUp noPasswordRepeat={props.noPasswordRepeat} /> : <CredentialSignIn/>}\n            </TabsContent>\n          </Tabs>\n        ) : project.config.credentialEnabled ? (\n          props.type === 'sign-up' ? <CredentialSignUp noPasswordRepeat={props.noPasswordRepeat} /> : <CredentialSignIn/>\n        ) : project.config.magicLinkEnabled ? (\n          <MagicLinkSignIn/>\n        ) : project.config.oauthProviders.length === 0 ? <Typography variant={\"destructive\"} className=\"text-center\">{t(\"No authentication method enabled.\")}</Typography> : null}\n        {props.extraInfo && (\n          <div className='flex flex-col items-center text-center text-sm text-gray-500 mt-2'>\n            <div>{props.extraInfo}</div>\n          </div>\n        )}\n      </div>\n    </MaybeFullPage>\n  );\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../src/components-page/auth-page.tsx"],"sourcesContent":["'use client';\n\nimport { runAsynchronously } from '@stackframe/stack-shared/dist/utils/promises';\nimport { Skeleton, StyledLink, Tabs, TabsContent, TabsList, TabsTrigger, Typography, cn } from '@stackframe/stack-ui';\nimport { Suspense, useEffect } from 'react';\nimport { useStackApp, useUser } from '..';\nimport { CredentialSignIn } from '../components/credential-sign-in';\nimport { CredentialSignUp } from '../components/credential-sign-up';\nimport { MaybeFullPage } from '../components/elements/maybe-full-page';\nimport { SeparatorWithText } from '../components/elements/separator-with-text';\nimport { MagicLinkSignIn } from '../components/magic-link-sign-in';\nimport { PredefinedMessageCard } from '../components/message-cards/predefined-message-card';\nimport { OAuthButtonGroup } from '../components/oauth-button-group';\nimport { PasskeyButton } from '../components/passkey-button';\nimport { useTranslation } from '../lib/translations';\n\ntype Props = {\n  noPasswordRepeat?: boolean,\n  firstTab?: 'magic-link' | 'password',\n  fullPage?: boolean,\n  type: 'sign-in' | 'sign-up',\n  automaticRedirect?: boolean,\n  extraInfo?: React.ReactNode,\n  mockProject?: {\n    config: {\n      signUpEnabled: boolean,\n      credentialEnabled: boolean,\n      passkeyEnabled: boolean,\n      magicLinkEnabled: boolean,\n      oauthProviders: {\n        id: string,\n      }[],\n    },\n  },\n}\n\nexport function AuthPage(props: Props) {\n  return <Suspense fallback={<Fallback {...props} />}>\n    <Inner {...props} />\n  </Suspense>;\n}\n\nfunction Fallback(props: Props) {\n  const { t } = useTranslation();\n\n  return (\n    <MaybeFullPage fullPage={!!props.fullPage}>\n      <div className='stack-scope flex flex-col items-stretch' style={{ maxWidth: '380px', flexBasis: '380px', padding: props.fullPage ? '1rem' : 0 }}>\n        <div className=\"text-center mb-6 flex flex-col\">\n          <Skeleton className='h-9 w-2/3 self-center' />\n\n          <Skeleton className='h-3 w-16 mt-8' />\n          <Skeleton className='h-9 w-full mt-1' />\n\n          <Skeleton className='h-3 w-24 mt-2' />\n          <Skeleton className='h-9 w-full mt-1' />\n\n          <Skeleton className='h-9 w-full mt-6' />\n        </div>\n      </div>\n    </MaybeFullPage>\n  );\n}\n\nfunction Inner (props: Props) {\n  const stackApp = useStackApp();\n  const user = useUser();\n  const projectFromHook = stackApp.useProject();\n  const project = props.mockProject || projectFromHook;\n  const { t } = useTranslation();\n\n  useEffect(() => {\n    if (props.automaticRedirect) {\n      if (user && !props.mockProject) {\n        runAsynchronously(props.type === 'sign-in' ? stackApp.redirectToAfterSignIn() : stackApp.redirectToAfterSignUp());\n      }\n    }\n  }, [user, props.mockProject, stackApp, props.automaticRedirect]);\n\n  if (user && !props.mockProject) {\n    return <PredefinedMessageCard type='signedIn' fullPage={props.fullPage} />;\n  }\n\n  if (props.type === 'sign-up' && !project.config.signUpEnabled) {\n    return <PredefinedMessageCard type='signUpDisabled' fullPage={props.fullPage} />;\n  }\n\n  const enableSeparator = (project.config.credentialEnabled || project.config.magicLinkEnabled) && project.config.oauthProviders.length > 0;\n\n  return (\n    <MaybeFullPage fullPage={!!props.fullPage}>\n      <div className='stack-scope flex flex-col items-stretch' style={{ maxWidth: '380px', flexBasis: '380px', padding: props.fullPage ? '1rem' : 0 }}>\n        <div className=\"text-center mb-6\">\n          <Typography type='h2'>\n            {props.type === 'sign-in' ? t(\"Sign in to your account\") : t(\"Create a new account\")}\n          </Typography>\n          {props.type === 'sign-in' ? (\n            project.config.signUpEnabled && (\n              <Typography>\n                {t(\"Don't have an account?\")}{\" \"}\n                <StyledLink href={stackApp.urls.signUp} onClick={(e) => {\n                  runAsynchronously(stackApp.redirectToSignUp());\n                  e.preventDefault();\n                }}>{t(\"Sign up\")}</StyledLink>\n              </Typography>\n            )\n          ) : (\n            <Typography>\n              {t(\"Already have an account?\")}{\" \"}\n              <StyledLink href={stackApp.urls.signIn} onClick={(e) => {\n                runAsynchronously(stackApp.redirectToSignIn());\n                e.preventDefault();\n              }}>{t(\"Sign in\")}</StyledLink>\n            </Typography>\n          )}\n        </div>\n        <div className='gap-4 flex flex-col items-stretch stack-scope'>\n          <OAuthButtonGroup type={props.type} mockProject={props.mockProject} />\n          {project.config.passkeyEnabled && props.type === \"sign-in\" && <PasskeyButton type={props.type} />}\n        </div>\n\n        {enableSeparator && <SeparatorWithText text={t('Or continue with')} />}\n        {project.config.credentialEnabled && project.config.magicLinkEnabled ? (\n          <Tabs defaultValue={props.firstTab || 'magic-link'}>\n            <TabsList className={cn('w-full mb-2', {\n              'flex-row-reverse': props.firstTab === 'password'\n            })}>\n              <TabsTrigger value='magic-link' className='flex-1'>{t(\"Email\")}</TabsTrigger>\n              <TabsTrigger value='password' className='flex-1'>{t(\"Email & Password\")}</TabsTrigger>\n            </TabsList>\n            <TabsContent value='magic-link'>\n              <MagicLinkSignIn/>\n            </TabsContent>\n            <TabsContent value='password'>\n              {props.type === 'sign-up' ? <CredentialSignUp noPasswordRepeat={props.noPasswordRepeat} /> : <CredentialSignIn/>}\n            </TabsContent>\n          </Tabs>\n        ) : project.config.credentialEnabled ? (\n          props.type === 'sign-up' ? <CredentialSignUp noPasswordRepeat={props.noPasswordRepeat} /> : <CredentialSignIn/>\n        ) : project.config.magicLinkEnabled ? (\n          <MagicLinkSignIn/>\n        ) : project.config.oauthProviders.length === 0 ? <Typography variant={\"destructive\"} className=\"text-center\">{t(\"No authentication method enabled.\")}</Typography> : null}\n        {props.extraInfo && (\n          <div className='flex flex-col items-center text-center text-sm text-gray-500 mt-2'>\n            <div>{props.extraInfo}</div>\n          </div>\n        )}\n      </div>\n    </MaybeFullPage>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/components-page/email-verification.js

@@ -38,34 +38,60 @@ module.exports = __toCommonJS(email_verification_exports);
 var import_react = __toESM(require("react"));
 var import__ = require("..");
 var import_message_card = require("../components/message-cards/message-card");
-var import_predefined_message_card = require("../components/message-cards/predefined-message-card");
 var import_stack_shared = require("@stackframe/stack-shared");
-var import_caches = require("@stackframe/stack-shared/dist/utils/caches");
 var import_translations = require("../lib/translations");
+var import_errors = require("@stackframe/stack-shared/dist/utils/errors");
 var import_jsx_runtime = require("react/jsx-runtime");
-var cacheVerifyEmail = (0, import_caches.cacheFunction)(async (stackApp, code) => {
-  return await stackApp.verifyEmail(code);
-});
 function EmailVerification(props) {
   const { t } = (0, import_translations.useTranslation)();
   const stackApp = (0, import__.useStackApp)();
+  const user = (0, import__.useUser)();
+  const [result, setResult] = import_react.default.useState(null);
   const invalidJsx = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_message_card.MessageCard, { title: t("Invalid Verification Link"), fullPage: !!props.fullPage, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { children: t("Please check if you have the correct link. If you continue to have issues, please contact support.") }) });
   const expiredJsx = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_message_card.MessageCard, { title: t("Expired Verification Link"), fullPage: !!props.fullPage, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { children: t("Your email verification link has expired. Please request a new verification link from your account settings.") }) });
   if (!props.searchParams?.code) {
     return invalidJsx;
   }
-  const result = import_react.default.use(cacheVerifyEmail(stackApp, props.searchParams.code));
-  if (result.status === "error") {
-    if (result.error instanceof import_stack_shared.KnownErrors.VerificationCodeNotFound) {
-      return invalidJsx;
-    } else if (result.error instanceof import_stack_shared.KnownErrors.VerificationCodeExpired) {
-      return expiredJsx;
-    } else if (result.error instanceof import_stack_shared.KnownErrors.VerificationCodeAlreadyUsed) {
-    } else {
-      throw result.error;
+  if (!result) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_message_card.MessageCard,
+      {
+        title: t("Do you want to verify your email?"),
+        fullPage: !!props.fullPage,
+        primaryButtonText: t("Verify"),
+        primaryAction: async () => {
+          const result2 = await stackApp.verifyEmail(props.searchParams?.code || (0, import_errors.throwErr)("No verification code provided"));
+          setResult(result2);
+        },
+        secondaryButtonText: t("Cancel"),
+        secondaryAction: async () => {
+          await stackApp.redirectToHome();
+        }
+      }
+    );
+  } else {
+    if (result.status === "error") {
+      if (result.error instanceof import_stack_shared.KnownErrors.VerificationCodeNotFound) {
+        return invalidJsx;
+      } else if (result.error instanceof import_stack_shared.KnownErrors.VerificationCodeExpired) {
+        return expiredJsx;
+      } else if (result.error instanceof import_stack_shared.KnownErrors.VerificationCodeAlreadyUsed) {
+      } else {
+        throw result.error;
+      }
     }
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_message_card.MessageCard,
+      {
+        title: t("You email has been verified!"),
+        fullPage: !!props.fullPage,
+        primaryButtonText: t("Go to home"),
+        primaryAction: async () => {
+          await stackApp.redirectToHome();
+        }
+      }
+    );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_predefined_message_card.PredefinedMessageCard, { type: "emailVerified", fullPage: !!props.fullPage });
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {

package/dist/components-page/email-verification.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components-page/email-verification.tsx"],"sourcesContent":["'use client';\n\nimport React from \"react\";\nimport { StackClientApp, useStackApp } from \"..\";\nimport { MessageCard } from \"../components/message-cards/message-card\";\nimport { PredefinedMessageCard } from \"../components/message-cards/predefined-message-card\";\nimport { KnownErrors } from \"@stackframe/stack-shared\";\nimport { cacheFunction } from \"@stackframe/stack-shared/dist/utils/caches\";\nimport { useTranslation } from \"../lib/translations\";\n\nconst cacheVerifyEmail = cacheFunction(async (stackApp: StackClientApp<true>, code: string) => {\n  return await stackApp.verifyEmail(code);\n});\n\nexport function EmailVerification(props: {\n  searchParams?: Record<string, string>,\n  fullPage?: boolean,\n}) {\n  const { t } = useTranslation();\n  const stackApp = useStackApp();\n\n  const invalidJsx = (\n    <MessageCard title={t(\"Invalid Verification Link\")} fullPage={!!props.fullPage}>\n      <p>{t(\"Please check if you have the correct link. If you continue to have issues, please contact support.\")}</p>\n    </MessageCard>\n  );\n\n  const expiredJsx = (\n    <MessageCard title={t(\"Expired Verification Link\")} fullPage={!!props.fullPage}>\n      <p>{t(\"Your email verification link has expired. Please request a new verification link from your account settings.\")}</p>\n    </MessageCard>\n  );\n\n  if (!props.searchParams?.code) {\n    return invalidJsx;\n  }\n\n  const result = React.use(cacheVerifyEmail(stackApp, props.searchParams.code));\n\n  if (result.status === 'error') {\n    if (result.error instanceof KnownErrors.VerificationCodeNotFound) {\n      return invalidJsx;\n    } else if (result.error instanceof KnownErrors.VerificationCodeExpired) {\n      return expiredJsx;\n    } else if (result.error instanceof KnownErrors.VerificationCodeAlreadyUsed) {\n      // everything fine, continue\n    } else {\n      throw result.error;\n    }\n  }\n\n  return <PredefinedMessageCard type='emailVerified' fullPage={!!props.fullPage} />;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,mBAAkB;AAClB,eAA4C;AAC5C,0BAA4B;AAC5B,qCAAsC;AACtC,0BAA4B;AAC5B,oBAA8B;AAC9B,0BAA+B;AAezB;AAbN,IAAM,uBAAmB,6BAAc,OAAO,UAAgC,SAAiB;AAC7F,SAAO,MAAM,SAAS,YAAY,IAAI;AACxC,CAAC;AAEM,SAAS,kBAAkB,OAG/B;AACD,QAAM,EAAE,EAAE,QAAI,oCAAe;AAC7B,QAAM,eAAW,sBAAY;AAE7B,QAAM,aACJ,4CAAC,mCAAY,OAAO,EAAE,2BAA2B,GAAG,UAAU,CAAC,CAAC,MAAM,UACpE,sDAAC,OAAG,YAAE,oGAAoG,GAAE,GAC9G;AAGF,QAAM,aACJ,4CAAC,mCAAY,OAAO,EAAE,2BAA2B,GAAG,UAAU,CAAC,CAAC,MAAM,UACpE,sDAAC,OAAG,YAAE,8GAA8G,GAAE,GACxH;AAGF,MAAI,CAAC,MAAM,cAAc,MAAM;AAC7B,WAAO;AAAA,EACT;AAEA,QAAM,SAAS,aAAAA,QAAM,IAAI,iBAAiB,UAAU,MAAM,aAAa,IAAI,CAAC;AAE5E,MAAI,OAAO,WAAW,SAAS;AAC7B,QAAI,OAAO,iBAAiB,gCAAY,0BAA0B;AAChE,aAAO;AAAA,IACT,WAAW,OAAO,iBAAiB,gCAAY,yBAAyB;AACtE,aAAO;AAAA,IACT,WAAW,OAAO,iBAAiB,gCAAY,6BAA6B;AAAA,IAE5E,OAAO;AACL,YAAM,OAAO;AAAA,IACf;AAAA,EACF;AAEA,SAAO,4CAAC,wDAAsB,MAAK,iBAAgB,UAAU,CAAC,CAAC,MAAM,UAAU;AACjF;","names":["React"]}
+{"version":3,"sources":["../../src/components-page/email-verification.tsx"],"sourcesContent":["'use client';\n\nimport React from \"react\";\nimport { StackClientApp, useStackApp, useUser } from \"..\";\nimport { MessageCard } from \"../components/message-cards/message-card\";\nimport { PredefinedMessageCard } from \"../components/message-cards/predefined-message-card\";\nimport { KnownErrors } from \"@stackframe/stack-shared\";\nimport { cacheFunction } from \"@stackframe/stack-shared/dist/utils/caches\";\nimport { useTranslation } from \"../lib/translations\";\nimport { throwErr } from \"@stackframe/stack-shared/dist/utils/errors\";\n\nexport function EmailVerification(props: {\n  searchParams?: Record<string, string>,\n  fullPage?: boolean,\n}) {\n  const { t } = useTranslation();\n  const stackApp = useStackApp();\n  const user = useUser();\n  const [result, setResult] = React.useState<Awaited<ReturnType<typeof stackApp.verifyEmail>> | null>(null);\n\n  const invalidJsx = (\n    <MessageCard title={t(\"Invalid Verification Link\")} fullPage={!!props.fullPage}>\n      <p>{t(\"Please check if you have the correct link. If you continue to have issues, please contact support.\")}</p>\n    </MessageCard>\n  );\n\n  const expiredJsx = (\n    <MessageCard title={t(\"Expired Verification Link\")} fullPage={!!props.fullPage}>\n      <p>{t(\"Your email verification link has expired. Please request a new verification link from your account settings.\")}</p>\n    </MessageCard>\n  );\n\n  if (!props.searchParams?.code) {\n    return invalidJsx;\n  }\n\n  if (!result) {\n    return <MessageCard\n      title={t(\"Do you want to verify your email?\")}\n      fullPage={!!props.fullPage}\n      primaryButtonText={t(\"Verify\")}\n      primaryAction={async () => {\n        const result = await stackApp.verifyEmail(props.searchParams?.code || throwErr(\"No verification code provided\"));\n        setResult(result);\n      }}\n      secondaryButtonText={t(\"Cancel\")}\n      secondaryAction={async () => {\n        await stackApp.redirectToHome();\n      }}\n    />;\n  } else {\n    if (result.status === 'error') {\n      if (result.error instanceof KnownErrors.VerificationCodeNotFound) {\n        return invalidJsx;\n      } else if (result.error instanceof KnownErrors.VerificationCodeExpired) {\n        return expiredJsx;\n      } else if (result.error instanceof KnownErrors.VerificationCodeAlreadyUsed) {\n        // everything fine, continue\n      } else {\n        throw result.error;\n      }\n    }\n\n    return <MessageCard\n      title={t(\"You email has been verified!\")}\n      fullPage={!!props.fullPage}\n      primaryButtonText={t(\"Go to home\")}\n      primaryAction={async () => {\n        await stackApp.redirectToHome();\n      }}\n    />;\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,mBAAkB;AAClB,eAAqD;AACrD,0BAA4B;AAE5B,0BAA4B;AAE5B,0BAA+B;AAC/B,oBAAyB;AAanB;AAXC,SAAS,kBAAkB,OAG/B;AACD,QAAM,EAAE,EAAE,QAAI,oCAAe;AAC7B,QAAM,eAAW,sBAAY;AAC7B,QAAM,WAAO,kBAAQ;AACrB,QAAM,CAAC,QAAQ,SAAS,IAAI,aAAAA,QAAM,SAAkE,IAAI;AAExG,QAAM,aACJ,4CAAC,mCAAY,OAAO,EAAE,2BAA2B,GAAG,UAAU,CAAC,CAAC,MAAM,UACpE,sDAAC,OAAG,YAAE,oGAAoG,GAAE,GAC9G;AAGF,QAAM,aACJ,4CAAC,mCAAY,OAAO,EAAE,2BAA2B,GAAG,UAAU,CAAC,CAAC,MAAM,UACpE,sDAAC,OAAG,YAAE,8GAA8G,GAAE,GACxH;AAGF,MAAI,CAAC,MAAM,cAAc,MAAM;AAC7B,WAAO;AAAA,EACT;AAEA,MAAI,CAAC,QAAQ;AACX,WAAO;AAAA,MAAC;AAAA;AAAA,QACN,OAAO,EAAE,mCAAmC;AAAA,QAC5C,UAAU,CAAC,CAAC,MAAM;AAAA,QAClB,mBAAmB,EAAE,QAAQ;AAAA,QAC7B,eAAe,YAAY;AACzB,gBAAMC,UAAS,MAAM,SAAS,YAAY,MAAM,cAAc,YAAQ,wBAAS,+BAA+B,CAAC;AAC/G,oBAAUA,OAAM;AAAA,QAClB;AAAA,QACA,qBAAqB,EAAE,QAAQ;AAAA,QAC/B,iBAAiB,YAAY;AAC3B,gBAAM,SAAS,eAAe;AAAA,QAChC;AAAA;AAAA,IACF;AAAA,EACF,OAAO;AACL,QAAI,OAAO,WAAW,SAAS;AAC7B,UAAI,OAAO,iBAAiB,gCAAY,0BAA0B;AAChE,eAAO;AAAA,MACT,WAAW,OAAO,iBAAiB,gCAAY,yBAAyB;AACtE,eAAO;AAAA,MACT,WAAW,OAAO,iBAAiB,gCAAY,6BAA6B;AAAA,MAE5E,OAAO;AACL,cAAM,OAAO;AAAA,MACf;AAAA,IACF;AAEA,WAAO;AAAA,MAAC;AAAA;AAAA,QACN,OAAO,EAAE,8BAA8B;AAAA,QACvC,UAAU,CAAC,CAAC,MAAM;AAAA,QAClB,mBAAmB,EAAE,YAAY;AAAA,QACjC,eAAe,YAAY;AACzB,gBAAM,SAAS,eAAe;AAAA,QAChC;AAAA;AAAA,IACF;AAAA,EACF;AACF;","names":["React","result"]}

package/dist/components-page/magic-link-callback.d.mts

@@ -3,6 +3,6 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 declare function MagicLinkCallback(props: {
     searchParams?: Record<string, string>;
     fullPage?: boolean;
-}): react_jsx_runtime.JSX.Element | undefined;
+}): react_jsx_runtime.JSX.Element;
 
 export { MagicLinkCallback };

package/dist/components-page/magic-link-callback.d.ts

@@ -3,6 +3,6 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 declare function MagicLinkCallback(props: {
     searchParams?: Record<string, string>;
     fullPage?: boolean;
-}): react_jsx_runtime.JSX.Element | undefined;
+}): react_jsx_runtime.JSX.Element;
 
 export { MagicLinkCallback };

package/dist/components-page/magic-link-callback.js

@@ -40,9 +40,9 @@ var import__ = require("..");
 var import_message_card = require("../components/message-cards/message-card");
 var import_predefined_message_card = require("../components/message-cards/predefined-message-card");
 var import_stack_shared = require("@stackframe/stack-shared");
-var import_promises = require("@stackframe/stack-shared/dist/utils/promises");
 var import_caches = require("@stackframe/stack-shared/dist/utils/caches");
 var import_translations = require("../lib/translations");
+var import_errors = require("@stackframe/stack-shared/dist/utils/errors");
 var import_jsx_runtime = require("react/jsx-runtime");
 var cacheSignInWithMagicLink = (0, import_caches.cacheFunction)(async (stackApp, code) => {
   return await stackApp.signInWithMagicLink(code);
@@ -51,6 +51,7 @@ function MagicLinkCallback(props) {
   const { t } = (0, import_translations.useTranslation)();
   const stackApp = (0, import__.useStackApp)();
   const user = (0, import__.useUser)();
+  const [result, setResult] = import_react.default.useState(null);
   if (user) {
     return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_predefined_message_card.PredefinedMessageCard, { type: "signedIn", fullPage: !!props.fullPage });
   }
@@ -60,19 +61,47 @@ function MagicLinkCallback(props) {
   if (!props.searchParams?.code) {
     return invalidJsx;
   }
-  const result = import_react.default.use(cacheSignInWithMagicLink(stackApp, props.searchParams.code));
-  if (result.status === "error") {
-    if (result.error instanceof import_stack_shared.KnownErrors.VerificationCodeNotFound) {
-      return invalidJsx;
-    } else if (result.error instanceof import_stack_shared.KnownErrors.VerificationCodeExpired) {
-      return expiredJsx;
-    } else if (result.error instanceof import_stack_shared.KnownErrors.VerificationCodeAlreadyUsed) {
-      return alreadyUsedJsx;
-    } else {
-      throw result.error;
+  if (!result) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_message_card.MessageCard,
+      {
+        title: t("Do you want to sign in?"),
+        fullPage: !!props.fullPage,
+        primaryButtonText: t("Sign in"),
+        primaryAction: async () => {
+          const result2 = await stackApp.signInWithMagicLink(props.searchParams?.code || (0, import_errors.throwErr)("No magic link provided"));
+          setResult(result2);
+        },
+        secondaryButtonText: t("Cancel"),
+        secondaryAction: async () => {
+          await stackApp.redirectToHome();
+        }
+      }
+    );
+  } else {
+    if (result.status === "error") {
+      if (result.error instanceof import_stack_shared.KnownErrors.VerificationCodeNotFound) {
+        return invalidJsx;
+      } else if (result.error instanceof import_stack_shared.KnownErrors.VerificationCodeExpired) {
+        return expiredJsx;
+      } else if (result.error instanceof import_stack_shared.KnownErrors.VerificationCodeAlreadyUsed) {
+        return alreadyUsedJsx;
+      } else {
+        throw result.error;
+      }
     }
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_message_card.MessageCard,
+      {
+        title: t("Signed in successfully!"),
+        fullPage: !!props.fullPage,
+        primaryButtonText: t("Go to home"),
+        primaryAction: async () => {
+          await stackApp.redirectToHome();
+        }
+      }
+    );
   }
-  import_react.default.use((0, import_promises.neverResolve)());
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {

package/dist/components-page/magic-link-callback.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components-page/magic-link-callback.tsx"],"sourcesContent":["'use client';\n\nimport React from \"react\";\nimport { StackClientApp, useStackApp, useUser } from \"..\";\nimport { MessageCard } from \"../components/message-cards/message-card\";\nimport { PredefinedMessageCard } from \"../components/message-cards/predefined-message-card\";\nimport { KnownErrors } from \"@stackframe/stack-shared\";\nimport { neverResolve } from \"@stackframe/stack-shared/dist/utils/promises\";\nimport { cacheFunction } from \"@stackframe/stack-shared/dist/utils/caches\";\nimport { useTranslation } from \"../lib/translations\";\n\nconst cacheSignInWithMagicLink = cacheFunction(async (stackApp: StackClientApp<true>, code: string) => {\n  return await stackApp.signInWithMagicLink(code);\n});\n\nexport function MagicLinkCallback(props: {\n  searchParams?: Record<string, string>,\n  fullPage?: boolean,\n}) {\n  const { t } = useTranslation();\n  const stackApp = useStackApp();\n  const user = useUser();\n\n  if (user) {\n    return <PredefinedMessageCard type='signedIn' fullPage={!!props.fullPage} />;\n  }\n\n  const invalidJsx = (\n    <MessageCard title={t(\"Invalid Magic Link\")} fullPage={!!props.fullPage}>\n      <p>{t(\"Please check if you have the correct link. If you continue to have issues, please contact support.\")}</p>\n    </MessageCard>\n  );\n\n  const expiredJsx = (\n    <MessageCard title={t(\"Expired Magic Link\")} fullPage={!!props.fullPage}>\n      <p>{t(\"Your magic link has expired. Please request a new magic link if you need to sign-in.\")}</p>\n    </MessageCard>\n  );\n\n  const alreadyUsedJsx = (\n    <MessageCard title={t(\"Magic Link Already Used\")} fullPage={!!props.fullPage}>\n      <p>{t(\"The magic link has already been used. The link can only be used once. Please request a new magic link if you need to sign-in again.\")}</p>\n    </MessageCard>\n  );\n\n  if (!props.searchParams?.code) {\n    return invalidJsx;\n  }\n\n  const result = React.use(cacheSignInWithMagicLink(stackApp, props.searchParams.code));\n  if (result.status === 'error') {\n    if (result.error instanceof KnownErrors.VerificationCodeNotFound) {\n      return invalidJsx;\n    } else if (result.error instanceof KnownErrors.VerificationCodeExpired) {\n      return expiredJsx;\n    } else if (result.error instanceof KnownErrors.VerificationCodeAlreadyUsed) {\n      return alreadyUsedJsx;\n    } else {\n      throw result.error;\n    }\n  }\n\n  React.use(neverResolve());\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,mBAAkB;AAClB,eAAqD;AACrD,0BAA4B;AAC5B,qCAAsC;AACtC,0BAA4B;AAC5B,sBAA6B;AAC7B,oBAA8B;AAC9B,0BAA+B;AAepB;AAbX,IAAM,+BAA2B,6BAAc,OAAO,UAAgC,SAAiB;AACrG,SAAO,MAAM,SAAS,oBAAoB,IAAI;AAChD,CAAC;AAEM,SAAS,kBAAkB,OAG/B;AACD,QAAM,EAAE,EAAE,QAAI,oCAAe;AAC7B,QAAM,eAAW,sBAAY;AAC7B,QAAM,WAAO,kBAAQ;AAErB,MAAI,MAAM;AACR,WAAO,4CAAC,wDAAsB,MAAK,YAAW,UAAU,CAAC,CAAC,MAAM,UAAU;AAAA,EAC5E;AAEA,QAAM,aACJ,4CAAC,mCAAY,OAAO,EAAE,oBAAoB,GAAG,UAAU,CAAC,CAAC,MAAM,UAC7D,sDAAC,OAAG,YAAE,oGAAoG,GAAE,GAC9G;AAGF,QAAM,aACJ,4CAAC,mCAAY,OAAO,EAAE,oBAAoB,GAAG,UAAU,CAAC,CAAC,MAAM,UAC7D,sDAAC,OAAG,YAAE,sFAAsF,GAAE,GAChG;AAGF,QAAM,iBACJ,4CAAC,mCAAY,OAAO,EAAE,yBAAyB,GAAG,UAAU,CAAC,CAAC,MAAM,UAClE,sDAAC,OAAG,YAAE,qIAAqI,GAAE,GAC/I;AAGF,MAAI,CAAC,MAAM,cAAc,MAAM;AAC7B,WAAO;AAAA,EACT;AAEA,QAAM,SAAS,aAAAA,QAAM,IAAI,yBAAyB,UAAU,MAAM,aAAa,IAAI,CAAC;AACpF,MAAI,OAAO,WAAW,SAAS;AAC7B,QAAI,OAAO,iBAAiB,gCAAY,0BAA0B;AAChE,aAAO;AAAA,IACT,WAAW,OAAO,iBAAiB,gCAAY,yBAAyB;AACtE,aAAO;AAAA,IACT,WAAW,OAAO,iBAAiB,gCAAY,6BAA6B;AAC1E,aAAO;AAAA,IACT,OAAO;AACL,YAAM,OAAO;AAAA,IACf;AAAA,EACF;AAEA,eAAAA,QAAM,QAAI,8BAAa,CAAC;AAC1B;","names":["React"]}
+{"version":3,"sources":["../../src/components-page/magic-link-callback.tsx"],"sourcesContent":["'use client';\n\nimport React from \"react\";\nimport { StackClientApp, useStackApp, useUser } from \"..\";\nimport { MessageCard } from \"../components/message-cards/message-card\";\nimport { PredefinedMessageCard } from \"../components/message-cards/predefined-message-card\";\nimport { KnownErrors } from \"@stackframe/stack-shared\";\nimport { neverResolve } from \"@stackframe/stack-shared/dist/utils/promises\";\nimport { cacheFunction } from \"@stackframe/stack-shared/dist/utils/caches\";\nimport { useTranslation } from \"../lib/translations\";\nimport { throwErr } from \"@stackframe/stack-shared/dist/utils/errors\";\n\nconst cacheSignInWithMagicLink = cacheFunction(async (stackApp: StackClientApp<true>, code: string) => {\n  return await stackApp.signInWithMagicLink(code);\n});\n\nexport function MagicLinkCallback(props: {\n  searchParams?: Record<string, string>,\n  fullPage?: boolean,\n}) {\n  const { t } = useTranslation();\n  const stackApp = useStackApp();\n  const user = useUser();\n  const [result, setResult] = React.useState<Awaited<ReturnType<typeof stackApp.signInWithMagicLink>> | null>(null);\n\n  if (user) {\n    return <PredefinedMessageCard type='signedIn' fullPage={!!props.fullPage} />;\n  }\n\n  const invalidJsx = (\n    <MessageCard title={t(\"Invalid Magic Link\")} fullPage={!!props.fullPage}>\n      <p>{t(\"Please check if you have the correct link. If you continue to have issues, please contact support.\")}</p>\n    </MessageCard>\n  );\n\n  const expiredJsx = (\n    <MessageCard title={t(\"Expired Magic Link\")} fullPage={!!props.fullPage}>\n      <p>{t(\"Your magic link has expired. Please request a new magic link if you need to sign-in.\")}</p>\n    </MessageCard>\n  );\n\n  const alreadyUsedJsx = (\n    <MessageCard title={t(\"Magic Link Already Used\")} fullPage={!!props.fullPage}>\n      <p>{t(\"The magic link has already been used. The link can only be used once. Please request a new magic link if you need to sign-in again.\")}</p>\n    </MessageCard>\n  );\n\n  if (!props.searchParams?.code) {\n    return invalidJsx;\n  }\n\n  if (!result) {\n    return <MessageCard\n      title={t(\"Do you want to sign in?\")}\n      fullPage={!!props.fullPage}\n      primaryButtonText={t(\"Sign in\")}\n      primaryAction={async () => {\n        const result = await stackApp.signInWithMagicLink(props.searchParams?.code || throwErr(\"No magic link provided\"));\n        setResult(result);\n      }}\n      secondaryButtonText={t(\"Cancel\")}\n      secondaryAction={async () => {\n        await stackApp.redirectToHome();\n      }}\n    />;\n  } else {\n    if (result.status === 'error') {\n      if (result.error instanceof KnownErrors.VerificationCodeNotFound) {\n        return invalidJsx;\n      } else if (result.error instanceof KnownErrors.VerificationCodeExpired) {\n        return expiredJsx;\n      } else if (result.error instanceof KnownErrors.VerificationCodeAlreadyUsed) {\n        return alreadyUsedJsx;\n      } else {\n        throw result.error;\n      }\n    }\n\n    return <MessageCard\n      title={t(\"Signed in successfully!\")}\n      fullPage={!!props.fullPage}\n      primaryButtonText={t(\"Go to home\")}\n      primaryAction={async () => {\n        await stackApp.redirectToHome();\n      }}\n    />;\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,mBAAkB;AAClB,eAAqD;AACrD,0BAA4B;AAC5B,qCAAsC;AACtC,0BAA4B;AAE5B,oBAA8B;AAC9B,0BAA+B;AAC/B,oBAAyB;AAgBd;AAdX,IAAM,+BAA2B,6BAAc,OAAO,UAAgC,SAAiB;AACrG,SAAO,MAAM,SAAS,oBAAoB,IAAI;AAChD,CAAC;AAEM,SAAS,kBAAkB,OAG/B;AACD,QAAM,EAAE,EAAE,QAAI,oCAAe;AAC7B,QAAM,eAAW,sBAAY;AAC7B,QAAM,WAAO,kBAAQ;AACrB,QAAM,CAAC,QAAQ,SAAS,IAAI,aAAAA,QAAM,SAA0E,IAAI;AAEhH,MAAI,MAAM;AACR,WAAO,4CAAC,wDAAsB,MAAK,YAAW,UAAU,CAAC,CAAC,MAAM,UAAU;AAAA,EAC5E;AAEA,QAAM,aACJ,4CAAC,mCAAY,OAAO,EAAE,oBAAoB,GAAG,UAAU,CAAC,CAAC,MAAM,UAC7D,sDAAC,OAAG,YAAE,oGAAoG,GAAE,GAC9G;AAGF,QAAM,aACJ,4CAAC,mCAAY,OAAO,EAAE,oBAAoB,GAAG,UAAU,CAAC,CAAC,MAAM,UAC7D,sDAAC,OAAG,YAAE,sFAAsF,GAAE,GAChG;AAGF,QAAM,iBACJ,4CAAC,mCAAY,OAAO,EAAE,yBAAyB,GAAG,UAAU,CAAC,CAAC,MAAM,UAClE,sDAAC,OAAG,YAAE,qIAAqI,GAAE,GAC/I;AAGF,MAAI,CAAC,MAAM,cAAc,MAAM;AAC7B,WAAO;AAAA,EACT;AAEA,MAAI,CAAC,QAAQ;AACX,WAAO;AAAA,MAAC;AAAA;AAAA,QACN,OAAO,EAAE,yBAAyB;AAAA,QAClC,UAAU,CAAC,CAAC,MAAM;AAAA,QAClB,mBAAmB,EAAE,SAAS;AAAA,QAC9B,eAAe,YAAY;AACzB,gBAAMC,UAAS,MAAM,SAAS,oBAAoB,MAAM,cAAc,YAAQ,wBAAS,wBAAwB,CAAC;AAChH,oBAAUA,OAAM;AAAA,QAClB;AAAA,QACA,qBAAqB,EAAE,QAAQ;AAAA,QAC/B,iBAAiB,YAAY;AAC3B,gBAAM,SAAS,eAAe;AAAA,QAChC;AAAA;AAAA,IACF;AAAA,EACF,OAAO;AACL,QAAI,OAAO,WAAW,SAAS;AAC7B,UAAI,OAAO,iBAAiB,gCAAY,0BAA0B;AAChE,eAAO;AAAA,MACT,WAAW,OAAO,iBAAiB,gCAAY,yBAAyB;AACtE,eAAO;AAAA,MACT,WAAW,OAAO,iBAAiB,gCAAY,6BAA6B;AAC1E,eAAO;AAAA,MACT,OAAO;AACL,cAAM,OAAO;AAAA,MACf;AAAA,IACF;AAEA,WAAO;AAAA,MAAC;AAAA;AAAA,QACN,OAAO,EAAE,yBAAyB;AAAA,QAClC,UAAU,CAAC,CAAC,MAAM;AAAA,QAClB,mBAAmB,EAAE,YAAY;AAAA,QACjC,eAAe,YAAY;AACzB,gBAAM,SAAS,eAAe;AAAA,QAChC;AAAA;AAAA,IACF;AAAA,EACF;AACF;","names":["React","result"]}