@stytch/stytch-react 2.0.0 → 3.0.3

package/README.md

@@ -57,3 +57,12 @@ const App = () => {
 ## Typescript Support
 
 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

@@ -1,106 +1,16 @@
 /// <reference types="react" />
-declare global {
-    interface Window {
-        Stytch: (publicToken: string, options: CallbackOptions) => StytchClient;
-    }
-}
-// Client object types
-interface StytchClient {
-    mount: (mountArgs: StytchMountArgs) => void;
-}
+import { LoginOrSignupView, StyleConfig, CallbackOptions } from "@stytch/stytch-js";
 interface StytchProps {
     publicToken: string;
-    loginOrSignupView: LoginOrSignupView;
+    loginOrSignupView?: LoginOrSignupView;
     style?: StyleConfig;
     callbacks?: CallbackOptions;
-    // Do not change this prop. This defaults to https://js.stytch.com/stytch.js
-    _url?: string;
-}
-interface StytchMountArgs {
-    elementId: string;
-    loginOrSignupView: LoginOrSignupView;
-    style: StyleConfig;
-}
-// Config types
-interface LoginConfig {
-    magicLinkUrl: string;
-    expirationMinutes?: number;
-    emailTemplateId?: string;
-}
-interface CreateUserConfig {
-    magicLinkUrl: string;
-    expirationMinutes?: number;
-    emailTemplateId?: string;
-    createUserAsPending?: boolean;
-}
-interface LoginOrCreateUserConfig {
-    loginConfig: LoginConfig;
-    createUserConfig: CreateUserConfig;
-}
-interface StyleConfig {
-    fontFamily?: string;
-    width?: string;
-    primaryColor?: string;
-    primaryTextColor?: string;
-    secondaryTextColor?: string;
-    lightGrey?: string;
-    darkGrey?: string;
-    hideHeaderText?: boolean;
-}
-interface EmailMagicLinksOptions {
-    loginRedirectURL: string;
-    loginExpirationMinutes: number;
-    signupRedirectURL: string;
-    signupExpirationMinutes: number;
-    createUserAsPending: boolean;
-}
-interface LoginOrSignupView {
-    products: SDKProductTypes[];
-    emailMagicLinksOptions: EmailMagicLinksOptions;
-}
-// Callback types
-declare enum EventType {
-    CallbackEvent = "CALLBACK_EVENT",
-    ErrorEvent = "ERROR_EVENT",
-    SuccessEvent = "SUCCESS_EVENT"
-}
-declare enum CallbackEventType {
-    UserEventType = "USER_EVENT_TYPE"
-}
-interface UserEventData {
-    type: CallbackEventType.UserEventType;
-    email: string;
-    emailId: string;
-    userId: string;
-}
-interface MagicLinkSentData {
-    message: string;
-}
-interface StytchError {
-    message: string;
-}
-interface EventData {
-    eventType: EventType.CallbackEvent;
-    eventData: UserEventData;
-}
-interface SuccessData {
-    eventType: EventType.SuccessEvent;
-    eventData: MagicLinkSentData;
-}
-interface ErrorData {
-    eventType: EventType.ErrorEvent;
-    error: StytchError;
-}
-interface CallbackOptions {
-    onEvent?: (data?: EventData) => void | Promise<void>;
-    onSuccess?: (data?: SuccessData) => void | Promise<void>;
-    onError?: (data?: ErrorData) => void | Promise<void>;
 }
-type SDKProductTypes = "emailMagicLinks";
 /**
  * Stytch JS React Component
  *
  * [Documentation](https://stytch.com/docs/javascript-sdk)
  */
 declare const Stytch: (props: StytchProps) => JSX.Element;
-export { Stytch, StytchClient, StytchProps, StytchMountArgs, LoginConfig, CreateUserConfig, LoginOrCreateUserConfig, StyleConfig, EmailMagicLinksOptions, LoginOrSignupView, EventType, CallbackEventType, UserEventData, MagicLinkSentData, StytchError, EventData, SuccessData, ErrorData, CallbackOptions, SDKProductTypes };
+export { SDKProductTypes, OAuthProvidersTypes } from "@stytch/stytch-js";
+export { Stytch, StytchProps };

package/dist/index.esm.d.ts

@@ -1,106 +1,16 @@
 /// <reference types="react" />
-declare global {
-    interface Window {
-        Stytch: (publicToken: string, options: CallbackOptions) => StytchClient;
-    }
-}
-// Client object types
-interface StytchClient {
-    mount: (mountArgs: StytchMountArgs) => void;
-}
+import { LoginOrSignupView, StyleConfig, CallbackOptions } from "@stytch/stytch-js";
 interface StytchProps {
     publicToken: string;
-    loginOrSignupView: LoginOrSignupView;
+    loginOrSignupView?: LoginOrSignupView;
     style?: StyleConfig;
     callbacks?: CallbackOptions;
-    // Do not change this prop. This defaults to https://js.stytch.com/stytch.js
-    _url?: string;
-}
-interface StytchMountArgs {
-    elementId: string;
-    loginOrSignupView: LoginOrSignupView;
-    style: StyleConfig;
-}
-// Config types
-interface LoginConfig {
-    magicLinkUrl: string;
-    expirationMinutes?: number;
-    emailTemplateId?: string;
-}
-interface CreateUserConfig {
-    magicLinkUrl: string;
-    expirationMinutes?: number;
-    emailTemplateId?: string;
-    createUserAsPending?: boolean;
-}
-interface LoginOrCreateUserConfig {
-    loginConfig: LoginConfig;
-    createUserConfig: CreateUserConfig;
-}
-interface StyleConfig {
-    fontFamily?: string;
-    width?: string;
-    primaryColor?: string;
-    primaryTextColor?: string;
-    secondaryTextColor?: string;
-    lightGrey?: string;
-    darkGrey?: string;
-    hideHeaderText?: boolean;
-}
-interface EmailMagicLinksOptions {
-    loginRedirectURL: string;
-    loginExpirationMinutes: number;
-    signupRedirectURL: string;
-    signupExpirationMinutes: number;
-    createUserAsPending: boolean;
-}
-interface LoginOrSignupView {
-    products: SDKProductTypes[];
-    emailMagicLinksOptions: EmailMagicLinksOptions;
-}
-// Callback types
-declare enum EventType {
-    CallbackEvent = "CALLBACK_EVENT",
-    ErrorEvent = "ERROR_EVENT",
-    SuccessEvent = "SUCCESS_EVENT"
-}
-declare enum CallbackEventType {
-    UserEventType = "USER_EVENT_TYPE"
-}
-interface UserEventData {
-    type: CallbackEventType.UserEventType;
-    email: string;
-    emailId: string;
-    userId: string;
-}
-interface MagicLinkSentData {
-    message: string;
-}
-interface StytchError {
-    message: string;
-}
-interface EventData {
-    eventType: EventType.CallbackEvent;
-    eventData: UserEventData;
-}
-interface SuccessData {
-    eventType: EventType.SuccessEvent;
-    eventData: MagicLinkSentData;
-}
-interface ErrorData {
-    eventType: EventType.ErrorEvent;
-    error: StytchError;
-}
-interface CallbackOptions {
-    onEvent?: (data?: EventData) => void | Promise<void>;
-    onSuccess?: (data?: SuccessData) => void | Promise<void>;
-    onError?: (data?: ErrorData) => void | Promise<void>;
 }
-type SDKProductTypes = "emailMagicLinks";
 /**
  * Stytch JS React Component
  *
  * [Documentation](https://stytch.com/docs/javascript-sdk)
  */
 declare const Stytch: (props: StytchProps) => JSX.Element;
-export { Stytch, StytchClient, StytchProps, StytchMountArgs, LoginConfig, CreateUserConfig, LoginOrCreateUserConfig, StyleConfig, EmailMagicLinksOptions, LoginOrSignupView, EventType, CallbackEventType, UserEventData, MagicLinkSentData, StytchError, EventData, SuccessData, ErrorData, CallbackOptions, SDKProductTypes };
+export { SDKProductTypes, OAuthProvidersTypes } from "@stytch/stytch-js";
+export { Stytch, StytchProps };

package/dist/index.esm.js

@@ -1,138 +1,75 @@
 import React from 'react';
 
-var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
-
-function unwrapExports (x) {
-	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
-}
-
-function createCommonjsModule(fn, module) {
-	return module = { exports: {} }, fn(module, module.exports), module.exports;
-}
-
-var useScript_1 = createCommonjsModule(function (module, exports) {
-var __rest = (commonjsGlobal && commonjsGlobal.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
+var PUBLIC_URL = 'https://js.stytch.com/stytch.js';
+function getJSUrl() {
+    try {
+        if (process.env.STYTCH_JS_SDK_URL) {
+            return process.env.STYTCH_JS_SDK_URL;
         }
-    return t;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-
-function useScript(_a) {
-    var src = _a.src, _b = _a.checkForExisting, checkForExisting = _b === void 0 ? false : _b, attributes = __rest(_a, ["src", "checkForExisting"]);
-    var _c = React.useState(Boolean(src)), loading = _c[0], setLoading = _c[1];
-    var _d = React.useState(null), error = _d[0], setError = _d[1];
-    React.useEffect(function () {
-        if (!isBrowser || !src)
-            return;
-        if (checkForExisting) {
-            var existing = document.querySelectorAll("script[src=\"" + src + "\"]");
-            if (existing.length > 0) {
-                setLoading(false);
-                return;
-            }
+        if (process.env.REACT_APP_STYTCH_JS_SDK_URL) {
+            return process.env.REACT_APP_STYTCH_JS_SDK_URL;
         }
-        var scriptEl = document.createElement('script');
-        scriptEl.setAttribute('src', src);
-        Object.keys(attributes).forEach(function (key) {
-            if (scriptEl[key] === undefined) {
-                scriptEl.setAttribute(key, attributes[key]);
-            }
-            else {
-                scriptEl[key] = attributes[key];
-            }
-        });
-        var handleLoad = function () {
-            setLoading(false);
-        };
-        var handleError = function (error) {
-            setError(error);
-        };
-        scriptEl.addEventListener('load', handleLoad);
-        scriptEl.addEventListener('error', handleError);
-        document.body.appendChild(scriptEl);
-        return function () {
-            scriptEl.removeEventListener('load', handleLoad);
-            scriptEl.removeEventListener('error', handleError);
-        };
-        // we need to ignore the attributes as they're a new object per call, so we'd never skip an effect call
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [src]);
-    return [loading, error];
+        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) {
+        return PUBLIC_URL;
+    }
 }
-exports.default = useScript;
-var isBrowser = typeof window !== 'undefined' && typeof window.document !== 'undefined';
-
-});
+var STYTCH_JS_URL = getJSUrl();
 
-unwrapExports(useScript_1);
-
-var lib = createCommonjsModule(function (module, exports) {
-var __importDefault = (commonjsGlobal && commonjsGlobal.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
+var findOrCreateScript = function () {
+    var scripts = document.querySelectorAll("script[src=\"" + STYTCH_JS_URL + "\"]");
+    if (scripts[0]) {
+        return scripts[0];
+    }
+    var script = document.createElement('script');
+    script.src = STYTCH_JS_URL;
+    document.head.appendChild(script);
+    return script;
 };
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = void 0;
-
-Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(useScript_1).default; } });
-
-});
-
-var useScript = unwrapExports(lib);
-
-var STYTCH_JS_URL = "https://js.stytch.com/stytch.js";
-
-/**
- * Stytch JS React Component
- *
- * [Documentation](https://stytch.com/docs/javascript-sdk)
- */
-var Stytch = function (props) {
-    // url check
-    var url = props._url || STYTCH_JS_URL;
-    if (url !== STYTCH_JS_URL) {
-        console.warn("Please do not change _url prop. Changing _url prop will result in Stytch SDK not working properly.");
-        if (!props._url.endsWith("stytch.com/stytch.js") &&
-            !props._url.includes("localhost")) {
-            return;
-        }
+var loadScript = function () {
+    var isBrowser = typeof window !== 'undefined' && typeof window.document !== 'undefined';
+    if (!isBrowser) {
+        return Promise.resolve(null);
     }
-    var _a = useScript({
-        src: url || STYTCH_JS_URL,
-        checkForExisting: true,
-    }), loading = _a[0], error = _a[1];
-    var publicToken = props.publicToken, style = props.style, callbacks = props.callbacks, loginOrSignupView = props.loginOrSignupView;
-    React.useEffect(function () {
-        if (loading) {
-            return;
-        }
-        if (error || !window.Stytch) {
-            // eslint-disable-next-line no-console
-            console.error("Error loading Stytch", error);
-            return;
+    return new Promise(function (resolve, reject) {
+        if (window.Stytch) {
+            console.warn('Stytch.js has already been loaded');
+            resolve(window.Stytch);
         }
-        else {
-            // Initialize Stytch.js with your public token. You can find this in your Stytch dashboard under API Keys.
-            var stytch = window.Stytch(publicToken, callbacks);
-            if (loginOrSignupView) {
-                stytch.mount({
-                    elementId: "#stytch-magic-link",
-                    style: style,
-                    loginOrSignupView: loginOrSignupView,
-                });
+        var script = findOrCreateScript();
+        script.addEventListener('load', function () {
+            if (window.Stytch) {
+                resolve(window.Stytch);
             }
             else {
-                console.error("loginOrSignupView is a required prop");
+                reject(new Error('Stytch.js could not be loaded'));
             }
-        }
-    }, [loading]);
-    return React.createElement("div", { id: "stytch-magic-link" });
+        });
+        script.addEventListener('error', function () {
+            reject(new Error('Stytch.js could not be loaded'));
+        });
+    });
+};
+// Execute our own script injection after a tick to give users time to do their
+// own script injection.
+var stytchPromise = Promise.resolve().then(function () { return loadScript(); });
+var loadCalled = false;
+// We will log a warning if it doesn't look like the host code has checked or invoked the promise
+stytchPromise.catch(function (err) {
+    if (!loadCalled) {
+        console.warn(err);
+    }
+});
+var loadStytch = function () {
+    loadCalled = true;
+    return stytchPromise;
 };
 
 // Callback types
@@ -146,6 +83,61 @@ var CallbackEventType;
 (function (CallbackEventType) {
     CallbackEventType["UserEventType"] = "USER_EVENT_TYPE";
 })(CallbackEventType || (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 OneTapPositions;
+(function (OneTapPositions) {
+    OneTapPositions["embedded"] = "embedded";
+    OneTapPositions["floating"] = "floating";
+})(OneTapPositions || (OneTapPositions = {}));
+
+var useStytchFactory = 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;
+};
+var useUniqueElementId = function () {
+    var elementId = React.useState(function () {
+        var randId = Math.floor(Math.random() * 1e6);
+        return "stytch-magic-link-" + randId;
+    })[0];
+    return elementId;
+};
+/**
+ * Stytch JS React Component
+ *
+ * [Documentation](https://stytch.com/docs/javascript-sdk)
+ */
+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) {
+            return;
+        }
+        var stytch = StytchFactory(publicToken, callbacks);
+        stytch.mount({
+            elementId: "#" + elementId,
+            style: style,
+            loginOrSignupView: loginOrSignupView,
+        });
+    }, [StytchFactory, elementId]);
+    return React.createElement("div", { id: elementId });
+};
 
-export { CallbackEventType, EventType, 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/react-script-hook/lib/use-script.js","../node_modules/react-script-hook/lib/index.js","../src/constants.tsx","../src/Stytch.tsx","../src/types/index.ts"],"sourcesContent":["\"use strict\";\nvar __rest = (this && this.__rest) || function (s, e) {\n    var t = {};\n    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)\n        t[p] = s[p];\n    if (s != null && typeof Object.getOwnPropertySymbols === \"function\")\n        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {\n            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))\n                t[p[i]] = s[p[i]];\n        }\n    return t;\n};\nObject.defineProperty(exports, \"__esModule\", { value: true });\nvar react_1 = require(\"react\");\nfunction useScript(_a) {\n    var src = _a.src, _b = _a.checkForExisting, checkForExisting = _b === void 0 ? false : _b, attributes = __rest(_a, [\"src\", \"checkForExisting\"]);\n    var _c = react_1.useState(Boolean(src)), loading = _c[0], setLoading = _c[1];\n    var _d = react_1.useState(null), error = _d[0], setError = _d[1];\n    react_1.useEffect(function () {\n        if (!isBrowser || !src)\n            return;\n        if (checkForExisting) {\n            var existing = document.querySelectorAll(\"script[src=\\\"\" + src + \"\\\"]\");\n            if (existing.length > 0) {\n                setLoading(false);\n                return;\n            }\n        }\n        var scriptEl = document.createElement('script');\n        scriptEl.setAttribute('src', src);\n        Object.keys(attributes).forEach(function (key) {\n            if (scriptEl[key] === undefined) {\n                scriptEl.setAttribute(key, attributes[key]);\n            }\n            else {\n                scriptEl[key] = attributes[key];\n            }\n        });\n        var handleLoad = function () {\n            setLoading(false);\n        };\n        var handleError = function (error) {\n            setError(error);\n        };\n        scriptEl.addEventListener('load', handleLoad);\n        scriptEl.addEventListener('error', handleError);\n        document.body.appendChild(scriptEl);\n        return function () {\n            scriptEl.removeEventListener('load', handleLoad);\n            scriptEl.removeEventListener('error', handleError);\n        };\n        // we need to ignore the attributes as they're a new object per call, so we'd never skip an effect call\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [src]);\n    return [loading, error];\n}\nexports.default = useScript;\nvar isBrowser = typeof window !== 'undefined' && typeof window.document !== 'undefined';\n//# sourceMappingURL=use-script.js.map","\"use strict\";\nvar __importDefault = (this && this.__importDefault) || function (mod) {\n    return (mod && mod.__esModule) ? mod : { \"default\": mod };\n};\nObject.defineProperty(exports, \"__esModule\", { value: true });\nexports.default = void 0;\nvar use_script_1 = require(\"./use-script\");\nObject.defineProperty(exports, \"default\", { enumerable: true, get: function () { return __importDefault(use_script_1).default; } });\n//# sourceMappingURL=index.js.map","export const STYTCH_JS_URL = \"https://js.stytch.com/stytch.js\";\n","import React from \"react\";\nimport useScript from \"react-script-hook\";\nimport { STYTCH_JS_URL } from \"./constants\";\nimport { StytchProps } from \"./types\";\n\n/**\n * Stytch JS React Component\n *\n * [Documentation](https://stytch.com/docs/javascript-sdk)\n */\nexport const Stytch = (props: StytchProps) => {\n  // url check\n  const url = props._url || STYTCH_JS_URL;\n  if (url !== STYTCH_JS_URL) {\n    console.warn(\n      \"Please do not change _url prop. Changing _url prop will result in Stytch SDK not working properly.\"\n    );\n    if (\n      !props._url.endsWith(\"stytch.com/stytch.js\") &&\n      !props._url.includes(\"localhost\")\n    ) {\n      return;\n    }\n  }\n\n  const [loading, error] = useScript({\n    src: url || STYTCH_JS_URL,\n    checkForExisting: true,\n  });\n  const { publicToken, style, callbacks, loginOrSignupView } = props;\n\n  React.useEffect(() => {\n    if (loading) {\n      return;\n    }\n    if (error || !window.Stytch) {\n      // eslint-disable-next-line no-console\n      console.error(\"Error loading Stytch\", error);\n      return;\n    } else {\n      // Initialize Stytch.js with your public token. You can find this in your Stytch dashboard under API Keys.\n      var stytch = window.Stytch(publicToken, callbacks);\n      if (loginOrSignupView) {\n        stytch.mount({\n          elementId: \"#stytch-magic-link\",\n          style,\n          loginOrSignupView,\n        });\n      } else {\n        console.error(\"loginOrSignupView is a required prop\");\n      }\n    }\n  }, [loading]);\n\n  return <div id=\"stytch-magic-link\"></div>;\n};\n","declare global {\n  interface Window {\n    Stytch: (publicToken: string, options: CallbackOptions) => StytchClient;\n  }\n}\n\n// Client object types\nexport interface StytchClient {\n  mount: (mountArgs: StytchMountArgs) => void;\n}\n\nexport interface StytchProps {\n  publicToken: string;\n  loginOrSignupView: LoginOrSignupView;\n  style?: StyleConfig;\n  callbacks?: CallbackOptions;\n  // Do not change this prop. This defaults to https://js.stytch.com/stytch.js\n  _url?: string;\n}\n\nexport interface StytchMountArgs {\n  elementId: string;\n  loginOrSignupView: LoginOrSignupView;\n  style: StyleConfig;\n}\n\n// Config types\nexport interface LoginConfig {\n  magicLinkUrl: string;\n  expirationMinutes?: number;\n  emailTemplateId?: string;\n}\n\nexport interface CreateUserConfig {\n  magicLinkUrl: string;\n  expirationMinutes?: number;\n  emailTemplateId?: string;\n  createUserAsPending?: boolean;\n}\n\nexport interface LoginOrCreateUserConfig {\n  loginConfig: LoginConfig;\n  createUserConfig: CreateUserConfig;\n}\n\nexport interface StyleConfig {\n  fontFamily?: string;\n  width?: string;\n  primaryColor?: string;\n  primaryTextColor?: string;\n  secondaryTextColor?: string;\n  lightGrey?: string;\n  darkGrey?: string;\n  hideHeaderText?: boolean;\n}\n\nexport interface EmailMagicLinksOptions {\n  loginRedirectURL: string;\n  loginExpirationMinutes: number;\n  signupRedirectURL: string;\n  signupExpirationMinutes: number;\n  createUserAsPending: boolean;\n}\n\nexport interface LoginOrSignupView {\n  products: SDKProductTypes[];\n  emailMagicLinksOptions: EmailMagicLinksOptions;\n}\n\n// Callback types\nexport enum EventType {\n  CallbackEvent = \"CALLBACK_EVENT\",\n  ErrorEvent = \"ERROR_EVENT\",\n  SuccessEvent = \"SUCCESS_EVENT\",\n}\nexport enum CallbackEventType {\n  UserEventType = \"USER_EVENT_TYPE\",\n}\nexport interface UserEventData {\n  type: CallbackEventType.UserEventType;\n  email: string;\n  emailId: string;\n  userId: string;\n}\nexport interface MagicLinkSentData {\n  message: string;\n}\nexport interface StytchError {\n  message: string;\n}\nexport interface EventData {\n  eventType: EventType.CallbackEvent;\n  eventData: UserEventData;\n}\nexport interface SuccessData {\n  eventType: EventType.SuccessEvent;\n  eventData: MagicLinkSentData;\n}\nexport interface ErrorData {\n  eventType: EventType.ErrorEvent;\n  error: StytchError;\n}\nexport interface CallbackOptions {\n  onEvent?: (data?: EventData) => void | Promise<void>;\n  onSuccess?: (data?: SuccessData) => void | Promise<void>;\n  onError?: (data?: ErrorData) => void | Promise<void>;\n}\n\nexport type SDKProductTypes = \"emailMagicLinks\";\n"],"names":["this","react_1","use_script_1"],"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 = {}));\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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"}

package/dist/index.js

@@ -8,152 +8,144 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
-
-function unwrapExports (x) {
-	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
-}
-
-function createCommonjsModule(fn, module) {
-	return module = { exports: {} }, fn(module, module.exports), module.exports;
+var PUBLIC_URL = 'https://js.stytch.com/stytch.js';
+function getJSUrl() {
+    try {
+        if (process.env.STYTCH_JS_SDK_URL) {
+            return process.env.STYTCH_JS_SDK_URL;
+        }
+        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) {
+        return PUBLIC_URL;
+    }
 }
+var STYTCH_JS_URL = getJSUrl();
 
-var useScript_1 = createCommonjsModule(function (module, exports) {
-var __rest = (commonjsGlobal && commonjsGlobal.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
+var findOrCreateScript = function () {
+    var scripts = document.querySelectorAll("script[src=\"" + STYTCH_JS_URL + "\"]");
+    if (scripts[0]) {
+        return scripts[0];
+    }
+    var script = document.createElement('script');
+    script.src = STYTCH_JS_URL;
+    document.head.appendChild(script);
+    return script;
 };
-Object.defineProperty(exports, "__esModule", { value: true });
-
-function useScript(_a) {
-    var src = _a.src, _b = _a.checkForExisting, checkForExisting = _b === void 0 ? false : _b, attributes = __rest(_a, ["src", "checkForExisting"]);
-    var _c = React__default['default'].useState(Boolean(src)), loading = _c[0], setLoading = _c[1];
-    var _d = React__default['default'].useState(null), error = _d[0], setError = _d[1];
-    React__default['default'].useEffect(function () {
-        if (!isBrowser || !src)
-            return;
-        if (checkForExisting) {
-            var existing = document.querySelectorAll("script[src=\"" + src + "\"]");
-            if (existing.length > 0) {
-                setLoading(false);
-                return;
-            }
+var loadScript = function () {
+    var isBrowser = typeof window !== 'undefined' && typeof window.document !== 'undefined';
+    if (!isBrowser) {
+        return Promise.resolve(null);
+    }
+    return new Promise(function (resolve, reject) {
+        if (window.Stytch) {
+            console.warn('Stytch.js has already been loaded');
+            resolve(window.Stytch);
         }
-        var scriptEl = document.createElement('script');
-        scriptEl.setAttribute('src', src);
-        Object.keys(attributes).forEach(function (key) {
-            if (scriptEl[key] === undefined) {
-                scriptEl.setAttribute(key, attributes[key]);
+        var script = findOrCreateScript();
+        script.addEventListener('load', function () {
+            if (window.Stytch) {
+                resolve(window.Stytch);
             }
             else {
-                scriptEl[key] = attributes[key];
+                reject(new Error('Stytch.js could not be loaded'));
             }
         });
-        var handleLoad = function () {
-            setLoading(false);
-        };
-        var handleError = function (error) {
-            setError(error);
-        };
-        scriptEl.addEventListener('load', handleLoad);
-        scriptEl.addEventListener('error', handleError);
-        document.body.appendChild(scriptEl);
-        return function () {
-            scriptEl.removeEventListener('load', handleLoad);
-            scriptEl.removeEventListener('error', handleError);
-        };
-        // we need to ignore the attributes as they're a new object per call, so we'd never skip an effect call
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [src]);
-    return [loading, error];
-}
-exports.default = useScript;
-var isBrowser = typeof window !== 'undefined' && typeof window.document !== 'undefined';
-
-});
-
-unwrapExports(useScript_1);
-
-var lib = createCommonjsModule(function (module, exports) {
-var __importDefault = (commonjsGlobal && commonjsGlobal.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
+        script.addEventListener('error', function () {
+            reject(new Error('Stytch.js could not be loaded'));
+        });
+    });
 };
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = void 0;
-
-Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(useScript_1).default; } });
-
+// Execute our own script injection after a tick to give users time to do their
+// own script injection.
+var stytchPromise = Promise.resolve().then(function () { return loadScript(); });
+var loadCalled = false;
+// We will log a warning if it doesn't look like the host code has checked or invoked the promise
+stytchPromise.catch(function (err) {
+    if (!loadCalled) {
+        console.warn(err);
+    }
 });
+var loadStytch = function () {
+    loadCalled = true;
+    return stytchPromise;
+};
 
-var useScript = unwrapExports(lib);
-
-var STYTCH_JS_URL = "https://js.stytch.com/stytch.js";
-
+// Callback types
+var EventType;
+(function (EventType) {
+    EventType["CallbackEvent"] = "CALLBACK_EVENT";
+    EventType["ErrorEvent"] = "ERROR_EVENT";
+    EventType["SuccessEvent"] = "SUCCESS_EVENT";
+})(EventType || (EventType = {}));
+var CallbackEventType;
+(function (CallbackEventType) {
+    CallbackEventType["UserEventType"] = "USER_EVENT_TYPE";
+})(CallbackEventType || (CallbackEventType = {}));
+exports.SDKProductTypes = void 0;
+(function (SDKProductTypes) {
+    SDKProductTypes["emailMagicLinks"] = "emailMagicLinks";
+    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 OneTapPositions;
+(function (OneTapPositions) {
+    OneTapPositions["embedded"] = "embedded";
+    OneTapPositions["floating"] = "floating";
+})(OneTapPositions || (OneTapPositions = {}));
+
+var useStytchFactory = function () {
+    var _a = React__default['default'].useState(), stytchFactory = _a[0], setStytchFactory = _a[1];
+    React__default['default'].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;
+};
+var useUniqueElementId = function () {
+    var elementId = React__default['default'].useState(function () {
+        var randId = Math.floor(Math.random() * 1e6);
+        return "stytch-magic-link-" + randId;
+    })[0];
+    return elementId;
+};
 /**
  * Stytch JS React Component
  *
  * [Documentation](https://stytch.com/docs/javascript-sdk)
  */
 var Stytch = function (props) {
-    // url check
-    var url = props._url || STYTCH_JS_URL;
-    if (url !== STYTCH_JS_URL) {
-        console.warn("Please do not change _url prop. Changing _url prop will result in Stytch SDK not working properly.");
-        if (!props._url.endsWith("stytch.com/stytch.js") &&
-            !props._url.includes("localhost")) {
-            return;
-        }
-    }
-    var _a = useScript({
-        src: url || STYTCH_JS_URL,
-        checkForExisting: true,
-    }), loading = _a[0], error = _a[1];
+    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 (loading) {
-            return;
-        }
-        if (error || !window.Stytch) {
-            // eslint-disable-next-line no-console
-            console.error("Error loading Stytch", error);
+        if (!StytchFactory) {
             return;
         }
-        else {
-            // Initialize Stytch.js with your public token. You can find this in your Stytch dashboard under API Keys.
-            var stytch = window.Stytch(publicToken, callbacks);
-            if (loginOrSignupView) {
-                stytch.mount({
-                    elementId: "#stytch-magic-link",
-                    style: style,
-                    loginOrSignupView: loginOrSignupView,
-                });
-            }
-            else {
-                console.error("loginOrSignupView is a required prop");
-            }
-        }
-    }, [loading]);
-    return React__default['default'].createElement("div", { id: "stytch-magic-link" });
+        var stytch = StytchFactory(publicToken, callbacks);
+        stytch.mount({
+            elementId: "#" + elementId,
+            style: style,
+            loginOrSignupView: loginOrSignupView,
+        });
+    }, [StytchFactory, elementId]);
+    return React__default['default'].createElement("div", { id: elementId });
 };
 
-// Callback types
-exports.EventType = void 0;
-(function (EventType) {
-    EventType["CallbackEvent"] = "CALLBACK_EVENT";
-    EventType["ErrorEvent"] = "ERROR_EVENT";
-    EventType["SuccessEvent"] = "SUCCESS_EVENT";
-})(exports.EventType || (exports.EventType = {}));
-exports.CallbackEventType = void 0;
-(function (CallbackEventType) {
-    CallbackEventType["UserEventType"] = "USER_EVENT_TYPE";
-})(exports.CallbackEventType || (exports.CallbackEventType = {}));
-
 exports.Stytch = Stytch;
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../node_modules/react-script-hook/lib/use-script.js","../node_modules/react-script-hook/lib/index.js","../src/constants.tsx","../src/Stytch.tsx","../src/types/index.ts"],"sourcesContent":["\"use strict\";\nvar __rest = (this && this.__rest) || function (s, e) {\n    var t = {};\n    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)\n        t[p] = s[p];\n    if (s != null && typeof Object.getOwnPropertySymbols === \"function\")\n        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {\n            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))\n                t[p[i]] = s[p[i]];\n        }\n    return t;\n};\nObject.defineProperty(exports, \"__esModule\", { value: true });\nvar react_1 = require(\"react\");\nfunction useScript(_a) {\n    var src = _a.src, _b = _a.checkForExisting, checkForExisting = _b === void 0 ? false : _b, attributes = __rest(_a, [\"src\", \"checkForExisting\"]);\n    var _c = react_1.useState(Boolean(src)), loading = _c[0], setLoading = _c[1];\n    var _d = react_1.useState(null), error = _d[0], setError = _d[1];\n    react_1.useEffect(function () {\n        if (!isBrowser || !src)\n            return;\n        if (checkForExisting) {\n            var existing = document.querySelectorAll(\"script[src=\\\"\" + src + \"\\\"]\");\n            if (existing.length > 0) {\n                setLoading(false);\n                return;\n            }\n        }\n        var scriptEl = document.createElement('script');\n        scriptEl.setAttribute('src', src);\n        Object.keys(attributes).forEach(function (key) {\n            if (scriptEl[key] === undefined) {\n                scriptEl.setAttribute(key, attributes[key]);\n            }\n            else {\n                scriptEl[key] = attributes[key];\n            }\n        });\n        var handleLoad = function () {\n            setLoading(false);\n        };\n        var handleError = function (error) {\n            setError(error);\n        };\n        scriptEl.addEventListener('load', handleLoad);\n        scriptEl.addEventListener('error', handleError);\n        document.body.appendChild(scriptEl);\n        return function () {\n            scriptEl.removeEventListener('load', handleLoad);\n            scriptEl.removeEventListener('error', handleError);\n        };\n        // we need to ignore the attributes as they're a new object per call, so we'd never skip an effect call\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [src]);\n    return [loading, error];\n}\nexports.default = useScript;\nvar isBrowser = typeof window !== 'undefined' && typeof window.document !== 'undefined';\n//# sourceMappingURL=use-script.js.map","\"use strict\";\nvar __importDefault = (this && this.__importDefault) || function (mod) {\n    return (mod && mod.__esModule) ? mod : { \"default\": mod };\n};\nObject.defineProperty(exports, \"__esModule\", { value: true });\nexports.default = void 0;\nvar use_script_1 = require(\"./use-script\");\nObject.defineProperty(exports, \"default\", { enumerable: true, get: function () { return __importDefault(use_script_1).default; } });\n//# sourceMappingURL=index.js.map","export const STYTCH_JS_URL = \"https://js.stytch.com/stytch.js\";\n","import React from \"react\";\nimport useScript from \"react-script-hook\";\nimport { STYTCH_JS_URL } from \"./constants\";\nimport { StytchProps } from \"./types\";\n\n/**\n * Stytch JS React Component\n *\n * [Documentation](https://stytch.com/docs/javascript-sdk)\n */\nexport const Stytch = (props: StytchProps) => {\n  // url check\n  const url = props._url || STYTCH_JS_URL;\n  if (url !== STYTCH_JS_URL) {\n    console.warn(\n      \"Please do not change _url prop. Changing _url prop will result in Stytch SDK not working properly.\"\n    );\n    if (\n      !props._url.endsWith(\"stytch.com/stytch.js\") &&\n      !props._url.includes(\"localhost\")\n    ) {\n      return;\n    }\n  }\n\n  const [loading, error] = useScript({\n    src: url || STYTCH_JS_URL,\n    checkForExisting: true,\n  });\n  const { publicToken, style, callbacks, loginOrSignupView } = props;\n\n  React.useEffect(() => {\n    if (loading) {\n      return;\n    }\n    if (error || !window.Stytch) {\n      // eslint-disable-next-line no-console\n      console.error(\"Error loading Stytch\", error);\n      return;\n    } else {\n      // Initialize Stytch.js with your public token. You can find this in your Stytch dashboard under API Keys.\n      var stytch = window.Stytch(publicToken, callbacks);\n      if (loginOrSignupView) {\n        stytch.mount({\n          elementId: \"#stytch-magic-link\",\n          style,\n          loginOrSignupView,\n        });\n      } else {\n        console.error(\"loginOrSignupView is a required prop\");\n      }\n    }\n  }, [loading]);\n\n  return <div id=\"stytch-magic-link\"></div>;\n};\n","declare global {\n  interface Window {\n    Stytch: (publicToken: string, options: CallbackOptions) => StytchClient;\n  }\n}\n\n// Client object types\nexport interface StytchClient {\n  mount: (mountArgs: StytchMountArgs) => void;\n}\n\nexport interface StytchProps {\n  publicToken: string;\n  loginOrSignupView: LoginOrSignupView;\n  style?: StyleConfig;\n  callbacks?: CallbackOptions;\n  // Do not change this prop. This defaults to https://js.stytch.com/stytch.js\n  _url?: string;\n}\n\nexport interface StytchMountArgs {\n  elementId: string;\n  loginOrSignupView: LoginOrSignupView;\n  style: StyleConfig;\n}\n\n// Config types\nexport interface LoginConfig {\n  magicLinkUrl: string;\n  expirationMinutes?: number;\n  emailTemplateId?: string;\n}\n\nexport interface CreateUserConfig {\n  magicLinkUrl: string;\n  expirationMinutes?: number;\n  emailTemplateId?: string;\n  createUserAsPending?: boolean;\n}\n\nexport interface LoginOrCreateUserConfig {\n  loginConfig: LoginConfig;\n  createUserConfig: CreateUserConfig;\n}\n\nexport interface StyleConfig {\n  fontFamily?: string;\n  width?: string;\n  primaryColor?: string;\n  primaryTextColor?: string;\n  secondaryTextColor?: string;\n  lightGrey?: string;\n  darkGrey?: string;\n  hideHeaderText?: boolean;\n}\n\nexport interface EmailMagicLinksOptions {\n  loginRedirectURL: string;\n  loginExpirationMinutes: number;\n  signupRedirectURL: string;\n  signupExpirationMinutes: number;\n  createUserAsPending: boolean;\n}\n\nexport interface LoginOrSignupView {\n  products: SDKProductTypes[];\n  emailMagicLinksOptions: EmailMagicLinksOptions;\n}\n\n// Callback types\nexport enum EventType {\n  CallbackEvent = \"CALLBACK_EVENT\",\n  ErrorEvent = \"ERROR_EVENT\",\n  SuccessEvent = \"SUCCESS_EVENT\",\n}\nexport enum CallbackEventType {\n  UserEventType = \"USER_EVENT_TYPE\",\n}\nexport interface UserEventData {\n  type: CallbackEventType.UserEventType;\n  email: string;\n  emailId: string;\n  userId: string;\n}\nexport interface MagicLinkSentData {\n  message: string;\n}\nexport interface StytchError {\n  message: string;\n}\nexport interface EventData {\n  eventType: EventType.CallbackEvent;\n  eventData: UserEventData;\n}\nexport interface SuccessData {\n  eventType: EventType.SuccessEvent;\n  eventData: MagicLinkSentData;\n}\nexport interface ErrorData {\n  eventType: EventType.ErrorEvent;\n  error: StytchError;\n}\nexport interface CallbackOptions {\n  onEvent?: (data?: EventData) => void | Promise<void>;\n  onSuccess?: (data?: SuccessData) => void | Promise<void>;\n  onError?: (data?: ErrorData) => void | Promise<void>;\n}\n\nexport type SDKProductTypes = \"emailMagicLinks\";\n"],"names":["this","react_1","use_script_1","React","EventType","CallbackEventType"],"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 = {}));\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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"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@stytch/stytch-react",
-  "version": "2.0.0",
-  "description": "Stytch.js React Bindings",
+  "version": "3.0.3",
+  "description": "Stytch's official React Library",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",
   "scripts": {
@@ -9,17 +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.10",
     "@wessberg/rollup-plugin-ts": "^1.3.8",
     "babel-loader": "^8.2.2",
     "enzyme": "^3.11.0",
@@ -27,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",
@@ -51,7 +50,7 @@
     "package.json"
   ],
   "dependencies": {
-    "react-script-hook": "^1.4.1"
+    "@stytch/stytch-js": "^2.0.4"
   },
   "peerDependencies": {
     "react": ">= 16.x.x"

package/src/Stytch.tsx

@@ -1,7 +1,33 @@
 import React from "react";
-import useScript from "react-script-hook";
-import { STYTCH_JS_URL } from "./constants";
-import { StytchProps } from "./types";
+import {loadStytch, LoginOrSignupView, StyleConfig, CallbackOptions, StytchFactory} from '@stytch/stytch-js'
+
+export {SDKProductTypes, OAuthProvidersTypes} from '@stytch/stytch-js'
+
+export interface StytchProps {
+  publicToken: string;
+  loginOrSignupView?: LoginOrSignupView;
+  style?: StyleConfig;
+  callbacks?: CallbackOptions;
+}
+
+const useStytchFactory = (): StytchFactory => {
+  const [stytchFactory, setStytchFactory] = React.useState<StytchFactory>();
+  React.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))
+  }, []);
+
+  return stytchFactory;
+}
+
+const useUniqueElementId = (): string => {
+  const [elementId] = React.useState<string>(() => {
+    const randId = Math.floor(Math.random() * 1e6);
+    return `stytch-magic-link-${randId}`;
+  });
+  return elementId;
+}
 
 /**
  * Stytch JS React Component
@@ -9,48 +35,23 @@ import { StytchProps } from "./types";
  * [Documentation](https://stytch.com/docs/javascript-sdk)
  */
 export const Stytch = (props: StytchProps) => {
-  // url check
-  const url = props._url || STYTCH_JS_URL;
-  if (url !== STYTCH_JS_URL) {
-    console.warn(
-      "Please do not change _url prop. Changing _url prop will result in Stytch SDK not working properly."
-    );
-    if (
-      !props._url.endsWith("stytch.com/stytch.js") &&
-      !props._url.includes("localhost")
-    ) {
-      return;
-    }
-  }
+  const StytchFactory = useStytchFactory();
+  const elementId = useUniqueElementId();
 
-  const [loading, error] = useScript({
-    src: url || STYTCH_JS_URL,
-    checkForExisting: true,
-  });
-  const { publicToken, style, callbacks, loginOrSignupView } = props;
+  const {publicToken, style, callbacks, loginOrSignupView} = props;
 
   React.useEffect(() => {
-    if (loading) {
+    if (!StytchFactory) {
       return;
     }
-    if (error || !window.Stytch) {
-      // eslint-disable-next-line no-console
-      console.error("Error loading Stytch", error);
-      return;
-    } else {
-      // Initialize Stytch.js with your public token. You can find this in your Stytch dashboard under API Keys.
-      var stytch = window.Stytch(publicToken, callbacks);
-      if (loginOrSignupView) {
-        stytch.mount({
-          elementId: "#stytch-magic-link",
-          style,
-          loginOrSignupView,
-        });
-      } else {
-        console.error("loginOrSignupView is a required prop");
-      }
-    }
-  }, [loading]);
+    const stytch = StytchFactory(publicToken, callbacks);
+
+    stytch.mount({
+      elementId: `#${elementId}`,
+      style,
+      loginOrSignupView,
+    });
+  }, [StytchFactory, elementId]);
 
-  return <div id="stytch-magic-link"></div>;
+  return <div id={elementId}></div>;
 };

package/src/index.ts

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

package/src/constants.tsx

@@ -1 +0,0 @@
-export const STYTCH_JS_URL = "https://js.stytch.com/stytch.js";

package/src/types/index.ts

@@ -1,109 +0,0 @@
-declare global {
-  interface Window {
-    Stytch: (publicToken: string, options: CallbackOptions) => StytchClient;
-  }
-}
-
-// Client object types
-export interface StytchClient {
-  mount: (mountArgs: StytchMountArgs) => void;
-}
-
-export interface StytchProps {
-  publicToken: string;
-  loginOrSignupView: LoginOrSignupView;
-  style?: StyleConfig;
-  callbacks?: CallbackOptions;
-  // Do not change this prop. This defaults to https://js.stytch.com/stytch.js
-  _url?: string;
-}
-
-export interface StytchMountArgs {
-  elementId: string;
-  loginOrSignupView: LoginOrSignupView;
-  style: StyleConfig;
-}
-
-// Config types
-export interface LoginConfig {
-  magicLinkUrl: string;
-  expirationMinutes?: number;
-  emailTemplateId?: string;
-}
-
-export interface CreateUserConfig {
-  magicLinkUrl: string;
-  expirationMinutes?: number;
-  emailTemplateId?: string;
-  createUserAsPending?: boolean;
-}
-
-export interface LoginOrCreateUserConfig {
-  loginConfig: LoginConfig;
-  createUserConfig: CreateUserConfig;
-}
-
-export interface StyleConfig {
-  fontFamily?: string;
-  width?: string;
-  primaryColor?: string;
-  primaryTextColor?: string;
-  secondaryTextColor?: string;
-  lightGrey?: string;
-  darkGrey?: string;
-  hideHeaderText?: boolean;
-}
-
-export interface EmailMagicLinksOptions {
-  loginRedirectURL: string;
-  loginExpirationMinutes: number;
-  signupRedirectURL: string;
-  signupExpirationMinutes: number;
-  createUserAsPending: boolean;
-}
-
-export interface LoginOrSignupView {
-  products: SDKProductTypes[];
-  emailMagicLinksOptions: EmailMagicLinksOptions;
-}
-
-// Callback types
-export enum EventType {
-  CallbackEvent = "CALLBACK_EVENT",
-  ErrorEvent = "ERROR_EVENT",
-  SuccessEvent = "SUCCESS_EVENT",
-}
-export enum CallbackEventType {
-  UserEventType = "USER_EVENT_TYPE",
-}
-export interface UserEventData {
-  type: CallbackEventType.UserEventType;
-  email: string;
-  emailId: string;
-  userId: string;
-}
-export interface MagicLinkSentData {
-  message: string;
-}
-export interface StytchError {
-  message: string;
-}
-export interface EventData {
-  eventType: EventType.CallbackEvent;
-  eventData: UserEventData;
-}
-export interface SuccessData {
-  eventType: EventType.SuccessEvent;
-  eventData: MagicLinkSentData;
-}
-export interface ErrorData {
-  eventType: EventType.ErrorEvent;
-  error: StytchError;
-}
-export interface CallbackOptions {
-  onEvent?: (data?: EventData) => void | Promise<void>;
-  onSuccess?: (data?: SuccessData) => void | Promise<void>;
-  onError?: (data?: ErrorData) => void | Promise<void>;
-}
-
-export type SDKProductTypes = "emailMagicLinks";