@stytch/stytch-react 3.0.1 → 3.0.5
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.
- package/dist/index.esm.js +37 -8
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +36 -7
- package/dist/index.js.map +1 -1
- package/package.json +7 -7
- package/src/Stytch.tsx +26 -8
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() {
|
@@ -9,6 +9,12 @@ function getJSUrl() {
|
|
9
9
|
if (process.env.REACT_APP_STYTCH_JS_SDK_URL) {
|
10
10
|
return process.env.REACT_APP_STYTCH_JS_SDK_URL;
|
11
11
|
}
|
12
|
+
if (process.env.NEXT_PUBLIC_STYTCH_JS_SDK_URL) {
|
13
|
+
return process.env.NEXT_PUBLIC_STYTCH_JS_SDK_URL;
|
14
|
+
}
|
15
|
+
if (process.env.STORYBOOK_STYTCH_JS_SDK_URL) {
|
16
|
+
return process.env.STORYBOOK_STYTCH_JS_SDK_URL;
|
17
|
+
}
|
12
18
|
return PUBLIC_URL;
|
13
19
|
}
|
14
20
|
catch (err) {
|
@@ -86,17 +92,37 @@ var OAuthProvidersTypes;
|
|
86
92
|
(function (OAuthProvidersTypes) {
|
87
93
|
OAuthProvidersTypes["Google"] = "google";
|
88
94
|
OAuthProvidersTypes["Microsoft"] = "microsoft";
|
95
|
+
OAuthProvidersTypes["Apple"] = "apple";
|
89
96
|
})(OAuthProvidersTypes || (OAuthProvidersTypes = {}));
|
97
|
+
var OneTapPositions;
|
98
|
+
(function (OneTapPositions) {
|
99
|
+
OneTapPositions["embedded"] = "embedded";
|
100
|
+
OneTapPositions["floating"] = "floating";
|
101
|
+
})(OneTapPositions || (OneTapPositions = {}));
|
90
102
|
|
91
103
|
var useStytchFactory = function () {
|
92
|
-
var _a =
|
93
|
-
|
104
|
+
var _a = useState(), stytchFactory = _a[0], setStytchFactory = _a[1];
|
105
|
+
useEffect(function () {
|
94
106
|
// If we pass the function in directly React will execute it as a SetStateAction
|
95
107
|
// Need to wrap in an anon - see https://medium.com/swlh/how-to-store-a-function-with-the-usestate-hook-in-react-8a88dd4eede1
|
96
108
|
loadStytch().then(function (globalStytch) { return setStytchFactory(function () { return globalStytch; }); });
|
97
109
|
}, []);
|
98
110
|
return stytchFactory;
|
99
111
|
};
|
112
|
+
/**
|
113
|
+
* Returns a unique element ID.
|
114
|
+
* Client-side only - will return null for server-side
|
115
|
+
* resolves: https://stytch.slack.com/archives/C015UDB4X33/p1641450131000800
|
116
|
+
* based on: https://github.com/vercel/next.js/issues/7322#issuecomment-968858477
|
117
|
+
*/
|
118
|
+
var useUniqueElementId = function () {
|
119
|
+
var _a = useState(null), elementId = _a[0], setElementId = _a[1];
|
120
|
+
useEffect(function () {
|
121
|
+
var randId = Math.floor(Math.random() * 1e6);
|
122
|
+
setElementId("stytch-magic-link-" + randId);
|
123
|
+
}, []);
|
124
|
+
return elementId;
|
125
|
+
};
|
100
126
|
/**
|
101
127
|
* Stytch JS React Component
|
102
128
|
*
|
@@ -104,19 +130,22 @@ var useStytchFactory = function () {
|
|
104
130
|
*/
|
105
131
|
var Stytch = function (props) {
|
106
132
|
var StytchFactory = useStytchFactory();
|
133
|
+
var elementId = useUniqueElementId();
|
107
134
|
var publicToken = props.publicToken, style = props.style, callbacks = props.callbacks, loginOrSignupView = props.loginOrSignupView;
|
108
|
-
|
109
|
-
if (!StytchFactory) {
|
135
|
+
useEffect(function () {
|
136
|
+
if (!StytchFactory || !elementId) {
|
110
137
|
return;
|
111
138
|
}
|
112
139
|
var stytch = StytchFactory(publicToken, callbacks);
|
113
140
|
stytch.mount({
|
114
|
-
elementId: "#
|
141
|
+
elementId: "#" + elementId,
|
115
142
|
style: style,
|
116
143
|
loginOrSignupView: loginOrSignupView,
|
117
144
|
});
|
118
|
-
}, [StytchFactory]);
|
119
|
-
return
|
145
|
+
}, [StytchFactory, elementId]);
|
146
|
+
return elementId ?
|
147
|
+
React.createElement("div", { id: elementId }) :
|
148
|
+
null;
|
120
149
|
};
|
121
150
|
|
122
151
|
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 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 || (OAuthProvidersTypes = {}));\n\nexport { CallbackEventType, EventType, OAuthProvidersTypes, 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\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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"}
|
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, {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
@@ -17,6 +17,12 @@ function getJSUrl() {
|
|
17
17
|
if (process.env.REACT_APP_STYTCH_JS_SDK_URL) {
|
18
18
|
return process.env.REACT_APP_STYTCH_JS_SDK_URL;
|
19
19
|
}
|
20
|
+
if (process.env.NEXT_PUBLIC_STYTCH_JS_SDK_URL) {
|
21
|
+
return process.env.NEXT_PUBLIC_STYTCH_JS_SDK_URL;
|
22
|
+
}
|
23
|
+
if (process.env.STORYBOOK_STYTCH_JS_SDK_URL) {
|
24
|
+
return process.env.STORYBOOK_STYTCH_JS_SDK_URL;
|
25
|
+
}
|
20
26
|
return PUBLIC_URL;
|
21
27
|
}
|
22
28
|
catch (err) {
|
@@ -94,17 +100,37 @@ exports.OAuthProvidersTypes = void 0;
|
|
94
100
|
(function (OAuthProvidersTypes) {
|
95
101
|
OAuthProvidersTypes["Google"] = "google";
|
96
102
|
OAuthProvidersTypes["Microsoft"] = "microsoft";
|
103
|
+
OAuthProvidersTypes["Apple"] = "apple";
|
97
104
|
})(exports.OAuthProvidersTypes || (exports.OAuthProvidersTypes = {}));
|
105
|
+
var OneTapPositions;
|
106
|
+
(function (OneTapPositions) {
|
107
|
+
OneTapPositions["embedded"] = "embedded";
|
108
|
+
OneTapPositions["floating"] = "floating";
|
109
|
+
})(OneTapPositions || (OneTapPositions = {}));
|
98
110
|
|
99
111
|
var useStytchFactory = function () {
|
100
|
-
var _a =
|
101
|
-
|
112
|
+
var _a = React.useState(), stytchFactory = _a[0], setStytchFactory = _a[1];
|
113
|
+
React.useEffect(function () {
|
102
114
|
// If we pass the function in directly React will execute it as a SetStateAction
|
103
115
|
// Need to wrap in an anon - see https://medium.com/swlh/how-to-store-a-function-with-the-usestate-hook-in-react-8a88dd4eede1
|
104
116
|
loadStytch().then(function (globalStytch) { return setStytchFactory(function () { return globalStytch; }); });
|
105
117
|
}, []);
|
106
118
|
return stytchFactory;
|
107
119
|
};
|
120
|
+
/**
|
121
|
+
* Returns a unique element ID.
|
122
|
+
* Client-side only - will return null for server-side
|
123
|
+
* resolves: https://stytch.slack.com/archives/C015UDB4X33/p1641450131000800
|
124
|
+
* based on: https://github.com/vercel/next.js/issues/7322#issuecomment-968858477
|
125
|
+
*/
|
126
|
+
var useUniqueElementId = function () {
|
127
|
+
var _a = React.useState(null), elementId = _a[0], setElementId = _a[1];
|
128
|
+
React.useEffect(function () {
|
129
|
+
var randId = Math.floor(Math.random() * 1e6);
|
130
|
+
setElementId("stytch-magic-link-" + randId);
|
131
|
+
}, []);
|
132
|
+
return elementId;
|
133
|
+
};
|
108
134
|
/**
|
109
135
|
* Stytch JS React Component
|
110
136
|
*
|
@@ -112,19 +138,22 @@ var useStytchFactory = function () {
|
|
112
138
|
*/
|
113
139
|
var Stytch = function (props) {
|
114
140
|
var StytchFactory = useStytchFactory();
|
141
|
+
var elementId = useUniqueElementId();
|
115
142
|
var publicToken = props.publicToken, style = props.style, callbacks = props.callbacks, loginOrSignupView = props.loginOrSignupView;
|
116
|
-
|
117
|
-
if (!StytchFactory) {
|
143
|
+
React.useEffect(function () {
|
144
|
+
if (!StytchFactory || !elementId) {
|
118
145
|
return;
|
119
146
|
}
|
120
147
|
var stytch = StytchFactory(publicToken, callbacks);
|
121
148
|
stytch.mount({
|
122
|
-
elementId: "#
|
149
|
+
elementId: "#" + elementId,
|
123
150
|
style: style,
|
124
151
|
loginOrSignupView: loginOrSignupView,
|
125
152
|
});
|
126
|
-
}, [StytchFactory]);
|
127
|
-
return
|
153
|
+
}, [StytchFactory, elementId]);
|
154
|
+
return elementId ?
|
155
|
+
React__default['default'].createElement("div", { id: elementId }) :
|
156
|
+
null;
|
128
157
|
};
|
129
158
|
|
130
159
|
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 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 || (OAuthProvidersTypes = {}));\n\nexport { CallbackEventType, EventType, OAuthProvidersTypes, 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\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":["SDKProductTypes","OAuthProvidersTypes","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,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,CAAC,EAAEA,2BAAmB,KAAKA,2BAAmB,GAAG,EAAE,CAAC,CAAC;;AC1ErD,IAAM,gBAAgB,GAAG;IACjB,IAAA,KAAoCC,yBAAK,CAAC,QAAQ,EAAiB,EAAlE,aAAa,QAAA,EAAE,gBAAgB,QAAmC,CAAC;IAC1EA,yBAAK,CAAC,SAAS,CAAC;;;QAGd,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;;;;;IAKa,MAAM,GAAG,UAAC,KAAkB;IACvC,IAAM,aAAa,GAAG,gBAAgB,EAAE,CAAC;IAElC,IAAA,WAAW,GAAyC,KAAK,YAA9C,EAAE,KAAK,GAAkC,KAAK,MAAvC,EAAE,SAAS,GAAuB,KAAK,UAA5B,EAAE,iBAAiB,GAAI,KAAK,kBAAT,CAAU;IAEjEA,yBAAK,CAAC,SAAS,CAAC;QACd,IAAI,CAAC,aAAa,EAAE;YAClB,OAAO;SACR;QACD,IAAM,MAAM,GAAG,aAAa,CAAC,WAAW,EAAE,SAAS,CAAC,CAAC;QAErD,MAAM,CAAC,KAAK,CAAC;YACX,SAAS,EAAE,oBAAoB;YAC/B,KAAK,OAAA;YACL,iBAAiB,mBAAA;SAClB,CAAC,CAAC;KACJ,EAAE,CAAC,aAAa,CAAC,CAAC,CAAC;IAEpB,OAAOA,iDAAK,EAAE,EAAC,mBAAmB,GAAO,CAAC;AAC5C;;;;"}
|
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, {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,7 +1,7 @@
|
|
1
1
|
{
|
2
2
|
"name": "@stytch/stytch-react",
|
3
|
-
"version": "3.0.
|
4
|
-
"description": "Stytch
|
3
|
+
"version": "3.0.5",
|
4
|
+
"description": "Stytch's official React Library",
|
5
5
|
"main": "dist/index.js",
|
6
6
|
"module": "dist/index.esm.js",
|
7
7
|
"scripts": {
|
@@ -9,7 +9,7 @@
|
|
9
9
|
"build": "rollup -c",
|
10
10
|
"prepare": "rollup -c"
|
11
11
|
},
|
12
|
-
"author": "
|
12
|
+
"author": "Stytch",
|
13
13
|
"license": "MIT",
|
14
14
|
"devDependencies": {
|
15
15
|
"@babel/core": "^7.15.5",
|
@@ -17,10 +17,10 @@
|
|
17
17
|
"@babel/preset-react": "^7.12.13",
|
18
18
|
"@babel/preset-typescript": "^7.15.0",
|
19
19
|
"@rollup/plugin-typescript": "^8.2.5",
|
20
|
-
"@types/enzyme": "^3.10.
|
20
|
+
"@types/enzyme": "^3.10.10",
|
21
21
|
"@types/enzyme-adapter-react-16": "^1.0.6",
|
22
22
|
"@types/jest": "^26.0.20",
|
23
|
-
"@types/react-dom": "^17.0.
|
23
|
+
"@types/react-dom": "^17.0.10",
|
24
24
|
"@wessberg/rollup-plugin-ts": "^1.3.8",
|
25
25
|
"babel-loader": "^8.2.2",
|
26
26
|
"enzyme": "^3.11.0",
|
@@ -32,7 +32,7 @@
|
|
32
32
|
"rollup-plugin-babel": "^4.4.0",
|
33
33
|
"rollup-plugin-commonjs": "^10.1.0",
|
34
34
|
"rollup-plugin-node-resolve": "^5.2.0",
|
35
|
-
"typescript": "^4.4.
|
35
|
+
"typescript": "^4.4.4"
|
36
36
|
},
|
37
37
|
"repository": {
|
38
38
|
"type": "git",
|
@@ -50,7 +50,7 @@
|
|
50
50
|
"package.json"
|
51
51
|
],
|
52
52
|
"dependencies": {
|
53
|
-
"@stytch/stytch-js": "^2.0.
|
53
|
+
"@stytch/stytch-js": "^2.0.6"
|
54
54
|
},
|
55
55
|
"peerDependencies": {
|
56
56
|
"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] =
|
15
|
-
|
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,6 +21,21 @@ const useStytchFactory = (): StytchFactory => {
|
|
21
21
|
return stytchFactory;
|
22
22
|
}
|
23
23
|
|
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(() => {
|
33
|
+
const randId = Math.floor(Math.random() * 1e6);
|
34
|
+
setElementId(`stytch-magic-link-${randId}`);
|
35
|
+
}, [])
|
36
|
+
return elementId;
|
37
|
+
}
|
38
|
+
|
24
39
|
/**
|
25
40
|
* Stytch JS React Component
|
26
41
|
*
|
@@ -28,21 +43,24 @@ const useStytchFactory = (): StytchFactory => {
|
|
28
43
|
*/
|
29
44
|
export const Stytch = (props: StytchProps) => {
|
30
45
|
const StytchFactory = useStytchFactory();
|
46
|
+
const elementId = useUniqueElementId();
|
31
47
|
|
32
48
|
const {publicToken, style, callbacks, loginOrSignupView} = props;
|
33
49
|
|
34
|
-
|
35
|
-
if (!StytchFactory) {
|
50
|
+
useEffect(() => {
|
51
|
+
if (!StytchFactory || !elementId) {
|
36
52
|
return;
|
37
53
|
}
|
38
54
|
const stytch = StytchFactory(publicToken, callbacks);
|
39
55
|
|
40
56
|
stytch.mount({
|
41
|
-
elementId:
|
57
|
+
elementId: `#${elementId}`,
|
42
58
|
style,
|
43
59
|
loginOrSignupView,
|
44
60
|
});
|
45
|
-
}, [StytchFactory]);
|
61
|
+
}, [StytchFactory, elementId]);
|
46
62
|
|
47
|
-
return
|
63
|
+
return elementId ?
|
64
|
+
<div id={elementId}></div> :
|
65
|
+
null;
|
48
66
|
};
|