@stytch/nextjs 0.4.3 → 0.4.5

package/CHANGELOG.md

@@ -0,0 +1,15 @@
+# @stytch/nextjs
+
+## 0.4.5
+
+### Patch Changes
+
+- Reset Password component
+
+## 0.4.4
+
+### Patch Changes
+
+- Send methods in the SDK
+- Updated dependencies
+  - @stytch/vanilla-js@0.4.4

package/dist/index.d.ts

@@ -200,5 +200,45 @@ interface StytchProps {
  * @param callbacks - An optional {@link Callbacks} object
  */
 declare const StytchLogin: ({ config, styles, callbacks }: StytchProps) => JSX.Element;
-export { StytchProvider, useStytch, useStytchSession, useStytchUser, withStytch, withStytchSession, withStytchUser, StytchLogin };
+interface StytchResetPasswordProps extends StytchProps {
+    passwordResetToken: string;
+}
+/**
+ * The Stytch Reset Password component.
+ * This component can only be used with a {@link StytchUIClient} client constructor
+ * passed into the {@link StytchProvider}
+ *
+ * See the {@link https://stytch.com/docs/sdks/javascript-sdk online reference}
+ * and {@link https://storybook.stytch.com interactive examples} for more.
+ *
+ * @example
+ * <StytchPasswordReset
+ *   config={{
+ *     products: ['emailMagicLinks', 'oauth'],
+ *     emailMagicLinksOptions: {
+ *       loginRedirectURL: 'https://example.com/authenticate',
+ *       signupRedirectURL: 'https://example.com/authenticate',
+ *     },
+ *     oauthOptions: {
+ *      providers: [{ type: OAuthProviders.Google }, { type: OAuthProviders.Microsoft }],
+ *    },
+ *   }}
+ *   passwordResetToken="PvC5UudZ7TPZbELt95yXAQ-8MeEUCRob8bUQ-g52fIJs"
+ *   styles={{
+ *     fontFamily: '"Helvetica New", Helvetica, sans-serif',
+ *     primaryColor: '#0577CA',
+ *     width: '321px',
+ *   }}
+ *   callbacks={{
+ *     onEvent: (event) => console.log(event)
+ *   }}
+ * />
+ *
+ * @param config - A {@link StytchLoginConfig} object
+ * @param passwordResetToken - A Stytch password reset token
+ * @param styles - An optional {@link StyleConfig} to customize the look and feel of the screen.
+ * @param callbacks - An optional {@link Callbacks} object
+ */
+declare const StytchPasswordReset: ({ config, styles, callbacks, passwordResetToken }: StytchResetPasswordProps) => JSX.Element;
+export { StytchProvider, useStytch, useStytchSession, useStytchUser, withStytch, withStytchSession, withStytchUser, StytchLogin, StytchPasswordReset };
 export type { StytchProviderProps };

package/dist/index.esm.d.ts

@@ -200,5 +200,45 @@ interface StytchProps {
  * @param callbacks - An optional {@link Callbacks} object
  */
 declare const StytchLogin: ({ config, styles, callbacks }: StytchProps) => JSX.Element;
-export { StytchProvider, useStytch, useStytchSession, useStytchUser, withStytch, withStytchSession, withStytchUser, StytchLogin };
+interface StytchResetPasswordProps extends StytchProps {
+    passwordResetToken: string;
+}
+/**
+ * The Stytch Reset Password component.
+ * This component can only be used with a {@link StytchUIClient} client constructor
+ * passed into the {@link StytchProvider}
+ *
+ * See the {@link https://stytch.com/docs/sdks/javascript-sdk online reference}
+ * and {@link https://storybook.stytch.com interactive examples} for more.
+ *
+ * @example
+ * <StytchPasswordReset
+ *   config={{
+ *     products: ['emailMagicLinks', 'oauth'],
+ *     emailMagicLinksOptions: {
+ *       loginRedirectURL: 'https://example.com/authenticate',
+ *       signupRedirectURL: 'https://example.com/authenticate',
+ *     },
+ *     oauthOptions: {
+ *      providers: [{ type: OAuthProviders.Google }, { type: OAuthProviders.Microsoft }],
+ *    },
+ *   }}
+ *   passwordResetToken="PvC5UudZ7TPZbELt95yXAQ-8MeEUCRob8bUQ-g52fIJs"
+ *   styles={{
+ *     fontFamily: '"Helvetica New", Helvetica, sans-serif',
+ *     primaryColor: '#0577CA',
+ *     width: '321px',
+ *   }}
+ *   callbacks={{
+ *     onEvent: (event) => console.log(event)
+ *   }}
+ * />
+ *
+ * @param config - A {@link StytchLoginConfig} object
+ * @param passwordResetToken - A Stytch password reset token
+ * @param styles - An optional {@link StyleConfig} to customize the look and feel of the screen.
+ * @param callbacks - An optional {@link Callbacks} object
+ */
+declare const StytchPasswordReset: ({ config, styles, callbacks, passwordResetToken }: StytchResetPasswordProps) => JSX.Element;
+export { StytchProvider, useStytch, useStytchSession, useStytchUser, withStytch, withStytchSession, withStytchUser, StytchLogin, StytchPasswordReset };
 export type { StytchProviderProps };

package/dist/index.esm.js

@@ -234,5 +234,68 @@ const StytchLogin = ({ config, styles, callbacks }) => {
     }, [stytchClient, config, styles, callbacks]);
     return React.createElement("div", { ref: containerEl });
 };
