@stytch/nextjs 0.0.2-0

package/LICENSE

@@ -0,0 +1,17 @@
+MIT License
+Copyright (c) 2021 stytchauth
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,65 @@
+# @stytch/nextjs
+
+Stytch's Next.js Library
+
+## Install
+
+With `npm`
+`npm install @stytch/nextjs @stytch/vanilla-js --save`
+
+## Documentation
+
+For full documentation please refer to Stytch's javascript SDK documentation on https://stytch.com/docs/sdks.
+
+## Example Usage
+
+```javascript
+import { StytchProvider } from '@stytch/nextjs';
+import { createStytchUIClient } from '@stytch/nextjs/ui';
+
+const stytch = new createStytchUIClient('public-token-<find yours in the stytch dashboard>');
+
+// Wrap your App in the StytchProvider
+ReactDOM.render(
+  <StytchProvider stytch={stytch}>
+    <App />
+  </StytchProvider>,
+  document.getElementById('root'),
+);
+
+// Now use Stytch in your components
+const App = () => {
+  const stytchProps = {
+    config: {
+      products: ['emailMagicLinks'],
+      emailMagicLinksOptions: {
+        loginRedirectURL: 'https://example.com/authenticate',
+        loginExpirationMinutes: 30,
+        signupRedirectURL: 'https://example.com/authenticate',
+        signupExpirationMinutes: 30,
+        createUserAsPending: true,
+      },
+    },
+    styles: {
+      fontFamily: '"Helvetica New", Helvetica, sans-serif',
+      width: '321px',
+      primaryColor: '#0577CA',
+    },
+    callbacks: {
+      onEvent: (message) => console.log(message),
+      onSuccess: (message) => console.log(message),
+      onError: (message) => console.log(message),
+    },
+  };
+
+  return (
+    <div id="login">
+      <Stytch config={stytchProps.config} styles={stytchProps.styles} callbacks={stytchProps.callbacks} />
+    </div>
+  );
+};
+```
+
+## Typescript Support
+
+There are built in typescript definitions in the npm package.

package/dist/index.d.ts

@@ -0,0 +1,77 @@
+/// <reference types="react" />
+import React from "react";
+import { ReactNode } from "react";
+import { User, Session, StytchUIClient, Callbacks, Config } from "@stytch/vanilla-js";
+import { StytchHeadlessClient } from "@stytch/vanilla-js/headless";
+/**
+ * TODO: How much of this package can be reused from stytch-react?
+ */
+type StytchClient = StytchUIClient | StytchHeadlessClient;
+type SWRUser = {
+    user: null;
+    fromCache: false;
+    isInitialized: false;
+} | {
+    user: User | null;
+    fromCache: true;
+    isInitialized: true;
+} | {
+    user: User | null;
+    fromCache: false;
+    isInitialized: true;
+};
+type SWRSession = {
+    session: null;
+    fromCache: false;
+    isInitialized: false;
+} | {
+    session: Session | null;
+    fromCache: true;
+    isInitialized: true;
+} | {
+    session: Session | null;
+    fromCache: false;
+    isInitialized: true;
+};
+declare const useStytchUser: () => SWRUser;
+declare const useStytchSession: () => SWRSession;
+declare const useStytch: () => StytchClient;
+declare const withStytch: <T extends object>(Component: React.ComponentType<T & {
+    stytch: StytchClient;
+}>) => React.ComponentType<T>;
+declare const withStytchUser: <T extends object>(Component: React.ComponentType<T & {
+    stytchUser: User | null;
+    stytchUserIsInitialized: boolean;
+    stytchUserIsFromCache: boolean;
+}>) => React.ComponentType<T>;
+declare const withStytchSession: <T extends object>(Component: React.ComponentType<T & {
+    stytchSession: Session | null;
+    stytchSessionIsInitialized: boolean;
+    stytchSessionIsFromCache: boolean;
+}>) => React.ComponentType<T>;
+type StytchProviderProps = {
+    stytch: StytchClient;
+    children?: ReactNode;
+};
+declare const StytchProvider: ({ stytch, children }: StytchProviderProps) => JSX.Element;
+/**
+ * Stytch JS React Component
+ *
+ * [Documentation](https://stytch.com/docs/javascript-sdk)
+ */
+declare const Stytch: ({ config, styles, callbacks }: {
+    config: Config;
+    styles?: Partial<{
+        fontFamily: string;
+        width: string;
+        primaryColor: string;
+        primaryTextColor: string;
+        secondaryTextColor: string;
+        lightGrey: string;
+        darkGrey: string;
+        hideHeaderText: boolean;
+    }> | undefined;
+    callbacks?: Callbacks | undefined;
+}) => JSX.Element;
+export { StytchProvider, useStytch, useStytchSession, useStytchUser, withStytch, withStytchSession, withStytchUser, Stytch };
+export type { StytchProviderProps };

