@stytch/stytch-react 3.0.3 → 3.0.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/dist/index.esm.js +20 -9
  2. package/dist/index.esm.js.map +1 -1
  3. package/dist/index.js +19 -8
  4. package/dist/index.js.map +1 -1
  5. package/package.json +4 -3
  6. package/src/Stytch.tsx +19 -10
package/dist/index.esm.js CHANGED
@@ -1,4 +1,4 @@
1
- import React from 'react';
1
+ import React, { useEffect, useState } from 'react';
2
2
 
3
3
  var PUBLIC_URL = 'https://js.stytch.com/stytch.js';
4
4
  function getJSUrl() {
@@ -93,6 +93,8 @@ var OAuthProvidersTypes;
93
93
  OAuthProvidersTypes["Google"] = "google";
94
94
  OAuthProvidersTypes["Microsoft"] = "microsoft";
95
95
  OAuthProvidersTypes["Apple"] = "apple";
96
+ OAuthProvidersTypes["Github"] = "github";
97
+ OAuthProvidersTypes["Facebook"] = "facebook";
96
98
  })(OAuthProvidersTypes || (OAuthProvidersTypes = {}));
97
99
  var OneTapPositions;
98
100
  (function (OneTapPositions) {
@@ -101,19 +103,26 @@ var OneTapPositions;
101
103
  })(OneTapPositions || (OneTapPositions = {}));
102
104
 