+/**
+ * The Stytch Reset Password component.
+ * This component can only be used with a {@link StytchUIClient} client constructor
+ * passed into the {@link StytchProvider}
+ *
+ * See the {@link https://stytch.com/docs/sdks/javascript-sdk online reference}
+ * and {@link https://storybook.stytch.com interactive examples} for more.
+ *
+ * @example
+ * <StytchPasswordReset
+ *   config={{
+ *     products: ['emailMagicLinks', 'oauth'],
+ *     emailMagicLinksOptions: {
+ *       loginRedirectURL: 'https://example.com/authenticate',
+ *       signupRedirectURL: 'https://example.com/authenticate',
+ *     },
+ *     oauthOptions: {
+ *      providers: [{ type: OAuthProviders.Google }, { type: OAuthProviders.Microsoft }],
+ *    },
+ *   }}
+ *   passwordResetToken="PvC5UudZ7TPZbELt95yXAQ-8MeEUCRob8bUQ-g52fIJs"
+ *   styles={{
+ *     fontFamily: '"Helvetica New", Helvetica, sans-serif',
+ *     primaryColor: '#0577CA',
+ *     width: '321px',
+ *   }}
+ *   callbacks={{
+ *     onEvent: (event) => console.log(event)
+ *   }}
+ * />
+ *
+ * @param config - A {@link StytchLoginConfig} object
+ * @param passwordResetToken - A Stytch password reset token
+ * @param styles - An optional {@link StyleConfig} to customize the look and feel of the screen.
+ * @param callbacks - An optional {@link Callbacks} object
+ */
+const StytchPasswordReset = ({ config, styles, callbacks, passwordResetToken }) => {
+    invariant(useIsMounted__INTERNAL(), noProviderError('<StytchResetPassword />'));
+    const stytchClient = useStytch();
+    const containerEl = useRef(null);
+    useIsomorphicLayoutEffect(() => {
+        if (!isUIClient(stytchClient)) {
+            throw Error(noHeadlessClientError);
+        }
+        if (!containerEl.current) {
+            return;
+        }
+        if (!containerEl.current.id) {
+            const randId = Math.floor(Math.random() * 1e6);
+            containerEl.current.id = `stytch-reset-password-${randId}`;
+        }
+        if (passwordResetToken) {
+            stytchClient.mountResetPassword({
+                config,
+                callbacks,
+                elementId: `#${containerEl.current.id}`,
+                styles,
+                passwordResetToken,
+            });
+        }
+    }, [stytchClient, config, styles, callbacks, passwordResetToken]);
+    return React.createElement("div", { ref: containerEl });
+};
 
