@stackframe/stack 2.4.12 → 2.4.15

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

@@ -58,7 +58,7 @@ function AuthPage({
   const enableSeparator = (project.credentialEnabled || project.magicLinkEnabled) && project.oauthProviders.filter((p) => p.enabled).length > 0;
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_card_frame.default, { fullPage, children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { textAlign: "center", marginBottom: "1.5rem" }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components_core.Text, { size: "xl", as: "h2", children: type === "sign-in" ? "Sign in to your account" : "Create a new account" }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components_core.Text, { size: "xl", as: "h2", style: { fontWeight: 500 }, children: type === "sign-in" ? "Sign in to your account" : "Create a new account" }),
       type === "sign-in" ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_components_core.Text, { children: [
         "Don't have an account? ",
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components_core.Link, { href: stackApp.urls.signUp, children: "Sign up" })

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

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components-page/auth-page.tsx"],"sourcesContent":["'use client';\n\nimport CredentialSignIn from '../components/credential-sign-in';\nimport SeparatorWithText from '../components/separator-with-text';\nimport OAuthGroup from '../components/oauth-group';\nimport CardFrame from '../components/card-frame';\nimport { useUser, useStackApp, CredentialSignUp } from '..';\nimport RedirectMessageCard from '../components/redirect-message-card';\nimport { Link, Tabs, TabsContent, TabsList, TabsTrigger, Text } from \"../components-core\";\nimport MagicLinkSignIn from '../components/magic-link-sign-in';\nimport { ClientProjectJson } from \"@stackframe/stack-shared\";\n\nexport default function AuthPage({ \n  fullPage=false,\n  type,\n  mockProject,\n}: { \n  fullPage?: boolean, \n  type: 'sign-in' | 'sign-up',\n  mockProject?: ClientProjectJson,\n}) {\n  const stackApp = useStackApp();\n  const user = useUser();\n  const project = mockProject || stackApp.useProject();\n\n  if (user && !mockProject) {\n    return <RedirectMessageCard type='signedIn' fullPage={fullPage} />;\n  }\n\n  const enableSeparator = (project.credentialEnabled || project.magicLinkEnabled) && project.oauthProviders.filter(p => p.enabled).length > 0;\n\n  return (\n    <CardFrame fullPage={fullPage}>\n      <div style={{ textAlign: 'center', marginBottom: '1.5rem' }}>\n        <Text size=\"xl\" as='h2'>{type === 'sign-in' ? 'Sign in to your account' : 'Create a new account'}</Text>\n        {type === 'sign-in' ? (\n          <Text>\n            {\"Don't have an account? \"}\n            <Link href={stackApp.urls.signUp}>\n              Sign up\n            </Link>\n          </Text>\n        ) : (\n          <Text>\n            {\"Already have an account? \"}\n            <Link href={stackApp.urls.signIn}>\n              Sign in\n            </Link>\n          </Text>\n        )}\n      </div>\n      <OAuthGroup type={type} mockProject={mockProject} />\n      {enableSeparator && <SeparatorWithText text={'Or continue with'} />}\n      {project.credentialEnabled && project.magicLinkEnabled ? (\n        <Tabs defaultValue='magic-link'>\n          <TabsList>\n            <TabsTrigger value='magic-link'>Magic Link</TabsTrigger>\n            <TabsTrigger value='password'>Password</TabsTrigger>\n          </TabsList>\n          <TabsContent value='magic-link'>\n            <MagicLinkSignIn/>\n          </TabsContent>\n          <TabsContent value='password'>\n            {type === 'sign-up' ? <CredentialSignUp/> : <CredentialSignIn/>}\n          </TabsContent>\n        </Tabs>\n      ) : project.credentialEnabled ? (\n        type === 'sign-up' ? <CredentialSignUp/> : <CredentialSignIn/>\n      ) : project.magicLinkEnabled ? (\n        <MagicLinkSignIn/>\n      ) : null}\n    </CardFrame>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,gCAA6B;AAC7B,iCAA8B;AAC9B,yBAAuB;AACvB,wBAAsB;AACtB,eAAuD;AACvD,mCAAgC;AAChC,6BAAqE;AACrE,gCAA4B;AAiBjB;AAdI,SAAR,SAA0B;AAAA,EAC/B,WAAS;AAAA,EACT;AAAA,EACA;AACF,GAIG;AACD,QAAM,eAAW,sBAAY;AAC7B,QAAM,WAAO,kBAAQ;AACrB,QAAM,UAAU,eAAe,SAAS,WAAW;AAEnD,MAAI,QAAQ,CAAC,aAAa;AACxB,WAAO,4CAAC,6BAAAA,SAAA,EAAoB,MAAK,YAAW,UAAoB;AAAA,EAClE;AAEA,QAAM,mBAAmB,QAAQ,qBAAqB,QAAQ,qBAAqB,QAAQ,eAAe,OAAO,OAAK,EAAE,OAAO,EAAE,SAAS;AAE1I,SACE,6CAAC,kBAAAC,SAAA,EAAU,UACT;AAAA,iDAAC,SAAI,OAAO,EAAE,WAAW,UAAU,cAAc,SAAS,GACxD;AAAA,kDAAC,+BAAK,MAAK,MAAK,IAAG,MAAM,mBAAS,YAAY,4BAA4B,wBAAuB;AAAA,MAChG,SAAS,YACR,6CAAC,+BACE;AAAA;AAAA,QACD,4CAAC,+BAAK,MAAM,SAAS,KAAK,QAAQ,qBAElC;AAAA,SACF,IAEA,6CAAC,+BACE;AAAA;AAAA,QACD,4CAAC,+BAAK,MAAM,SAAS,KAAK,QAAQ,qBAElC;AAAA,SACF;AAAA,OAEJ;AAAA,IACA,4CAAC,mBAAAC,SAAA,EAAW,MAAY,aAA0B;AAAA,IACjD,mBAAmB,4CAAC,2BAAAC,SAAA,EAAkB,MAAM,oBAAoB;AAAA,IAChE,QAAQ,qBAAqB,QAAQ,mBACpC,6CAAC,+BAAK,cAAa,cACjB;AAAA,mDAAC,mCACC;AAAA,oDAAC,sCAAY,OAAM,cAAa,wBAAU;AAAA,QAC1C,4CAAC,sCAAY,OAAM,YAAW,sBAAQ;AAAA,SACxC;AAAA,MACA,4CAAC,sCAAY,OAAM,cACjB,sDAAC,0BAAAC,SAAA,EAAe,GAClB;AAAA,MACA,4CAAC,sCAAY,OAAM,YAChB,mBAAS,YAAY,4CAAC,6BAAgB,IAAK,4CAAC,0BAAAC,SAAA,EAAgB,GAC/D;AAAA,OACF,IACE,QAAQ,oBACV,SAAS,YAAY,4CAAC,6BAAgB,IAAK,4CAAC,0BAAAA,SAAA,EAAgB,IAC1D,QAAQ,mBACV,4CAAC,0BAAAD,SAAA,EAAe,IACd;AAAA,KACN;AAEJ;","names":["RedirectMessageCard","CardFrame","OAuthGroup","SeparatorWithText","MagicLinkSignIn","CredentialSignIn"]}
+{"version":3,"sources":["../../src/components-page/auth-page.tsx"],"sourcesContent":["'use client';\n\nimport CredentialSignIn from '../components/credential-sign-in';\nimport SeparatorWithText from '../components/separator-with-text';\nimport OAuthGroup from '../components/oauth-group';\nimport CardFrame from '../components/card-frame';\nimport { useUser, useStackApp, CredentialSignUp } from '..';\nimport RedirectMessageCard from '../components/redirect-message-card';\nimport { Link, Tabs, TabsContent, TabsList, TabsTrigger, Text } from \"../components-core\";\nimport MagicLinkSignIn from '../components/magic-link-sign-in';\nimport { ClientProjectJson } from \"@stackframe/stack-shared\";\n\nexport default function AuthPage({ \n  fullPage=false,\n  type,\n  mockProject,\n}: { \n  fullPage?: boolean, \n  type: 'sign-in' | 'sign-up',\n  mockProject?: ClientProjectJson,\n}) {\n  const stackApp = useStackApp();\n  const user = useUser();\n  const project = mockProject || stackApp.useProject();\n\n  if (user && !mockProject) {\n    return <RedirectMessageCard type='signedIn' fullPage={fullPage} />;\n  }\n\n  const enableSeparator = (project.credentialEnabled || project.magicLinkEnabled) && project.oauthProviders.filter(p => p.enabled).length > 0;\n\n  return (\n    <CardFrame fullPage={fullPage}>\n      <div style={{ textAlign: 'center', marginBottom: '1.5rem' }}>\n        <Text size=\"xl\" as='h2' style={{ fontWeight: 500 }}>\n          {type === 'sign-in' ? 'Sign in to your account' : 'Create a new account'}\n        </Text>\n        {type === 'sign-in' ? (\n          <Text>\n            {\"Don't have an account? \"}\n            <Link href={stackApp.urls.signUp}>\n              Sign up\n            </Link>\n          </Text>\n        ) : (\n          <Text>\n            {\"Already have an account? \"}\n            <Link href={stackApp.urls.signIn}>\n              Sign in\n            </Link>\n          </Text>\n        )}\n      </div>\n      <OAuthGroup type={type} mockProject={mockProject} />\n      {enableSeparator && <SeparatorWithText text={'Or continue with'} />}\n      {project.credentialEnabled && project.magicLinkEnabled ? (\n        <Tabs defaultValue='magic-link'>\n          <TabsList>\n            <TabsTrigger value='magic-link'>Magic Link</TabsTrigger>\n            <TabsTrigger value='password'>Password</TabsTrigger>\n          </TabsList>\n          <TabsContent value='magic-link'>\n            <MagicLinkSignIn/>\n          </TabsContent>\n          <TabsContent value='password'>\n            {type === 'sign-up' ? <CredentialSignUp/> : <CredentialSignIn/>}\n          </TabsContent>\n        </Tabs>\n      ) : project.credentialEnabled ? (\n        type === 'sign-up' ? <CredentialSignUp/> : <CredentialSignIn/>\n      ) : project.magicLinkEnabled ? (\n        <MagicLinkSignIn/>\n      ) : null}\n    </CardFrame>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,gCAA6B;AAC7B,iCAA8B;AAC9B,yBAAuB;AACvB,wBAAsB;AACtB,eAAuD;AACvD,mCAAgC;AAChC,6BAAqE;AACrE,gCAA4B;AAiBjB;AAdI,SAAR,SAA0B;AAAA,EAC/B,WAAS;AAAA,EACT;AAAA,EACA;AACF,GAIG;AACD,QAAM,eAAW,sBAAY;AAC7B,QAAM,WAAO,kBAAQ;AACrB,QAAM,UAAU,eAAe,SAAS,WAAW;AAEnD,MAAI,QAAQ,CAAC,aAAa;AACxB,WAAO,4CAAC,6BAAAA,SAAA,EAAoB,MAAK,YAAW,UAAoB;AAAA,EAClE;AAEA,QAAM,mBAAmB,QAAQ,qBAAqB,QAAQ,qBAAqB,QAAQ,eAAe,OAAO,OAAK,EAAE,OAAO,EAAE,SAAS;AAE1I,SACE,6CAAC,kBAAAC,SAAA,EAAU,UACT;AAAA,iDAAC,SAAI,OAAO,EAAE,WAAW,UAAU,cAAc,SAAS,GACxD;AAAA,kDAAC,+BAAK,MAAK,MAAK,IAAG,MAAK,OAAO,EAAE,YAAY,IAAI,GAC9C,mBAAS,YAAY,4BAA4B,wBACpD;AAAA,MACC,SAAS,YACR,6CAAC,+BACE;AAAA;AAAA,QACD,4CAAC,+BAAK,MAAM,SAAS,KAAK,QAAQ,qBAElC;AAAA,SACF,IAEA,6CAAC,+BACE;AAAA;AAAA,QACD,4CAAC,+BAAK,MAAM,SAAS,KAAK,QAAQ,qBAElC;AAAA,SACF;AAAA,OAEJ;AAAA,IACA,4CAAC,mBAAAC,SAAA,EAAW,MAAY,aAA0B;AAAA,IACjD,mBAAmB,4CAAC,2BAAAC,SAAA,EAAkB,MAAM,oBAAoB;AAAA,IAChE,QAAQ,qBAAqB,QAAQ,mBACpC,6CAAC,+BAAK,cAAa,cACjB;AAAA,mDAAC,mCACC;AAAA,oDAAC,sCAAY,OAAM,cAAa,wBAAU;AAAA,QAC1C,4CAAC,sCAAY,OAAM,YAAW,sBAAQ;AAAA,SACxC;AAAA,MACA,4CAAC,sCAAY,OAAM,cACjB,sDAAC,0BAAAC,SAAA,EAAe,GAClB;AAAA,MACA,4CAAC,sCAAY,OAAM,YAChB,mBAAS,YAAY,4CAAC,6BAAgB,IAAK,4CAAC,0BAAAC,SAAA,EAAgB,GAC/D;AAAA,OACF,IACE,QAAQ,oBACV,SAAS,YAAY,4CAAC,6BAAgB,IAAK,4CAAC,0BAAAA,SAAA,EAAgB,IAC1D,QAAQ,mBACV,4CAAC,0BAAAD,SAAA,EAAe,IACd;AAAA,KACN;AAEJ;","names":["RedirectMessageCard","CardFrame","OAuthGroup","SeparatorWithText","MagicLinkSignIn","CredentialSignIn"]}

package/dist/components-page/password-reset.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components-page/password-reset.tsx"],"sourcesContent":["'use client';\n\nimport MessageCard from \"../components/message-card\";\nimport { StackClientApp, useStackApp } from \"..\";\nimport { use } from \"react\";\nimport PasswordResetInner from \"../components/password-reset-inner\";\nimport { cacheFunction } from \"@stackframe/stack-shared/dist/utils/caches\";\nimport { Text } from \"../components-core\";\nimport { KnownErrors } from \"@stackframe/stack-shared\";\nimport React from \"react\";\n\nconst cachedVerifyPasswordResetCode = cacheFunction(async (stackApp: StackClientApp<true>, code: string) => {\n  return await stackApp.verifyPasswordResetCode(code);\n});\n\nexport default function PasswordReset({\n  searchParams,\n  fullPage = false,\n}: { \n  searchParams?: Record<string, string>,\n  fullPage?: boolean, \n}) {\n  const stackApp = useStackApp();\n\n  const invalidJsx = (\n    <MessageCard title=\"Invalid Password Reset Link\" fullPage={fullPage}>\n      <Text>Please double check if you have the correct password reset link.</Text>\n    </MessageCard>\n  );\n\n  const expiredJsx = (\n    <MessageCard title=\"Expired Password Reset Link\" fullPage={fullPage}>\n      <Text>Your password reset link has expired. Please request a new password reset link from the login page.</Text>\n    </MessageCard>\n  );\n\n  const usedJsx = (\n    <MessageCard title=\"Used Password Reset Link\" fullPage={fullPage}>\n      <Text>This password reset link has already been used. If you need to reset your password again, please request a new password reset link from the login page.</Text>\n    </MessageCard>\n  );\n\n  const code = searchParams?.code;\n  if (!code) {\n    return invalidJsx;\n  }\n\n  const error = use(cachedVerifyPasswordResetCode(stackApp, code));\n  \n  if (error instanceof KnownErrors.PasswordResetCodeNotFound) {\n    return invalidJsx;\n  } else if (error instanceof KnownErrors.PasswordResetCodeExpired) {\n    return expiredJsx;\n  } else if (error instanceof KnownErrors.PasswordResetCodeAlreadyUsed) {\n    return usedJsx;\n  } else if (error) {\n    throw error;\n  }\n\n  return <PasswordResetInner code={code} fullPage={fullPage} />;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,0BAAwB;AACxB,eAA4C;AAC5C,mBAAoB;AACpB,kCAA+B;AAC/B,oBAA8B;AAC9B,6BAAqB;AACrB,0BAA4B;AAkBtB;AAfN,IAAM,oCAAgC,6BAAc,OAAO,UAAgC,SAAiB;AAC1G,SAAO,MAAM,SAAS,wBAAwB,IAAI;AACpD,CAAC;AAEc,SAAR,cAA+B;AAAA,EACpC;AAAA,EACA,WAAW;AACb,GAGG;AACD,QAAM,eAAW,sBAAY;AAE7B,QAAM,aACJ,4CAAC,oBAAAA,SAAA,EAAY,OAAM,+BAA8B,UAC/C,sDAAC,+BAAK,8EAAgE,GACxE;AAGF,QAAM,aACJ,4CAAC,oBAAAA,SAAA,EAAY,OAAM,+BAA8B,UAC/C,sDAAC,+BAAK,iHAAmG,GAC3G;AAGF,QAAM,UACJ,4CAAC,oBAAAA,SAAA,EAAY,OAAM,4BAA2B,UAC5C,sDAAC,+BAAK,qKAAuJ,GAC/J;AAGF,QAAM,OAAO,cAAc;AAC3B,MAAI,CAAC,MAAM;AACT,WAAO;AAAA,EACT;AAEA,QAAM,YAAQ,kBAAI,8BAA8B,UAAU,IAAI,CAAC;AAE/D,MAAI,iBAAiB,gCAAY,2BAA2B;AAC1D,WAAO;AAAA,EACT,WAAW,iBAAiB,gCAAY,0BAA0B;AAChE,WAAO;AAAA,EACT,WAAW,iBAAiB,gCAAY,8BAA8B;AACpE,WAAO;AAAA,EACT,WAAW,OAAO;AAChB,UAAM;AAAA,EACR;AAEA,SAAO,4CAAC,4BAAAC,SAAA,EAAmB,MAAY,UAAoB;AAC7D;","names":["MessageCard","PasswordResetInner"]}
+{"version":3,"sources":["../../src/components-page/password-reset.tsx"],"sourcesContent":["'use client';\n\nimport MessageCard from \"../components/message-card\";\nimport { StackClientApp, useStackApp } from \"..\";\nimport { use } from \"react\";\nimport PasswordResetInner from \"../components/password-reset-inner\";\nimport { cacheFunction } from \"@stackframe/stack-shared/dist/utils/caches\";\nimport { Text } from \"../components-core\";\nimport { KnownErrors } from \"@stackframe/stack-shared\";\n\nconst cachedVerifyPasswordResetCode = cacheFunction(async (stackApp: StackClientApp<true>, code: string) => {\n  return await stackApp.verifyPasswordResetCode(code);\n});\n\nexport default function PasswordReset({\n  searchParams,\n  fullPage = false,\n}: { \n  searchParams?: Record<string, string>,\n  fullPage?: boolean, \n}) {\n  const stackApp = useStackApp();\n\n  const invalidJsx = (\n    <MessageCard title=\"Invalid Password Reset Link\" fullPage={fullPage}>\n      <Text>Please double check if you have the correct password reset link.</Text>\n    </MessageCard>\n  );\n\n  const expiredJsx = (\n    <MessageCard title=\"Expired Password Reset Link\" fullPage={fullPage}>\n      <Text>Your password reset link has expired. Please request a new password reset link from the login page.</Text>\n    </MessageCard>\n  );\n\n  const usedJsx = (\n    <MessageCard title=\"Used Password Reset Link\" fullPage={fullPage}>\n      <Text>This password reset link has already been used. If you need to reset your password again, please request a new password reset link from the login page.</Text>\n    </MessageCard>\n  );\n\n  const code = searchParams?.code;\n  if (!code) {\n    return invalidJsx;\n  }\n\n  const error = use(cachedVerifyPasswordResetCode(stackApp, code));\n  \n  if (error instanceof KnownErrors.PasswordResetCodeNotFound) {\n    return invalidJsx;\n  } else if (error instanceof KnownErrors.PasswordResetCodeExpired) {\n    return expiredJsx;\n  } else if (error instanceof KnownErrors.PasswordResetCodeAlreadyUsed) {\n    return usedJsx;\n  } else if (error) {\n    throw error;\n  }\n\n  return <PasswordResetInner code={code} fullPage={fullPage} />;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,0BAAwB;AACxB,eAA4C;AAC5C,mBAAoB;AACpB,kCAA+B;AAC/B,oBAA8B;AAC9B,6BAAqB;AACrB,0BAA4B;AAiBtB;AAfN,IAAM,oCAAgC,6BAAc,OAAO,UAAgC,SAAiB;AAC1G,SAAO,MAAM,SAAS,wBAAwB,IAAI;AACpD,CAAC;AAEc,SAAR,cAA+B;AAAA,EACpC;AAAA,EACA,WAAW;AACb,GAGG;AACD,QAAM,eAAW,sBAAY;AAE7B,QAAM,aACJ,4CAAC,oBAAAA,SAAA,EAAY,OAAM,+BAA8B,UAC/C,sDAAC,+BAAK,8EAAgE,GACxE;AAGF,QAAM,aACJ,4CAAC,oBAAAA,SAAA,EAAY,OAAM,+BAA8B,UAC/C,sDAAC,+BAAK,iHAAmG,GAC3G;AAGF,QAAM,UACJ,4CAAC,oBAAAA,SAAA,EAAY,OAAM,4BAA2B,UAC5C,sDAAC,+BAAK,qKAAuJ,GAC/J;AAGF,QAAM,OAAO,cAAc;AAC3B,MAAI,CAAC,MAAM;AACT,WAAO;AAAA,EACT;AAEA,QAAM,YAAQ,kBAAI,8BAA8B,UAAU,IAAI,CAAC;AAE/D,MAAI,iBAAiB,gCAAY,2BAA2B;AAC1D,WAAO;AAAA,EACT,WAAW,iBAAiB,gCAAY,0BAA0B;AAChE,WAAO;AAAA,EACT,WAAW,iBAAiB,gCAAY,8BAA8B;AACpE,WAAO;AAAA,EACT,WAAW,OAAO;AAChB,UAAM;AAAA,EACR;AAEA,SAAO,4CAAC,4BAAAC,SAAA,EAAmB,MAAY,UAAoB;AAC7D;","names":["MessageCard","PasswordResetInner"]}

package/dist/components-page/stack-handler.d.mts

@@ -5,6 +5,7 @@ import '@stackframe/stack-shared/dist/interface/clientInterface';
 import '@stackframe/stack-shared/dist/utils/json';
 import '@stackframe/stack-shared/dist/interface/adminInterface';
 import '@stackframe/stack-shared/dist/interface/serverInterface';
+import '@stackframe/stack-shared/dist/interface/crud/email-templates';
 
 declare function StackHandler<HasTokenStore extends boolean>({ app, params: { stack }, searchParams, }: {
     app: StackServerApp<HasTokenStore>;

package/dist/components-page/stack-handler.d.ts

@@ -5,6 +5,7 @@ import '@stackframe/stack-shared/dist/interface/clientInterface';
 import '@stackframe/stack-shared/dist/utils/json';
 import '@stackframe/stack-shared/dist/interface/adminInterface';
 import '@stackframe/stack-shared/dist/interface/serverInterface';
+import '@stackframe/stack-shared/dist/interface/crud/email-templates';
 
 declare function StackHandler<HasTokenStore extends boolean>({ app, params: { stack }, searchParams, }: {
     app: StackServerApp<HasTokenStore>;

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

@@ -2,80 +2,60 @@
 "use client";
 
 // src/components/credential-sign-in.tsx
-import { useState } from "react";
+import { useForm } from "react-hook-form";
+import { yupResolver } from "@hookform/resolvers/yup";
+import * as yup from "yup";
 import FormWarningText from "./form-warning";
 import PasswordField from "./password-field";
-import { validateEmail } from "../utils/email";
 import { useStackApp } from "..";
 import { Button, Input, Label, Link } from "../components-core";
-import { KnownErrors } from "@stackframe/stack-shared";
+import { runAsynchronously } from "@stackframe/stack-shared/dist/utils/promises";
 import { jsx, jsxs } from "react/jsx-runtime";
+var schema = yup.object().shape({
+  email: yup.string().email("Please enter a valid email").required("Please enter your email"),
+  password: yup.string().required("Please enter your password")
+});
 function CredentialSignIn() {
-  const [email, setEmail] = useState("");
-  const [emailError, setEmailError] = useState("");
-  const [password, setPassword] = useState("");
-  const [passwordError, setPasswordError] = useState("");
+  const { register, handleSubmit, setError, formState: { errors }, clearErrors } = useForm({
+    resolver: yupResolver(schema)
+  });
   const app = useStackApp();
-  const onSubmit = async () => {
-    if (!email) {
-      setEmailError("Please enter your email");
-      return;
-    }
-    if (!validateEmail(email)) {
-      setEmailError("Please enter a valid email");
-      return;
-    }
-    if (!password) {
-      setPasswordError("Please enter your password");
-      return;
-    }
+  const onSubmit = async (data) => {
+    const { email, password } = data;
     const error = await app.signInWithCredential({ email, password });
-    if (error instanceof KnownErrors.EmailPasswordMismatch) {
-      setPasswordError("Wrong email or password");
-    } else if (error) {
-      setEmailError(`An error occurred. ${error.message}`);
-    }
+    setError("email", { type: "manual", message: error?.message });
   };
-  return /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", alignItems: "stretch" }, children: [
-    /* @__PURE__ */ jsx(Label, { htmlFor: "email", children: "Email" }),
-    /* @__PURE__ */ jsx(
-      Input,
-      {
-        id: "email",
-        type: "email",
-        name: "email",
-        value: email,
-        onChange: (e) => {
-          setEmail(e.target.value);
-          setEmailError("");
-        }
-      }
-    ),
-    /* @__PURE__ */ jsx(FormWarningText, { text: emailError }),
-    /* @__PURE__ */ jsx(Label, { htmlFor: "password", style: { marginTop: "1rem" }, children: "Password" }),
-    /* @__PURE__ */ jsx(
-      PasswordField,
-      {
-        id: "password",
-        name: "password",
-        value: password,
-        onChange: (e) => {
-          setPassword(e.target.value);
-          setPasswordError("");
-        }
-      }
-    ),
-    /* @__PURE__ */ jsx(FormWarningText, { text: passwordError }),
-    /* @__PURE__ */ jsx(Link, { href: app.urls.forgotPassword, size: "sm", style: { marginTop: "0.5rem" }, children: "Forgot password?" }),
-    /* @__PURE__ */ jsx(
-      Button,
-      {
-        style: { marginTop: "1.5rem" },
-        onClick: onSubmit,
-        children: "Sign In"
-      }
-    )
-  ] });
+  return /* @__PURE__ */ jsxs(
+    "form",
+    {
+      style: { display: "flex", flexDirection: "column", alignItems: "stretch" },
+      onSubmit: (e) => runAsynchronously(handleSubmit(onSubmit)(e)),
+      noValidate: true,
+      children: [
+        /* @__PURE__ */ jsx(Label, { htmlFor: "email", children: "Email" }),
+        /* @__PURE__ */ jsx(
+          Input,
+          {
+            id: "email",
+            type: "email",
+            ...register("email")
+          }
+        ),
+        /* @__PURE__ */ jsx(FormWarningText, { text: errors.email?.message?.toString() }),
+        /* @__PURE__ */ jsx(Label, { htmlFor: "password", style: { marginTop: "1rem" }, children: "Password" }),
+        /* @__PURE__ */ jsx(
+          PasswordField,
+          {
+            id: "password",
+            ...register("password")
+          }
+        ),
+        /* @__PURE__ */ jsx(FormWarningText, { text: errors.password?.message?.toString() }),
+        /* @__PURE__ */ jsx(Link, { href: app.urls.forgotPassword, size: "sm", style: { marginTop: "0.5rem" }, children: "Forgot password?" }),
+        /* @__PURE__ */ jsx(Button, { type: "submit", style: { marginTop: "1.5rem" }, children: "Sign In" })
+      ]
+    }
+  );
 }
 export {
   CredentialSignIn as default

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/credential-sign-in.tsx"],"sourcesContent":["'use client';\n\nimport { useState } from \"react\";\nimport FormWarningText from \"./form-warning\";\nimport PasswordField from \"./password-field\";\nimport { validateEmail } from \"../utils/email\";\nimport { useStackApp } from \"..\";\nimport { Button, Input, Label, Link } from \"../components-core\";\nimport { KnownErrors } from \"@stackframe/stack-shared\";\n\nexport default function CredentialSignIn() {\n  const [email, setEmail] = useState('');\n  const [emailError, setEmailError] = useState('');\n  const [password, setPassword] = useState('');\n  const [passwordError, setPasswordError] = useState('');\n  const app = useStackApp();\n  \n  const onSubmit = async () => {\n    if (!email) {\n      setEmailError('Please enter your email');\n      return;\n    }\n    if (!validateEmail(email)) {\n      setEmailError('Please enter a valid email');\n      return;\n    }\n    if (!password) {\n      setPasswordError('Please enter your password');\n      return;\n    }\n    \n    const error = await app.signInWithCredential({ email, password });\n\n    if (error instanceof KnownErrors.EmailPasswordMismatch) {\n      setPasswordError('Wrong email or password');\n    } else if (error) {\n      setEmailError(`An error occurred. ${error.message}`);\n    }\n  };\n\n  return (\n    <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'stretch' }}>\n      <Label htmlFor=\"email\">Email</Label>\n      <Input\n        id=\"email\"\n        type=\"email\"\n        name=\"email\"\n        value={email}\n        onChange={(e) => {\n          setEmail(e.target.value);\n          setEmailError('');\n        }}\n      />\n      <FormWarningText text={emailError} />\n\n      <Label htmlFor=\"password\" style={{ marginTop: '1rem' }}>Password</Label>\n      <PasswordField\n        id=\"password\"\n        name=\"password\"\n        value={password}\n        onChange={(e) => {\n          setPassword(e.target.value);\n          setPasswordError('');\n        }}\n      />\n      <FormWarningText text={passwordError} />\n\n      <Link href={app.urls.forgotPassword} size='sm' style={{ marginTop: '0.5rem' }}>\n        Forgot password?\n      </Link>\n\n      <Button\n        style={{ marginTop: '1.5rem' }}\n        onClick={onSubmit}\n      >\n          Sign In\n      </Button>\n    </div>\n  );\n}\n"],"mappings":";;;AAEA,SAAS,gBAAgB;AACzB,OAAO,qBAAqB;AAC5B,OAAO,mBAAmB;AAC1B,SAAS,qBAAqB;AAC9B,SAAS,mBAAmB;AAC5B,SAAS,QAAQ,OAAO,OAAO,YAAY;AAC3C,SAAS,mBAAmB;AAiCxB,SACE,KADF;AA/BW,SAAR,mBAAoC;AACzC,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAS,EAAE;AACrC,QAAM,CAAC,YAAY,aAAa,IAAI,SAAS,EAAE;AAC/C,QAAM,CAAC,UAAU,WAAW,IAAI,SAAS,EAAE;AAC3C,QAAM,CAAC,eAAe,gBAAgB,IAAI,SAAS,EAAE;AACrD,QAAM,MAAM,YAAY;AAExB,QAAM,WAAW,YAAY;AAC3B,QAAI,CAAC,OAAO;AACV,oBAAc,yBAAyB;AACvC;AAAA,IACF;AACA,QAAI,CAAC,cAAc,KAAK,GAAG;AACzB,oBAAc,4BAA4B;AAC1C;AAAA,IACF;AACA,QAAI,CAAC,UAAU;AACb,uBAAiB,4BAA4B;AAC7C;AAAA,IACF;AAEA,UAAM,QAAQ,MAAM,IAAI,qBAAqB,EAAE,OAAO,SAAS,CAAC;AAEhE,QAAI,iBAAiB,YAAY,uBAAuB;AACtD,uBAAiB,yBAAyB;AAAA,IAC5C,WAAW,OAAO;AAChB,oBAAc,sBAAsB,MAAM,OAAO,EAAE;AAAA,IACrD;AAAA,EACF;AAEA,SACE,qBAAC,SAAI,OAAO,EAAE,SAAS,QAAQ,eAAe,UAAU,YAAY,UAAU,GAC5E;AAAA,wBAAC,SAAM,SAAQ,SAAQ,mBAAK;AAAA,IAC5B;AAAA,MAAC;AAAA;AAAA,QACC,IAAG;AAAA,QACH,MAAK;AAAA,QACL,MAAK;AAAA,QACL,OAAO;AAAA,QACP,UAAU,CAAC,MAAM;AACf,mBAAS,EAAE,OAAO,KAAK;AACvB,wBAAc,EAAE;AAAA,QAClB;AAAA;AAAA,IACF;AAAA,IACA,oBAAC,mBAAgB,MAAM,YAAY;AAAA,IAEnC,oBAAC,SAAM,SAAQ,YAAW,OAAO,EAAE,WAAW,OAAO,GAAG,sBAAQ;AAAA,IAChE;AAAA,MAAC;AAAA;AAAA,QACC,IAAG;AAAA,QACH,MAAK;AAAA,QACL,OAAO;AAAA,QACP,UAAU,CAAC,MAAM;AACf,sBAAY,EAAE,OAAO,KAAK;AAC1B,2BAAiB,EAAE;AAAA,QACrB;AAAA;AAAA,IACF;AAAA,IACA,oBAAC,mBAAgB,MAAM,eAAe;AAAA,IAEtC,oBAAC,QAAK,MAAM,IAAI,KAAK,gBAAgB,MAAK,MAAK,OAAO,EAAE,WAAW,SAAS,GAAG,8BAE/E;AAAA,IAEA;AAAA,MAAC;AAAA;AAAA,QACC,OAAO,EAAE,WAAW,SAAS;AAAA,QAC7B,SAAS;AAAA,QACV;AAAA;AAAA,IAED;AAAA,KACF;AAEJ;","names":[]}
+{"version":3,"sources":["../../../src/components/credential-sign-in.tsx"],"sourcesContent":["'use client';\n\nimport { useForm } from \"react-hook-form\";\nimport { yupResolver } from \"@hookform/resolvers/yup\";\nimport * as yup from \"yup\";\nimport FormWarningText from \"./form-warning\";\nimport PasswordField from \"./password-field\";\nimport { useStackApp } from \"..\";\nimport { Button, Input, Label, Link } from \"../components-core\";\nimport { runAsynchronously } from \"@stackframe/stack-shared/dist/utils/promises\";\n\nconst schema = yup.object().shape({\n  email: yup.string().email('Please enter a valid email').required('Please enter your email'),\n  password: yup.string().required('Please enter your password')\n});\n\nexport default function CredentialSignIn() {\n  const { register, handleSubmit, setError, formState: { errors }, clearErrors } = useForm({\n    resolver: yupResolver(schema)\n  });\n  const app = useStackApp();\n\n  const onSubmit = async (data: yup.InferType<typeof schema>) => {\n    const { email, password } = data;\n\n    const error = await app.signInWithCredential({ email, password });\n    setError('email', { type: 'manual', message: error?.message });\n  };\n\n  return (\n    <form \n      style={{ display: 'flex', flexDirection: 'column', alignItems: 'stretch' }} \n      onSubmit={e => runAsynchronously(handleSubmit(onSubmit)(e))}\n      noValidate\n    >\n      <Label htmlFor=\"email\">Email</Label>\n      <Input\n        id=\"email\"\n        type=\"email\"\n        {...register('email')}\n      />\n      <FormWarningText text={errors.email?.message?.toString()} />\n\n      <Label htmlFor=\"password\" style={{ marginTop: '1rem' }}>Password</Label>\n      <PasswordField\n        id=\"password\"\n        {...register('password')}\n      />\n      <FormWarningText text={errors.password?.message?.toString()} />\n\n      <Link href={app.urls.forgotPassword} size='sm' style={{ marginTop: '0.5rem' }}>\n        Forgot password?\n      </Link>\n\n      <Button type=\"submit\" style={{ marginTop: '1.5rem' }}>\n        Sign In\n      </Button>\n    </form>\n  );\n}\n"],"mappings":";;;AAEA,SAAS,eAAe;AACxB,SAAS,mBAAmB;AAC5B,YAAY,SAAS;AACrB,OAAO,qBAAqB;AAC5B,OAAO,mBAAmB;AAC1B,SAAS,mBAAmB;AAC5B,SAAS,QAAQ,OAAO,OAAO,YAAY;AAC3C,SAAS,yBAAyB;AAqB9B,SAKE,KALF;AAnBJ,IAAM,SAAa,WAAO,EAAE,MAAM;AAAA,EAChC,OAAW,WAAO,EAAE,MAAM,4BAA4B,EAAE,SAAS,yBAAyB;AAAA,EAC1F,UAAc,WAAO,EAAE,SAAS,4BAA4B;AAC9D,CAAC;AAEc,SAAR,mBAAoC;AACzC,QAAM,EAAE,UAAU,cAAc,UAAU,WAAW,EAAE,OAAO,GAAG,YAAY,IAAI,QAAQ;AAAA,IACvF,UAAU,YAAY,MAAM;AAAA,EAC9B,CAAC;AACD,QAAM,MAAM,YAAY;AAExB,QAAM,WAAW,OAAO,SAAuC;AAC7D,UAAM,EAAE,OAAO,SAAS,IAAI;AAE5B,UAAM,QAAQ,MAAM,IAAI,qBAAqB,EAAE,OAAO,SAAS,CAAC;AAChE,aAAS,SAAS,EAAE,MAAM,UAAU,SAAS,OAAO,QAAQ,CAAC;AAAA,EAC/D;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,OAAO,EAAE,SAAS,QAAQ,eAAe,UAAU,YAAY,UAAU;AAAA,MACzE,UAAU,OAAK,kBAAkB,aAAa,QAAQ,EAAE,CAAC,CAAC;AAAA,MAC1D,YAAU;AAAA,MAEV;AAAA,4BAAC,SAAM,SAAQ,SAAQ,mBAAK;AAAA,QAC5B;AAAA,UAAC;AAAA;AAAA,YACC,IAAG;AAAA,YACH,MAAK;AAAA,YACJ,GAAG,SAAS,OAAO;AAAA;AAAA,QACtB;AAAA,QACA,oBAAC,mBAAgB,MAAM,OAAO,OAAO,SAAS,SAAS,GAAG;AAAA,QAE1D,oBAAC,SAAM,SAAQ,YAAW,OAAO,EAAE,WAAW,OAAO,GAAG,sBAAQ;AAAA,QAChE;AAAA,UAAC;AAAA;AAAA,YACC,IAAG;AAAA,YACF,GAAG,SAAS,UAAU;AAAA;AAAA,QACzB;AAAA,QACA,oBAAC,mBAAgB,MAAM,OAAO,UAAU,SAAS,SAAS,GAAG;AAAA,QAE7D,oBAAC,QAAK,MAAM,IAAI,KAAK,gBAAgB,MAAK,MAAK,OAAO,EAAE,WAAW,SAAS,GAAG,8BAE/E;AAAA,QAEA,oBAAC,UAAO,MAAK,UAAS,OAAO,EAAE,WAAW,SAAS,GAAG,qBAEtD;AAAA;AAAA;AAAA,EACF;AAEJ;","names":[]}

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

@@ -2,112 +2,88 @@
 "use client";
 
 // src/components/credential-sign-up.tsx
-import { useState } from "react";
+import { useForm } from "react-hook-form";
+import { yupResolver } from "@hookform/resolvers/yup";
+import * as yup from "yup";
 import PasswordField from "./password-field";
 import FormWarningText from "./form-warning";
-import { validateEmail } from "../utils/email";
-import { getPasswordError } from "@stackframe/stack-shared/dist/helpers/password";
 import { useStackApp } from "..";
 import { Label, Input, Button } from "../components-core";
-import { KnownErrors } from "@stackframe/stack-shared";
+import { runAsynchronously } from "@stackframe/stack-shared/dist/utils/promises";
+import { getPasswordError } from "@stackframe/stack-shared/dist/helpers/password";
 import { jsx, jsxs } from "react/jsx-runtime";
+var schema = yup.object().shape({
+  email: yup.string().email("Please enter a valid email").required("Please enter your email"),
+  password: yup.string().required("Please enter your password").test({
+    name: "is-valid-password",
+    test: (value, ctx) => {
+      const error = getPasswordError(value);
+      if (error) {
+        return ctx.createError({ message: error.message });
+      } else {
+        return true;
+      }
+    }
+  }),
+  passwordRepeat: yup.string().nullable().oneOf([yup.ref("password"), null], "Passwords do not match").required("Please repeat your password")
+});
 function CredentialSignUp() {
-  const [email, setEmail] = useState("");
-  const [emailError, setEmailError] = useState("");
-  const [password, setPassword] = useState("");
-  const [passwordError, setPasswordError] = useState("");
-  const [passwordRepeat, setPasswordRepeat] = useState("");
-  const [passwordRepeatError, setPasswordRepeatError] = useState("");
+  const { register, handleSubmit, setError, formState: { errors }, clearErrors } = useForm({
+    resolver: yupResolver(schema)
+  });
   const app = useStackApp();
-  const onSubmit = async () => {
-    if (!email) {
-      setEmailError("Please enter your email");
-      return;
-    }
-    if (!validateEmail(email)) {
-      setEmailError("Please enter a valid email");
-      return;
-    }
-    if (!password) {
-      setPasswordError("Please enter your password");
-      return;
-    }
-    if (!passwordRepeat) {
-      setPasswordRepeatError("Please repeat your password");
-      return;
-    }
-    if (password !== passwordRepeat) {
-      setPasswordRepeatError("Passwords do not match");
-      return;
-    }
-    const passwordError2 = getPasswordError(password);
-    if (passwordError2) {
-      setPasswordError(passwordError2.message);
-      return;
-    }
-    let error;
-    error = await app.signUpWithCredential({ email, password });
-    if (error instanceof KnownErrors.UserEmailAlreadyExists) {
-      setEmailError("User already exists");
-    } else if (error) {
-      setEmailError(`An error occurred. ${error.message}`);
-    }
+  const onSubmit = async (data) => {
+    const { email, password } = data;
+    const error = await app.signUpWithCredential({ email, password });
+    setError("email", { type: "manual", message: error?.message });
   };
-  return /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", alignItems: "stretch" }, children: [
-    /* @__PURE__ */ jsx(Label, { htmlFor: "email", children: "Email" }),
-    /* @__PURE__ */ jsx(
-      Input,
-      {
-        id: "email",
-        type: "email",
-        name: "email",
-        value: email,
-        onChange: (e) => {
-          setEmail(e.target.value);
-          setEmailError("");
-        }
-      }
-    ),
-    /* @__PURE__ */ jsx(FormWarningText, { text: emailError }),
-    /* @__PURE__ */ jsx(Label, { htmlFor: "password", style: { marginTop: "1rem" }, children: "Password" }),
-    /* @__PURE__ */ jsx(
-      PasswordField,
-      {
-        id: "password",
-        name: "password",
-        value: password,
-        onChange: (e) => {
-          setPassword(e.target.value);
-          setPasswordError("");
-          setPasswordRepeatError("");
-        }
-      }
-    ),
-    /* @__PURE__ */ jsx(FormWarningText, { text: passwordError }),
-    /* @__PURE__ */ jsx(Label, { htmlFor: "repeat-password", style: { marginTop: "1rem" }, children: "Repeat Password" }),
-    /* @__PURE__ */ jsx(
-      PasswordField,
-      {
-        id: "repeat-password",
-        name: "repeat-password",
-        value: passwordRepeat,
-        onChange: (e) => {
-          setPasswordRepeat(e.target.value);
-          setPasswordError("");
-          setPasswordRepeatError("");
-        }
-      }
-    ),
-    /* @__PURE__ */ jsx(FormWarningText, { text: passwordRepeatError }),
-    /* @__PURE__ */ jsx(
-      Button,
-      {
-        style: { marginTop: "1.5rem" },
-        onClick: onSubmit,
-        children: "Sign Up"
-      }
-    )
-  ] });
+  return /* @__PURE__ */ jsxs(
+    "form",
+    {
+      style: { display: "flex", flexDirection: "column", alignItems: "stretch" },
+      onSubmit: (e) => runAsynchronously(handleSubmit(onSubmit)(e)),
+      noValidate: true,
+      children: [
+        /* @__PURE__ */ jsx(Label, { htmlFor: "email", children: "Email" }),
+        /* @__PURE__ */ jsx(
+          Input,
+          {
+            id: "email",
+            type: "email",
+            ...register("email")
+          }
+        ),
+        /* @__PURE__ */ jsx(FormWarningText, { text: errors.email?.message?.toString() }),
+        /* @__PURE__ */ jsx(Label, { htmlFor: "password", style: { marginTop: "1rem" }, children: "Password" }),
+        /* @__PURE__ */ jsx(
+          PasswordField,
+          {
+            id: "password",
+            ...register("password"),
+            onChange: (e) => {
+              clearErrors("password");
+              clearErrors("passwordRepeat");
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx(FormWarningText, { text: errors.password?.message?.toString() }),
+        /* @__PURE__ */ jsx(Label, { htmlFor: "repeat-password", style: { marginTop: "1rem" }, children: "Repeat Password" }),
+        /* @__PURE__ */ jsx(
+          PasswordField,
+          {
+            id: "repeat-password",
+            ...register("passwordRepeat"),
+            onChange: (e) => {
+              clearErrors("password");
+              clearErrors("passwordRepeat");
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx(FormWarningText, { text: errors.passwordRepeat?.message?.toString() }),
+        /* @__PURE__ */ jsx(Button, { type: "submit", style: { marginTop: "1.5rem" }, children: "Sign Up" })
+      ]
+    }
+  );
 }
 export {
   CredentialSignUp as default

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/credential-sign-up.tsx"],"sourcesContent":["'use client';\n\nimport { useState } from \"react\";\nimport PasswordField from \"./password-field\";\nimport FormWarningText from \"./form-warning\";\nimport { validateEmail } from \"../utils/email\";\nimport { getPasswordError } from \"@stackframe/stack-shared/dist/helpers/password\";\nimport { useStackApp } from \"..\";\nimport { Label, Input, Button } from \"../components-core\";\nimport { KnownErrors } from \"@stackframe/stack-shared\";\n\nexport default function CredentialSignUp() {\n  const [email, setEmail] = useState('');\n  const [emailError, setEmailError] = useState('');\n  const [password, setPassword] = useState('');\n  const [passwordError, setPasswordError] = useState('');\n  const [passwordRepeat, setPasswordRepeat] = useState('');\n  const [passwordRepeatError, setPasswordRepeatError] = useState('');\n  const app = useStackApp();\n\n  const onSubmit = async () => {\n    if (!email) {\n      setEmailError('Please enter your email');\n      return;\n    }\n    if (!validateEmail(email)) {\n      setEmailError('Please enter a valid email');\n      return;\n    }\n    if (!password) {\n      setPasswordError('Please enter your password');\n      return;\n    }\n    if (!passwordRepeat) {\n      setPasswordRepeatError('Please repeat your password');\n      return;\n    }\n    if (password !== passwordRepeat) {\n      setPasswordRepeatError('Passwords do not match');\n      return;\n    }\n\n    const passwordError = getPasswordError(password);\n    if (passwordError) {\n      setPasswordError(passwordError.message);\n      return;\n    }\n\n    let error;\n    error = await app.signUpWithCredential({ email, password });\n    \n    if (error instanceof KnownErrors.UserEmailAlreadyExists) {\n      setEmailError('User already exists');\n    } else if (error) {\n      setEmailError(`An error occurred. ${error.message}`);\n    }\n  };\n\n  return (\n    <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'stretch' }}>\n      <Label htmlFor=\"email\">Email</Label>\n      <Input\n        id=\"email\"\n        type=\"email\"\n        name=\"email\"\n        value={email}\n        onChange={(e) => {\n          setEmail(e.target.value);\n          setEmailError('');\n        }}\n      />\n      <FormWarningText text={emailError} />\n\n      <Label htmlFor=\"password\" style={{ marginTop: '1rem' }}>Password</Label>\n      <PasswordField\n        id=\"password\"\n        name=\"password\"\n        value={password}\n        onChange={(e) => {\n          setPassword(e.target.value);\n          setPasswordError('');\n          setPasswordRepeatError('');\n        }}\n      />\n      <FormWarningText text={passwordError} />\n        \n      <Label htmlFor=\"repeat-password\" style={{ marginTop: '1rem' }}>Repeat Password</Label>\n      <PasswordField\n        id=\"repeat-password\"\n        name=\"repeat-password\"\n        value={passwordRepeat}\n        onChange={(e) => {\n          setPasswordRepeat(e.target.value);\n          setPasswordError('');\n          setPasswordRepeatError('');\n        }}\n      />\n      <FormWarningText text={passwordRepeatError} />\n\n      <Button \n        style={{ marginTop: '1.5rem' }}\n        onClick={onSubmit}\n      >\n          Sign Up\n      </Button>\n    </div>\n  );\n}\n"],"mappings":";;;AAEA,SAAS,gBAAgB;AACzB,OAAO,mBAAmB;AAC1B,OAAO,qBAAqB;AAC5B,SAAS,qBAAqB;AAC9B,SAAS,wBAAwB;AACjC,SAAS,mBAAmB;AAC5B,SAAS,OAAO,OAAO,cAAc;AACrC,SAAS,mBAAmB;AAkDxB,SACE,KADF;AAhDW,SAAR,mBAAoC;AACzC,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAS,EAAE;AACrC,QAAM,CAAC,YAAY,aAAa,IAAI,SAAS,EAAE;AAC/C,QAAM,CAAC,UAAU,WAAW,IAAI,SAAS,EAAE;AAC3C,QAAM,CAAC,eAAe,gBAAgB,IAAI,SAAS,EAAE;AACrD,QAAM,CAAC,gBAAgB,iBAAiB,IAAI,SAAS,EAAE;AACvD,QAAM,CAAC,qBAAqB,sBAAsB,IAAI,SAAS,EAAE;AACjE,QAAM,MAAM,YAAY;AAExB,QAAM,WAAW,YAAY;AAC3B,QAAI,CAAC,OAAO;AACV,oBAAc,yBAAyB;AACvC;AAAA,IACF;AACA,QAAI,CAAC,cAAc,KAAK,GAAG;AACzB,oBAAc,4BAA4B;AAC1C;AAAA,IACF;AACA,QAAI,CAAC,UAAU;AACb,uBAAiB,4BAA4B;AAC7C;AAAA,IACF;AACA,QAAI,CAAC,gBAAgB;AACnB,6BAAuB,6BAA6B;AACpD;AAAA,IACF;AACA,QAAI,aAAa,gBAAgB;AAC/B,6BAAuB,wBAAwB;AAC/C;AAAA,IACF;AAEA,UAAMA,iBAAgB,iBAAiB,QAAQ;AAC/C,QAAIA,gBAAe;AACjB,uBAAiBA,eAAc,OAAO;AACtC;AAAA,IACF;AAEA,QAAI;AACJ,YAAQ,MAAM,IAAI,qBAAqB,EAAE,OAAO,SAAS,CAAC;AAE1D,QAAI,iBAAiB,YAAY,wBAAwB;AACvD,oBAAc,qBAAqB;AAAA,IACrC,WAAW,OAAO;AAChB,oBAAc,sBAAsB,MAAM,OAAO,EAAE;AAAA,IACrD;AAAA,EACF;AAEA,SACE,qBAAC,SAAI,OAAO,EAAE,SAAS,QAAQ,eAAe,UAAU,YAAY,UAAU,GAC5E;AAAA,wBAAC,SAAM,SAAQ,SAAQ,mBAAK;AAAA,IAC5B;AAAA,MAAC;AAAA;AAAA,QACC,IAAG;AAAA,QACH,MAAK;AAAA,QACL,MAAK;AAAA,QACL,OAAO;AAAA,QACP,UAAU,CAAC,MAAM;AACf,mBAAS,EAAE,OAAO,KAAK;AACvB,wBAAc,EAAE;AAAA,QAClB;AAAA;AAAA,IACF;AAAA,IACA,oBAAC,mBAAgB,MAAM,YAAY;AAAA,IAEnC,oBAAC,SAAM,SAAQ,YAAW,OAAO,EAAE,WAAW,OAAO,GAAG,sBAAQ;AAAA,IAChE;AAAA,MAAC;AAAA;AAAA,QACC,IAAG;AAAA,QACH,MAAK;AAAA,QACL,OAAO;AAAA,QACP,UAAU,CAAC,MAAM;AACf,sBAAY,EAAE,OAAO,KAAK;AAC1B,2BAAiB,EAAE;AACnB,iCAAuB,EAAE;AAAA,QAC3B;AAAA;AAAA,IACF;AAAA,IACA,oBAAC,mBAAgB,MAAM,eAAe;AAAA,IAEtC,oBAAC,SAAM,SAAQ,mBAAkB,OAAO,EAAE,WAAW,OAAO,GAAG,6BAAe;AAAA,IAC9E;AAAA,MAAC;AAAA;AAAA,QACC,IAAG;AAAA,QACH,MAAK;AAAA,QACL,OAAO;AAAA,QACP,UAAU,CAAC,MAAM;AACf,4BAAkB,EAAE,OAAO,KAAK;AAChC,2BAAiB,EAAE;AACnB,iCAAuB,EAAE;AAAA,QAC3B;AAAA;AAAA,IACF;AAAA,IACA,oBAAC,mBAAgB,MAAM,qBAAqB;AAAA,IAE5C;AAAA,MAAC;AAAA;AAAA,QACC,OAAO,EAAE,WAAW,SAAS;AAAA,QAC7B,SAAS;AAAA,QACV;AAAA;AAAA,IAED;AAAA,KACF;AAEJ;","names":["passwordError"]}
+{"version":3,"sources":["../../../src/components/credential-sign-up.tsx"],"sourcesContent":["'use client';\n\nimport { useForm } from \"react-hook-form\";\nimport { yupResolver } from \"@hookform/resolvers/yup\";\nimport * as yup from \"yup\";\nimport PasswordField from \"./password-field\";\nimport FormWarningText from \"./form-warning\";\nimport { useStackApp } from \"..\";\nimport { Label, Input, Button } from \"../components-core\";\nimport { runAsynchronously } from \"@stackframe/stack-shared/dist/utils/promises\";\nimport { getPasswordError } from \"@stackframe/stack-shared/dist/helpers/password\";\n\nconst schema = yup.object().shape({\n  email: yup.string().email('Please enter a valid email').required('Please enter your email'),\n  password: yup.string().required('Please enter your password').test({\n    name: 'is-valid-password',\n    test: (value, ctx) => {\n      const error = getPasswordError(value);\n      if (error) {\n        return ctx.createError({ message: error.message });\n      } else {\n        return true;\n      }\n    }\n  }),\n  passwordRepeat: yup.string().nullable().oneOf([yup.ref('password'), null], 'Passwords do not match').required('Please repeat your password')\n});\n\nexport default function CredentialSignUp() {\n  const { register, handleSubmit, setError, formState: { errors }, clearErrors } = useForm({\n    resolver: yupResolver(schema)\n  });\n  const app = useStackApp();\n\n  const onSubmit = async (data: yup.InferType<typeof schema>) => {\n    const { email, password } = data;\n    const error = await app.signUpWithCredential({ email, password });\n    setError('email', { type: 'manual', message: error?.message });\n  };\n\n  return (\n    <form \n      style={{ display: 'flex', flexDirection: 'column', alignItems: 'stretch' }} \n      onSubmit={e => runAsynchronously(handleSubmit(onSubmit)(e))}\n      noValidate\n    >\n      <Label htmlFor=\"email\">Email</Label>\n      <Input\n        id=\"email\"\n        type=\"email\"\n        {...register('email')}\n      />\n      <FormWarningText text={errors.email?.message?.toString()} />\n\n      <Label htmlFor=\"password\" style={{ marginTop: '1rem' }}>Password</Label>\n      <PasswordField\n        id=\"password\"\n        {...register('password')}\n        onChange={(e) => {\n          clearErrors('password');\n          clearErrors('passwordRepeat');\n        }}\n      />\n      <FormWarningText text={errors.password?.message?.toString()} />\n        \n      <Label htmlFor=\"repeat-password\" style={{ marginTop: '1rem' }}>Repeat Password</Label>\n      <PasswordField\n        id=\"repeat-password\"\n        {...register('passwordRepeat')}\n        onChange={(e) => {\n          clearErrors('password');\n          clearErrors('passwordRepeat');\n        }}\n      />\n      <FormWarningText text={errors.passwordRepeat?.message?.toString()} />\n\n      <Button type=\"submit\" style={{ marginTop: '1.5rem' }}>\n        Sign Up\n      </Button>\n    </form>\n  );\n}\n"],"mappings":";;;AAEA,SAAS,eAAe;AACxB,SAAS,mBAAmB;AAC5B,YAAY,SAAS;AACrB,OAAO,mBAAmB;AAC1B,OAAO,qBAAqB;AAC5B,SAAS,mBAAmB;AAC5B,SAAS,OAAO,OAAO,cAAc;AACrC,SAAS,yBAAyB;AAClC,SAAS,wBAAwB;AA+B7B,SAKE,KALF;AA7BJ,IAAM,SAAa,WAAO,EAAE,MAAM;AAAA,EAChC,OAAW,WAAO,EAAE,MAAM,4BAA4B,EAAE,SAAS,yBAAyB;AAAA,EAC1F,UAAc,WAAO,EAAE,SAAS,4BAA4B,EAAE,KAAK;AAAA,IACjE,MAAM;AAAA,IACN,MAAM,CAAC,OAAO,QAAQ;AACpB,YAAM,QAAQ,iBAAiB,KAAK;AACpC,UAAI,OAAO;AACT,eAAO,IAAI,YAAY,EAAE,SAAS,MAAM,QAAQ,CAAC;AAAA,MACnD,OAAO;AACL,eAAO;AAAA,MACT;AAAA,IACF;AAAA,EACF,CAAC;AAAA,EACD,gBAAoB,WAAO,EAAE,SAAS,EAAE,MAAM,CAAK,QAAI,UAAU,GAAG,IAAI,GAAG,wBAAwB,EAAE,SAAS,6BAA6B;AAC7I,CAAC;AAEc,SAAR,mBAAoC;AACzC,QAAM,EAAE,UAAU,cAAc,UAAU,WAAW,EAAE,OAAO,GAAG,YAAY,IAAI,QAAQ;AAAA,IACvF,UAAU,YAAY,MAAM;AAAA,EAC9B,CAAC;AACD,QAAM,MAAM,YAAY;AAExB,QAAM,WAAW,OAAO,SAAuC;AAC7D,UAAM,EAAE,OAAO,SAAS,IAAI;AAC5B,UAAM,QAAQ,MAAM,IAAI,qBAAqB,EAAE,OAAO,SAAS,CAAC;AAChE,aAAS,SAAS,EAAE,MAAM,UAAU,SAAS,OAAO,QAAQ,CAAC;AAAA,EAC/D;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,OAAO,EAAE,SAAS,QAAQ,eAAe,UAAU,YAAY,UAAU;AAAA,MACzE,UAAU,OAAK,kBAAkB,aAAa,QAAQ,EAAE,CAAC,CAAC;AAAA,MAC1D,YAAU;AAAA,MAEV;AAAA,4BAAC,SAAM,SAAQ,SAAQ,mBAAK;AAAA,QAC5B;AAAA,UAAC;AAAA;AAAA,YACC,IAAG;AAAA,YACH,MAAK;AAAA,YACJ,GAAG,SAAS,OAAO;AAAA;AAAA,QACtB;AAAA,QACA,oBAAC,mBAAgB,MAAM,OAAO,OAAO,SAAS,SAAS,GAAG;AAAA,QAE1D,oBAAC,SAAM,SAAQ,YAAW,OAAO,EAAE,WAAW,OAAO,GAAG,sBAAQ;AAAA,QAChE;AAAA,UAAC;AAAA;AAAA,YACC,IAAG;AAAA,YACF,GAAG,SAAS,UAAU;AAAA,YACvB,UAAU,CAAC,MAAM;AACf,0BAAY,UAAU;AACtB,0BAAY,gBAAgB;AAAA,YAC9B;AAAA;AAAA,QACF;AAAA,QACA,oBAAC,mBAAgB,MAAM,OAAO,UAAU,SAAS,SAAS,GAAG;AAAA,QAE7D,oBAAC,SAAM,SAAQ,mBAAkB,OAAO,EAAE,WAAW,OAAO,GAAG,6BAAe;AAAA,QAC9E;AAAA,UAAC;AAAA;AAAA,YACC,IAAG;AAAA,YACF,GAAG,SAAS,gBAAgB;AAAA,YAC7B,UAAU,CAAC,MAAM;AACf,0BAAY,UAAU;AACtB,0BAAY,gBAAgB;AAAA,YAC9B;AAAA;AAAA,QACF;AAAA,QACA,oBAAC,mBAAgB,MAAM,OAAO,gBAAgB,SAAS,SAAS,GAAG;AAAA,QAEnE,oBAAC,UAAO,MAAK,UAAS,OAAO,EAAE,WAAW,SAAS,GAAG,qBAEtD;AAAA;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/dist/esm/components/forgot-password.js

@@ -2,53 +2,56 @@
 "use client";
 
 // src/components/forgot-password.tsx
-import { useState } from "react";
+import { useForm } from "react-hook-form";
+import { yupResolver } from "@hookform/resolvers/yup";
+import * as yup from "yup";
 import FormWarningText from "./form-warning";
-import { validateEmail } from "../utils/email";
 import { useStackApp } from "..";
 import { Button, Input, Label } from "../components-core";
+import { runAsynchronously } from "@stackframe/stack-shared/dist/utils/promises";
 import { jsx, jsxs } from "react/jsx-runtime";
+var schema = yup.object().shape({
+  email: yup.string().email("Please enter a valid email").required("Please enter your email")
+});
 function ForgotPassword({ onSent }) {
-  const [email, setEmail] = useState("");
-  const [emailError, setEmailError] = useState("");
+  const { register, handleSubmit, formState: { errors }, clearErrors } = useForm({
+    resolver: yupResolver(schema)
+  });
   const stackApp = useStackApp();
-  const onSubmit = async () => {
-    if (!email) {
-      setEmailError("Please enter your email");
-      return;
-    }
-    if (!validateEmail(email)) {
-      setEmailError("Please enter a valid email");
-      return;
-    }
+  const onSubmit = async (data) => {
+    const { email } = data;
     await stackApp.sendForgotPasswordEmail(email);
     onSent?.();
   };
-  return /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", alignItems: "stretch" }, children: [
-    /* @__PURE__ */ jsx(Label, { htmlFor: "email", children: "Your Email" }),
-    /* @__PURE__ */ jsx(
-      Input,
-      {
-        id: "email",
-        type: "email",
-        name: "email",
-        value: email,
-        onChange: (e) => {
-          setEmail(e.target.value);
-          setEmailError("");
-        }
-      }
-    ),
-    /* @__PURE__ */ jsx(FormWarningText, { text: emailError }),
-    /* @__PURE__ */ jsx(
-      Button,
-      {
-        style: { marginTop: "1.5rem" },
-        onClick: onSubmit,
-        children: "Send Email"
-      }
-    )
-  ] });
+  return /* @__PURE__ */ jsxs(
+    "form",
+    {
+      style: { display: "flex", flexDirection: "column", alignItems: "stretch" },
+      onSubmit: (e) => runAsynchronously(handleSubmit(onSubmit)(e)),
+      noValidate: true,
+      children: [
+        /* @__PURE__ */ jsx(Label, { htmlFor: "email", children: "Your Email" }),
+        /* @__PURE__ */ jsx(
+          Input,
+          {
+            id: "email",
+            type: "email",
+            ...register("email"),
+            onChange: () => clearErrors("email")
+          }
+        ),
+        /* @__PURE__ */ jsx(FormWarningText, { text: errors.email?.message?.toString() }),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            type: "submit",
+            style: { marginTop: "1.5rem" },
+            children: "Send Email"
+          }
+        )
+      ]
+    }
+  );
 }
 export {
   ForgotPassword as default

package/dist/esm/components/forgot-password.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/forgot-password.tsx"],"sourcesContent":["'use client';\n\nimport { useState } from \"react\";\nimport FormWarningText from \"./form-warning\";\nimport { validateEmail } from \"../utils/email\";\nimport { useStackApp } from \"..\";\nimport { Button, Input, Label } from \"../components-core\";\n\n\nexport default function ForgotPassword({ onSent }: { onSent?: () => void }) {\n  const [email, setEmail] = useState('');\n  const [emailError, setEmailError] = useState('');\n  const stackApp = useStackApp();\n  \n  const onSubmit = async () => {\n    if (!email) {\n      setEmailError('Please enter your email');\n      return;\n    }\n    if (!validateEmail(email)) {\n      setEmailError('Please enter a valid email');\n      return;\n    }\n    await stackApp.sendForgotPasswordEmail(email);\n\n    onSent?.();\n  };\n\n  return (\n    <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'stretch' }}>\n      <Label htmlFor=\"email\">Your Email</Label>\n      <Input\n        id=\"email\"\n        type=\"email\"\n        name=\"email\"\n        value={email}\n        onChange={(e) => {\n          setEmail(e.target.value);\n          setEmailError('');\n        }}\n      />\n      <FormWarningText text={emailError} />\n\n      <Button\n        style={{ marginTop: '1.5rem'}}\n        onClick={onSubmit}\n      >\n          Send Email\n      </Button>\n    </div>\n  );\n}\n"],"mappings":";;;AAEA,SAAS,gBAAgB;AACzB,OAAO,qBAAqB;AAC5B,SAAS,qBAAqB;AAC9B,SAAS,mBAAmB;AAC5B,SAAS,QAAQ,OAAO,aAAa;AAuBjC,SACE,KADF;AApBW,SAAR,eAAgC,EAAE,OAAO,GAA4B;AAC1E,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAS,EAAE;AACrC,QAAM,CAAC,YAAY,aAAa,IAAI,SAAS,EAAE;AAC/C,QAAM,WAAW,YAAY;AAE7B,QAAM,WAAW,YAAY;AAC3B,QAAI,CAAC,OAAO;AACV,oBAAc,yBAAyB;AACvC;AAAA,IACF;AACA,QAAI,CAAC,cAAc,KAAK,GAAG;AACzB,oBAAc,4BAA4B;AAC1C;AAAA,IACF;AACA,UAAM,SAAS,wBAAwB,KAAK;AAE5C,aAAS;AAAA,EACX;AAEA,SACE,qBAAC,SAAI,OAAO,EAAE,SAAS,QAAQ,eAAe,UAAU,YAAY,UAAU,GAC5E;AAAA,wBAAC,SAAM,SAAQ,SAAQ,wBAAU;AAAA,IACjC;AAAA,MAAC;AAAA;AAAA,QACC,IAAG;AAAA,QACH,MAAK;AAAA,QACL,MAAK;AAAA,QACL,OAAO;AAAA,QACP,UAAU,CAAC,MAAM;AACf,mBAAS,EAAE,OAAO,KAAK;AACvB,wBAAc,EAAE;AAAA,QAClB;AAAA;AAAA,IACF;AAAA,IACA,oBAAC,mBAAgB,MAAM,YAAY;AAAA,IAEnC;AAAA,MAAC;AAAA;AAAA,QACC,OAAO,EAAE,WAAW,SAAQ;AAAA,QAC5B,SAAS;AAAA,QACV;AAAA;AAAA,IAED;AAAA,KACF;AAEJ;","names":[]}
+{"version":3,"sources":["../../../src/components/forgot-password.tsx"],"sourcesContent":["'use client';\n\nimport { useForm } from \"react-hook-form\";\nimport { yupResolver } from \"@hookform/resolvers/yup\";\nimport * as yup from \"yup\";\nimport FormWarningText from \"./form-warning\";\nimport { useStackApp } from \"..\";\nimport { Button, Input, Label } from \"../components-core\";\nimport { runAsynchronously } from \"@stackframe/stack-shared/dist/utils/promises\";\n\nconst schema = yup.object().shape({\n  email: yup.string().email('Please enter a valid email').required('Please enter your email')\n});\n\nexport default function ForgotPassword({ onSent }: { onSent?: () => void }) {\n  const { register, handleSubmit, formState: { errors }, clearErrors } = useForm({\n    resolver: yupResolver(schema)\n  });\n  const stackApp = useStackApp();\n\n  const onSubmit = async (data: yup.InferType<typeof schema>) => {\n    const { email } = data;\n    await stackApp.sendForgotPasswordEmail(email);\n    onSent?.();\n  };\n\n  return (\n    <form\n      style={{ display: 'flex', flexDirection: 'column', alignItems: 'stretch' }}       \n      onSubmit={e => runAsynchronously(handleSubmit(onSubmit)(e))}\n      noValidate\n    >\n      <Label htmlFor=\"email\">Your Email</Label>\n      <Input\n        id=\"email\"\n        type=\"email\"\n        {...register('email')}\n        onChange={() => clearErrors('email')}\n      />\n      <FormWarningText text={errors.email?.message?.toString()} />\n\n      <Button\n        type=\"submit\"\n        style={{ marginTop: '1.5rem' }}\n      >\n        Send Email\n      </Button>\n    </form>\n  );\n}\n"],"mappings":";;;AAEA,SAAS,eAAe;AACxB,SAAS,mBAAmB;AAC5B,YAAY,SAAS;AACrB,OAAO,qBAAqB;AAC5B,SAAS,mBAAmB;AAC5B,SAAS,QAAQ,OAAO,aAAa;AACrC,SAAS,yBAAyB;AAmB9B,SAKE,KALF;AAjBJ,IAAM,SAAa,WAAO,EAAE,MAAM;AAAA,EAChC,OAAW,WAAO,EAAE,MAAM,4BAA4B,EAAE,SAAS,yBAAyB;AAC5F,CAAC;AAEc,SAAR,eAAgC,EAAE,OAAO,GAA4B;AAC1E,QAAM,EAAE,UAAU,cAAc,WAAW,EAAE,OAAO,GAAG,YAAY,IAAI,QAAQ;AAAA,IAC7E,UAAU,YAAY,MAAM;AAAA,EAC9B,CAAC;AACD,QAAM,WAAW,YAAY;AAE7B,QAAM,WAAW,OAAO,SAAuC;AAC7D,UAAM,EAAE,MAAM,IAAI;AAClB,UAAM,SAAS,wBAAwB,KAAK;AAC5C,aAAS;AAAA,EACX;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,OAAO,EAAE,SAAS,QAAQ,eAAe,UAAU,YAAY,UAAU;AAAA,MACzE,UAAU,OAAK,kBAAkB,aAAa,QAAQ,EAAE,CAAC,CAAC;AAAA,MAC1D,YAAU;AAAA,MAEV;AAAA,4BAAC,SAAM,SAAQ,SAAQ,wBAAU;AAAA,QACjC;AAAA,UAAC;AAAA;AAAA,YACC,IAAG;AAAA,YACH,MAAK;AAAA,YACJ,GAAG,SAAS,OAAO;AAAA,YACpB,UAAU,MAAM,YAAY,OAAO;AAAA;AAAA,QACrC;AAAA,QACA,oBAAC,mBAAgB,MAAM,OAAO,OAAO,SAAS,SAAS,GAAG;AAAA,QAE1D;AAAA,UAAC;AAAA;AAAA,YACC,MAAK;AAAA,YACL,OAAO,EAAE,WAAW,SAAS;AAAA,YAC9B;AAAA;AAAA,QAED;AAAA;AAAA;AAAA,EACF;AAEJ;","names":[]}