package/dist/index.esm.d.ts

@@ -0,0 +1,77 @@
+/// <reference types="react" />
+import React from "react";
+import { ReactNode } from "react";
+import { User, Session, StytchUIClient, Callbacks, Config } from "@stytch/vanilla-js";
+import { StytchHeadlessClient } from "@stytch/vanilla-js/headless";
+/**
+ * TODO: How much of this package can be reused from stytch-react?
+ */
+type StytchClient = StytchUIClient | StytchHeadlessClient;
+type SWRUser = {
+    user: null;
+    fromCache: false;
+    isInitialized: false;
+} | {
+    user: User | null;
+    fromCache: true;
+    isInitialized: true;
+} | {
+    user: User | null;
+    fromCache: false;
+    isInitialized: true;
+};
+type SWRSession = {
+    session: null;
+    fromCache: false;
+    isInitialized: false;
+} | {
+    session: Session | null;
+    fromCache: true;
+    isInitialized: true;
+} | {
+    session: Session | null;
+    fromCache: false;
+    isInitialized: true;
+};
+declare const useStytchUser: () => SWRUser;
+declare const useStytchSession: () => SWRSession;
+declare const useStytch: () => StytchClient;
+declare const withStytch: <T extends object>(Component: React.ComponentType<T & {
+    stytch: StytchClient;
+}>) => React.ComponentType<T>;
+declare const withStytchUser: <T extends object>(Component: React.ComponentType<T & {
+    stytchUser: User | null;
+    stytchUserIsInitialized: boolean;
+    stytchUserIsFromCache: boolean;
+}>) => React.ComponentType<T>;
+declare const withStytchSession: <T extends object>(Component: React.ComponentType<T & {
+    stytchSession: Session | null;
+    stytchSessionIsInitialized: boolean;
+    stytchSessionIsFromCache: boolean;
+}>) => React.ComponentType<T>;
+type StytchProviderProps = {
+    stytch: StytchClient;
+    children?: ReactNode;
+};
+declare const StytchProvider: ({ stytch, children }: StytchProviderProps) => JSX.Element;
+/**
+ * Stytch JS React Component
+ *
+ * [Documentation](https://stytch.com/docs/javascript-sdk)
+ */
+declare const Stytch: ({ config, styles, callbacks }: {
+    config: Config;
+    styles?: Partial<{
+        fontFamily: string;
+        width: string;
+        primaryColor: string;
+        primaryTextColor: string;
+        secondaryTextColor: string;
+        lightGrey: string;
+        darkGrey: string;
+        hideHeaderText: boolean;
+    }> | undefined;
+    callbacks?: Callbacks | undefined;
+}) => JSX.Element;
+export { StytchProvider, useStytch, useStytchSession, useStytchUser, withStytch, withStytchSession, withStytchUser, Stytch };
+export type { StytchProviderProps };

package/dist/index.esm.js

