@stackframe/stack 2.8.11 → 2.8.16

package/CHANGELOG.md

@@ -1,5 +1,53 @@
 # @stackframe/stack
 
+## 2.8.16
+
+### Patch Changes
+
+- Various changes
+- Updated dependencies
+  - @stackframe/stack-shared@2.8.16
+  - @stackframe/stack-ui@2.8.16
+  - @stackframe/stack-sc@2.8.16
+
+## 2.8.15
+
+### Patch Changes
+
+- @stackframe/stack-sc@2.8.15
+- @stackframe/stack-shared@2.8.15
+- @stackframe/stack-ui@2.8.15
+
+## 2.8.14
+
+### Patch Changes
+
+- Various changes
+- Updated dependencies
+  - @stackframe/stack-shared@2.8.14
+  - @stackframe/stack-ui@2.8.14
+  - @stackframe/stack-sc@2.8.14
+
+## 2.8.13
+
+### Patch Changes
+
+- Various changes
+- Updated dependencies
+  - @stackframe/stack-shared@2.8.13
+  - @stackframe/stack-sc@2.8.13
+  - @stackframe/stack-ui@2.8.13
+
+## 2.8.12
+
+### Patch Changes
+
+- Various changes
+- Updated dependencies
+  - @stackframe/stack-shared@2.8.12
+  - @stackframe/stack-ui@2.8.12
+  - @stackframe/stack-sc@2.8.12
+
 ## 2.8.11
 
 ### Patch Changes

package/dist/components/api-key-dialogs.js

@@ -35,9 +35,9 @@ var import_promises = require("@stackframe/stack-shared/dist/utils/promises");
 var import_stack_ui = require("@stackframe/stack-ui");
 var import_react = require("react");
 var import_react_hook_form = require("react-hook-form");