103
105
  var useStytchFactory = function () {
104
- var _a = React.useState(), stytchFactory = _a[0], setStytchFactory = _a[1];
105
- React.useEffect(function () {
106
+ var _a = useState(), stytchFactory = _a[0], setStytchFactory = _a[1];
107
+ useEffect(function () {
106
108
  // If we pass the function in directly React will execute it as a SetStateAction
107
109
  // Need to wrap in an anon - see https://medium.com/swlh/how-to-store-a-function-with-the-usestate-hook-in-react-8a88dd4eede1
108
110
  loadStytch().then(function (globalStytch) { return setStytchFactory(function () { return globalStytch; }); });
109
111
  }, []);
110
112
  return stytchFactory;
111
113
  };
114
+ /**
115
+ * Returns a unique element ID.
116
+ * Client-side only - will return null for server-side
117
+ * resolves: https://stytch.slack.com/archives/C015UDB4X33/p1641450131000800
118
+ * based on: https://github.com/vercel/next.js/issues/7322#issuecomment-968858477
119
+ */
112
120
  var useUniqueElementId = function () {
113
- var elementId = React.useState(function () {
121
+ var _a = useState(null), elementId = _a[0], setElementId = _a[1];
122
+ useEffect(function () {
114
123
  var randId = Math.floor(Math.random() * 1e6);
115
- return "stytch-magic-link-" + randId;
116
- })[0];
124
+ setElementId("stytch-magic-link-" + randId);
125
+ }, []);
117
126
  return elementId;
118
127
  };
119
128
  /**
@@ -125,8 +134,8 @@ var Stytch = function (props) {
125
134
  var StytchFactory = useStytchFactory();
126
135
  var elementId = useUniqueElementId();
127
136
  var publicToken = props.publicToken, style = props.style, callbacks = props.callbacks, loginOrSignupView = props.loginOrSignupView;
128
- React.useEffect(function () {
129
- if (!StytchFactory) {
137
+ useEffect(function () {
138
+ if (!StytchFactory || !elementId) {
130
139
  return;
131
140
  }
132
141
  var stytch = StytchFactory(publicToken, callbacks);
@@ -136,7 +145,9 @@ var Stytch = function (props) {
136
145
  loginOrSignupView: loginOrSignupView,
137
146
  });
138
147
  }, [StytchFactory, elementId]);
139
- return React.createElement("div", { id: elementId });
148
+ return elementId ?
149
+ React.createElement("div", { id: elementId }) :
150
+ null;
140
151
  };
141
152
 
142
153
  export { OAuthProvidersTypes, SDKProductTypes, Stytch };
package/dist/index.esm.js.map CHANGED
@@ -1 +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 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 = {}));\nvar OneTapPositions;\n(function (OneTapPositions) {\n OneTapPositions[\"embedded\"] = \"embedded\";\n OneTapPositions[\"floating\"] = \"floating\";\n})(OneTapPositions || (OneTapPositions = {}));\n\nexport { CallbackEventType, EventType, OAuthProvidersTypes, OneTapPositions, 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 {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] = 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\nconst useUniqueElementId = (): string => {\n const [elementId] = React.useState<string>(() => {\n const randId = Math.floor(Math.random() * 1e6);\n return `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 React.useEffect(() => {\n if (!StytchFactory) {\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 <div id={elementId}></div>;\n};\n"],"names":[],"mappings":"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"}
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 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[\"Github\"] = \"github\";\n OAuthProvidersTypes[\"Facebook\"] = \"facebook\";\n})(OAuthProvidersTypes || (OAuthProvidersTypes = {}));\nvar OneTapPositions;\n(function (OneTapPositions) {\n OneTapPositions[\"embedded\"] = \"embedded\";\n OneTapPositions[\"floating\"] = \"floating\";\n})(OneTapPositions || (OneTapPositions = {}));\n\nexport { CallbackEventType, EventType, OAuthProvidersTypes, OneTapPositions, 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 CHANGED
@@ -101,6 +101,8 @@ exports.OAuthProvidersTypes = void 0;
101
101
  OAuthProvidersTypes["Google"] = "google";
102
102
  OAuthProvidersTypes["Microsoft"] = "microsoft";
103
103
  OAuthProvidersTypes["Apple"] = "apple";
104
+ OAuthProvidersTypes["Github"] = "github";
105
+ OAuthProvidersTypes["Facebook"] = "facebook";
104
106
  })(exports.OAuthProvidersTypes || (exports.OAuthProvidersTypes = {}));
105
107
  var OneTapPositions;
106
108
  (function (OneTapPositions) {
@@ -109,19 +111,26 @@ var OneTapPositions;
109
111
  })(OneTapPositions || (OneTapPositions = {}));
110
112
 
111
113
  var useStytchFactory = function () {
112
- var _a = React__default['default'].useState(), stytchFactory = _a[0], setStytchFactory = _a[1];
113
- React__default['default'].useEffect(function () {
114
+ var _a = React.useState(), stytchFactory = _a[0], setStytchFactory = _a[1];
115
+ React.useEffect(function () {
114
116
  // If we pass the function in directly React will execute it as a SetStateAction
115
117
  // Need to wrap in an anon - see https://medium.com/swlh/how-to-store-a-function-with-the-usestate-hook-in-react-8a88dd4eede1
116
118
  loadStytch().then(function (globalStytch) { return setStytchFactory(function () { return globalStytch; }); });
117
119
  }, []);
118
120
  return stytchFactory;
119
121
  };
122
+ /**
123
+ * Returns a unique element ID.
124
+ * Client-side only - will return null for server-side
125
+ * resolves: https://stytch.slack.com/archives/C015UDB4X33/p1641450131000800
126
+ * based on: https://github.com/vercel/next.js/issues/7322#issuecomment-968858477
127
+ */
120
128
  var useUniqueElementId = function () {
121
- var elementId = React__default['default'].useState(function () {
129
+ var _a = React.useState(null), elementId = _a[0], setElementId = _a[1];
130
+ React.useEffect(function () {
122
131
  var randId = Math.floor(Math.random() * 1e6);
123
- return "stytch-magic-link-" + randId;
124
- })[0];
132
+ setElementId("stytch-magic-link-" + randId);
133
+ }, []);
125
134
  return elementId;
126
135
  };
127
136
  /**
@@ -133,8 +142,8 @@ var Stytch = function (props) {
133
142
  var StytchFactory = useStytchFactory();
134
143
  var elementId = useUniqueElementId();
135
144
  var publicToken = props.publicToken, style = props.style, callbacks = props.callbacks, loginOrSignupView = props.loginOrSignupView;
136
- React__default['default'].useEffect(function () {
137
- if (!StytchFactory) {
145
+ React.useEffect(function () {
146
+ if (!StytchFactory || !elementId) {
138
147
  return;
139
148
  }
140
149
  var stytch = StytchFactory(publicToken, callbacks);
@@ -144,7 +153,9 @@ var Stytch = function (props) {
144
153
  loginOrSignupView: loginOrSignupView,
145
154
  });
146
155
  }, [StytchFactory, elementId]);
147
- return React__default['default'].createElement("div", { id: elementId });
156
+ return elementId ?
157
+ React__default['default'].createElement("div", { id: elementId }) :
158
+ null;
148
159
  };
149
160
 
150
161
  exports.Stytch = Stytch;
package/dist/index.js.map CHANGED
@@ -1 +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 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 = {}));\nvar OneTapPositions;\n(function (OneTapPositions) {\n OneTapPositions[\"embedded\"] = \"embedded\";\n OneTapPositions[\"floating\"] = \"floating\";\n})(OneTapPositions || (OneTapPositions = {}));\n\nexport { CallbackEventType, EventType, OAuthProvidersTypes, OneTapPositions, 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 {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] = 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\nconst useUniqueElementId = (): string => {\n const [elementId] = React.useState<string>(() => {\n const randId = Math.floor(Math.random() * 1e6);\n return `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 React.useEffect(() => {\n if (!StytchFactory) {\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 <div id={elementId}></div>;\n};\n"],"names":["SDKProductTypes","OAuthProvidersTypes","React"],"mappings":"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"}
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 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[\"Github\"] = \"github\";\n OAuthProvidersTypes[\"Facebook\"] = \"facebook\";\n})(OAuthProvidersTypes || (OAuthProvidersTypes = {}));\nvar OneTapPositions;\n(function (OneTapPositions) {\n OneTapPositions[\"embedded\"] = \"embedded\";\n OneTapPositions[\"floating\"] = \"floating\";\n})(OneTapPositions || (OneTapPositions = {}));\n\nexport { CallbackEventType, EventType, OAuthProvidersTypes, OneTapPositions, 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":"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"}
package/package.json CHANGED
@@ -1,13 +1,14 @@
1
1
  {
2
2
  "name": "@stytch/stytch-react",
3
- "version": "3.0.3",
3
+ "version": "3.0.7",
4
4
  "description": "Stytch's official React Library",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.esm.js",
7
7
  "scripts": {
8
8
  "test": "npx jest",
9
9
  "build": "rollup -c",
10
- "prepare": "rollup -c"
10
+ "prepare": "rollup -c",
11
+ "patch-stytch-js": "./patch-stytch-js.sh"
11
12
  },
12
13
  "author": "Stytch",
13
14
  "license": "MIT",
@@ -50,7 +51,7 @@
50
51
  "package.json"
51
52
  ],
52
53
  "dependencies": {
53
- "@stytch/stytch-js": "^2.0.4"
54
+ "@stytch/stytch-js": "^2.0.8"
54
55
  },
55
56
  "peerDependencies": {
56
57
  "react": ">= 16.x.x"
package/src/Stytch.tsx CHANGED
@@ -1,4 +1,4 @@
1
- import React from "react";
1
+ import React, {useEffect, useState} from "react";
2
2
  import {loadStytch, LoginOrSignupView, StyleConfig, CallbackOptions, StytchFactory} from '@stytch/stytch-js'
3
3
 
4
4
  export {SDKProductTypes, OAuthProvidersTypes} from '@stytch/stytch-js'
@@ -11,8 +11,8 @@ export interface StytchProps {
11
11
  }
12
12
 
13
13
  const useStytchFactory = (): StytchFactory => {
14
- const [stytchFactory, setStytchFactory] = React.useState<StytchFactory>();
15
- React.useEffect(() => {
14
+ const [stytchFactory, setStytchFactory] = useState<StytchFactory>();
15
+ useEffect(() => {
16
16
  // If we pass the function in directly React will execute it as a SetStateAction
17
17
  // Need to wrap in an anon - see https://medium.com/swlh/how-to-store-a-function-with-the-usestate-hook-in-react-8a88dd4eede1
18
18
  loadStytch().then(globalStytch => setStytchFactory(() => globalStytch))
@@ -21,11 +21,18 @@ const useStytchFactory = (): StytchFactory => {
21
21
  return stytchFactory;
22
22
  }
23
23
 
24
- const useUniqueElementId = (): string => {
25
- const [elementId] = React.useState<string>(() => {
24
+ /**
25
+ * Returns a unique element ID.
26
+ * Client-side only - will return null for server-side
27
+ * resolves: https://stytch.slack.com/archives/C015UDB4X33/p1641450131000800
28
+ * based on: https://github.com/vercel/next.js/issues/7322#issuecomment-968858477
29
+ */
30
+ const useUniqueElementId = (): string | null => {
31
+ const [elementId, setElementId] = useState<string | null>(null);
32
+ useEffect(() => {
26
33
  const randId = Math.floor(Math.random() * 1e6);
27
- return `stytch-magic-link-${randId}`;
28
- });
34
+ setElementId(`stytch-magic-link-${randId}`);
35
+ }, [])
29
36
  return elementId;
30
37
  }
31
38
 
@@ -40,8 +47,8 @@ export const Stytch = (props: StytchProps) => {
40
47
 
41
48
  const {publicToken, style, callbacks, loginOrSignupView} = props;
42
49
 
43
- React.useEffect(() => {
44
- if (!StytchFactory) {
50
+ useEffect(() => {
51
+ if (!StytchFactory || !elementId) {
45
52
  return;
46
53
  }
47
54
  const stytch = StytchFactory(publicToken, callbacks);
@@ -53,5 +60,7 @@ export const Stytch = (props: StytchProps) => {
53
60
  });
54
61
  }, [StytchFactory, elementId]);
55
62
 
56
- return <div id={elementId}></div>;
63
+ return elementId ?
64
+ <div id={elementId}></div> :
65
+ null;
57
66
  };