@@ -0,0 +1,161 @@
+import React, { useRef, useState, useEffect, useCallback, createContext, useContext, useMemo, useLayoutEffect } from 'react';
+
+const noProviderError = (item) => `${item} can only be used inside <StytchProvider>.`;
+const noHeadlessClientError = `Tried to create a Stytch Login UI element using the Stytch Headless SDK.
+You must use the UI SDK to use UI elements.
+Please make sure you are importing createStytchHeadlessClient from @stytch/nextjs/ui and not from @stytch/nextjs/headless.`;
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+function invariant(cond, message) {
+    if (!cond)
+        throw new Error(message);
+}
+
+// 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.
+const useAsyncState = (initialState) => {
+    const isMounted = useRef(true);
+    const [state, setState] = useState(initialState);
+    useEffect(() => {
+        isMounted.current = true;
+        return () => {
+            isMounted.current = false;
+        };
+    }, []);
+    const setStateAction = useCallback((newState) => {
+        isMounted.current && setState(newState);
+    }, []);
+    return [state, setStateAction];
+};
+
+const SSRStubKey = Symbol('__stytch_SSRStubKey');
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const isStytchSSRProxy = (proxy) => {
+    return !!proxy[SSRStubKey];
+};
+
+const initialUser = {
+    user: null,
+    fromCache: false,
+    isInitialized: false,
+};
+const initialSession = {
+    session: null,
+    fromCache: false,
+    isInitialized: false,
+};
+const StytchContext = createContext({ isMounted: false });
+const StytchUserContext = createContext(initialUser);
+const StytchSessionContext = createContext(initialSession);
+const useIsMounted__INTERNAL = () => useContext(StytchContext).isMounted;
+const isUIClient = (client) => {
+    return client.mount !== undefined;
+};
+const useStytchUser = () => {
+    invariant(useIsMounted__INTERNAL(), noProviderError('useStytchUser'));
+    return useContext(StytchUserContext);
+};
+const useStytchSession = () => {
+    invariant(useIsMounted__INTERNAL(), noProviderError('useStytchSession'));
+    return useContext(StytchSessionContext);
+};
+const useStytch = () => {
+    const ctx = useContext(StytchContext);
+    invariant(ctx.isMounted, noProviderError('useStytch'));
+    return ctx.client;
+};
+const withStytch = (Component) => {
+    const WithStytch = (props) => {
+        invariant(useIsMounted__INTERNAL(), noProviderError('withStytch'));
+        return React.createElement(Component, { ...props, stytch: useStytch() });
+    };
+    WithStytch.displayName = `withStytch(${Component.displayName || Component.name || 'Component'})`;
+    return WithStytch;
+};
+const withStytchUser = (Component) => {
+    const WithStytchUser = (props) => {
+        invariant(useIsMounted__INTERNAL(), noProviderError('withStytchUser'));
+        const { user, isInitialized, fromCache } = useStytchUser();
+        return (React.createElement(Component, { ...props, stytchUser: user, stytchUserIsInitialized: isInitialized, stytchUserIsFromCache: fromCache }));
+    };
+    WithStytchUser.displayName = `withStytchUser(${Component.displayName || Component.name || 'Component'})`;
+    return WithStytchUser;
+};
+const withStytchSession = (Component) => {
+    const WithStytchSession = (props) => {
+        invariant(useIsMounted__INTERNAL(), noProviderError('withStytchSession'));
+        const { session, isInitialized, fromCache } = useStytchSession();
+        return (React.createElement(Component, { ...props, stytchSession: session, stytchSessionIsInitialized: isInitialized, stytchSessionIsFromCache: fromCache }));
+    };
+    WithStytchSession.displayName = `withStytchSession(${Component.displayName || Component.name || 'Component'})`;
+    return WithStytchSession;
+};
+const StytchProvider = ({ stytch, children }) => {
+    // invariant(!useIsMounted__INTERNAL(), providerMustBeUniqueError);
+    const ctx = useMemo(() => ({ client: stytch, isMounted: true }), [stytch]);
+    const [user, setUser] = useAsyncState(initialUser);
+    const [session, setSession] = useAsyncState(initialSession);
+    useEffect(() => {
+        if (isStytchSSRProxy(stytch)) {
+            return;
+        }
+        setUser({
+            user: stytch.user.getSync(),
+            fromCache: true,
+            isInitialized: true,
+        });
+        setSession({
+            session: stytch.session.getSync(),
+            fromCache: true,
+            isInitialized: true,
+        });
+        const unsubscribeUser = stytch.user.onChange((user) => setUser({ user, fromCache: false, isInitialized: true }));
+        const unsubscribeSession = stytch.session.onChange((session) => setSession({ session, fromCache: false, isInitialized: true }));
+        return () => {
+            unsubscribeUser();
+            unsubscribeSession();
+        };
+    }, [stytch, setUser, setSession]);
+    const finalSess = session.isInitialized === user.isInitialized ? session : initialSession;
+    const finalUser = session.isInitialized === user.isInitialized ? user : initialUser;
+    return (React.createElement(StytchContext.Provider, { value: ctx },
+        React.createElement(StytchUserContext.Provider, { value: finalUser },
+            React.createElement(StytchSessionContext.Provider, { value: finalSess }, children))));
+};
+
+// cc https://medium.com/@alexandereardon/uselayouteffect-and-ssr-192986cdcf7a
+const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect;
+
+/**
+ * Stytch JS React Component
+ *
+ * [Documentation](https://stytch.com/docs/javascript-sdk)
+ */
+const Stytch = ({ config, styles, callbacks, }) => {
+    invariant(useIsMounted__INTERNAL(), noProviderError('<Stytch />'));
+    const stytchClient = useStytch();
+    const containerEl = useRef(null);
+    useIsomorphicLayoutEffect(() => {
+        if (!isUIClient(stytchClient)) {
+            throw Error(noHeadlessClientError);
+        }
+        if (!containerEl.current) {
+            return;
+        }
+        if (containerEl.current.id) {
+            return;
+        }
+        const randId = Math.floor(Math.random() * 1e6);
+        const elementId = `stytch-magic-link-${randId}`;
+        containerEl.current.id = elementId;
+        stytchClient.mount({
+            config,
+            callbacks,
+            elementId: `#${elementId}`,
+            styles,
+        });
+    }, [stytchClient]);
+    return React.createElement("div", { ref: containerEl });
+};
+
+export { Stytch, StytchProvider, useStytch, useStytchSession, useStytchUser, withStytch, withStytchSession, withStytchUser };