-var import__ = require("..");
-var import_form_warning = require("../components/elements/form-warning");
-var import_translations = require("../lib/translations");
+var import__ = require("../index.js");
+var import_form_warning = require("../components/elements/form-warning.js");
+var import_translations = require("../lib/translations.js");
 var import_jsx_runtime = require("react/jsx-runtime");
 var neverInMs = 1e3 * 60 * 60 * 24 * 365 * 200;
 var expiresInOptions = {
@@ -50,7 +50,7 @@ var expiresInOptions = {
 };
 function CreateApiKeyDialog(props) {
   const { t } = (0, import_translations.useTranslation)();
-  const user = (0, import__.useUser)({ or: "redirect" });
+  const user = (0, import__.useUser)({ or: props.mockMode ? "return-null" : "redirect" });
   const [loading, setLoading] = (0, import_react.useState)(false);
   const apiKeySchema = (0, import_schema_fields.yupObject)({
     description: (0, import_schema_fields.yupString)().defined().nonEmpty(t("Description is required")),
@@ -165,6 +165,7 @@ function ShowApiKeyDialog(props) {
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
           import_stack_ui.CopyField,
           {
+            type: "input",
             monospace: true,
             value: props.apiKey?.value ?? "",
             label: t("Secret API Key")

package/dist/components/api-key-dialogs.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/api-key-dialogs.tsx"],"sourcesContent":["'use client';\n\n\n//===========================================\n// THIS FILE IS AUTO-GENERATED FROM TEMPLATE. DO NOT EDIT IT DIRECTLY\n//===========================================\n\nimport { yupResolver } from \"@hookform/resolvers/yup\";\nimport { yupObject, yupString } from '@stackframe/stack-shared/dist/schema-fields';\nimport { captureError } from '@stackframe/stack-shared/dist/utils/errors';\nimport { runAsynchronously } from '@stackframe/stack-shared/dist/utils/promises';\nimport { ActionDialog, Button, CopyField, Input, Label, Typography } from '@stackframe/stack-ui';\nimport { useState } from \"react\";\nimport { useForm } from 'react-hook-form';\nimport * as yup from \"yup\";\nimport { useUser } from '..';\nimport { FormWarningText } from '../components/elements/form-warning';\nimport { ApiKey, ApiKeyCreationOptions, ApiKeyType } from \"../lib/stack-app/api-keys\";\nimport { useTranslation } from \"../lib/translations\";\n\n// Constants for expiration options\nexport const neverInMs = 1000 * 60 * 60 * 24 * 365 * 200;\nexport const expiresInOptions = {\n  [1000 * 60 * 60 * 24 * 1]: \"1 day\",\n  [1000 * 60 * 60 * 24 * 7]: \"7 days\",\n  [1000 * 60 * 60 * 24 * 30]: \"30 days\",\n  [1000 * 60 * 60 * 24 * 90]: \"90 days\",\n  [1000 * 60 * 60 * 24 * 365]: \"1 year\",\n  [neverInMs]: \"Never\",\n} as const;\n\n/**\n * Dialog for creating a new API key\n */\nexport function CreateApiKeyDialog<Type extends ApiKeyType = ApiKeyType>(props: {\n  open: boolean,\n  onOpenChange: (open: boolean) => void,\n  onKeyCreated?: (key: ApiKey<Type, true>) => void,\n  createApiKey: (data: ApiKeyCreationOptions<Type>) => Promise<ApiKey<Type, true>>,\n}) {\n  const { t } = useTranslation();\n  const user = useUser({ or: 'redirect' });\n  const [loading, setLoading] = useState(false);\n\n  const apiKeySchema = yupObject({\n    description: yupString().defined().nonEmpty(t('Description is required')),\n    expiresIn: yupString().defined(),\n  });\n\n  const { register, handleSubmit, formState: { errors }, reset } = useForm({\n    resolver: yupResolver(apiKeySchema),\n    defaultValues: {\n      description: '',\n      expiresIn: Object.keys(expiresInOptions)[2], // Default to 30 days\n    }\n  });\n\n  const onSubmit = async (data: yup.InferType<typeof apiKeySchema>) => {\n    setLoading(true);\n    try {\n      const expiresAt = new Date(Date.now() + parseInt(data.expiresIn));\n      const apiKey = await props.createApiKey({\n        description: data.description,\n        expiresAt,\n      });\n\n      if (props.onKeyCreated) {\n        props.onKeyCreated(apiKey);\n      }\n\n      reset();\n      props.onOpenChange(false);\n    } catch (error) {\n      captureError(\"Failed to create API key\", { error });\n    } finally {\n      setLoading(false);\n    }\n  };\n\n  return (\n    <ActionDialog\n      open={props.open}\n      onOpenChange={props.onOpenChange}\n      title={t('Create API Key')}\n      description={t('API keys grant programmatic access to your account.')}\n    >\n      <form\n        onSubmit={(e) => {\n          e.preventDefault();\n          runAsynchronously(handleSubmit(onSubmit));\n        }}\n        className=\"space-y-4\"\n      >\n        <div className=\"space-y-2\">\n          <Label htmlFor=\"description\">{t('Description')}</Label>\n          <Input\n            id=\"description\"\n            placeholder={t('e.g. Development, Production, CI/CD')}\n            {...register('description')}\n          />\n          {errors.description && <FormWarningText text={errors.description.message} />}\n        </div>\n\n        <div className=\"space-y-2\">\n          <Label htmlFor=\"expiresIn\">{t('Expires In')}</Label>\n          <select\n            id=\"expiresIn\"\n            className=\"w-full p-2 border border-input rounded-md bg-background\"\n            {...register('expiresIn')}\n          >\n            {Object.entries(expiresInOptions).map(([value, label]) => (\n              <option key={value} value={value}>{t(label)}</option>\n            ))}\n          </select>\n          {errors.expiresIn && <FormWarningText text={errors.expiresIn.message} />}\n        </div>\n\n        <div className=\"flex justify-end gap-2 pt-4\">\n          <Button\n            type=\"button\"\n            variant=\"secondary\"\n            onClick={() => {\n              reset();\n              props.onOpenChange(false);\n            }}\n          >\n            {t('Cancel')}\n          </Button>\n          <Button type=\"submit\" loading={loading}>\n            {t('Create')}\n          </Button>\n        </div>\n      </form>\n    </ActionDialog>\n  );\n}\n\n/**\n * Dialog for showing the newly created API key\n */\nexport function ShowApiKeyDialog<Type extends ApiKeyType = ApiKeyType>(props: {\n  apiKey: ApiKey<Type, true> | null,\n  onClose?: () => void,\n}) {\n  const { t } = useTranslation();\n\n  return (\n    <ActionDialog\n      open={!!props.apiKey}\n      title={t(\"API Key\")}\n      okButton={{ label: t(\"Close\") }}\n      onClose={props.onClose}\n      preventClose\n      confirmText={t(\"I understand that I will not be able to view this key again.\")}\n    >\n      <div className=\"flex flex-col gap-4\">\n        <Typography>\n          {t(\"Here is your API key.\")}{\" \"}\n          <span className=\"font-bold\">\n            {t(\"Copy it to a safe place. You will not be able to view it again.\")}\n          </span>\n        </Typography>\n        <CopyField\n          monospace\n          value={props.apiKey?.value ?? ''}\n          label={t(\"Secret API Key\")}\n        />\n      </div>\n    </ActionDialog>\n  );\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../src/components/api-key-dialogs.tsx"],"sourcesContent":["'use client';\n\n\n//===========================================\n// THIS FILE IS AUTO-GENERATED FROM TEMPLATE. DO NOT EDIT IT DIRECTLY\n//===========================================\n\nimport { yupResolver } from \"@hookform/resolvers/yup\";\nimport { yupObject, yupString } from '@stackframe/stack-shared/dist/schema-fields';\nimport { captureError } from '@stackframe/stack-shared/dist/utils/errors';\nimport { runAsynchronously } from '@stackframe/stack-shared/dist/utils/promises';\nimport { ActionDialog, Button, CopyField, Input, Label, Typography } from '@stackframe/stack-ui';\nimport { useState } from \"react\";\nimport { useForm } from 'react-hook-form';\nimport * as yup from \"yup\";\nimport { useUser } from '..';\nimport { FormWarningText } from '../components/elements/form-warning';\nimport { ApiKey, ApiKeyCreationOptions, ApiKeyType } from \"../lib/stack-app/api-keys\";\nimport { useTranslation } from \"../lib/translations\";\n\n// Constants for expiration options\nexport const neverInMs = 1000 * 60 * 60 * 24 * 365 * 200;\nexport const expiresInOptions = {\n  [1000 * 60 * 60 * 24 * 1]: \"1 day\",\n  [1000 * 60 * 60 * 24 * 7]: \"7 days\",\n  [1000 * 60 * 60 * 24 * 30]: \"30 days\",\n  [1000 * 60 * 60 * 24 * 90]: \"90 days\",\n  [1000 * 60 * 60 * 24 * 365]: \"1 year\",\n  [neverInMs]: \"Never\",\n} as const;\n\n/**\n * Dialog for creating a new API key\n */\nexport function CreateApiKeyDialog<Type extends ApiKeyType = ApiKeyType>(props: {\n  open: boolean,\n  onOpenChange: (open: boolean) => void,\n  onKeyCreated?: (key: ApiKey<Type, true>) => void,\n  createApiKey: (data: ApiKeyCreationOptions<Type>) => Promise<ApiKey<Type, true>>,\n  mockMode?: boolean,\n}) {\n  const { t } = useTranslation();\n  const user = useUser({ or: props.mockMode ? 'return-null' : 'redirect' });\n  const [loading, setLoading] = useState(false);\n\n  const apiKeySchema = yupObject({\n    description: yupString().defined().nonEmpty(t('Description is required')),\n    expiresIn: yupString().defined(),\n  });\n\n  const { register, handleSubmit, formState: { errors }, reset } = useForm({\n    resolver: yupResolver(apiKeySchema),\n    defaultValues: {\n      description: '',\n      expiresIn: Object.keys(expiresInOptions)[2], // Default to 30 days\n    }\n  });\n\n  const onSubmit = async (data: yup.InferType<typeof apiKeySchema>) => {\n    setLoading(true);\n    try {\n      const expiresAt = new Date(Date.now() + parseInt(data.expiresIn));\n      const apiKey = await props.createApiKey({\n        description: data.description,\n        expiresAt,\n      });\n\n      if (props.onKeyCreated) {\n        props.onKeyCreated(apiKey);\n      }\n\n      reset();\n      props.onOpenChange(false);\n    } catch (error) {\n      captureError(\"Failed to create API key\", { error });\n    } finally {\n      setLoading(false);\n    }\n  };\n\n  return (\n    <ActionDialog\n      open={props.open}\n      onOpenChange={props.onOpenChange}\n      title={t('Create API Key')}\n      description={t('API keys grant programmatic access to your account.')}\n    >\n      <form\n        onSubmit={(e) => {\n          e.preventDefault();\n          runAsynchronously(handleSubmit(onSubmit));\n        }}\n        className=\"space-y-4\"\n      >\n        <div className=\"space-y-2\">\n          <Label htmlFor=\"description\">{t('Description')}</Label>\n          <Input\n            id=\"description\"\n            placeholder={t('e.g. Development, Production, CI/CD')}\n            {...register('description')}\n          />\n          {errors.description && <FormWarningText text={errors.description.message} />}\n        </div>\n\n        <div className=\"space-y-2\">\n          <Label htmlFor=\"expiresIn\">{t('Expires In')}</Label>\n          <select\n            id=\"expiresIn\"\n            className=\"w-full p-2 border border-input rounded-md bg-background\"\n            {...register('expiresIn')}\n          >\n            {Object.entries(expiresInOptions).map(([value, label]) => (\n              <option key={value} value={value}>{t(label)}</option>\n            ))}\n          </select>\n          {errors.expiresIn && <FormWarningText text={errors.expiresIn.message} />}\n        </div>\n\n        <div className=\"flex justify-end gap-2 pt-4\">\n          <Button\n            type=\"button\"\n            variant=\"secondary\"\n            onClick={() => {\n              reset();\n              props.onOpenChange(false);\n            }}\n          >\n            {t('Cancel')}\n          </Button>\n          <Button type=\"submit\" loading={loading}>\n            {t('Create')}\n          </Button>\n        </div>\n      </form>\n    </ActionDialog>\n  );\n}\n\n/**\n * Dialog for showing the newly created API key\n */\nexport function ShowApiKeyDialog<Type extends ApiKeyType = ApiKeyType>(props: {\n  apiKey: ApiKey<Type, true> | null,\n  onClose?: () => void,\n}) {\n  const { t } = useTranslation();\n\n  return (\n    <ActionDialog\n      open={!!props.apiKey}\n      title={t(\"API Key\")}\n      okButton={{ label: t(\"Close\") }}\n      onClose={props.onClose}\n      preventClose\n      confirmText={t(\"I understand that I will not be able to view this key again.\")}\n    >\n      <div className=\"flex flex-col gap-4\">\n        <Typography>\n          {t(\"Here is your API key.\")}{\" \"}\n          <span className=\"font-bold\">\n            {t(\"Copy it to a safe place. You will not be able to view it again.\")}\n          </span>\n        </Typography>\n        <CopyField\n          type=\"input\"\n          monospace\n          value={props.apiKey?.value ?? ''}\n          label={t(\"Secret API Key\")}\n        />\n      </div>\n    </ActionDialog>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/components/credential-sign-in.js

@@ -31,10 +31,10 @@ var import_promises = require("@stackframe/stack-shared/dist/utils/promises");
 var import_stack_ui = require("@stackframe/stack-ui");
 var import_react = require("react");
 var import_react_hook_form = require("react-hook-form");
-var import__ = require("..");
-var import_translations = require("../lib/translations");
-var import_form_warning = require("./elements/form-warning");
-var import_link = require("./link");
+var import__ = require("../index.js");
+var import_translations = require("../lib/translations.js");
+var import_form_warning = require("./elements/form-warning.js");
+var import_link = require("./link.js");
 var import_jsx_runtime = require("react/jsx-runtime");
 function CredentialSignIn() {
   const { t } = (0, import_translations.useTranslation)();

package/dist/components/credential-sign-up.js

@@ -43,9 +43,9 @@ var import_stack_ui = require("@stackframe/stack-ui");
 var import_react = require("react");
 var import_react_hook_form = require("react-hook-form");
 var yup = __toESM(require("yup"));
-var import__ = require("..");
-var import_translations = require("../lib/translations");
-var import_form_warning = require("./elements/form-warning");
+var import__ = require("../index.js");
+var import_translations = require("../lib/translations.js");
+var import_form_warning = require("./elements/form-warning.js");
 var import_jsx_runtime = require("react/jsx-runtime");
 function CredentialSignUp(props) {
   const { t } = (0, import_translations.useTranslation)();

package/dist/components/elements/maybe-full-page.js

@@ -26,7 +26,7 @@ __export(maybe_full_page_exports, {
 });
 module.exports = __toCommonJS(maybe_full_page_exports);
 var import_react = require("react");
-var import_ssr_layout_effect = require("./ssr-layout-effect");
+var import_ssr_layout_effect = require("./ssr-layout-effect.js");
 var import_jsx_runtime = require("react/jsx-runtime");
 function MaybeFullPage({
   children,

package/dist/components/elements/sidebar-layout.js

@@ -28,7 +28,7 @@ module.exports = __toCommonJS(sidebar_layout_exports);
 var import_use_hash = require("@stackframe/stack-shared/dist/hooks/use-hash");
 var import_stack_ui = require("@stackframe/stack-ui");
 var import_lucide_react = require("lucide-react");
-var import__ = require("../..");
+var import__ = require("../../index.js");
 var import_jsx_runtime = require("react/jsx-runtime");
 function SidebarLayout(props) {
   const hash = (0, import_use_hash.useHash)();

package/dist/components/magic-link-sign-in.js

@@ -32,9 +32,9 @@ var import_promises = require("@stackframe/stack-shared/dist/utils/promises");
 var import_stack_ui = require("@stackframe/stack-ui");
 var import_react = require("react");
 var import_react_hook_form = require("react-hook-form");
-var import__ = require("..");
-var import_translations = require("../lib/translations");
-var import_form_warning = require("./elements/form-warning");
+var import__ = require("../index.js");
+var import_translations = require("../lib/translations.js");
+var import_form_warning = require("./elements/form-warning.js");
 var import_jsx_runtime = require("react/jsx-runtime");
 function OTP(props) {
   const { t } = (0, import_translations.useTranslation)();
@@ -47,9 +47,9 @@ function OTP(props) {
       setSubmitting(true);
       stackApp.signInWithMagicLink(otp + props.nonce).then((result) => {
         if (result.status === "error") {
-          if (result.error instanceof import_stack_shared.KnownErrors.VerificationCodeError) {
+          if (import_stack_shared.KnownErrors.VerificationCodeError.isInstance(result.error)) {
             setError(t("Invalid code"));
-          } else if (result.error instanceof import_stack_shared.KnownErrors.InvalidTotpCode) {
+          } else if (import_stack_shared.KnownErrors.InvalidTotpCode.isInstance(result.error)) {
             setError(t("Invalid TOTP code"));
           } else {
             throw result.error;
@@ -108,7 +108,7 @@ function MagicLinkSignIn() {
         setNonce(result.data.nonce);
       }
     } catch (e) {
-      if (e instanceof import_stack_shared.KnownErrors.SignUpNotEnabled) {
+      if (import_stack_shared.KnownErrors.SignUpNotEnabled.isInstance(e)) {
         setError("email", { type: "manual", message: t("New account registration is not allowed") });
       } else {
         throw e;

package/dist/components/magic-link-sign-in.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/magic-link-sign-in.tsx"],"sourcesContent":["'use client';\n\n\n//===========================================\n// THIS FILE IS AUTO-GENERATED FROM TEMPLATE. DO NOT EDIT IT DIRECTLY\n//===========================================\n\nimport { yupResolver } from \"@hookform/resolvers/yup\";\nimport { KnownErrors } from \"@stackframe/stack-shared\";\nimport { strictEmailSchema, yupObject } from \"@stackframe/stack-shared/dist/schema-fields\";\nimport { runAsynchronouslyWithAlert } from \"@stackframe/stack-shared/dist/utils/promises\";\nimport { Button, Input, InputOTP, InputOTPGroup, InputOTPSlot, Label, Typography } from \"@stackframe/stack-ui\";\nimport { useEffect, useState } from \"react\";\nimport { useForm } from \"react-hook-form\";\nimport * as yup from \"yup\";\nimport { useStackApp } from \"..\";\nimport { useTranslation } from \"../lib/translations\";\nimport { FormWarningText } from \"./elements/form-warning\";\n\nfunction OTP(props: {\n  onBack: () => void,\n  nonce: string,\n}) {\n  const { t } = useTranslation();\n  const [otp, setOtp] = useState<string>('');\n  const [submitting, setSubmitting] = useState<boolean>(false);\n  const stackApp = useStackApp();\n  const [error, setError] = useState<string | null>(null);\n\n  useEffect(() => {\n    if (otp.length === 6 && !submitting) {\n      setSubmitting(true);\n      stackApp.signInWithMagicLink(otp + props.nonce)\n        .then(result => {\n          if (result.status === 'error') {\n            if (result.error instanceof KnownErrors.VerificationCodeError) {\n              setError(t(\"Invalid code\"));\n            } else if (result.error instanceof KnownErrors.InvalidTotpCode) {\n              setError(t(\"Invalid TOTP code\"));\n            } else {\n              throw result.error;\n            }\n          }\n        })\n        .catch(e => console.error(e))\n        .finally(() => {\n          setSubmitting(false);\n          setOtp('');\n        });\n    }\n    if (otp.length !== 0 && otp.length !== 6) {\n      setError(null);\n    }\n  }, [otp, submitting]);\n\n  return (\n    <div className=\"flex flex-col items-stretch stack-scope\">\n      <form className='w-full flex flex-col items-center mb-2'>\n        <Typography className='mb-2' >{t('Enter the code from your email')}</Typography>\n        <InputOTP\n          maxLength={6}\n          type=\"text\"\n          inputMode=\"text\"\n          pattern={\"^[a-zA-Z0-9]+$\"}\n          value={otp}\n          onChange={value => setOtp(value.toUpperCase())}\n          disabled={submitting}\n        >\n          <InputOTPGroup>\n            {[0, 1, 2, 3, 4, 5].map((index) => (\n              <InputOTPSlot key={index} index={index} size='lg' />\n            ))}\n          </InputOTPGroup>\n        </InputOTP>\n        {error && <FormWarningText text={error} />}\n      </form>\n      <Button variant='link' onClick={props.onBack} className='underline'>{t('Cancel')}</Button>\n    </div>\n  );\n}\n\nexport function MagicLinkSignIn() {\n  const { t } = useTranslation();\n  const app = useStackApp();\n  const [loading, setLoading] = useState(false);\n  const [nonce, setNonce] = useState<string | null>(null);\n\n  const schema = yupObject({\n    email: strictEmailSchema(t('Please enter a valid email')).defined().nonEmpty(t('Please enter your email'))\n  });\n\n  const { register, handleSubmit, setError, formState: { errors } } = useForm({\n    resolver: yupResolver(schema)\n  });\n\n  const onSubmit = async (data: yup.InferType<typeof schema>) => {\n    setLoading(true);\n    try {\n      const { email } = data;\n      const result = await app.sendMagicLinkEmail(email);\n      if (result.status === 'error') {\n        setError('email', { type: 'manual', message: result.error.message });\n        return;\n      } else {\n        setNonce(result.data.nonce);\n      }\n    } catch (e) {\n      if (e instanceof KnownErrors.SignUpNotEnabled) {\n        setError('email', { type: 'manual', message: t('New account registration is not allowed') });\n      } else {\n        throw e;\n      }\n    } finally {\n      setLoading(false);\n    }\n  };\n\n  if (nonce) {\n    return <OTP nonce={nonce} onBack={() => setNonce(null)} />;\n  } else {\n    return (\n      <form\n        className=\"flex flex-col items-stretch stack-scope\"\n        onSubmit={e => runAsynchronouslyWithAlert(handleSubmit(onSubmit)(e))}\n        noValidate\n      >\n        <Label htmlFor=\"email\" className=\"mb-1\">{t('Email')}</Label>\n        <Input\n          id=\"email\"\n          type=\"email\"\n          autoComplete=\"email\"\n          {...register('email')}\n        />\n        <FormWarningText text={errors.email?.message?.toString()} />\n\n        <Button type=\"submit\" className=\"mt-6\" loading={loading}>\n          {t('Send email')}\n        </Button>\n      </form>\n    );\n  }\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../src/components/magic-link-sign-in.tsx"],"sourcesContent":["'use client';\n\n\n//===========================================\n// THIS FILE IS AUTO-GENERATED FROM TEMPLATE. DO NOT EDIT IT DIRECTLY\n//===========================================\n\nimport { yupResolver } from \"@hookform/resolvers/yup\";\nimport { KnownErrors } from \"@stackframe/stack-shared\";\nimport { strictEmailSchema, yupObject } from \"@stackframe/stack-shared/dist/schema-fields\";\nimport { runAsynchronouslyWithAlert } from \"@stackframe/stack-shared/dist/utils/promises\";\nimport { Button, Input, InputOTP, InputOTPGroup, InputOTPSlot, Label, Typography } from \"@stackframe/stack-ui\";\nimport { useEffect, useState } from \"react\";\nimport { useForm } from \"react-hook-form\";\nimport * as yup from \"yup\";\nimport { useStackApp } from \"..\";\nimport { useTranslation } from \"../lib/translations\";\nimport { FormWarningText } from \"./elements/form-warning\";\n\nfunction OTP(props: {\n  onBack: () => void,\n  nonce: string,\n}) {\n  const { t } = useTranslation();\n  const [otp, setOtp] = useState<string>('');\n  const [submitting, setSubmitting] = useState<boolean>(false);\n  const stackApp = useStackApp();\n  const [error, setError] = useState<string | null>(null);\n\n  useEffect(() => {\n    if (otp.length === 6 && !submitting) {\n      setSubmitting(true);\n      stackApp.signInWithMagicLink(otp + props.nonce)\n        .then(result => {\n          if (result.status === 'error') {\n            if (KnownErrors.VerificationCodeError.isInstance(result.error)) {\n              setError(t(\"Invalid code\"));\n            } else if (KnownErrors.InvalidTotpCode.isInstance(result.error)) {\n              setError(t(\"Invalid TOTP code\"));\n            } else {\n              throw result.error;\n            }\n          }\n        })\n        .catch(e => console.error(e))\n        .finally(() => {\n          setSubmitting(false);\n          setOtp('');\n        });\n    }\n    if (otp.length !== 0 && otp.length !== 6) {\n      setError(null);\n    }\n  }, [otp, submitting]);\n\n  return (\n    <div className=\"flex flex-col items-stretch stack-scope\">\n      <form className='w-full flex flex-col items-center mb-2'>\n        <Typography className='mb-2' >{t('Enter the code from your email')}</Typography>\n        <InputOTP\n          maxLength={6}\n          type=\"text\"\n          inputMode=\"text\"\n          pattern={\"^[a-zA-Z0-9]+$\"}\n          value={otp}\n          onChange={value => setOtp(value.toUpperCase())}\n          disabled={submitting}\n        >\n          <InputOTPGroup>\n            {[0, 1, 2, 3, 4, 5].map((index) => (\n              <InputOTPSlot key={index} index={index} size='lg' />\n            ))}\n          </InputOTPGroup>\n        </InputOTP>\n        {error && <FormWarningText text={error} />}\n      </form>\n      <Button variant='link' onClick={props.onBack} className='underline'>{t('Cancel')}</Button>\n    </div>\n  );\n}\n\nexport function MagicLinkSignIn() {\n  const { t } = useTranslation();\n  const app = useStackApp();\n  const [loading, setLoading] = useState(false);\n  const [nonce, setNonce] = useState<string | null>(null);\n\n  const schema = yupObject({\n    email: strictEmailSchema(t('Please enter a valid email')).defined().nonEmpty(t('Please enter your email'))\n  });\n\n  const { register, handleSubmit, setError, formState: { errors } } = useForm({\n    resolver: yupResolver(schema)\n  });\n\n  const onSubmit = async (data: yup.InferType<typeof schema>) => {\n    setLoading(true);\n    try {\n      const { email } = data;\n      const result = await app.sendMagicLinkEmail(email);\n      if (result.status === 'error') {\n        setError('email', { type: 'manual', message: result.error.message });\n        return;\n      } else {\n        setNonce(result.data.nonce);\n      }\n    } catch (e) {\n      if (KnownErrors.SignUpNotEnabled.isInstance(e)) {\n        setError('email', { type: 'manual', message: t('New account registration is not allowed') });\n      } else {\n        throw e;\n      }\n    } finally {\n      setLoading(false);\n    }\n  };\n\n  if (nonce) {\n    return <OTP nonce={nonce} onBack={() => setNonce(null)} />;\n  } else {\n    return (\n      <form\n        className=\"flex flex-col items-stretch stack-scope\"\n        onSubmit={e => runAsynchronouslyWithAlert(handleSubmit(onSubmit)(e))}\n        noValidate\n      >\n        <Label htmlFor=\"email\" className=\"mb-1\">{t('Email')}</Label>\n        <Input\n          id=\"email\"\n          type=\"email\"\n          autoComplete=\"email\"\n          {...register('email')}\n        />\n        <FormWarningText text={errors.email?.message?.toString()} />\n\n        <Button type=\"submit\" className=\"mt-6\" loading={loading}>\n          {t('Send email')}\n        </Button>\n      </form>\n    );\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAOA,iBAA4B;AAC5B,0BAA4B;AAC5B,2BAA6C;AAC7C,sBAA2C;AAC3C,sBAAwF;AACxF,mBAAoC;AACpC,6BAAwB;AAExB,eAA4B;AAC5B,0BAA+B;AAC/B,0BAAgC;AAwC1B;AAtCN,SAAS,IAAI,OAGV;AACD,QAAM,EAAE,EAAE,QAAI,oCAAe;AAC7B,QAAM,CAAC,KAAK,MAAM,QAAI,uBAAiB,EAAE;AACzC,QAAM,CAAC,YAAY,aAAa,QAAI,uBAAkB,KAAK;AAC3D,QAAM,eAAW,sBAAY;AAC7B,QAAM,CAAC,OAAO,QAAQ,QAAI,uBAAwB,IAAI;AAEtD,8BAAU,MAAM;AACd,QAAI,IAAI,WAAW,KAAK,CAAC,YAAY;AACnC,oBAAc,IAAI;AAClB,eAAS,oBAAoB,MAAM,MAAM,KAAK,EAC3C,KAAK,YAAU;AACd,YAAI,OAAO,WAAW,SAAS;AAC7B,cAAI,gCAAY,sBAAsB,WAAW,OAAO,KAAK,GAAG;AAC9D,qBAAS,EAAE,cAAc,CAAC;AAAA,UAC5B,WAAW,gCAAY,gBAAgB,WAAW,OAAO,KAAK,GAAG;AAC/D,qBAAS,EAAE,mBAAmB,CAAC;AAAA,UACjC,OAAO;AACL,kBAAM,OAAO;AAAA,UACf;AAAA,QACF;AAAA,MACF,CAAC,EACA,MAAM,OAAK,QAAQ,MAAM,CAAC,CAAC,EAC3B,QAAQ,MAAM;AACb,sBAAc,KAAK;AACnB,eAAO,EAAE;AAAA,MACX,CAAC;AAAA,IACL;AACA,QAAI,IAAI,WAAW,KAAK,IAAI,WAAW,GAAG;AACxC,eAAS,IAAI;AAAA,IACf;AAAA,EACF,GAAG,CAAC,KAAK,UAAU,CAAC;AAEpB,SACE,6CAAC,SAAI,WAAU,2CACb;AAAA,iDAAC,UAAK,WAAU,0CACd;AAAA,kDAAC,8BAAW,WAAU,QAAS,YAAE,gCAAgC,GAAE;AAAA,MACnE;AAAA,QAAC;AAAA;AAAA,UACC,WAAW;AAAA,UACX,MAAK;AAAA,UACL,WAAU;AAAA,UACV,SAAS;AAAA,UACT,OAAO;AAAA,UACP,UAAU,WAAS,OAAO,MAAM,YAAY,CAAC;AAAA,UAC7C,UAAU;AAAA,UAEV,sDAAC,iCACE,WAAC,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC,EAAE,IAAI,CAAC,UACvB,4CAAC,gCAAyB,OAAc,MAAK,QAA1B,KAA+B,CACnD,GACH;AAAA;AAAA,MACF;AAAA,MACC,SAAS,4CAAC,uCAAgB,MAAM,OAAO;AAAA,OAC1C;AAAA,IACA,4CAAC,0BAAO,SAAQ,QAAO,SAAS,MAAM,QAAQ,WAAU,aAAa,YAAE,QAAQ,GAAE;AAAA,KACnF;AAEJ;AAEO,SAAS,kBAAkB;AAChC,QAAM,EAAE,EAAE,QAAI,oCAAe;AAC7B,QAAM,UAAM,sBAAY;AACxB,QAAM,CAAC,SAAS,UAAU,QAAI,uBAAS,KAAK;AAC5C,QAAM,CAAC,OAAO,QAAQ,QAAI,uBAAwB,IAAI;AAEtD,QAAM,aAAS,gCAAU;AAAA,IACvB,WAAO,wCAAkB,EAAE,4BAA4B,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,yBAAyB,CAAC;AAAA,EAC3G,CAAC;AAED,QAAM,EAAE,UAAU,cAAc,UAAU,WAAW,EAAE,OAAO,EAAE,QAAI,gCAAQ;AAAA,IAC1E,cAAU,wBAAY,MAAM;AAAA,EAC9B,CAAC;AAED,QAAM,WAAW,OAAO,SAAuC;AAC7D,eAAW,IAAI;AACf,QAAI;AACF,YAAM,EAAE,MAAM,IAAI;AAClB,YAAM,SAAS,MAAM,IAAI,mBAAmB,KAAK;AACjD,UAAI,OAAO,WAAW,SAAS;AAC7B,iBAAS,SAAS,EAAE,MAAM,UAAU,SAAS,OAAO,MAAM,QAAQ,CAAC;AACnE;AAAA,MACF,OAAO;AACL,iBAAS,OAAO,KAAK,KAAK;AAAA,MAC5B;AAAA,IACF,SAAS,GAAG;AACV,UAAI,gCAAY,iBAAiB,WAAW,CAAC,GAAG;AAC9C,iBAAS,SAAS,EAAE,MAAM,UAAU,SAAS,EAAE,yCAAyC,EAAE,CAAC;AAAA,MAC7F,OAAO;AACL,cAAM;AAAA,MACR;AAAA,IACF,UAAE;AACA,iBAAW,KAAK;AAAA,IAClB;AAAA,EACF;AAEA,MAAI,OAAO;AACT,WAAO,4CAAC,OAAI,OAAc,QAAQ,MAAM,SAAS,IAAI,GAAG;AAAA,EAC1D,OAAO;AACL,WACE;AAAA,MAAC;AAAA;AAAA,QACC,WAAU;AAAA,QACV,UAAU,WAAK,4CAA2B,aAAa,QAAQ,EAAE,CAAC,CAAC;AAAA,QACnE,YAAU;AAAA,QAEV;AAAA,sDAAC,yBAAM,SAAQ,SAAQ,WAAU,QAAQ,YAAE,OAAO,GAAE;AAAA,UACpD;AAAA,YAAC;AAAA;AAAA,cACC,IAAG;AAAA,cACH,MAAK;AAAA,cACL,cAAa;AAAA,cACZ,GAAG,SAAS,OAAO;AAAA;AAAA,UACtB;AAAA,UACA,4CAAC,uCAAgB,MAAM,OAAO,OAAO,SAAS,SAAS,GAAG;AAAA,UAE1D,4CAAC,0BAAO,MAAK,UAAS,WAAU,QAAO,SACpC,YAAE,YAAY,GACjB;AAAA;AAAA;AAAA,IACF;AAAA,EAEJ;AACF;","names":[]}

package/dist/components/message-cards/known-error-message-card.js

@@ -26,8 +26,8 @@ __export(known_error_message_card_exports, {
 });
 module.exports = __toCommonJS(known_error_message_card_exports);
 var import_stack_ui = require("@stackframe/stack-ui");
-var import__ = require("../..");
-var import_message_card = require("./message-card");
+var import__ = require("../../index.js");
+var import_message_card = require("./message-card.js");
 var import_jsx_runtime = require("react/jsx-runtime");
 function KnownErrorMessageCard({
   error,

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

@@ -25,7 +25,7 @@ __export(message_card_exports, {
   MessageCard: () => MessageCard
 });
 module.exports = __toCommonJS(message_card_exports);
-var import_maybe_full_page = require("../elements/maybe-full-page");
+var import_maybe_full_page = require("../elements/maybe-full-page.js");
 var import_stack_ui = require("@stackframe/stack-ui");
 var import_jsx_runtime = require("react/jsx-runtime");
 function MessageCard({ fullPage = false, ...props }) {

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

@@ -26,9 +26,9 @@ __export(predefined_message_card_exports, {
 });
 module.exports = __toCommonJS(predefined_message_card_exports);
 var import_stack_ui = require("@stackframe/stack-ui");
-var import__ = require("../..");
-var import_translations = require("../../lib/translations");
-var import_message_card = require("./message-card");
+var import__ = require("../../index.js");
+var import_translations = require("../../lib/translations.js");
+var import_message_card = require("./message-card.js");
 var import_jsx_runtime = require("react/jsx-runtime");
 function PredefinedMessageCard({
   type,

package/dist/components/oauth-button-group.js

@@ -25,8 +25,8 @@ __export(oauth_button_group_exports, {
   OAuthButtonGroup: () => OAuthButtonGroup
 });
 module.exports = __toCommonJS(oauth_button_group_exports);
-var import_hooks = require("../lib/hooks");
-var import_oauth_button = require("./oauth-button");
+var import_hooks = require("../lib/hooks.js");
+var import_oauth_button = require("./oauth-button.js");
 var import_jsx_runtime = require("react/jsx-runtime");
 function OAuthButtonGroup({
   type,

package/dist/components/oauth-button.js

@@ -38,8 +38,9 @@ module.exports = __toCommonJS(oauth_button_exports);
 var import_stack_ui = require("@stackframe/stack-ui");
 var import_color = __toESM(require("color"));
 var import_react = require("react");
-var import__ = require("..");
-var import_translations = require("../lib/translations");
+var import__ = require("../index.js");
+var import_translations = require("../lib/translations.js");
+var import_use_in_iframe = require("./use-in-iframe.js");
 var import_jsx_runtime = require("react/jsx-runtime");
 var iconSize = 22;
 var changeColor = (c, value) => {
@@ -56,6 +57,7 @@ function OAuthButton({
   const { t } = (0, import_translations.useTranslation)();
   const stackApp = (0, import__.useStackApp)();
   const styleId = (0, import_react.useId)().replaceAll(":", "-");
+  const isIframe = (0, import_use_in_iframe.useInIframe)();
   const [lastUsed, setLastUsed] = (0, import_react.useState)(null);
   (0, import_react.useEffect)(() => {
     setLastUsed(localStorage.getItem("_STACK_AUTH.lastUsed"));
@@ -185,21 +187,30 @@ function OAuthButton({
   `;
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)("style", { children: styleSheet }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-      import_stack_ui.Button,
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_stack_ui.SimpleTooltip,
       {
-        onClick: async () => {
-          localStorage.setItem("_STACK_AUTH.lastUsed", provider);
-          await stackApp.signInWithOAuth(provider);
-        },
-        className: `stack-oauth-button-${styleId} stack-scope relative`,
-        children: [
-          !isMock && lastUsed === provider && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "absolute -top-2 -right-2 bg-blue-500 text-white text-xs px-2 py-1 rounded-md", children: "last" }),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center w-full gap-4", children: [
-            style.icon,
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "flex-1", children: type === "sign-up" ? t("Sign up with {provider}", { provider: style.name }) : t("Sign in with {provider}", { provider: style.name }) })
-          ] })
-        ]
+        disabled: !isIframe,
+        tooltip: isIframe ? "This auth provider is not supported in an iframe for security reasons." : void 0,
+        className: "stack-scope w-full inline-flex",
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+          import_stack_ui.Button,
+          {
+            onClick: async () => {
+              localStorage.setItem("_STACK_AUTH.lastUsed", provider);
+              await stackApp.signInWithOAuth(provider);
+            },
+            className: `stack-oauth-button-${styleId} stack-scope relative w-full`,
+            disabled: isIframe,
+            children: [
+              !isMock && lastUsed === provider && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "absolute -top-2 -right-2 bg-blue-500 text-white text-xs px-2 py-1 rounded-md", children: "last" }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center w-full gap-4", children: [
+                style.icon,
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "flex-1", children: type === "sign-up" ? t("Sign up with {provider}", { provider: style.name }) : t("Sign in with {provider}", { provider: style.name }) })
+              ] })
+            ]
+          }
+        )
       }
     )
   ] });

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

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/oauth-button.tsx"],"sourcesContent":["'use client';\n\n\n//===========================================\n// THIS FILE IS AUTO-GENERATED FROM TEMPLATE. DO NOT EDIT IT DIRECTLY\n//===========================================\n\nimport { BrandIcons, Button } from '@stackframe/stack-ui';\nimport Color from 'color';\nimport { useEffect, useId, useState } from 'react';\nimport { useStackApp } from '..';\nimport { useTranslation } from '../lib/translations';\n\nconst iconSize = 22;\n\nconst changeColor = (c: Color, value: number) => {\n  if (c.isLight()) {\n    value = -value;\n  }\n  return c.hsl(c.hue(), c.saturationl(), c.lightness() + value).toString();\n};\n\nexport function OAuthButton({\n  provider,\n  type,\n  isMock = false,\n}: {\n  provider: string,\n  type: 'sign-in' | 'sign-up',\n  isMock?: boolean,\n}) {\n  const { t } = useTranslation();\n  const stackApp = useStackApp();\n  const styleId = useId().replaceAll(':', '-');\n\n  const [lastUsed, setLastUsed] = useState<string | null>(null);\n  useEffect(() => {\n    setLastUsed(localStorage.getItem('_STACK_AUTH.lastUsed'));\n  }, []);\n\n  let style : {\n    backgroundColor?: string,\n    textColor?: string,\n    name: string,\n    icon: JSX.Element | null,\n    border?: string,\n  };\n  switch (provider) {\n    case 'google': {\n      style = {\n        backgroundColor: '#fff',\n        textColor: '#000',\n        name: 'Google',\n        border: '1px solid #ddd',\n        icon: <BrandIcons.Google iconSize={iconSize} />,\n      };\n      break;\n    }\n    case 'github': {\n      style = {\n        backgroundColor: '#111',\n        textColor: '#fff',\n        border: '1px solid #333',\n        name: 'GitHub',\n        icon: <BrandIcons.GitHub iconSize={iconSize} />,\n      };\n      break;\n    }\n    case 'facebook': {\n      style = {\n        backgroundColor: '#1877F2',\n        textColor: '#fff',\n        name: 'Facebook',\n        icon: <BrandIcons.Facebook iconSize={iconSize} />,\n      };\n      break;\n    }\n    case 'microsoft': {\n      style = {\n        backgroundColor: '#2f2f2f',\n        textColor: '#fff',\n        name: 'Microsoft',\n        icon: <BrandIcons.Microsoft iconSize={iconSize} />,\n      };\n      break;\n    }\n    case 'spotify': {\n      style = {\n        backgroundColor: '#1DB954',\n        textColor: '#fff',\n        name: 'Spotify',\n        icon: <BrandIcons.Spotify iconSize={iconSize} />,\n      };\n      break;\n    }\n    case 'discord': {\n      style = {\n        backgroundColor: '#5865F2',\n        textColor: '#fff',\n        name: 'Discord',\n        icon: <BrandIcons.Discord iconSize={iconSize} />,\n      };\n      break;\n    }\n    case 'gitlab': {\n      style = {\n        backgroundColor: \"#111\",\n        textColor: \"#fff\",\n        border: \"1px solid #333\",\n        name: \"Gitlab\",\n        icon: <BrandIcons.Gitlab iconSize={iconSize} />,\n      };\n      break;\n    }\n    case 'apple': {\n      style = {\n        backgroundColor: \"#000\",\n        textColor: \"#fff\",\n        border: \"1px solid #333\",\n        name: \"Apple\",\n        icon: <BrandIcons.Apple iconSize={iconSize} />,\n      };\n      break;\n    }\n    case \"bitbucket\": {\n      style = {\n        backgroundColor: \"#fff\",\n        textColor: \"#000\",\n        border: \"1px solid #ddd\",\n        name: \"Bitbucket\",\n        icon: <BrandIcons.Bitbucket iconSize={iconSize} />,\n      };\n      break;\n    }\n    case 'linkedin': {\n      style = {\n        backgroundColor: \"#0073b1\",\n        textColor: \"#fff\",\n        name: \"LinkedIn\",\n        icon: <BrandIcons.LinkedIn iconSize={iconSize} />,\n      };\n      break;\n    }\n    case 'x': {\n      style = {\n        backgroundColor: \"#000\",\n        textColor: \"#fff\",\n        name: \"X\",\n        icon: <BrandIcons.X iconSize={iconSize} />,\n      };\n      break;\n    }\n    default: {\n      style = {\n        name: provider,\n        icon: null,\n      };\n    }\n  }\n\n  const styleSheet = `\n    .stack-oauth-button-${styleId} {\n      background-color: ${style.backgroundColor} !important;\n      color: ${style.textColor} !important;\n      border: ${style.border} !important;\n    }\n    .stack-oauth-button-${styleId}:hover {\n      background-color: ${changeColor(Color(style.backgroundColor), 10)} !important;\n    }\n  `;\n\n  return (\n    <>\n      <style>{styleSheet}</style>\n      <Button\n        onClick={async () => {\n          localStorage.setItem('_STACK_AUTH.lastUsed', provider);\n          await stackApp.signInWithOAuth(provider);\n        }}\n        className={`stack-oauth-button-${styleId} stack-scope relative`}\n      >\n        {!isMock && lastUsed === provider && (\n          <span className=\"absolute -top-2 -right-2 bg-blue-500 text-white text-xs px-2 py-1 rounded-md\">\n            last\n          </span>\n        )}\n        <div className='flex items-center w-full gap-4'>\n          {style.icon}\n          <span className='flex-1'>\n            {type === 'sign-up' ?\n              t('Sign up with {provider}', { provider: style.name }) :\n              t('Sign in with {provider}', { provider: style.name })\n            }\n          </span>\n        </div>\n      </Button>\n    </>\n  );\n}\n"],"mappings":"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","names":["Color"]}
+{"version":3,"sources":["../../src/components/oauth-button.tsx"],"sourcesContent":["'use client';\n\n\n//===========================================\n// THIS FILE IS AUTO-GENERATED FROM TEMPLATE. DO NOT EDIT IT DIRECTLY\n//===========================================\n\nimport { BrandIcons, Button, SimpleTooltip } from '@stackframe/stack-ui';\nimport Color from 'color';\nimport { useEffect, useId, useState } from 'react';\nimport { useStackApp } from '..';\nimport { useTranslation } from '../lib/translations';\nimport { useInIframe } from './use-in-iframe';\n\nconst iconSize = 22;\n\nconst changeColor = (c: Color, value: number) => {\n  if (c.isLight()) {\n    value = -value;\n  }\n  return c.hsl(c.hue(), c.saturationl(), c.lightness() + value).toString();\n};\n\nexport function OAuthButton({\n  provider,\n  type,\n  isMock = false,\n}: {\n  provider: string,\n  type: 'sign-in' | 'sign-up',\n  isMock?: boolean,\n}) {\n  const { t } = useTranslation();\n  const stackApp = useStackApp();\n  const styleId = useId().replaceAll(':', '-');\n  const isIframe = useInIframe();\n\n  const [lastUsed, setLastUsed] = useState<string | null>(null);\n  useEffect(() => {\n    setLastUsed(localStorage.getItem('_STACK_AUTH.lastUsed'));\n  }, []);\n\n  let style : {\n    backgroundColor?: string,\n    textColor?: string,\n    name: string,\n    icon: JSX.Element | null,\n    border?: string,\n  };\n  switch (provider) {\n    case 'google': {\n      style = {\n        backgroundColor: '#fff',\n        textColor: '#000',\n        name: 'Google',\n        border: '1px solid #ddd',\n        icon: <BrandIcons.Google iconSize={iconSize} />,\n      };\n      break;\n    }\n    case 'github': {\n      style = {\n        backgroundColor: '#111',\n        textColor: '#fff',\n        border: '1px solid #333',\n        name: 'GitHub',\n        icon: <BrandIcons.GitHub iconSize={iconSize} />,\n      };\n      break;\n    }\n    case 'facebook': {\n      style = {\n        backgroundColor: '#1877F2',\n        textColor: '#fff',\n        name: 'Facebook',\n        icon: <BrandIcons.Facebook iconSize={iconSize} />,\n      };\n      break;\n    }\n    case 'microsoft': {\n      style = {\n        backgroundColor: '#2f2f2f',\n        textColor: '#fff',\n        name: 'Microsoft',\n        icon: <BrandIcons.Microsoft iconSize={iconSize} />,\n      };\n      break;\n    }\n    case 'spotify': {\n      style = {\n        backgroundColor: '#1DB954',\n        textColor: '#fff',\n        name: 'Spotify',\n        icon: <BrandIcons.Spotify iconSize={iconSize} />,\n      };\n      break;\n    }\n    case 'discord': {\n      style = {\n        backgroundColor: '#5865F2',\n        textColor: '#fff',\n        name: 'Discord',\n        icon: <BrandIcons.Discord iconSize={iconSize} />,\n      };\n      break;\n    }\n    case 'gitlab': {\n      style = {\n        backgroundColor: \"#111\",\n        textColor: \"#fff\",\n        border: \"1px solid #333\",\n        name: \"Gitlab\",\n        icon: <BrandIcons.Gitlab iconSize={iconSize} />,\n      };\n      break;\n    }\n    case 'apple': {\n      style = {\n        backgroundColor: \"#000\",\n        textColor: \"#fff\",\n        border: \"1px solid #333\",\n        name: \"Apple\",\n        icon: <BrandIcons.Apple iconSize={iconSize} />,\n      };\n      break;\n    }\n    case \"bitbucket\": {\n      style = {\n        backgroundColor: \"#fff\",\n        textColor: \"#000\",\n        border: \"1px solid #ddd\",\n        name: \"Bitbucket\",\n        icon: <BrandIcons.Bitbucket iconSize={iconSize} />,\n      };\n      break;\n    }\n    case 'linkedin': {\n      style = {\n        backgroundColor: \"#0073b1\",\n        textColor: \"#fff\",\n        name: \"LinkedIn\",\n        icon: <BrandIcons.LinkedIn iconSize={iconSize} />,\n      };\n      break;\n    }\n    case 'x': {\n      style = {\n        backgroundColor: \"#000\",\n        textColor: \"#fff\",\n        name: \"X\",\n        icon: <BrandIcons.X iconSize={iconSize} />,\n      };\n      break;\n    }\n    default: {\n      style = {\n        name: provider,\n        icon: null,\n      };\n    }\n  }\n\n  const styleSheet = `\n    .stack-oauth-button-${styleId} {\n      background-color: ${style.backgroundColor} !important;\n      color: ${style.textColor} !important;\n      border: ${style.border} !important;\n    }\n    .stack-oauth-button-${styleId}:hover {\n      background-color: ${changeColor(Color(style.backgroundColor), 10)} !important;\n    }\n  `;\n\n  return (\n    <>\n      <style>{styleSheet}</style>\n      <SimpleTooltip\n        disabled={!isIframe}\n        tooltip={isIframe ? \"This auth provider is not supported in an iframe for security reasons.\" : undefined}\n        className='stack-scope w-full inline-flex'\n      >\n        <Button\n          onClick={async () => {\n            localStorage.setItem('_STACK_AUTH.lastUsed', provider);\n            await stackApp.signInWithOAuth(provider);\n          }}\n          className={`stack-oauth-button-${styleId} stack-scope relative w-full`}\n          disabled={isIframe}\n        >\n          {!isMock && lastUsed === provider && (\n            <span className=\"absolute -top-2 -right-2 bg-blue-500 text-white text-xs px-2 py-1 rounded-md\">\n            last\n            </span>\n          )}\n          <div className='flex items-center w-full gap-4'>\n            {style.icon}\n            <span className='flex-1'>\n              {type === 'sign-up' ?\n              t('Sign up with {provider}', { provider: style.name }) :\n              t('Sign in with {provider}', { provider: style.name })\n              }\n            </span>\n          </div>\n        </Button>\n      </SimpleTooltip>\n    </>\n  );\n}\n"],"mappings":"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","names":["Color"]}

package/dist/components/passkey-button.js

@@ -27,8 +27,8 @@ __export(passkey_button_exports, {
 module.exports = __toCommonJS(passkey_button_exports);
 var import_stack_ui = require("@stackframe/stack-ui");
 var import_react = require("react");
-var import__ = require("..");
-var import_translations = require("../lib/translations");
+var import__ = require("../index.js");
+var import_translations = require("../lib/translations.js");
 var import_lucide_react = require("lucide-react");
 var import_jsx_runtime = require("react/jsx-runtime");
 function PasskeyButton({

package/dist/components/profile-image-editor.js

@@ -31,7 +31,8 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var profile_image_editor_exports = {};
 __export(profile_image_editor_exports, {
   ProfileImageEditor: () => ProfileImageEditor,
-  checkImageUrl: () => checkImageUrl
+  checkImageUrl: () => checkImageUrl,
+  getCroppedImg: () => getCroppedImg
 });
 module.exports = __toCommonJS(profile_image_editor_exports);
 var import_base64 = require("@stackframe/stack-shared/dist/utils/base64");
@@ -40,9 +41,9 @@ var import_stack_ui = require("@stackframe/stack-ui");
 var import_browser_image_compression = __toESM(require("browser-image-compression"));
 var import_lucide_react = require("lucide-react");
 var import_react = require("react");
-var import_react_avatar_editor = __toESM(require("react-avatar-editor"));
-var import_translations = require("../lib/translations");
-var import_user_avatar = require("./elements/user-avatar");
+var import_react_easy_crop = __toESM(require("react-easy-crop"));
+var import_translations = require("../lib/translations.js");
+var import_user_avatar = require("./elements/user-avatar.js");
 var import_jsx_runtime = require("react/jsx-runtime");
 async function checkImageUrl(url) {
   try {
@@ -53,17 +54,64 @@ async function checkImageUrl(url) {
     return false;
   }
 }
+var createImage = (url) => new Promise((resolve, reject) => {
+  const image = new Image();
+  image.addEventListener("load", () => resolve(image));
+  image.addEventListener("error", (error) => reject(error));
+  image.setAttribute("crossOrigin", "anonymous");
+  image.src = url;
+});
+async function getCroppedImg(imageSrc, pixelCrop) {
+  const image = await createImage(imageSrc);
+  const canvas = document.createElement("canvas");
+  const ctx = canvas.getContext("2d");
+  if (!ctx) {
+    return null;
+  }
+  const safeCrop = {
+    x: Math.max(0, pixelCrop.x),
+    y: Math.max(0, pixelCrop.y),
+    width: Math.max(1, pixelCrop.width),
+    height: Math.max(1, pixelCrop.height)
+  };
+  canvas.width = safeCrop.width;
+  canvas.height = safeCrop.height;
+  ctx.drawImage(
+    image,
+    safeCrop.x,
+    safeCrop.y,
+    safeCrop.width,
+    safeCrop.height,
+    0,
+    0,
+    safeCrop.width,
+    safeCrop.height
+  );
+  return canvas.toDataURL("image/jpeg");
+}
 function ProfileImageEditor(props) {
   const { t } = (0, import_translations.useTranslation)();
-  const cropRef = (0, import_react.useRef)(null);
-  const [slideValue, setSlideValue] = (0, import_react.useState)(1);
   const [rawUrl, setRawUrl] = (0, import_react.useState)(null);
   const [error, setError] = (0, import_react.useState)(null);
+  const [crop, setCrop] = (0, import_react.useState)({ x: 0, y: 0 });
+  const [zoom, setZoom] = (0, import_react.useState)(1);
+  const [croppedAreaPixels, setCroppedAreaPixels] = (0, import_react.useState)(null);
   function reset() {
-    setSlideValue(1);
     setRawUrl(null);
     setError(null);
+    setCrop({ x: 0, y: 0 });
+    setZoom(1);
+    setCroppedAreaPixels(null);
   }
+  const onCropChange = (0, import_react.useCallback)((crop2) => {
+    setCrop(crop2);
+  }, []);
+  const onCropComplete = (0, import_react.useCallback)((croppedArea, croppedAreaPixels2) => {
+    setCroppedAreaPixels(croppedAreaPixels2);
+  }, []);
+  const onZoomChange = (0, import_react.useCallback)((zoom2) => {
+    setZoom(zoom2);
+  }, []);
   function upload() {
     const input = document.createElement("input");
     input.type = "file";
@@ -100,28 +148,28 @@ function ProfileImageEditor(props) {
     ] });
   }
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex flex-col items-center gap-4", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      import_react_avatar_editor.default,
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "relative w-64 h-64", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_react_easy_crop.default,
       {
-        ref: cropRef,
         image: rawUrl || props.user.profileImageUrl || "",
-        borderRadius: 1e3,
-        color: [0, 0, 0, 0.72],
-        scale: slideValue,
-        rotate: 0,
-        border: 20,
-        className: "border"
+        crop,
+        zoom,
+        aspect: 1,
+        cropShape: "round",
+        showGrid: false,
+        onCropChange,
+        onCropComplete,
+        onZoomChange
       }
-    ),
+    ) }),
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       import_stack_ui.Slider,
       {
         min: 1,
-        max: 5,
+        max: 3,
         step: 0.1,
-        defaultValue: [slideValue],
-        value: [slideValue],
-        onValueChange: (v) => setSlideValue(v[0])
+        value: [zoom],
+        onValueChange: (v) => onZoomChange(v[0])
       }
     ),
     /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex flex-row gap-2", children: [
@@ -129,18 +177,22 @@ function ProfileImageEditor(props) {
         import_stack_ui.Button,
         {
           onClick: async () => {
-            if (cropRef.current && rawUrl) {
-              const croppedUrl = cropRef.current.getImage().toDataURL("image/jpeg");
-              const compressedFile = await (0, import_browser_image_compression.default)(
-                await import_browser_image_compression.default.getFilefromDataUrl(croppedUrl, "profile-image"),
-                {
-                  maxSizeMB: 0.1,
-                  fileType: "image/jpeg"
-                }
-              );
-              const compressedUrl = await import_browser_image_compression.default.getDataUrlFromFile(compressedFile);
-              await props.onProfileImageUrlChange(compressedUrl);
-              reset();
+            if (rawUrl && croppedAreaPixels) {
+              const croppedImageUrl = await getCroppedImg(rawUrl, croppedAreaPixels);
+              if (croppedImageUrl) {
+                const compressedFile = await (0, import_browser_image_compression.default)(
+                  await import_browser_image_compression.default.getFilefromDataUrl(croppedImageUrl, "profile-image"),
+                  {
+                    maxSizeMB: 0.1,
+                    fileType: "image/jpeg"
+                  }
+                );
+                const compressedUrl = await import_browser_image_compression.default.getDataUrlFromFile(compressedFile);
+                await props.onProfileImageUrlChange(compressedUrl);
+                reset();
+              } else {
+                setError(t("Could not crop image."));
+              }
             }
           },
           children: t("Save")
@@ -160,6 +212,7 @@ function ProfileImageEditor(props) {
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   ProfileImageEditor,
-  checkImageUrl
+  checkImageUrl,
+  getCroppedImg
 });
 //# sourceMappingURL=profile-image-editor.js.map