@stytch/stytch-react 3.0.8-headless.beta.0 → 3.0.8-headless.beta.3

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { CallbackOptions, LoginOrSignupView, StyleConfig, StytchClient } from "@stytch/stytch-js";
+import { CallbackOptions, LoginOrSignupView, StyleConfig, Session, StytchClient, User, WebAuthnAuthenticateOptions, WebAuthnAuthenticateResponse, WebAuthnRegisterResponse } from "@stytch/stytch-js";
 import React from "react";
 import { ReactNode } from "react";
 interface StytchProps {
@@ -14,17 +14,14 @@ interface StytchProps {
  * [Documentation](https://stytch.com/docs/javascript-sdk)
  */
 declare const Stytch: ({ publicToken, style, callbacks, loginOrSignupView }: StytchProps) => JSX.Element;
-type User = {
-    user_id: string;
-};
-type Session = {
-    session_id: string;
-    expires_at: string;
-};
 declare const useStytchUser: () => User | null;
 declare const useStytchSession: () => Session | null;
-declare const useStytch: () => StytchClient | null;
+declare const useStytch: () => StytchClient;
+declare const useStytchLazy: () => StytchClient;
 declare const withStytch: <T extends object>(Component: React.ComponentType<T & {
+    stytch: StytchClient;
+}>) => React.ComponentType<T>;
+declare const withStytchLazy: <T extends object>(Component: React.ComponentType<T & {
     stytch: StytchClient | null;
 }>) => React.ComponentType<T>;
 declare const withStytchUser: <T extends object>(Component: React.ComponentType<T & {
@@ -34,9 +31,29 @@ declare const withStytchSession: <T extends object>(Component: React.ComponentTy
     stytchSession: Session | null;
 }>) => React.ComponentType<T>;
 type StytchProviderProps = {
-    publicToken: string;
+    stytch: StytchClient | null | Promise<StytchClient | null>;
     children?: ReactNode;
 };
-declare const StytchProvider: ({ publicToken, children }: StytchProviderProps) => JSX.Element;
-export { SDKProductTypes, OneTapPositions, OAuthProvidersTypes, StytchClient } from '@stytch/stytch-js';
-export { Stytch, StytchProps, StytchProvider, useStytch, useStytchSession, useStytchUser, withStytch, withStytchSession, withStytchUser };
+declare const StytchProvider: ({ stytch, children }: StytchProviderProps) => JSX.Element;
+type StytchWebAuthnRegisterLoading = {
+    isLoading: true;
+    register(): undefined;
+};
+type StytchWebAuthnRegisterLoaded = {
+    isLoading: false;
+    register(): Promise<WebAuthnRegisterResponse>;
+};
+type StytchWebAuthnRegister = StytchWebAuthnRegisterLoading | StytchWebAuthnRegisterLoaded;
+declare const useStytchWebAuthnRegister: () => StytchWebAuthnRegister;
+type StytchWebAuthnAuthenticateLoading = {
+    isLoading: true;
+    authenticate(): undefined;
+};
+type StytchWebAuthnAuthenticateLoaded = {
+    isLoading: false;
+    authenticate(): Promise<WebAuthnAuthenticateResponse>;
+};
+type StytchWebAuthnAuthenticate = StytchWebAuthnAuthenticateLoading | StytchWebAuthnAuthenticateLoaded;
+declare const useStytchWebAuthnAuthenticate: (options: WebAuthnAuthenticateOptions) => StytchWebAuthnAuthenticate;
+export * from '@stytch/stytch-js';
+export { Stytch, StytchProps, StytchProvider, StytchProviderProps, useStytch, useStytchLazy, useStytchSession, useStytchUser, withStytch, withStytchLazy, withStytchSession, withStytchUser, StytchWebAuthnAuthenticate, StytchWebAuthnRegister, useStytchWebAuthnAuthenticate, useStytchWebAuthnRegister };

package/dist/index.esm.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { CallbackOptions, LoginOrSignupView, StyleConfig, StytchClient } from "@stytch/stytch-js";
+import { CallbackOptions, LoginOrSignupView, StyleConfig, Session, StytchClient, User, WebAuthnAuthenticateOptions, WebAuthnAuthenticateResponse, WebAuthnRegisterResponse } from "@stytch/stytch-js";
 import React from "react";
 import { ReactNode } from "react";
 interface StytchProps {
@@ -14,17 +14,14 @@ interface StytchProps {
  * [Documentation](https://stytch.com/docs/javascript-sdk)
  */
 declare const Stytch: ({ publicToken, style, callbacks, loginOrSignupView }: StytchProps) => JSX.Element;
-type User = {
-    user_id: string;
-};
-type Session = {
-    session_id: string;
-    expires_at: string;
-};
 declare const useStytchUser: () => User | null;
 declare const useStytchSession: () => Session | null;
-declare const useStytch: () => StytchClient | null;
+declare const useStytch: () => StytchClient;
+declare const useStytchLazy: () => StytchClient;
 declare const withStytch: <T extends object>(Component: React.ComponentType<T & {
+    stytch: StytchClient;
+}>) => React.ComponentType<T>;
+declare const withStytchLazy: <T extends object>(Component: React.ComponentType<T & {
     stytch: StytchClient | null;
 }>) => React.ComponentType<T>;
 declare const withStytchUser: <T extends object>(Component: React.ComponentType<T & {
@@ -34,9 +31,29 @@ declare const withStytchSession: <T extends object>(Component: React.ComponentTy
     stytchSession: Session | null;
 }>) => React.ComponentType<T>;
 type StytchProviderProps = {
-    publicToken: string;
+    stytch: StytchClient | null | Promise<StytchClient | null>;
     children?: ReactNode;
 };
-declare const StytchProvider: ({ publicToken, children }: StytchProviderProps) => JSX.Element;
-export { SDKProductTypes, OneTapPositions, OAuthProvidersTypes, StytchClient } from '@stytch/stytch-js';
-export { Stytch, StytchProps, StytchProvider, useStytch, useStytchSession, useStytchUser, withStytch, withStytchSession, withStytchUser };
+declare const StytchProvider: ({ stytch, children }: StytchProviderProps) => JSX.Element;
+type StytchWebAuthnRegisterLoading = {
+    isLoading: true;
+    register(): undefined;
+};
+type StytchWebAuthnRegisterLoaded = {
+    isLoading: false;
+    register(): Promise<WebAuthnRegisterResponse>;
+};
+type StytchWebAuthnRegister = StytchWebAuthnRegisterLoading | StytchWebAuthnRegisterLoaded;
+declare const useStytchWebAuthnRegister: () => StytchWebAuthnRegister;
+type StytchWebAuthnAuthenticateLoading = {
+    isLoading: true;
+    authenticate(): undefined;
+};
+type StytchWebAuthnAuthenticateLoaded = {
+    isLoading: false;
+    authenticate(): Promise<WebAuthnAuthenticateResponse>;
+};
+type StytchWebAuthnAuthenticate = StytchWebAuthnAuthenticateLoading | StytchWebAuthnAuthenticateLoaded;
+declare const useStytchWebAuthnAuthenticate: (options: WebAuthnAuthenticateOptions) => StytchWebAuthnAuthenticate;
+export * from '@stytch/stytch-js';
+export { Stytch, StytchProps, StytchProvider, StytchProviderProps, useStytch, useStytchLazy, useStytchSession, useStytchUser, withStytch, withStytchLazy, withStytchSession, withStytchUser, StytchWebAuthnAuthenticate, StytchWebAuthnRegister, useStytchWebAuthnAuthenticate, useStytchWebAuthnRegister };

package/dist/index.esm.js

@@ -1,4 +1,4 @@
-import React, { createContext, useContext, useState, useEffect } from 'react';
+import React, { useRef, useState, useEffect, useCallback, createContext, useContext, useMemo } from 'react';
 
 var PUBLIC_URL = 'https://js.stytch.com/stytch.js';
 function getJSUrl() {
@@ -102,6 +102,41 @@ var OneTapPositions;
     OneTapPositions["floating"] = "floating";
 })(OneTapPositions || (OneTapPositions = {}));
 
+var initStytch = function () {
+    var args = [];
+    for (var _i = 0; _i < arguments.length; _i++) {
+        args[_i] = arguments[_i];
+    }
+    if (typeof window === 'undefined') {
+        return null;
+    }
+    if (!window.Stytch) {
+        throw new Error('Stytch has not been loaded.');
+    }
+    return window.Stytch.apply(window, args);
+};
+var loadAndInitStytch = function () {
+    var args = [];
+    for (var _i = 0; _i < arguments.length; _i++) {
+        args[_i] = arguments[_i];
+    }
+    return loadStytch().then(function (stytchFactory) { return stytchFactory && stytchFactory.apply(void 0, args); });
+};
+
+// useState can cause memory leaks if it is set after the component unmounted. For example, if it is
+// set after `await`, or in a `then`, `catch`, or `finally`, or in a setTimout/setInterval.
+var useAsyncState = function (initialState) {
+    var isMounted = useRef(true);
+    var _a = useState(initialState), state = _a[0], setState = _a[1];
+    useEffect(function () { return function () {
+        isMounted.current = false;
+    }; }, []);
+    var setStateAction = useCallback(function (newState) {
+        isMounted.current && setState(newState);
+    }, []);
+    return [state, setStateAction];
+};
+
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 function invariant(cond, message) {
     if (!cond)
@@ -132,35 +167,98 @@ var __assign = function() {
         return t;
     };
     return __assign.apply(this, arguments);
+};
+
+function __awaiter(thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+}
+
+function __generator(thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (_) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+}
+
+var noProviderError = function (hookOrHOC) { return "".concat(hookOrHOC, " can only be used inside <StytchProvider>."); };
+var lazyError = function (hookOrHOC) {
+    return "".concat(hookOrHOC, " can only be used if Stytch is preloaded. Add <script src=\"https://js.stytch.com/stytch.js\" /> in your document header to load the script synchronously, or use ").concat(hookOrHOC, "Lazy if you want to lazy load Stytch. If you are using SSR, you will need to use ").concat(hookOrHOC, "Lazy.");
 };
 
-var StytchMountedContext = createContext(false);
+var StytchMountedContext = createContext({
+    isLazy: false,
+    isMounted: false,
+});
 var StytchUserContext = createContext(null);
 var StytchSessionContext = createContext(null);
 var StytchContext = createContext(null);
-var useStytchMounted__INTERNAL = function () { return useContext(StytchMountedContext); };
+var useIsMounted__INTERNAL = function () { return useContext(StytchMountedContext).isMounted; };
+var useIsLazy__INTERNAL = function () { return useContext(StytchMountedContext).isLazy; };
 var useStytchRaw__INTERNAL = function () { return useContext(StytchContext); };
 var useStytchUser = function () {
-    invariant(useStytchMounted__INTERNAL(), 'useStytchUser/withStytchUser can only be used inside <StytchProvider>.');
+    invariant(useIsMounted__INTERNAL(), noProviderError('useStytchUser'));
     return useContext(StytchUserContext);
 };
 var useStytchSession = function () {
-    invariant(useStytchMounted__INTERNAL(), 'useStytchSession/withStytchSession can only be used inside <StytchProvider>.');
+    invariant(useIsMounted__INTERNAL(), noProviderError('useStytchSession'));
     return useContext(StytchSessionContext);
 };
 var useStytch = function () {
-    invariant(useStytchMounted__INTERNAL(), 'useStytch/withStytch can only be used inside <StytchProvider>.');
+    invariant(useIsMounted__INTERNAL(), noProviderError('useStytch'));
+    invariant(!useIsLazy__INTERNAL(), lazyError('useStytch'));
+    return useContext(StytchContext);
+};
+var useStytchLazy = function () {
+    invariant(useIsMounted__INTERNAL(), noProviderError('useStytchLazy'));
     return useContext(StytchContext);
 };
 var withStytch = function (Component) {
     var WithStytch = function (props) {
+        invariant(useIsMounted__INTERNAL(), noProviderError('withStytch'));
+        invariant(!useIsLazy__INTERNAL(), lazyError('withStytch'));
         return React.createElement(Component, __assign({}, props, { stytch: useStytch() }));
     };
     WithStytch.displayName = "withStytch(".concat(Component.displayName || Component.name || 'Component', ")");
     return WithStytch;
 };
+var withStytchLazy = function (Component) {
+    var WithStytchLazy = function (props) {
+        invariant(useIsMounted__INTERNAL(), noProviderError('withStytchLazy'));
+        return React.createElement(Component, __assign({}, props, { stytch: useStytchLazy() }));
+    };
+    WithStytchLazy.displayName = "withStytchLazy(".concat(Component.displayName || Component.name || 'Component', ")");
+    return WithStytchLazy;
+};
 var withStytchUser = function (Component) {
     var WithStytchUser = function (props) {
+        invariant(useIsMounted__INTERNAL(), noProviderError('withStytchUser'));
         return React.createElement(Component, __assign({}, props, { stytchUser: useStytchUser() }));
     };
     WithStytchUser.displayName = "withStytchUser(".concat(Component.displayName || Component.name || 'Component', ")");
@@ -168,56 +266,45 @@ var withStytchUser = function (Component) {
 };
 var withStytchSession = function (Component) {
     var WithStytchSession = function (props) {
+        invariant(useIsMounted__INTERNAL(), noProviderError('withStytchSession'));
         return React.createElement(Component, __assign({}, props, { stytchSession: useStytchSession() }));
     };
     WithStytchSession.displayName = "withStytchSession(".concat(Component.displayName || Component.name || 'Component', ")");
     return WithStytchSession;
 };
-var LOCAL_STORAGE_KEY_PREFIX = 'stytch_state_';
-var getLocalStorageKey = function (type, publicToken) {
-    return "".concat(LOCAL_STORAGE_KEY_PREFIX).concat(publicToken, "_").concat(type);
-};
-var getLocalStorageSession = function (publicToken) {
-    if (typeof localStorage === 'undefined')
-        return null;
-    var sessionString = localStorage.getItem(getLocalStorageKey('session', publicToken));
-    var session = JSON.parse(sessionString);
-    if (session && Date.parse(session.expires_at) > Date.now()) {
-        return session;
-    }
-    return null;
-};
-var getLocalStorageUser = function (publicToken) {
-    if (typeof localStorage === 'undefined')
-        return null;
-    if (getLocalStorageSession(publicToken)) {
-        var userString = localStorage.getItem(getLocalStorageKey('user', publicToken));
-        return userString ? JSON.parse(userString) : null;
-    }
-    return null;
-};
 var StytchProvider = function (_a) {
-    var publicToken = _a.publicToken, children = _a.children;
-    invariant(!useStytchMounted__INTERNAL(), 'You cannot render a <StytchProvider> inside another <StytchProvider>.');
-    invariant(publicToken, 'publicToken not provided to <StytchProvider>.');
-    var _b = useState(typeof window !== 'undefined' && window.Stytch ? window.Stytch(publicToken) : null), stytchClient = _b[0], setStytchClient = _b[1];
-    var _c = useState(stytchClient ? stytchClient.user.getSync() : getLocalStorageUser(publicToken)), user = _c[0], setUser = _c[1];
-    var _d = useState(stytchClient ? stytchClient.session.getSync() : getLocalStorageSession(publicToken)), session = _d[0], setSession = _d[1];
+    var stytch = _a.stytch, children = _a.children;
+    invariant(!useIsMounted__INTERNAL(), 'You cannot render a <StytchProvider> inside another <StytchProvider>.');
+    var _b = useState(stytch instanceof Promise || !stytch ? null : stytch), stytchClient = _b[0], setStytchClient = _b[1];
+    var mountedContext = useState({
+        isLazy: !stytchClient,
+        isMounted: true,
+    })[0];
+    var _c = useAsyncState(stytchClient && stytchClient.user.getSync()), user = _c[0], setUser = _c[1];
+    var _d = useAsyncState(stytchClient && stytchClient.session.getSync()), session = _d[0], setSession = _d[1];
     useEffect(function () {
-        if (!stytchClient) {
-            loadStytch().then(function (globalStytch) { return globalStytch && setStytchClient(globalStytch(publicToken)); });
+        if (stytch instanceof Promise) {
+            stytch.then(setStytchClient);
         }
-    }, [stytchClient, publicToken]);
+    }, [stytch]);
     useEffect(function () {
         if (stytchClient) {
-            stytchClient.user.onChange(setUser);
-            stytchClient.session.onChange(setSession);
+            if (mountedContext.isLazy) {
+                setUser(stytchClient.user.getSync());
+                setSession(stytchClient.session.getSync());
+            }
+            var unsubscribeUser_1 = stytchClient.user.onChange(setUser);
+            var unsubscribeSession_1 = stytchClient.session.onChange(setSession);
+            return function () {
+                unsubscribeUser_1();
+                unsubscribeSession_1();
+            };
         }
-    }, [stytchClient]);
-    return (React.createElement(StytchMountedContext.Provider, { value: true },
+    }, [mountedContext, stytchClient, setUser, setSession]);
+    return (React.createElement(StytchMountedContext.Provider, { value: mountedContext },
         React.createElement(StytchContext.Provider, { value: stytchClient },
-            React.createElement(StytchUserContext.Provider, { value: user },
-                React.createElement(StytchSessionContext.Provider, { value: session }, children)))));
+            React.createElement(StytchUserContext.Provider, { value: session && user },
+                React.createElement(StytchSessionContext.Provider, { value: user && session }, children)))));
 };
 
 /**
@@ -242,8 +329,8 @@ var useUniqueElementId = function () {
 var Stytch = function (_a) {
     var publicToken = _a.publicToken, style = _a.style, callbacks = _a.callbacks, loginOrSignupView = _a.loginOrSignupView;
     var stytchClientFromContext = useStytchRaw__INTERNAL();
-    var stytchMounted = useStytchMounted__INTERNAL();
-    var _b = useState(function () {
+    var stytchMounted = useIsMounted__INTERNAL();
+    var _b = useAsyncState(function () {
         // If StytchProvider has been mounted, use context value
         if (stytchMounted) {
             return stytchClientFromContext;
@@ -267,7 +354,7 @@ var Stytch = function (_a) {
                 setStytchClient(stytchClientFromContext);
             }
         }
-    }, [stytchClient, stytchClientFromContext, stytchMounted, publicToken]);
+    }, [stytchClient, stytchClientFromContext, stytchMounted, publicToken, setStytchClient]);
     useEffect(function () {
         if (!stytchClient || !elementId) {
             return;
@@ -283,5 +370,74 @@ var Stytch = function (_a) {
     return elementId ? React.createElement("div", { id: elementId }) : null;
 };
 
-export { OAuthProvidersTypes, OneTapPositions, SDKProductTypes, Stytch, StytchProvider, useStytch, useStytchSession, useStytchUser, withStytch, withStytchSession, withStytchUser };
+var useStytchWebAuthnRegister = function () {
+    invariant(useIsMounted__INTERNAL(), noProviderError('useStytchWebAuthnRegister'));
+    var _a = useAsyncState(null), creationOptions = _a[0], setCreationOptions = _a[1];
+    var stytchClient = useStytchRaw__INTERNAL();
+    useEffect(function () {
+        var registerStart = function () { return __awaiter(void 0, void 0, void 0, function () {
+            var resp;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        if (!stytchClient) return [3 /*break*/, 2];
+                        return [4 /*yield*/, stytchClient.webauthn.registerStart()];
+                    case 1:
+                        resp = _a.sent();
+                        setCreationOptions(resp.public_key_credential_creation_options);
+                        _a.label = 2;
+                    case 2: return [2 /*return*/];
+                }
+            });
+        }); };
+        registerStart();
+    }, [stytchClient, setCreationOptions]);
+    return useMemo(function () {
+        return creationOptions
+            ? {
+                isLoading: false,
+                register: function () { return stytchClient.webauthn.register(creationOptions); },
+            }
+            : {
+                isLoading: true,
+                register: function () { return undefined; },
+            };
+    }, [creationOptions, stytchClient]);
+};
+var useStytchWebAuthnAuthenticate = function (options) {
+    invariant(useIsMounted__INTERNAL(), noProviderError('useStytchWebAuthnAuthenticate'));
+    var _a = useAsyncState(null), requestOptions = _a[0], setRequestOptions = _a[1];
+    var stytchClient = useStytchRaw__INTERNAL();
+    useEffect(function () {
+        var authenticateStart = function () { return __awaiter(void 0, void 0, void 0, function () {
+            var resp;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        if (!stytchClient) return [3 /*break*/, 2];
+                        return [4 /*yield*/, stytchClient.webauthn.authenticateStart()];
+                    case 1:
+                        resp = _a.sent();
+                        setRequestOptions(resp.public_key_credential_request_options);
+                        _a.label = 2;
+                    case 2: return [2 /*return*/];
+                }
+            });
+        }); };
+        authenticateStart();
+    }, [stytchClient, setRequestOptions]);
+    return useMemo(function () {
+        return requestOptions
+            ? {
+                authenticate: function () { return stytchClient.webauthn.authenticate(requestOptions, options); },
+                isLoading: false,
+            }
+            : {
+                authenticate: function () { return undefined; },
+                isLoading: true,
+            };
+    }, [requestOptions, options, stytchClient]);
+};
+
+export { CallbackEventType, EventType, OAuthProvidersTypes, OneTapPositions, SDKProductTypes, Stytch, StytchProvider, initStytch, loadAndInitStytch, loadStytch, useStytch, useStytchLazy, useStytchSession, useStytchUser, useStytchWebAuthnAuthenticate, useStytchWebAuthnRegister, withStytch, withStytchLazy, withStytchSession, withStytchUser };
 //# sourceMappingURL=index.esm.js.map