-export { StytchLogin, StytchProvider, useStytch, useStytchSession, useStytchUser, withStytch, withStytchSession, withStytchUser };
+export { StytchLogin, StytchPasswordReset, StytchProvider, useStytch, useStytchSession, useStytchUser, withStytch, withStytchSession, withStytchUser };

package/dist/index.js

@@ -114,7 +114,7 @@ const useStytch = () => {
 const withStytch = (Component) => {
     const WithStytch = (props) => {
         invariant(useIsMounted__INTERNAL(), noProviderError('withStytch'));
-        return React__default["default"].createElement(Component, Object.assign({}, props, { stytch: useStytch() }));
+        return React__default['default'].createElement(Component, Object.assign({}, props, { stytch: useStytch() }));
     };
     WithStytch.displayName = `withStytch(${Component.displayName || Component.name || 'Component'})`;
     return WithStytch;
@@ -123,7 +123,7 @@ const withStytchUser = (Component) => {
     const WithStytchUser = (props) => {
         invariant(useIsMounted__INTERNAL(), noProviderError('withStytchUser'));
         const { user, isInitialized, fromCache } = useStytchUser();
-        return (React__default["default"].createElement(Component, Object.assign({}, props, { stytchUser: user, stytchUserIsInitialized: isInitialized, stytchUserIsFromCache: fromCache })));
+        return (React__default['default'].createElement(Component, Object.assign({}, props, { stytchUser: user, stytchUserIsInitialized: isInitialized, stytchUserIsFromCache: fromCache })));
     };
     WithStytchUser.displayName = `withStytchUser(${Component.displayName || Component.name || 'Component'})`;
     return WithStytchUser;
@@ -132,7 +132,7 @@ const withStytchSession = (Component) => {
     const WithStytchSession = (props) => {
         invariant(useIsMounted__INTERNAL(), noProviderError('withStytchSession'));
         const { session, isInitialized, fromCache } = useStytchSession();
-        return (React__default["default"].createElement(Component, Object.assign({}, props, { stytchSession: session, stytchSessionIsInitialized: isInitialized, stytchSessionIsFromCache: fromCache })));
+        return (React__default['default'].createElement(Component, Object.assign({}, props, { stytchSession: session, stytchSessionIsInitialized: isInitialized, stytchSessionIsFromCache: fromCache })));
     };
     WithStytchSession.displayName = `withStytchSession(${Component.displayName || Component.name || 'Component'})`;
     return WithStytchSession;
@@ -176,9 +176,9 @@ const StytchProvider = ({ stytch, children }) => {
     }, [stytch, setUser, setSession]);
     const finalSess = !!session.session === !!user.user ? session : initialSession;
     const finalUser = !!session.session === !!user.user ? user : initialUser;
-    return (React__default["default"].createElement(StytchContext.Provider, { value: ctx },
-        React__default["default"].createElement(StytchUserContext.Provider, { value: finalUser },
-            React__default["default"].createElement(StytchSessionContext.Provider, { value: finalSess }, children))));
+    return (React__default['default'].createElement(StytchContext.Provider, { value: ctx },
+        React__default['default'].createElement(StytchUserContext.Provider, { value: finalUser },
+            React__default['default'].createElement(StytchSessionContext.Provider, { value: finalSess }, children))));
 };
 
 // cc https://medium.com/@alexandereardon/uselayouteffect-and-ssr-192986cdcf7a
@@ -240,10 +240,74 @@ const StytchLogin = ({ config, styles, callbacks }) => {
             styles,
         });
     }, [stytchClient, config, styles, callbacks]);