package/dist/index.headless.d.ts

@@ -0,0 +1,3 @@
+import { StytchHeadlessClient } from "@stytch/vanilla-js/headless";
+declare const createStytchHeadlessClient: (_PUBLIC_TOKEN: string) => StytchHeadlessClient;
+export { createStytchHeadlessClient };

package/dist/index.headless.esm.d.ts

@@ -0,0 +1,3 @@
+import { StytchHeadlessClient } from "@stytch/vanilla-js/headless";
+declare const createStytchHeadlessClient: (_PUBLIC_TOKEN: string) => StytchHeadlessClient;
+export { createStytchHeadlessClient };

package/dist/index.headless.esm.js

@@ -0,0 +1,48 @@
+import { StytchHeadlessClient } from '@stytch/vanilla-js/headless';
+
+const cannotInvokeMethodOnServerError = (path) => `[Stytch] Invalid serverside function call to ${path}.
+The Stytch Javascript SDK is intended to ony be used on the client side.
+Make sure to wrap your API calls in a hook to ensure they are executed on the client.
+\`\`\`
+const myComponent = () => {
+  const stytch = useStytch();
+  // This will error out on the server.
+  stytch.magicLinks.authenticate(...);
+  useEffect(() => {
+    // This will work well
+    stytch.magicLinks.authenticate(...);
+  }, []);
+}
+\`\`\`
+
+If you want to make API calls from server environments, please use the Stytch Node Library
+https://www.npmjs.com/package/stytch.
+`;
+
+const SSRStubKey = Symbol('__stytch_SSRStubKey');
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const createProxy = (path) => {
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    const noop = () => { };
+    return new Proxy(noop, {
+        get(target, p) {
+            if (p === SSRStubKey) {
+                return true;
+            }
+            return createProxy(path + '.' + String(p));
+        },
+        apply() {
+            throw new Error(cannotInvokeMethodOnServerError(path));
+        },
+    });
+};
+const createStytchSSRProxy = () => createProxy('stytch');
+
+const createStytchHeadlessClient = (...args) => {
+    if (typeof window === 'undefined') {
+        return createStytchSSRProxy();
+    }
+    return new StytchHeadlessClient(...args);
+};
+
+export { createStytchHeadlessClient };

package/dist/index.headless.js

