@stytch/stytch-react 3.0.0 → 3.0.4

package/README.md

@@ -59,6 +59,10 @@ const App = () => {
 There are built in typescript definitions in the npm package.
 
 ### Changelog
+**[3.0.1] - 2020-8-25**
+- `@stytch/stytch-js` has been bumped to include new OAuth types
+- `SDKProductTypes` and `OAuthProvidersTypes` are now re-exported for convenience
+- Dependency bumps
 
 **[3.0.0] - 2020-8-1**
 - This package now uses the [@stytch/stytch-js](https://www.npmjs.com/package/@stytch/stytch-js) library to load stytch.js

package/dist/index.d.ts

@@ -12,4 +12,5 @@ interface StytchProps {
  * [Documentation](https://stytch.com/docs/javascript-sdk)
  */
 declare const Stytch: (props: StytchProps) => JSX.Element;
+export { SDKProductTypes, OAuthProvidersTypes } from "@stytch/stytch-js";
 export { Stytch, StytchProps };

package/dist/index.esm.d.ts

@@ -12,4 +12,5 @@ interface StytchProps {
  * [Documentation](https://stytch.com/docs/javascript-sdk)
  */
 declare const Stytch: (props: StytchProps) => JSX.Element;
+export { SDKProductTypes, OAuthProvidersTypes } from "@stytch/stytch-js";
 export { Stytch, StytchProps };

package/dist/index.esm.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 
 var PUBLIC_URL = 'https://js.stytch.com/stytch.js';
 function getJSUrl() {
@@ -9,6 +9,12 @@ function getJSUrl() {
         if (process.env.REACT_APP_STYTCH_JS_SDK_URL) {
             return process.env.REACT_APP_STYTCH_JS_SDK_URL;
         }
+        if (process.env.NEXT_PUBLIC_STYTCH_JS_SDK_URL) {
+            return process.env.NEXT_PUBLIC_STYTCH_JS_SDK_URL;
+        }
+        if (process.env.STORYBOOK_STYTCH_JS_SDK_URL) {
+            return process.env.STORYBOOK_STYTCH_JS_SDK_URL;
+        }
         return PUBLIC_URL;
     }
     catch (err) {
@@ -80,17 +86,38 @@ var CallbackEventType;
 var SDKProductTypes;
 (function (SDKProductTypes) {
     SDKProductTypes["emailMagicLinks"] = "emailMagicLinks";
+    SDKProductTypes["oauth"] = "oauth";
 })(SDKProductTypes || (SDKProductTypes = {}));
+var OAuthProvidersTypes;
+(function (OAuthProvidersTypes) {
+    OAuthProvidersTypes["Google"] = "google";
+    OAuthProvidersTypes["Microsoft"] = "microsoft";
+    OAuthProvidersTypes["Apple"] = "apple";
+})(OAuthProvidersTypes || (OAuthProvidersTypes = {}));
 
 var useStytchFactory = function () {
-    var _a = React.useState(), stytchFactory = _a[0], setStytchFactory = _a[1];
-    React.useEffect(function () {
+    var _a = useState(), stytchFactory = _a[0], setStytchFactory = _a[1];
+    useEffect(function () {
         // If we pass the function in directly React will execute it as a SetStateAction
         // Need to wrap in an anon - see https://medium.com/swlh/how-to-store-a-function-with-the-usestate-hook-in-react-8a88dd4eede1
         loadStytch().then(function (globalStytch) { return setStytchFactory(function () { return globalStytch; }); });
     }, []);
     return stytchFactory;
 };
+/**
+ * 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
+ */
+var useUniqueElementId = function () {
+    var _a = useState(null), elementId = _a[0], setElementId = _a[1];
+    useEffect(function () {
+        var randId = Math.floor(Math.random() * 1e6);
+        setElementId("stytch-magic-link-" + randId);
+    }, []);
+    return elementId;
+};
 /**
  * Stytch JS React Component
  *
@@ -98,20 +125,23 @@ var useStytchFactory = function () {
  */
 var Stytch = function (props) {
     var StytchFactory = useStytchFactory();
+    var elementId = useUniqueElementId();
     var publicToken = props.publicToken, style = props.style, callbacks = props.callbacks, loginOrSignupView = props.loginOrSignupView;
-    React.useEffect(function () {
-        if (!StytchFactory) {
+    useEffect(function () {
+        if (!StytchFactory || !elementId) {
             return;
         }
         var stytch = StytchFactory(publicToken, callbacks);
         stytch.mount({
-            elementId: "#stytch-magic-link",
+            elementId: "#" + elementId,
             style: style,
             loginOrSignupView: loginOrSignupView,
         });
-    }, [StytchFactory]);
-    return React.createElement("div", { id: "stytch-magic-link" });
+    }, [StytchFactory, elementId]);
+    return elementId ?
+        React.createElement("div", { id: elementId }) :
+        null;
 };
 
-export { Stytch };
+export { OAuthProvidersTypes, SDKProductTypes, Stytch };
 //# sourceMappingURL=index.esm.js.map

package/dist/index.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.esm.js","sources":["../node_modules/@stytch/stytch-js/dist/index.esm.js","../src/Stytch.tsx"],"sourcesContent":["var PUBLIC_URL = 'https://js.stytch.com/stytch.js';\nfunction getJSUrl() {\n    try {\n        if (process.env.STYTCH_JS_SDK_URL) {\n            return process.env.STYTCH_JS_SDK_URL;\n        }\n        if (process.env.REACT_APP_STYTCH_JS_SDK_URL) {\n            return process.env.REACT_APP_STYTCH_JS_SDK_URL;\n        }\n        return PUBLIC_URL;\n    }\n    catch (err) {\n        return PUBLIC_URL;\n    }\n}\nvar STYTCH_JS_URL = getJSUrl();\n\nvar findOrCreateScript = function () {\n    var scripts = document.querySelectorAll(\"script[src=\\\"\" + STYTCH_JS_URL + \"\\\"]\");\n    if (scripts[0]) {\n        return scripts[0];\n    }\n    var script = document.createElement('script');\n    script.src = STYTCH_JS_URL;\n    document.head.appendChild(script);\n    return script;\n};\nvar loadScript = function () {\n    var isBrowser = typeof window !== 'undefined' && typeof window.document !== 'undefined';\n    if (!isBrowser) {\n        return Promise.resolve(null);\n    }\n    return new Promise(function (resolve, reject) {\n        if (window.Stytch) {\n            console.warn('Stytch.js has already been loaded');\n            resolve(window.Stytch);\n        }\n        var script = findOrCreateScript();\n        script.addEventListener('load', function () {\n            if (window.Stytch) {\n                resolve(window.Stytch);\n            }\n            else {\n                reject(new Error('Stytch.js could not be loaded'));\n            }\n        });\n        script.addEventListener('error', function () {\n            reject(new Error('Stytch.js could not be loaded'));\n        });\n    });\n};\n// Execute our own script injection after a tick to give users time to do their\n// own script injection.\nvar stytchPromise = Promise.resolve().then(function () { return loadScript(); });\nvar loadCalled = false;\n// We will log a warning if it doesn't look like the host code has checked or invoked the promise\nstytchPromise.catch(function (err) {\n    if (!loadCalled) {\n        console.warn(err);\n    }\n});\nvar loadStytch = function () {\n    loadCalled = true;\n    return stytchPromise;\n};\n\n// Callback types\nvar EventType;\n(function (EventType) {\n    EventType[\"CallbackEvent\"] = \"CALLBACK_EVENT\";\n    EventType[\"ErrorEvent\"] = \"ERROR_EVENT\";\n    EventType[\"SuccessEvent\"] = \"SUCCESS_EVENT\";\n})(EventType || (EventType = {}));\nvar CallbackEventType;\n(function (CallbackEventType) {\n    CallbackEventType[\"UserEventType\"] = \"USER_EVENT_TYPE\";\n})(CallbackEventType || (CallbackEventType = {}));\nvar SDKProductTypes;\n(function (SDKProductTypes) {\n    SDKProductTypes[\"emailMagicLinks\"] = \"emailMagicLinks\";\n})(SDKProductTypes || (SDKProductTypes = {}));\n\nexport { CallbackEventType, EventType, SDKProductTypes, loadStytch };\n//# sourceMappingURL=index.esm.js.map\n","import React from \"react\";\nimport {loadStytch, LoginOrSignupView, StyleConfig, CallbackOptions, StytchFactory} from '@stytch/stytch-js'\n\nexport interface StytchProps {\n  publicToken: string;\n  loginOrSignupView?: LoginOrSignupView;\n  style?: StyleConfig;\n  callbacks?: CallbackOptions;\n}\n\nconst useStytchFactory = (): StytchFactory => {\n  const [stytchFactory, setStytchFactory] = React.useState<StytchFactory>();\n  React.useEffect(() => {\n    // If we pass the function in directly React will execute it as a SetStateAction\n    // Need to wrap in an anon - see https://medium.com/swlh/how-to-store-a-function-with-the-usestate-hook-in-react-8a88dd4eede1\n    loadStytch().then(globalStytch => setStytchFactory(() => globalStytch))\n  }, []);\n\n  return stytchFactory;\n}\n\n/**\n * Stytch JS React Component\n *\n * [Documentation](https://stytch.com/docs/javascript-sdk)\n */\nexport const Stytch = (props: StytchProps) => {\n  const StytchFactory = useStytchFactory();\n\n  const {publicToken, style, callbacks, loginOrSignupView} = props;\n\n  React.useEffect(() => {\n    if (!StytchFactory) {\n      return;\n    }\n    const stytch = StytchFactory(publicToken, callbacks);\n\n    stytch.mount({\n      elementId: \"#stytch-magic-link\",\n      style,\n      loginOrSignupView,\n    });\n  }, [StytchFactory]);\n\n  return <div id=\"stytch-magic-link\"></div>;\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.esm.js","sources":["../node_modules/@stytch/stytch-js/dist/index.esm.js","../src/Stytch.tsx"],"sourcesContent":["var PUBLIC_URL = 'https://js.stytch.com/stytch.js';\nfunction getJSUrl() {\n    try {\n        if (process.env.STYTCH_JS_SDK_URL) {\n            return process.env.STYTCH_JS_SDK_URL;\n        }\n        if (process.env.REACT_APP_STYTCH_JS_SDK_URL) {\n            return process.env.REACT_APP_STYTCH_JS_SDK_URL;\n        }\n        if (process.env.NEXT_PUBLIC_STYTCH_JS_SDK_URL) {\n            return process.env.NEXT_PUBLIC_STYTCH_JS_SDK_URL;\n        }\n        if (process.env.STORYBOOK_STYTCH_JS_SDK_URL) {\n            return process.env.STORYBOOK_STYTCH_JS_SDK_URL;\n        }\n        return PUBLIC_URL;\n    }\n    catch (err) {\n        return PUBLIC_URL;\n    }\n}\nvar STYTCH_JS_URL = getJSUrl();\n\nvar findOrCreateScript = function () {\n    var scripts = document.querySelectorAll(\"script[src=\\\"\" + STYTCH_JS_URL + \"\\\"]\");\n    if (scripts[0]) {\n        return scripts[0];\n    }\n    var script = document.createElement('script');\n    script.src = STYTCH_JS_URL;\n    document.head.appendChild(script);\n    return script;\n};\nvar loadScript = function () {\n    var isBrowser = typeof window !== 'undefined' && typeof window.document !== 'undefined';\n    if (!isBrowser) {\n        return Promise.resolve(null);\n    }\n    return new Promise(function (resolve, reject) {\n        if (window.Stytch) {\n            console.warn('Stytch.js has already been loaded');\n            resolve(window.Stytch);\n        }\n        var script = findOrCreateScript();\n        script.addEventListener('load', function () {\n            if (window.Stytch) {\n                resolve(window.Stytch);\n            }\n            else {\n                reject(new Error('Stytch.js could not be loaded'));\n            }\n        });\n        script.addEventListener('error', function () {\n            reject(new Error('Stytch.js could not be loaded'));\n        });\n    });\n};\n// Execute our own script injection after a tick to give users time to do their\n// own script injection.\nvar stytchPromise = Promise.resolve().then(function () { return loadScript(); });\nvar loadCalled = false;\n// We will log a warning if it doesn't look like the host code has checked or invoked the promise\nstytchPromise.catch(function (err) {\n    if (!loadCalled) {\n        console.warn(err);\n    }\n});\nvar loadStytch = function () {\n    loadCalled = true;\n    return stytchPromise;\n};\n\n// Callback types\nvar EventType;\n(function (EventType) {\n    EventType[\"CallbackEvent\"] = \"CALLBACK_EVENT\";\n    EventType[\"ErrorEvent\"] = \"ERROR_EVENT\";\n    EventType[\"SuccessEvent\"] = \"SUCCESS_EVENT\";\n})(EventType || (EventType = {}));\nvar CallbackEventType;\n(function (CallbackEventType) {\n    CallbackEventType[\"UserEventType\"] = \"USER_EVENT_TYPE\";\n})(CallbackEventType || (CallbackEventType = {}));\nvar SDKProductTypes;\n(function (SDKProductTypes) {\n    SDKProductTypes[\"emailMagicLinks\"] = \"emailMagicLinks\";\n    SDKProductTypes[\"oauth\"] = \"oauth\";\n})(SDKProductTypes || (SDKProductTypes = {}));\nvar OAuthProvidersTypes;\n(function (OAuthProvidersTypes) {\n    OAuthProvidersTypes[\"Google\"] = \"google\";\n    OAuthProvidersTypes[\"Microsoft\"] = \"microsoft\";\n    OAuthProvidersTypes[\"Apple\"] = \"apple\";\n})(OAuthProvidersTypes || (OAuthProvidersTypes = {}));\n\nexport { CallbackEventType, EventType, OAuthProvidersTypes, SDKProductTypes, loadStytch };\n//# sourceMappingURL=index.esm.js.map\n","import React, {useEffect, useState} from \"react\";\nimport {loadStytch, LoginOrSignupView, StyleConfig, CallbackOptions, StytchFactory} from '@stytch/stytch-js'\n\nexport {SDKProductTypes, OAuthProvidersTypes} from '@stytch/stytch-js'\n\nexport interface StytchProps {\n  publicToken: string;\n  loginOrSignupView?: LoginOrSignupView;\n  style?: StyleConfig;\n  callbacks?: CallbackOptions;\n}\n\nconst useStytchFactory = (): StytchFactory => {\n  const [stytchFactory, setStytchFactory] = useState<StytchFactory>();\n  useEffect(() => {\n    // If we pass the function in directly React will execute it as a SetStateAction\n    // Need to wrap in an anon - see https://medium.com/swlh/how-to-store-a-function-with-the-usestate-hook-in-react-8a88dd4eede1\n    loadStytch().then(globalStytch => setStytchFactory(() => globalStytch))\n  }, []);\n\n  return stytchFactory;\n}\n\n/**\n * Returns a unique element ID.\n * Client-side only - will return null for server-side\n * resolves: https://stytch.slack.com/archives/C015UDB4X33/p1641450131000800\n * based on: https://github.com/vercel/next.js/issues/7322#issuecomment-968858477\n */\nconst useUniqueElementId = (): string | null => {\n  const [elementId, setElementId] = useState<string | null>(null);\n  useEffect(() => {\n    const randId = Math.floor(Math.random() * 1e6);\n    setElementId(`stytch-magic-link-${randId}`);\n  }, [])\n  return elementId;\n}\n\n/**\n * Stytch JS React Component\n *\n * [Documentation](https://stytch.com/docs/javascript-sdk)\n */\nexport const Stytch = (props: StytchProps) => {\n  const StytchFactory = useStytchFactory();\n  const elementId = useUniqueElementId();\n\n  const {publicToken, style, callbacks, loginOrSignupView} = props;\n\n  useEffect(() => {\n    if (!StytchFactory || !elementId) {\n      return;\n    }\n    const stytch = StytchFactory(publicToken, callbacks);\n\n    stytch.mount({\n      elementId: `#${elementId}`,\n      style,\n      loginOrSignupView,\n    });\n  }, [StytchFactory, elementId]);\n\n  return elementId ?\n    <div id={elementId}></div> :\n    null;\n};\n"],"names":[],"mappings":"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"}

package/dist/index.js

@@ -17,6 +17,12 @@ function getJSUrl() {
         if (process.env.REACT_APP_STYTCH_JS_SDK_URL) {
             return process.env.REACT_APP_STYTCH_JS_SDK_URL;
         }
+        if (process.env.NEXT_PUBLIC_STYTCH_JS_SDK_URL) {
+            return process.env.NEXT_PUBLIC_STYTCH_JS_SDK_URL;
+        }
+        if (process.env.STORYBOOK_STYTCH_JS_SDK_URL) {
+            return process.env.STORYBOOK_STYTCH_JS_SDK_URL;
+        }
         return PUBLIC_URL;
     }
     catch (err) {
@@ -85,20 +91,41 @@ var CallbackEventType;
 (function (CallbackEventType) {
     CallbackEventType["UserEventType"] = "USER_EVENT_TYPE";
 })(CallbackEventType || (CallbackEventType = {}));
-var SDKProductTypes;
+exports.SDKProductTypes = void 0;
 (function (SDKProductTypes) {
     SDKProductTypes["emailMagicLinks"] = "emailMagicLinks";
-})(SDKProductTypes || (SDKProductTypes = {}));
+    SDKProductTypes["oauth"] = "oauth";
+})(exports.SDKProductTypes || (exports.SDKProductTypes = {}));
+exports.OAuthProvidersTypes = void 0;
+(function (OAuthProvidersTypes) {
+    OAuthProvidersTypes["Google"] = "google";
+    OAuthProvidersTypes["Microsoft"] = "microsoft";
+    OAuthProvidersTypes["Apple"] = "apple";
+})(exports.OAuthProvidersTypes || (exports.OAuthProvidersTypes = {}));
 
 var useStytchFactory = function () {
-    var _a = React__default['default'].useState(), stytchFactory = _a[0], setStytchFactory = _a[1];
-    React__default['default'].useEffect(function () {
+    var _a = React.useState(), stytchFactory = _a[0], setStytchFactory = _a[1];
+    React.useEffect(function () {
         // If we pass the function in directly React will execute it as a SetStateAction
         // Need to wrap in an anon - see https://medium.com/swlh/how-to-store-a-function-with-the-usestate-hook-in-react-8a88dd4eede1
         loadStytch().then(function (globalStytch) { return setStytchFactory(function () { return globalStytch; }); });
     }, []);
     return stytchFactory;
 };
+/**
+ * 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
+ */
+var useUniqueElementId = function () {
+    var _a = React.useState(null), elementId = _a[0], setElementId = _a[1];
+    React.useEffect(function () {
+        var randId = Math.floor(Math.random() * 1e6);
+        setElementId("stytch-magic-link-" + randId);
+    }, []);
+    return elementId;
+};
 /**
  * Stytch JS React Component
  *
@@ -106,19 +133,22 @@ var useStytchFactory = function () {
  */
 var Stytch = function (props) {
     var StytchFactory = useStytchFactory();
+    var elementId = useUniqueElementId();
     var publicToken = props.publicToken, style = props.style, callbacks = props.callbacks, loginOrSignupView = props.loginOrSignupView;
-    React__default['default'].useEffect(function () {
-        if (!StytchFactory) {
+    React.useEffect(function () {
+        if (!StytchFactory || !elementId) {
             return;
         }
         var stytch = StytchFactory(publicToken, callbacks);
         stytch.mount({
-            elementId: "#stytch-magic-link",
+            elementId: "#" + elementId,
             style: style,
             loginOrSignupView: loginOrSignupView,
         });
-    }, [StytchFactory]);
-    return React__default['default'].createElement("div", { id: "stytch-magic-link" });
+    }, [StytchFactory, elementId]);
+    return elementId ?
+        React__default['default'].createElement("div", { id: elementId }) :
+        null;
 };
 
 exports.Stytch = Stytch;

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../node_modules/@stytch/stytch-js/dist/index.esm.js","../src/Stytch.tsx"],"sourcesContent":["var PUBLIC_URL = 'https://js.stytch.com/stytch.js';\nfunction getJSUrl() {\n    try {\n        if (process.env.STYTCH_JS_SDK_URL) {\n            return process.env.STYTCH_JS_SDK_URL;\n        }\n        if (process.env.REACT_APP_STYTCH_JS_SDK_URL) {\n            return process.env.REACT_APP_STYTCH_JS_SDK_URL;\n        }\n        return PUBLIC_URL;\n    }\n    catch (err) {\n        return PUBLIC_URL;\n    }\n}\nvar STYTCH_JS_URL = getJSUrl();\n\nvar findOrCreateScript = function () {\n    var scripts = document.querySelectorAll(\"script[src=\\\"\" + STYTCH_JS_URL + \"\\\"]\");\n    if (scripts[0]) {\n        return scripts[0];\n    }\n    var script = document.createElement('script');\n    script.src = STYTCH_JS_URL;\n    document.head.appendChild(script);\n    return script;\n};\nvar loadScript = function () {\n    var isBrowser = typeof window !== 'undefined' && typeof window.document !== 'undefined';\n    if (!isBrowser) {\n        return Promise.resolve(null);\n    }\n    return new Promise(function (resolve, reject) {\n        if (window.Stytch) {\n            console.warn('Stytch.js has already been loaded');\n            resolve(window.Stytch);\n        }\n        var script = findOrCreateScript();\n        script.addEventListener('load', function () {\n            if (window.Stytch) {\n                resolve(window.Stytch);\n            }\n            else {\n                reject(new Error('Stytch.js could not be loaded'));\n            }\n        });\n        script.addEventListener('error', function () {\n            reject(new Error('Stytch.js could not be loaded'));\n        });\n    });\n};\n// Execute our own script injection after a tick to give users time to do their\n// own script injection.\nvar stytchPromise = Promise.resolve().then(function () { return loadScript(); });\nvar loadCalled = false;\n// We will log a warning if it doesn't look like the host code has checked or invoked the promise\nstytchPromise.catch(function (err) {\n    if (!loadCalled) {\n        console.warn(err);\n    }\n});\nvar loadStytch = function () {\n    loadCalled = true;\n    return stytchPromise;\n};\n\n// Callback types\nvar EventType;\n(function (EventType) {\n    EventType[\"CallbackEvent\"] = \"CALLBACK_EVENT\";\n    EventType[\"ErrorEvent\"] = \"ERROR_EVENT\";\n    EventType[\"SuccessEvent\"] = \"SUCCESS_EVENT\";\n})(EventType || (EventType = {}));\nvar CallbackEventType;\n(function (CallbackEventType) {\n    CallbackEventType[\"UserEventType\"] = \"USER_EVENT_TYPE\";\n})(CallbackEventType || (CallbackEventType = {}));\nvar SDKProductTypes;\n(function (SDKProductTypes) {\n    SDKProductTypes[\"emailMagicLinks\"] = \"emailMagicLinks\";\n})(SDKProductTypes || (SDKProductTypes = {}));\n\nexport { CallbackEventType, EventType, SDKProductTypes, loadStytch };\n//# sourceMappingURL=index.esm.js.map\n","import React from \"react\";\nimport {loadStytch, LoginOrSignupView, StyleConfig, CallbackOptions, StytchFactory} from '@stytch/stytch-js'\n\nexport interface StytchProps {\n  publicToken: string;\n  loginOrSignupView?: LoginOrSignupView;\n  style?: StyleConfig;\n  callbacks?: CallbackOptions;\n}\n\nconst useStytchFactory = (): StytchFactory => {\n  const [stytchFactory, setStytchFactory] = React.useState<StytchFactory>();\n  React.useEffect(() => {\n    // If we pass the function in directly React will execute it as a SetStateAction\n    // Need to wrap in an anon - see https://medium.com/swlh/how-to-store-a-function-with-the-usestate-hook-in-react-8a88dd4eede1\n    loadStytch().then(globalStytch => setStytchFactory(() => globalStytch))\n  }, []);\n\n  return stytchFactory;\n}\n\n/**\n * Stytch JS React Component\n *\n * [Documentation](https://stytch.com/docs/javascript-sdk)\n */\nexport const Stytch = (props: StytchProps) => {\n  const StytchFactory = useStytchFactory();\n\n  const {publicToken, style, callbacks, loginOrSignupView} = props;\n\n  React.useEffect(() => {\n    if (!StytchFactory) {\n      return;\n    }\n    const stytch = StytchFactory(publicToken, callbacks);\n\n    stytch.mount({\n      elementId: \"#stytch-magic-link\",\n      style,\n      loginOrSignupView,\n    });\n  }, [StytchFactory]);\n\n  return <div id=\"stytch-magic-link\"></div>;\n};\n"],"names":["React"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../node_modules/@stytch/stytch-js/dist/index.esm.js","../src/Stytch.tsx"],"sourcesContent":["var PUBLIC_URL = 'https://js.stytch.com/stytch.js';\nfunction getJSUrl() {\n    try {\n        if (process.env.STYTCH_JS_SDK_URL) {\n            return process.env.STYTCH_JS_SDK_URL;\n        }\n        if (process.env.REACT_APP_STYTCH_JS_SDK_URL) {\n            return process.env.REACT_APP_STYTCH_JS_SDK_URL;\n        }\n        if (process.env.NEXT_PUBLIC_STYTCH_JS_SDK_URL) {\n            return process.env.NEXT_PUBLIC_STYTCH_JS_SDK_URL;\n        }\n        if (process.env.STORYBOOK_STYTCH_JS_SDK_URL) {\n            return process.env.STORYBOOK_STYTCH_JS_SDK_URL;\n        }\n        return PUBLIC_URL;\n    }\n    catch (err) {\n        return PUBLIC_URL;\n    }\n}\nvar STYTCH_JS_URL = getJSUrl();\n\nvar findOrCreateScript = function () {\n    var scripts = document.querySelectorAll(\"script[src=\\\"\" + STYTCH_JS_URL + \"\\\"]\");\n    if (scripts[0]) {\n        return scripts[0];\n    }\n    var script = document.createElement('script');\n    script.src = STYTCH_JS_URL;\n    document.head.appendChild(script);\n    return script;\n};\nvar loadScript = function () {\n    var isBrowser = typeof window !== 'undefined' && typeof window.document !== 'undefined';\n    if (!isBrowser) {\n        return Promise.resolve(null);\n    }\n    return new Promise(function (resolve, reject) {\n        if (window.Stytch) {\n            console.warn('Stytch.js has already been loaded');\n            resolve(window.Stytch);\n        }\n        var script = findOrCreateScript();\n        script.addEventListener('load', function () {\n            if (window.Stytch) {\n                resolve(window.Stytch);\n            }\n            else {\n                reject(new Error('Stytch.js could not be loaded'));\n            }\n        });\n        script.addEventListener('error', function () {\n            reject(new Error('Stytch.js could not be loaded'));\n        });\n    });\n};\n// Execute our own script injection after a tick to give users time to do their\n// own script injection.\nvar stytchPromise = Promise.resolve().then(function () { return loadScript(); });\nvar loadCalled = false;\n// We will log a warning if it doesn't look like the host code has checked or invoked the promise\nstytchPromise.catch(function (err) {\n    if (!loadCalled) {\n        console.warn(err);\n    }\n});\nvar loadStytch = function () {\n    loadCalled = true;\n    return stytchPromise;\n};\n\n// Callback types\nvar EventType;\n(function (EventType) {\n    EventType[\"CallbackEvent\"] = \"CALLBACK_EVENT\";\n    EventType[\"ErrorEvent\"] = \"ERROR_EVENT\";\n    EventType[\"SuccessEvent\"] = \"SUCCESS_EVENT\";\n})(EventType || (EventType = {}));\nvar CallbackEventType;\n(function (CallbackEventType) {\n    CallbackEventType[\"UserEventType\"] = \"USER_EVENT_TYPE\";\n})(CallbackEventType || (CallbackEventType = {}));\nvar SDKProductTypes;\n(function (SDKProductTypes) {\n    SDKProductTypes[\"emailMagicLinks\"] = \"emailMagicLinks\";\n    SDKProductTypes[\"oauth\"] = \"oauth\";\n})(SDKProductTypes || (SDKProductTypes = {}));\nvar OAuthProvidersTypes;\n(function (OAuthProvidersTypes) {\n    OAuthProvidersTypes[\"Google\"] = \"google\";\n    OAuthProvidersTypes[\"Microsoft\"] = \"microsoft\";\n    OAuthProvidersTypes[\"Apple\"] = \"apple\";\n})(OAuthProvidersTypes || (OAuthProvidersTypes = {}));\n\nexport { CallbackEventType, EventType, OAuthProvidersTypes, SDKProductTypes, loadStytch };\n//# sourceMappingURL=index.esm.js.map\n","import React, {useEffect, useState} from \"react\";\nimport {loadStytch, LoginOrSignupView, StyleConfig, CallbackOptions, StytchFactory} from '@stytch/stytch-js'\n\nexport {SDKProductTypes, OAuthProvidersTypes} from '@stytch/stytch-js'\n\nexport interface StytchProps {\n  publicToken: string;\n  loginOrSignupView?: LoginOrSignupView;\n  style?: StyleConfig;\n  callbacks?: CallbackOptions;\n}\n\nconst useStytchFactory = (): StytchFactory => {\n  const [stytchFactory, setStytchFactory] = useState<StytchFactory>();\n  useEffect(() => {\n    // If we pass the function in directly React will execute it as a SetStateAction\n    // Need to wrap in an anon - see https://medium.com/swlh/how-to-store-a-function-with-the-usestate-hook-in-react-8a88dd4eede1\n    loadStytch().then(globalStytch => setStytchFactory(() => globalStytch))\n  }, []);\n\n  return stytchFactory;\n}\n\n/**\n * Returns a unique element ID.\n * Client-side only - will return null for server-side\n * resolves: https://stytch.slack.com/archives/C015UDB4X33/p1641450131000800\n * based on: https://github.com/vercel/next.js/issues/7322#issuecomment-968858477\n */\nconst useUniqueElementId = (): string | null => {\n  const [elementId, setElementId] = useState<string | null>(null);\n  useEffect(() => {\n    const randId = Math.floor(Math.random() * 1e6);\n    setElementId(`stytch-magic-link-${randId}`);\n  }, [])\n  return elementId;\n}\n\n/**\n * Stytch JS React Component\n *\n * [Documentation](https://stytch.com/docs/javascript-sdk)\n */\nexport const Stytch = (props: StytchProps) => {\n  const StytchFactory = useStytchFactory();\n  const elementId = useUniqueElementId();\n\n  const {publicToken, style, callbacks, loginOrSignupView} = props;\n\n  useEffect(() => {\n    if (!StytchFactory || !elementId) {\n      return;\n    }\n    const stytch = StytchFactory(publicToken, callbacks);\n\n    stytch.mount({\n      elementId: `#${elementId}`,\n      style,\n      loginOrSignupView,\n    });\n  }, [StytchFactory, elementId]);\n\n  return elementId ?\n    <div id={elementId}></div> :\n    null;\n};\n"],"names":["SDKProductTypes","OAuthProvidersTypes","useState","useEffect","React"],"mappings":";;;;;;;;;;AAAA,IAAI,UAAU,GAAG,iCAAiC,CAAC;AACnD,SAAS,QAAQ,GAAG;AACpB,IAAI,IAAI;AACR,QAAQ,IAAI,OAAO,CAAC,GAAG,CAAC,iBAAiB,EAAE;AAC3C,YAAY,OAAO,OAAO,CAAC,GAAG,CAAC,iBAAiB,CAAC;AACjD,SAAS;AACT,QAAQ,IAAI,OAAO,CAAC,GAAG,CAAC,2BAA2B,EAAE;AACrD,YAAY,OAAO,OAAO,CAAC,GAAG,CAAC,2BAA2B,CAAC;AAC3D,SAAS;AACT,QAAQ,IAAI,OAAO,CAAC,GAAG,CAAC,6BAA6B,EAAE;AACvD,YAAY,OAAO,OAAO,CAAC,GAAG,CAAC,6BAA6B,CAAC;AAC7D,SAAS;AACT,QAAQ,IAAI,OAAO,CAAC,GAAG,CAAC,2BAA2B,EAAE;AACrD,YAAY,OAAO,OAAO,CAAC,GAAG,CAAC,2BAA2B,CAAC;AAC3D,SAAS;AACT,QAAQ,OAAO,UAAU,CAAC;AAC1B,KAAK;AACL,IAAI,OAAO,GAAG,EAAE;AAChB,QAAQ,OAAO,UAAU,CAAC;AAC1B,KAAK;AACL,CAAC;AACD,IAAI,aAAa,GAAG,QAAQ,EAAE,CAAC;AAC/B;AACA,IAAI,kBAAkB,GAAG,YAAY;AACrC,IAAI,IAAI,OAAO,GAAG,QAAQ,CAAC,gBAAgB,CAAC,eAAe,GAAG,aAAa,GAAG,KAAK,CAAC,CAAC;AACrF,IAAI,IAAI,OAAO,CAAC,CAAC,CAAC,EAAE;AACpB,QAAQ,OAAO,OAAO,CAAC,CAAC,CAAC,CAAC;AAC1B,KAAK;AACL,IAAI,IAAI,MAAM,GAAG,QAAQ,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;AAClD,IAAI,MAAM,CAAC,GAAG,GAAG,aAAa,CAAC;AAC/B,IAAI,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC;AACtC,IAAI,OAAO,MAAM,CAAC;AAClB,CAAC,CAAC;AACF,IAAI,UAAU,GAAG,YAAY;AAC7B,IAAI,IAAI,SAAS,GAAG,OAAO,MAAM,KAAK,WAAW,IAAI,OAAO,MAAM,CAAC,QAAQ,KAAK,WAAW,CAAC;AAC5F,IAAI,IAAI,CAAC,SAAS,EAAE;AACpB,QAAQ,OAAO,OAAO,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC;AACrC,KAAK;AACL,IAAI,OAAO,IAAI,OAAO,CAAC,UAAU,OAAO,EAAE,MAAM,EAAE;AAClD,QAAQ,IAAI,MAAM,CAAC,MAAM,EAAE;AAC3B,YAAY,OAAO,CAAC,IAAI,CAAC,mCAAmC,CAAC,CAAC;AAC9D,YAAY,OAAO,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC;AACnC,SAAS;AACT,QAAQ,IAAI,MAAM,GAAG,kBAAkB,EAAE,CAAC;AAC1C,QAAQ,MAAM,CAAC,gBAAgB,CAAC,MAAM,EAAE,YAAY;AACpD,YAAY,IAAI,MAAM,CAAC,MAAM,EAAE;AAC/B,gBAAgB,OAAO,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC;AACvC,aAAa;AACb,iBAAiB;AACjB,gBAAgB,MAAM,CAAC,IAAI,KAAK,CAAC,+BAA+B,CAAC,CAAC,CAAC;AACnE,aAAa;AACb,SAAS,CAAC,CAAC;AACX,QAAQ,MAAM,CAAC,gBAAgB,CAAC,OAAO,EAAE,YAAY;AACrD,YAAY,MAAM,CAAC,IAAI,KAAK,CAAC,+BAA+B,CAAC,CAAC,CAAC;AAC/D,SAAS,CAAC,CAAC;AACX,KAAK,CAAC,CAAC;AACP,CAAC,CAAC;AACF;AACA;AACA,IAAI,aAAa,GAAG,OAAO,CAAC,OAAO,EAAE,CAAC,IAAI,CAAC,YAAY,EAAE,OAAO,UAAU,EAAE,CAAC,EAAE,CAAC,CAAC;AACjF,IAAI,UAAU,GAAG,KAAK,CAAC;AACvB;AACA,aAAa,CAAC,KAAK,CAAC,UAAU,GAAG,EAAE;AACnC,IAAI,IAAI,CAAC,UAAU,EAAE;AACrB,QAAQ,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;AAC1B,KAAK;AACL,CAAC,CAAC,CAAC;AACH,IAAI,UAAU,GAAG,YAAY;AAC7B,IAAI,UAAU,GAAG,IAAI,CAAC;AACtB,IAAI,OAAO,aAAa,CAAC;AACzB,CAAC,CAAC;AACF;AACA;AACA,IAAI,SAAS,CAAC;AACd,CAAC,UAAU,SAAS,EAAE;AACtB,IAAI,SAAS,CAAC,eAAe,CAAC,GAAG,gBAAgB,CAAC;AAClD,IAAI,SAAS,CAAC,YAAY,CAAC,GAAG,aAAa,CAAC;AAC5C,IAAI,SAAS,CAAC,cAAc,CAAC,GAAG,eAAe,CAAC;AAChD,CAAC,EAAE,SAAS,KAAK,SAAS,GAAG,EAAE,CAAC,CAAC,CAAC;AAClC,IAAI,iBAAiB,CAAC;AACtB,CAAC,UAAU,iBAAiB,EAAE;AAC9B,IAAI,iBAAiB,CAAC,eAAe,CAAC,GAAG,iBAAiB,CAAC;AAC3D,CAAC,EAAE,iBAAiB,KAAK,iBAAiB,GAAG,EAAE,CAAC,CAAC,CAAC;AAC9CA,iCAAgB;AACpB,CAAC,UAAU,eAAe,EAAE;AAC5B,IAAI,eAAe,CAAC,iBAAiB,CAAC,GAAG,iBAAiB,CAAC;AAC3D,IAAI,eAAe,CAAC,OAAO,CAAC,GAAG,OAAO,CAAC;AACvC,CAAC,EAAEA,uBAAe,KAAKA,uBAAe,GAAG,EAAE,CAAC,CAAC,CAAC;AAC1CC,qCAAoB;AACxB,CAAC,UAAU,mBAAmB,EAAE;AAChC,IAAI,mBAAmB,CAAC,QAAQ,CAAC,GAAG,QAAQ,CAAC;AAC7C,IAAI,mBAAmB,CAAC,WAAW,CAAC,GAAG,WAAW,CAAC;AACnD,IAAI,mBAAmB,CAAC,OAAO,CAAC,GAAG,OAAO,CAAC;AAC3C,CAAC,EAAEA,2BAAmB,KAAKA,2BAAmB,GAAG,EAAE,CAAC,CAAC;;ACjFrD,IAAM,gBAAgB,GAAG;IACjB,IAAA,KAAoCC,cAAQ,EAAiB,EAA5D,aAAa,QAAA,EAAE,gBAAgB,QAA6B,CAAC;IACpEC,eAAS,CAAC;;;QAGR,UAAU,EAAE,CAAC,IAAI,CAAC,UAAA,YAAY,IAAI,OAAA,gBAAgB,CAAC,cAAM,OAAA,YAAY,GAAA,CAAC,GAAA,CAAC,CAAA;KACxE,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,aAAa,CAAC;AACvB,CAAC,CAAA;AAED;;;;;;AAMA,IAAM,kBAAkB,GAAG;IACnB,IAAA,KAA4BD,cAAQ,CAAgB,IAAI,CAAC,EAAxD,SAAS,QAAA,EAAE,YAAY,QAAiC,CAAC;IAChEC,eAAS,CAAC;QACR,IAAM,MAAM,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,EAAE,GAAG,GAAG,CAAC,CAAC;QAC/C,YAAY,CAAC,uBAAqB,MAAQ,CAAC,CAAC;KAC7C,EAAE,EAAE,CAAC,CAAA;IACN,OAAO,SAAS,CAAC;AACnB,CAAC,CAAA;AAED;;;;;IAKa,MAAM,GAAG,UAAC,KAAkB;IACvC,IAAM,aAAa,GAAG,gBAAgB,EAAE,CAAC;IACzC,IAAM,SAAS,GAAG,kBAAkB,EAAE,CAAC;IAEhC,IAAA,WAAW,GAAyC,KAAK,YAA9C,EAAE,KAAK,GAAkC,KAAK,MAAvC,EAAE,SAAS,GAAuB,KAAK,UAA5B,EAAE,iBAAiB,GAAI,KAAK,kBAAT,CAAU;IAEjEA,eAAS,CAAC;QACR,IAAI,CAAC,aAAa,IAAI,CAAC,SAAS,EAAE;YAChC,OAAO;SACR;QACD,IAAM,MAAM,GAAG,aAAa,CAAC,WAAW,EAAE,SAAS,CAAC,CAAC;QAErD,MAAM,CAAC,KAAK,CAAC;YACX,SAAS,EAAE,MAAI,SAAW;YAC1B,KAAK,OAAA;YACL,iBAAiB,mBAAA;SAClB,CAAC,CAAC;KACJ,EAAE,CAAC,aAAa,EAAE,SAAS,CAAC,CAAC,CAAC;IAE/B,OAAO,SAAS;QACdC,iDAAK,EAAE,EAAE,SAAS,GAAQ;QAC1B,IAAI,CAAC;AACT;;;;"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@stytch/stytch-react",
-  "version": "3.0.0",
-  "description": "Stytch.js React Bindings",
+  "version": "3.0.4",
+  "description": "Stytch's official React Library",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",
   "scripts": {
@@ -9,18 +9,18 @@
     "build": "rollup -c",
     "prepare": "rollup -c"
   },
-  "author": "Nathan",
+  "author": "Stytch",
   "license": "MIT",
   "devDependencies": {
-    "@babel/core": "^7.12.17",
-    "@babel/preset-env": "^7.12.17",
+    "@babel/core": "^7.15.5",
+    "@babel/preset-env": "^7.15.6",
     "@babel/preset-react": "^7.12.13",
-    "@babel/preset-typescript": "^7.13.0",
-    "@rollup/plugin-typescript": "^8.2.0",
-    "@types/enzyme": "^3.10.8",
+    "@babel/preset-typescript": "^7.15.0",
+    "@rollup/plugin-typescript": "^8.2.5",
+    "@types/enzyme": "^3.10.10",
     "@types/enzyme-adapter-react-16": "^1.0.6",
     "@types/jest": "^26.0.20",
-    "@types/react-dom": "^17.0.9",
+    "@types/react-dom": "^17.0.10",
     "@wessberg/rollup-plugin-ts": "^1.3.8",
     "babel-loader": "^8.2.2",
     "enzyme": "^3.11.0",
@@ -28,13 +28,11 @@
     "jest": "^26.6.3",
     "react": "^16.14.0",
     "react-dom": "^16.14.0",
-    "rollup": "^2.42.4",
+    "rollup": "^2.56.3",
     "rollup-plugin-babel": "^4.4.0",
     "rollup-plugin-commonjs": "^10.1.0",
     "rollup-plugin-node-resolve": "^5.2.0",
-    "styled-jsx": "^3.4.4",
-    "tslib": "^2.1.0",
-    "typescript": "^4.2.3"
+    "typescript": "^4.4.4"
   },
   "repository": {
     "type": "git",
@@ -52,7 +50,7 @@
     "package.json"
   ],
   "dependencies": {
-    "@stytch/stytch-js": "^2.0.1"
+    "@stytch/stytch-js": "^2.0.4"
   },
   "peerDependencies": {
     "react": ">= 16.x.x"

package/src/Stytch.tsx

@@ -1,6 +1,8 @@
-import React from "react";
+import React, {useEffect, useState} from "react";
 import {loadStytch, LoginOrSignupView, StyleConfig, CallbackOptions, StytchFactory} from '@stytch/stytch-js'
 
+export {SDKProductTypes, OAuthProvidersTypes} from '@stytch/stytch-js'
+
 export interface StytchProps {
   publicToken: string;
   loginOrSignupView?: LoginOrSignupView;
@@ -9,8 +11,8 @@ export interface StytchProps {
 }
 
 const useStytchFactory = (): StytchFactory => {
-  const [stytchFactory, setStytchFactory] = React.useState<StytchFactory>();
-  React.useEffect(() => {
+  const [stytchFactory, setStytchFactory] = useState<StytchFactory>();
+  useEffect(() => {
     // If we pass the function in directly React will execute it as a SetStateAction
     // Need to wrap in an anon - see https://medium.com/swlh/how-to-store-a-function-with-the-usestate-hook-in-react-8a88dd4eede1
     loadStytch().then(globalStytch => setStytchFactory(() => globalStytch))
@@ -19,6 +21,21 @@ const useStytchFactory = (): StytchFactory => {
   return stytchFactory;
 }
 
+/**
+ * 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
+ */
+const useUniqueElementId = (): string | null => {
+  const [elementId, setElementId] = useState<string | null>(null);
+  useEffect(() => {
+    const randId = Math.floor(Math.random() * 1e6);
+    setElementId(`stytch-magic-link-${randId}`);
+  }, [])
+  return elementId;
+}
+
 /**
  * Stytch JS React Component
  *
@@ -26,21 +43,24 @@ const useStytchFactory = (): StytchFactory => {
  */
 export const Stytch = (props: StytchProps) => {
   const StytchFactory = useStytchFactory();
+  const elementId = useUniqueElementId();
 
   const {publicToken, style, callbacks, loginOrSignupView} = props;
 
-  React.useEffect(() => {
-    if (!StytchFactory) {
+  useEffect(() => {
+    if (!StytchFactory || !elementId) {
       return;
     }
     const stytch = StytchFactory(publicToken, callbacks);
 
     stytch.mount({
-      elementId: "#stytch-magic-link",
+      elementId: `#${elementId}`,
       style,
       loginOrSignupView,
     });
-  }, [StytchFactory]);
+  }, [StytchFactory, elementId]);
 
-  return <div id="stytch-magic-link"></div>;
+  return elementId ?
+    <div id={elementId}></div> :
+    null;
 };

package/src/index.ts

@@ -1 +1 @@
-export { Stytch, StytchProps } from "./Stytch";
+export { Stytch, StytchProps, SDKProductTypes, OAuthProvidersTypes } from "./Stytch";