-    return React__default["default"].createElement("div", { ref: containerEl });
+    return React__default['default'].createElement("div", { ref: containerEl });
+};
+/**
+ * The Stytch Reset Password component.
+ * This component can only be used with a {@link StytchUIClient} client constructor
+ * passed into the {@link StytchProvider}
+ *
+ * See the {@link https://stytch.com/docs/sdks/javascript-sdk online reference}
+ * and {@link https://storybook.stytch.com interactive examples} for more.
+ *
+ * @example
+ * <StytchPasswordReset
+ *   config={{
+ *     products: ['emailMagicLinks', 'oauth'],
+ *     emailMagicLinksOptions: {
+ *       loginRedirectURL: 'https://example.com/authenticate',
+ *       signupRedirectURL: 'https://example.com/authenticate',
+ *     },
+ *     oauthOptions: {
+ *      providers: [{ type: OAuthProviders.Google }, { type: OAuthProviders.Microsoft }],
+ *    },
+ *   }}
+ *   passwordResetToken="PvC5UudZ7TPZbELt95yXAQ-8MeEUCRob8bUQ-g52fIJs"
+ *   styles={{
+ *     fontFamily: '"Helvetica New", Helvetica, sans-serif',
+ *     primaryColor: '#0577CA',
+ *     width: '321px',
+ *   }}
+ *   callbacks={{
+ *     onEvent: (event) => console.log(event)
+ *   }}
+ * />
+ *
+ * @param config - A {@link StytchLoginConfig} object
+ * @param passwordResetToken - A Stytch password reset token
+ * @param styles - An optional {@link StyleConfig} to customize the look and feel of the screen.
+ * @param callbacks - An optional {@link Callbacks} object
+ */
+const StytchPasswordReset = ({ config, styles, callbacks, passwordResetToken }) => {
+    invariant(useIsMounted__INTERNAL(), noProviderError('<StytchResetPassword />'));
+    const stytchClient = useStytch();
+    const containerEl = React.useRef(null);
+    useIsomorphicLayoutEffect(() => {
+        if (!isUIClient(stytchClient)) {
+            throw Error(noHeadlessClientError);
+        }
+        if (!containerEl.current) {
+            return;
+        }
+        if (!containerEl.current.id) {
+            const randId = Math.floor(Math.random() * 1e6);
+            containerEl.current.id = `stytch-reset-password-${randId}`;
+        }
+        if (passwordResetToken) {
+            stytchClient.mountResetPassword({
+                config,
+                callbacks,
+                elementId: `#${containerEl.current.id}`,
+                styles,
+                passwordResetToken,
+            });
+        }
+    }, [stytchClient, config, styles, callbacks, passwordResetToken]);
+    return React__default['default'].createElement("div", { ref: containerEl });
 };
 
 exports.StytchLogin = StytchLogin;
+exports.StytchPasswordReset = StytchPasswordReset;
 exports.StytchProvider = StytchProvider;
 exports.useStytch = useStytch;
 exports.useStytchSession = useStytchSession;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stytch/nextjs",
-  "version": "0.4.3",
+  "version": "0.4.5",
   "description": "Stytch's official Next.js Library",
   "main": "./dist/index.js",
   "module": "./dist/index.esm.js",
@@ -20,14 +20,14 @@
   "license": "MIT",
   "author": "Stytch",
   "devDependencies": {
-    "@babel/runtime": "^7.18.6",
-    "@stytch/vanilla-js": "0.3.3",
+    "@babel/runtime": "7.18.6",
+    "@stytch/vanilla-js": "0.4.4",
     "eslint-config-custom": "0.0.0",
-    "rollup": "^2.56.3",
+    "rollup": "2.56.3",
     "typescript": "4.7.4"
   },
   "peerDependencies": {
-    "@stytch/vanilla-js": "^0.3.3",
+    "@stytch/vanilla-js": "^0.4.4",
     "react": ">= 17.0.2",
     "react-dom": ">= 17.0.2"
   },
@@ -43,4 +43,4 @@
     "jwt",
     "user"
   ]
-}
+}