@@ -0,0 +1,52 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var headless = require('@stytch/vanilla-js/headless');
+
+const cannotInvokeMethodOnServerError = (path) => `[Stytch] Invalid serverside function call to ${path}.
+The Stytch Javascript SDK is intended to ony be used on the client side.
+Make sure to wrap your API calls in a hook to ensure they are executed on the client.
+\`\`\`
+const myComponent = () => {
+  const stytch = useStytch();
+  // This will error out on the server.
+  stytch.magicLinks.authenticate(...);
+  useEffect(() => {
+    // This will work well
+    stytch.magicLinks.authenticate(...);
+  }, []);
+}
+\`\`\`
+
+If you want to make API calls from server environments, please use the Stytch Node Library
+https://www.npmjs.com/package/stytch.
+`;
+
+const SSRStubKey = Symbol('__stytch_SSRStubKey');
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const createProxy = (path) => {
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    const noop = () => { };
+    return new Proxy(noop, {
+        get(target, p) {
+            if (p === SSRStubKey) {
+                return true;
+            }
+            return createProxy(path + '.' + String(p));
+        },
+        apply() {
+            throw new Error(cannotInvokeMethodOnServerError(path));
+        },
+    });
+};
+const createStytchSSRProxy = () => createProxy('stytch');
+
+const createStytchHeadlessClient = (...args) => {
+    if (typeof window === 'undefined') {
+        return createStytchSSRProxy();
+    }
+    return new headless.StytchHeadlessClient(...args);
+};
+
+exports.createStytchHeadlessClient = createStytchHeadlessClient;

package/dist/index.js

@@ -0,0 +1,176 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+const noProviderError = (item) => `${item} can only be used inside <StytchProvider>.`;
+const noHeadlessClientError = `Tried to create a Stytch Login UI element using the Stytch Headless SDK.
+You must use the UI SDK to use UI elements.
+Please make sure you are importing createStytchHeadlessClient from @stytch/nextjs/ui and not from @stytch/nextjs/headless.`;
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+function invariant(cond, message) {
+    if (!cond)
+        throw new Error(message);
+}
+
+// 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.
+const useAsyncState = (initialState) => {
+    const isMounted = React.useRef(true);
+    const [state, setState] = React.useState(initialState);
+    React.useEffect(() => {
+        isMounted.current = true;
+        return () => {
+            isMounted.current = false;
+        };
+    }, []);
+    const setStateAction = React.useCallback((newState) => {
+        isMounted.current && setState(newState);
+    }, []);
+    return [state, setStateAction];
+};
+
+const SSRStubKey = Symbol('__stytch_SSRStubKey');
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const isStytchSSRProxy = (proxy) => {
+    return !!proxy[SSRStubKey];
+};
+
+const initialUser = {
+    user: null,
+    fromCache: false,
+    isInitialized: false,
+};
+const initialSession = {
+    session: null,
+    fromCache: false,
+    isInitialized: false,
+};
+const StytchContext = React.createContext({ isMounted: false });
+const StytchUserContext = React.createContext(initialUser);
+const StytchSessionContext = React.createContext(initialSession);
+const useIsMounted__INTERNAL = () => React.useContext(StytchContext).isMounted;
+const isUIClient = (client) => {
+    return client.mount !== undefined;
+};
+const useStytchUser = () => {
+    invariant(useIsMounted__INTERNAL(), noProviderError('useStytchUser'));
+    return React.useContext(StytchUserContext);
+};
+const useStytchSession = () => {
+    invariant(useIsMounted__INTERNAL(), noProviderError('useStytchSession'));
+    return React.useContext(StytchSessionContext);
+};
+const useStytch = () => {
+    const ctx = React.useContext(StytchContext);
+    invariant(ctx.isMounted, noProviderError('useStytch'));
+    return ctx.client;
+};
+const withStytch = (Component) => {
+    const WithStytch = (props) => {
+        invariant(useIsMounted__INTERNAL(), noProviderError('withStytch'));
+        return React__default["default"].createElement(Component, { ...props, stytch: useStytch() });
+    };
+    WithStytch.displayName = `withStytch(${Component.displayName || Component.name || 'Component'})`;
+    return WithStytch;
+};
+const withStytchUser = (Component) => {
+    const WithStytchUser = (props) => {
+        invariant(useIsMounted__INTERNAL(), noProviderError('withStytchUser'));
+        const { user, isInitialized, fromCache } = useStytchUser();
+        return (React__default["default"].createElement(Component, { ...props, stytchUser: user, stytchUserIsInitialized: isInitialized, stytchUserIsFromCache: fromCache }));
+    };
+    WithStytchUser.displayName = `withStytchUser(${Component.displayName || Component.name || 'Component'})`;
+    return WithStytchUser;
+};
+const withStytchSession = (Component) => {
+    const WithStytchSession = (props) => {
+        invariant(useIsMounted__INTERNAL(), noProviderError('withStytchSession'));
+        const { session, isInitialized, fromCache } = useStytchSession();
+        return (React__default["default"].createElement(Component, { ...props, stytchSession: session, stytchSessionIsInitialized: isInitialized, stytchSessionIsFromCache: fromCache }));
+    };
+    WithStytchSession.displayName = `withStytchSession(${Component.displayName || Component.name || 'Component'})`;
+    return WithStytchSession;
+};
+const StytchProvider = ({ stytch, children }) => {
+    // invariant(!useIsMounted__INTERNAL(), providerMustBeUniqueError);
+    const ctx = React.useMemo(() => ({ client: stytch, isMounted: true }), [stytch]);
+    const [user, setUser] = useAsyncState(initialUser);
+    const [session, setSession] = useAsyncState(initialSession);
+    React.useEffect(() => {
+        if (isStytchSSRProxy(stytch)) {
+            return;
+        }
+        setUser({
+            user: stytch.user.getSync(),
+            fromCache: true,
+            isInitialized: true,
+        });
+        setSession({
+            session: stytch.session.getSync(),
+            fromCache: true,
+            isInitialized: true,
+        });
+        const unsubscribeUser = stytch.user.onChange((user) => setUser({ user, fromCache: false, isInitialized: true }));
+        const unsubscribeSession = stytch.session.onChange((session) => setSession({ session, fromCache: false, isInitialized: true }));
+        return () => {
+            unsubscribeUser();
+            unsubscribeSession();
+        };
+    }, [stytch, setUser, setSession]);
+    const finalSess = session.isInitialized === user.isInitialized ? session : initialSession;
+    const finalUser = session.isInitialized === user.isInitialized ? user : initialUser;
+    return (React__default["default"].createElement(StytchContext.Provider, { value: ctx },
+        React__default["default"].createElement(StytchUserContext.Provider, { value: finalUser },
+            React__default["default"].createElement(StytchSessionContext.Provider, { value: finalSess }, children))));
+};
+
+// cc https://medium.com/@alexandereardon/uselayouteffect-and-ssr-192986cdcf7a
+const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect;
+
+/**
+ * Stytch JS React Component
+ *
+ * [Documentation](https://stytch.com/docs/javascript-sdk)
+ */
+const Stytch = ({ config, styles, callbacks, }) => {
+    invariant(useIsMounted__INTERNAL(), noProviderError('<Stytch />'));
+    const stytchClient = useStytch();
+    const containerEl = React.useRef(null);
+    useIsomorphicLayoutEffect(() => {
+        if (!isUIClient(stytchClient)) {
+            throw Error(noHeadlessClientError);
+        }
+        if (!containerEl.current) {
+            return;
+        }
+        if (containerEl.current.id) {
+            return;
+        }
+        const randId = Math.floor(Math.random() * 1e6);
+        const elementId = `stytch-magic-link-${randId}`;
+        containerEl.current.id = elementId;
+        stytchClient.mount({
+            config,
+            callbacks,
+            elementId: `#${elementId}`,
+            styles,
+        });
+    }, [stytchClient]);
+    return React__default["default"].createElement("div", { ref: containerEl });
+};
+
+exports.Stytch = Stytch;
+exports.StytchProvider = StytchProvider;
+exports.useStytch = useStytch;
+exports.useStytchSession = useStytchSession;
+exports.useStytchUser = useStytchUser;
+exports.withStytch = withStytch;
+exports.withStytchSession = withStytchSession;
+exports.withStytchUser = withStytchUser;

