@stytch/react 0.0.2-0 → 0.0.3-0

package/README.md

@@ -1,4 +1,4 @@
-# Stytch-React
+# @stytch/react
 
 Stytch's React Library
 
@@ -30,7 +30,7 @@ ReactDOM.render(
 // Now use Stytch in your components
 const App = () => {
   const stytchProps = {
-    loginOrSignupView: {
+    config: {
       products: ['emailMagicLinks'],
       emailMagicLinksOptions: {
         loginRedirectURL: 'https://example.com/authenticate',
@@ -40,7 +40,7 @@ const App = () => {
         createUserAsPending: true,
       },
     },
-    style: {
+    styles: {
       fontFamily: '"Helvetica New", Helvetica, sans-serif',
       width: '321px',
       primaryColor: '#0577CA',
@@ -54,12 +54,7 @@ const App = () => {
 
   return (
     <div id="login">
-      <Stytch
-        publicToken={stytchProps.publicToken}
-        loginOrSignupView={stytchProps.loginOrSignupView}
-        style={stytchProps.style}
-        callbacks={stytchProps.callbacks}
-      />
+      <Stytch config={stytchProps.loginOrSignupView} styles={stytchProps.style} callbacks={stytchProps.callbacks} />
     </div>
   );
 };

package/dist/index.d.ts

@@ -1,15 +1,17 @@
 /// <reference types="react" />
-import { Config, StyleConfig, User, Session, StytchUIClient } from "@stytch/vanilla-js";
-import * as React from "react";
+import { Callbacks, Config, StyleConfig, User, Session, StytchUIClient } from "@stytch/vanilla-js";
+import React from "react";
+import { ReactNode } from "react";
 import { StytchHeadlessClient } from "@stytch/vanilla-js/headless";
 /**
  * Stytch JS React Component
  *
  * [Documentation](https://stytch.com/docs/javascript-sdk)
  */
-declare const Stytch: ({ config, styles }: {
+declare const Stytch: ({ config, styles, callbacks }: {
     config: Config;
     styles: StyleConfig;
+    callbacks?: Callbacks | undefined;
 }) => JSX.Element | null;
 type StytchClient = StytchUIClient | StytchHeadlessClient;
 declare const useStytchUser: () => User | null;
@@ -26,7 +28,7 @@ declare const withStytchSession: <T extends object>(Component: React.ComponentTy
 }>) => React.ComponentType<T>;
 type StytchProviderProps = {
     stytch: StytchClient;
-    children?: React.ReactNode;
+    children?: ReactNode;
 };
 declare const StytchProvider: ({ stytch, children }: StytchProviderProps) => JSX.Element;
 export { Stytch, StytchProvider, useStytch, useStytchSession, useStytchUser, withStytch, withStytchSession, withStytchUser };

package/dist/index.esm.d.ts

@@ -1,15 +1,17 @@
 /// <reference types="react" />
-import { Config, StyleConfig, User, Session, StytchUIClient } from "@stytch/vanilla-js";
-import * as React from "react";
+import { Callbacks, Config, StyleConfig, User, Session, StytchUIClient } from "@stytch/vanilla-js";
+import React from "react";
+import { ReactNode } from "react";
 import { StytchHeadlessClient } from "@stytch/vanilla-js/headless";
 /**
  * Stytch JS React Component
  *
  * [Documentation](https://stytch.com/docs/javascript-sdk)
  */
-declare const Stytch: ({ config, styles }: {
+declare const Stytch: ({ config, styles, callbacks }: {
     config: Config;
     styles: StyleConfig;
+    callbacks?: Callbacks | undefined;
 }) => JSX.Element | null;
 type StytchClient = StytchUIClient | StytchHeadlessClient;
 declare const useStytchUser: () => User | null;
@@ -26,7 +28,7 @@ declare const withStytchSession: <T extends object>(Component: React.ComponentTy
 }>) => React.ComponentType<T>;
 type StytchProviderProps = {
     stytch: StytchClient;
-    children?: React.ReactNode;
+    children?: ReactNode;
 };
 declare const StytchProvider: ({ stytch, children }: StytchProviderProps) => JSX.Element;
 export { Stytch, StytchProvider, useStytch, useStytchSession, useStytchUser, withStytch, withStytchSession, withStytchUser };

package/dist/index.esm.js

@@ -1,45 +1,90 @@
 import * as React from 'react';
+import React__default, { useRef, useState, useEffect, useCallback, createContext, useContext, useMemo } from 'react';
 
-const StytchUserContext = React.createContext(null);
-const StytchSessionContext = React.createContext(null);
-const StytchContext = React.createContext({});
+const noProviderError = (item) => `${item} can only be used inside <StytchProvider>.`;
+const providerMustBeUniqueError = 'You cannot render a <StytchProvider> inside another <StytchProvider>.';
+const noSSRError = `The @stytch/react library is not meant for use with serverside environments like NextJS.
+Use the @stytch/nextjs library instead - 
+npm remove @stytch/react && npm install @stytch/nextjs
+`;
+const noHeadlessClientError = `Tried to create a Stytch Login UI element using the Stytch Headless SDK.
+You must use the UI SDK to use UI elements.
+Please make sure you are importing from @stytch/vanilla-js and not from the @stytch/vanilla-js/headless.`;
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+function invariant(cond, message) {
+    if (!cond)
+        throw new Error(message);
+}
+
+// useState can cause memory leaks if it is set after the component unmounted. For example, if it is
+// set after `await`, or in a `then`, `catch`, or `finally`, or in a setTimout/setInterval.
+const useAsyncState = (initialState) => {
+    const isMounted = useRef(true);
+    const [state, setState] = useState(initialState);
+    useEffect(() => {
+        isMounted.current = true;
+        return () => {
+            isMounted.current = false;
+        };
+    }, []);
+    const setStateAction = useCallback((newState) => {
+        isMounted.current && setState(newState);
+    }, []);
+    return [state, setStateAction];
+};
+
+const StytchContext = createContext({ isMounted: false });
+const StytchUserContext = createContext(null);
+const StytchSessionContext = createContext(null);
+const useIsMounted__INTERNAL = () => useContext(StytchContext).isMounted;
 const isUIClient = (client) => {
     return client.mount !== undefined;
 };
 const useStytchUser = () => {
-    return React.useContext(StytchUserContext);
+    invariant(useIsMounted__INTERNAL(), noProviderError('useStytchUser'));
+    return useContext(StytchUserContext);
 };
 const useStytchSession = () => {
-    return React.useContext(StytchSessionContext);
+    invariant(useIsMounted__INTERNAL(), noProviderError('useStytchSession'));
+    return useContext(StytchSessionContext);
 };
 const useStytch = () => {
-    return React.useContext(StytchContext);
+    const ctx = useContext(StytchContext);
+    invariant(ctx.isMounted, noProviderError('useStytch'));
+    return ctx.client;
 };
 const withStytch = (Component) => {
     const WithStytch = (props) => {
-        return React.createElement(Component, { ...props, stytch: useStytch() });
+        invariant(useIsMounted__INTERNAL(), noProviderError('withStytch'));
+        return React__default.createElement(Component, { ...props, stytch: useStytch() });
     };
     WithStytch.displayName = `withStytch(${Component.displayName || Component.name || 'Component'})`;
     return WithStytch;
 };
 const withStytchUser = (Component) => {
     const WithStytchUser = (props) => {
-        return React.createElement(Component, { ...props, stytchUser: useStytchUser() });
+        invariant(useIsMounted__INTERNAL(), noProviderError('withStytchUser'));
+        return React__default.createElement(Component, { ...props, stytchUser: useStytchUser() });
     };
     WithStytchUser.displayName = `withStytchUser(${Component.displayName || Component.name || 'Component'})`;
     return WithStytchUser;
 };
 const withStytchSession = (Component) => {
     const WithStytchSession = (props) => {
-        return React.createElement(Component, { ...props, stytchSession: useStytchSession() });
+        invariant(useIsMounted__INTERNAL(), noProviderError('withStytchSession'));
+        return React__default.createElement(Component, { ...props, stytchSession: useStytchSession() });
     };
     WithStytchSession.displayName = `withStytchSession(${Component.displayName || Component.name || 'Component'})`;
     return WithStytchSession;
 };
 const StytchProvider = ({ stytch, children }) => {
-    const [user, setUser] = React.useState(null);
-    const [session, setSession] = React.useState(null);
-    React.useEffect(() => {
+    invariant(!useIsMounted__INTERNAL(), providerMustBeUniqueError);
+    invariant(typeof window !== 'undefined', noSSRError);
+    const ctx = useMemo(() => ({ client: stytch, isMounted: true }), [stytch]);
+    const [user, setUser] = useAsyncState(stytch.user.getSync());
+    const [session, setSession] = useAsyncState(stytch.session.getSync());
+    useEffect(() => {
         const unsubscribeUser = stytch.user.onChange((user) => setUser(user));
         const unsubscribeSession = stytch.session.onChange((session) => setSession(session));
         return () => {
@@ -47,45 +92,41 @@ const StytchProvider = ({ stytch, children }) => {
             unsubscribeSession();
         };
     }, [stytch, setUser, setSession]);
-    return (React.createElement(StytchContext.Provider, { value: stytch },
-        React.createElement(StytchUserContext.Provider, { value: session && user },
-            React.createElement(StytchSessionContext.Provider, { value: user && session }, children))));
+    return (React__default.createElement(StytchContext.Provider, { value: ctx },
+        React__default.createElement(StytchUserContext.Provider, { value: session && user },
+            React__default.createElement(StytchSessionContext.Provider, { value: user && session }, children))));
 };
 
 /**
  * Returns a unique element ID.
- * Client-side only - will return null for server-side
- * resolves: https://stytch.slack.com/archives/C015UDB4X33/p1641450131000800
- * based on: https://github.com/vercel/next.js/issues/7322#issuecomment-968858477
+ * Intended to only be used client-side - this will cause HTML mismatch issues in SSR!
+ * cf: https://github.com/vercel/next.js/issues/7322#issuecomment-968858477
  */
 const useUniqueElementId = () => {
-    const [elementId, setElementId] = React.useState(null);
-    React.useEffect(() => {
+    return React.useMemo(() => {
         const randId = Math.floor(Math.random() * 1e6);
-        setElementId(`stytch-magic-link-${randId}`);
+        return `stytch-magic-link-${randId}`;
     }, []);
-    return elementId;
 };
 /**
  * Stytch JS React Component
  *
  * [Documentation](https://stytch.com/docs/javascript-sdk)
  */
-const Stytch = ({ config, styles }) => {
+const Stytch = ({ config, styles, callbacks, }) => {
+    invariant(useIsMounted__INTERNAL(), noProviderError('<Stytch />'));
     const stytchClient = useStytch();
     const elementId = useUniqueElementId();
     React.useEffect(() => {
-        if (!stytchClient || !elementId) {
+        if (!elementId) {
             return;
         }
         if (!isUIClient(stytchClient)) {
-            throw Error(`Tried to create a Stytch Login UI element using the Stytch Headless SDK.
-You must use the UI SDK to use UI elements.
-Please make sure you are importing from @stytch/vanilla-js and not from the @stytch/vanilla-js/headless.
-`);
+            throw Error(noHeadlessClientError);
         }
         stytchClient.mount({
             config,
+            callbacks,
             elementId: `#${elementId}`,
             styles,
         });

package/dist/index.js

@@ -4,6 +4,8 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
 
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
 function _interopNamespace(e) {
   if (e && e.__esModule) return e;
   var n = Object.create(null);
@@ -22,48 +24,93 @@ function _interopNamespace(e) {
   return Object.freeze(n);
 }
 
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 
-const StytchUserContext = React__namespace.createContext(null);
-const StytchSessionContext = React__namespace.createContext(null);
-const StytchContext = React__namespace.createContext({});
+const noProviderError = (item) => `${item} can only be used inside <StytchProvider>.`;
+const providerMustBeUniqueError = 'You cannot render a <StytchProvider> inside another <StytchProvider>.';
+const noSSRError = `The @stytch/react library is not meant for use with serverside environments like NextJS.
+Use the @stytch/nextjs library instead - 
+npm remove @stytch/react && npm install @stytch/nextjs
+`;
+const noHeadlessClientError = `Tried to create a Stytch Login UI element using the Stytch Headless SDK.
+You must use the UI SDK to use UI elements.
+Please make sure you are importing from @stytch/vanilla-js and not from the @stytch/vanilla-js/headless.`;
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+function invariant(cond, message) {
+    if (!cond)
+        throw new Error(message);
+}
+
+// useState can cause memory leaks if it is set after the component unmounted. For example, if it is
+// set after `await`, or in a `then`, `catch`, or `finally`, or in a setTimout/setInterval.
+const useAsyncState = (initialState) => {
+    const isMounted = React.useRef(true);
+    const [state, setState] = React.useState(initialState);
+    React.useEffect(() => {
+        isMounted.current = true;
+        return () => {
+            isMounted.current = false;
+        };
+    }, []);
+    const setStateAction = React.useCallback((newState) => {
+        isMounted.current && setState(newState);
+    }, []);
+    return [state, setStateAction];
+};
+
+const StytchContext = React.createContext({ isMounted: false });
+const StytchUserContext = React.createContext(null);
+const StytchSessionContext = React.createContext(null);
+const useIsMounted__INTERNAL = () => React.useContext(StytchContext).isMounted;
 const isUIClient = (client) => {
     return client.mount !== undefined;
 };
 const useStytchUser = () => {
-    return React__namespace.useContext(StytchUserContext);
+    invariant(useIsMounted__INTERNAL(), noProviderError('useStytchUser'));
+    return React.useContext(StytchUserContext);
 };
 const useStytchSession = () => {
-    return React__namespace.useContext(StytchSessionContext);
+    invariant(useIsMounted__INTERNAL(), noProviderError('useStytchSession'));
+    return React.useContext(StytchSessionContext);
 };
 const useStytch = () => {
-    return React__namespace.useContext(StytchContext);
+    const ctx = React.useContext(StytchContext);
+    invariant(ctx.isMounted, noProviderError('useStytch'));
+    return ctx.client;
 };
 const withStytch = (Component) => {
     const WithStytch = (props) => {
-        return React__namespace.createElement(Component, { ...props, stytch: useStytch() });
+        invariant(useIsMounted__INTERNAL(), noProviderError('withStytch'));
+        return React__default["default"].createElement(Component, { ...props, stytch: useStytch() });
     };
     WithStytch.displayName = `withStytch(${Component.displayName || Component.name || 'Component'})`;
     return WithStytch;
 };
 const withStytchUser = (Component) => {
     const WithStytchUser = (props) => {
-        return React__namespace.createElement(Component, { ...props, stytchUser: useStytchUser() });
+        invariant(useIsMounted__INTERNAL(), noProviderError('withStytchUser'));
+        return React__default["default"].createElement(Component, { ...props, stytchUser: useStytchUser() });
     };
     WithStytchUser.displayName = `withStytchUser(${Component.displayName || Component.name || 'Component'})`;
     return WithStytchUser;
 };
 const withStytchSession = (Component) => {
     const WithStytchSession = (props) => {
-        return React__namespace.createElement(Component, { ...props, stytchSession: useStytchSession() });
+        invariant(useIsMounted__INTERNAL(), noProviderError('withStytchSession'));
+        return React__default["default"].createElement(Component, { ...props, stytchSession: useStytchSession() });
     };
     WithStytchSession.displayName = `withStytchSession(${Component.displayName || Component.name || 'Component'})`;
     return WithStytchSession;
 };
 const StytchProvider = ({ stytch, children }) => {
-    const [user, setUser] = React__namespace.useState(null);
-    const [session, setSession] = React__namespace.useState(null);
-    React__namespace.useEffect(() => {
+    invariant(!useIsMounted__INTERNAL(), providerMustBeUniqueError);
+    invariant(typeof window !== 'undefined', noSSRError);
+    const ctx = React.useMemo(() => ({ client: stytch, isMounted: true }), [stytch]);
+    const [user, setUser] = useAsyncState(stytch.user.getSync());
+    const [session, setSession] = useAsyncState(stytch.session.getSync());
+    React.useEffect(() => {
         const unsubscribeUser = stytch.user.onChange((user) => setUser(user));
         const unsubscribeSession = stytch.session.onChange((session) => setSession(session));
         return () => {
@@ -71,45 +118,41 @@ const StytchProvider = ({ stytch, children }) => {
             unsubscribeSession();
         };
     }, [stytch, setUser, setSession]);
-    return (React__namespace.createElement(StytchContext.Provider, { value: stytch },
-        React__namespace.createElement(StytchUserContext.Provider, { value: session && user },
-            React__namespace.createElement(StytchSessionContext.Provider, { value: user && session }, children))));
+    return (React__default["default"].createElement(StytchContext.Provider, { value: ctx },
+        React__default["default"].createElement(StytchUserContext.Provider, { value: session && user },
+            React__default["default"].createElement(StytchSessionContext.Provider, { value: user && session }, children))));
 };
 
 /**
  * Returns a unique element ID.
- * Client-side only - will return null for server-side
- * resolves: https://stytch.slack.com/archives/C015UDB4X33/p1641450131000800
- * based on: https://github.com/vercel/next.js/issues/7322#issuecomment-968858477
+ * Intended to only be used client-side - this will cause HTML mismatch issues in SSR!
+ * cf: https://github.com/vercel/next.js/issues/7322#issuecomment-968858477
  */
 const useUniqueElementId = () => {
-    const [elementId, setElementId] = React__namespace.useState(null);
-    React__namespace.useEffect(() => {
+    return React__namespace.useMemo(() => {
         const randId = Math.floor(Math.random() * 1e6);
-        setElementId(`stytch-magic-link-${randId}`);
+        return `stytch-magic-link-${randId}`;
     }, []);
-    return elementId;
 };
 /**
  * Stytch JS React Component
  *
  * [Documentation](https://stytch.com/docs/javascript-sdk)
  */
-const Stytch = ({ config, styles }) => {
+const Stytch = ({ config, styles, callbacks, }) => {
+    invariant(useIsMounted__INTERNAL(), noProviderError('<Stytch />'));
     const stytchClient = useStytch();
     const elementId = useUniqueElementId();
     React__namespace.useEffect(() => {
-        if (!stytchClient || !elementId) {
+        if (!elementId) {
             return;
         }
         if (!isUIClient(stytchClient)) {
-            throw Error(`Tried to create a Stytch Login UI element using the Stytch Headless SDK.
-You must use the UI SDK to use UI elements.
-Please make sure you are importing from @stytch/vanilla-js and not from the @stytch/vanilla-js/headless.
-`);
+            throw Error(noHeadlessClientError);
         }
         stytchClient.mount({
             config,
+            callbacks,
             elementId: `#${elementId}`,
             styles,
         });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stytch/react",
-  "version": "0.0.2-0",
+  "version": "0.0.3-0",
   "description": "Stytch's official React Library",
   "main": "./dist/index.js",
   "module": "./dist/index.esm.js",
@@ -12,21 +12,22 @@
     "build": "npm run clean && npm run compile",
     "clean": "rm -rf ./dist",
     "compile": "rollup -c",
-    "dev": "tsc -p tsconfig.build.json --watch"
+    "dev": "tsc -p tsconfig.build.json --watch",
+    "test": "jest"
   },
   "license": "MIT",
   "author": "Stytch",
   "devDependencies": {
     "@babel/runtime": "^7.18.6",
-    "@stytch/vanilla-js": "0.0.1",
+    "@stytch/vanilla-js": "0.0.2-0",
     "eslint-config-custom": "0.0.0",
     "rollup": "^2.56.3",
     "typescript": "^4.5.3"
   },
   "peerDependencies": {
-    "@stytch/vanilla-js": "^0.0.1",
+    "@stytch/vanilla-js": "^0.0.2-0",
     "react": ">= 17.0.2",
     "react-dom": ">= 17.0.2"
   },
-  "stableVersion": "0.0.1"
+  "stableVersion": "0.0.2"
 }