package/dist/index.ui.d.ts

@@ -0,0 +1,3 @@
+import { StytchUIClient } from "@stytch/vanilla-js";
+declare const createStytchUIClient: (_PUBLIC_TOKEN: string) => StytchUIClient;
+export { createStytchUIClient };

package/dist/index.ui.esm.d.ts

@@ -0,0 +1,3 @@
+import { StytchUIClient } from "@stytch/vanilla-js";
+declare const createStytchUIClient: (_PUBLIC_TOKEN: string) => StytchUIClient;
+export { createStytchUIClient };

package/dist/index.ui.esm.js

@@ -0,0 +1,48 @@
+import { StytchUIClient } from '@stytch/vanilla-js';
+
+const cannotInvokeMethodOnServerError = (path) => `[Stytch] Invalid serverside function call to ${path}.
+The Stytch Javascript SDK is intended to ony be used on the client side.
+Make sure to wrap your API calls in a hook to ensure they are executed on the client.
+\`\`\`
+const myComponent = () => {
+  const stytch = useStytch();
+  // This will error out on the server.
+  stytch.magicLinks.authenticate(...);
+  useEffect(() => {
+    // This will work well
+    stytch.magicLinks.authenticate(...);
+  }, []);
+}
+\`\`\`
+
+If you want to make API calls from server environments, please use the Stytch Node Library
+https://www.npmjs.com/package/stytch.
+`;
+
+const SSRStubKey = Symbol('__stytch_SSRStubKey');
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const createProxy = (path) => {
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    const noop = () => { };
+    return new Proxy(noop, {
+        get(target, p) {
+            if (p === SSRStubKey) {
+                return true;
+            }
+            return createProxy(path + '.' + String(p));
+        },
+        apply() {
+            throw new Error(cannotInvokeMethodOnServerError(path));
+        },
+    });
+};
+const createStytchSSRProxy = () => createProxy('stytch');
+
+const createStytchUIClient = (...args) => {
+    if (typeof window === 'undefined') {
+        return createStytchSSRProxy();
+    }
+    return new StytchUIClient(...args);
+};
+
+export { createStytchUIClient };

package/dist/index.ui.js

@@ -0,0 +1,52 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var vanillaJs = require('@stytch/vanilla-js');
+
+const cannotInvokeMethodOnServerError = (path) => `[Stytch] Invalid serverside function call to ${path}.
+The Stytch Javascript SDK is intended to ony be used on the client side.
+Make sure to wrap your API calls in a hook to ensure they are executed on the client.
+\`\`\`
+const myComponent = () => {
+  const stytch = useStytch();
+  // This will error out on the server.
+  stytch.magicLinks.authenticate(...);
+  useEffect(() => {
+    // This will work well
+    stytch.magicLinks.authenticate(...);
+  }, []);
+}
+\`\`\`
+
+If you want to make API calls from server environments, please use the Stytch Node Library
+https://www.npmjs.com/package/stytch.
+`;
+
+const SSRStubKey = Symbol('__stytch_SSRStubKey');
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const createProxy = (path) => {
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    const noop = () => { };
+    return new Proxy(noop, {
+        get(target, p) {
+            if (p === SSRStubKey) {
+                return true;
+            }
+            return createProxy(path + '.' + String(p));
+        },
+        apply() {
+            throw new Error(cannotInvokeMethodOnServerError(path));
+        },
+    });
+};
+const createStytchSSRProxy = () => createProxy('stytch');
+
+const createStytchUIClient = (...args) => {
+    if (typeof window === 'undefined') {
+        return createStytchSSRProxy();
+    }
+    return new vanillaJs.StytchUIClient(...args);
+};
+
+exports.createStytchUIClient = createStytchUIClient;

package/headless/package.json

@@ -0,0 +1,6 @@
+{
+  "internal": true,
+  "main": "../dist/index.headless.js",
+  "module": "../dist/index.headless.esm.js",
+  "types": "../dist/index.headless.d.ts"
+}

package/package.json

@@ -0,0 +1,35 @@
+{
+  "name": "@stytch/nextjs",
+  "version": "0.0.2-0",
+  "description": "Stytch's official Next.js Library",
+  "main": "./dist/index.js",
+  "module": "./dist/index.esm.js",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist",
+    "headless",
+    "ui"
+  ],
+  "scripts": {
+    "build": "npm run clean && npm run compile",
+    "clean": "rm -rf ./dist",
+    "compile": "rollup -c",
+    "dev": "tsc -p tsconfig.build.json --watch",
+    "test": "jest"
+  },
+  "license": "MIT",
+  "author": "Stytch",
+  "devDependencies": {
+    "@babel/runtime": "^7.18.6",
+    "@stytch/vanilla-js": "0.0.2-0",
+    "eslint-config-custom": "0.0.0",
+    "rollup": "^2.56.3",
+    "typescript": "^4.5.3"
+  },
+  "peerDependencies": {
+    "@stytch/vanilla-js": "^0.0.2-0",
+    "react": ">= 17.0.2",
+    "react-dom": ">= 17.0.2"
+  },
+  "stableVersion": "0.0.1"
+}

package/ui/package.json

@@ -0,0 +1,6 @@
+{
+  "internal": true,
+  "main": "../dist/index.ui.js",
+  "module": "../dist/index.ui.esm.js",
+  "types": "../dist/index.ui.d.ts"
+}