@stytch/nextjs 12.0.0 → 13.0.0

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # @stytch/nextjs
 
+## 13.0.0
+
+### Minor Changes
+
+- 8cff174: B2C Passkeys Headless Support & UI components
+
+### Patch Changes
+
+- Updated dependencies [8cff174]
+  - @stytch/vanilla-js@3.1.0
+
 ## 12.0.0
 
 ### Major Changes

package/dist/Stytch.d.ts

@@ -0,0 +1,172 @@
+import React from 'react';
+import type { Callbacks, StytchLoginConfig, StyleConfig } from '@stytch/vanilla-js';
+export interface StytchProps {
+    /**
+     * A {@link StytchLoginConfig} object. Add products and product-specific config to this object to change the login methods shown.
+     *
+     * @example
+     * {
+     *   products: ['crypto', 'otps']
+     * }
+     *
+     * @example
+     * {
+     *   products: ['emailMagicLinks'>]
+     *   emailMagicLinksOptions: {
+     *     loginRedirectURL: 'https://example.com/authenticate',
+     *     signupRedirectURL: 'https://example.com/authenticate',
+     *   }
+     * }
+     *
+     * @example
+     * {
+     *   products: ['oauth'>]
+     *   oauthOptions: {
+     *   providers: [
+     *       { type: 'google', one_tap: true, position: 'embedded' },
+     *       { type: 'microsoft' },
+     *       { type: 'apple' },
+     *       { type: 'facebook' },
+     *     ],
+     *   }
+     * }
+     */
+    config: StytchLoginConfig;
+    /**
+     * An optional {@link StyleConfig} to customize the look and feel of the screen.
+     *
+     * @example
+     * {
+     *    fontFamily: 'Arial, Helvetica, sans-serif',
+     *    width: '360px',
+     *    primaryColor: '#19303D',
+     * }
+     */
+    styles?: StyleConfig;
+    /**
+     * An optional {@link Callbacks} object.
+     *
+     * @example
+     * {
+     *   onError: ({message}) => {
+     *      console.error('Stytch login screen error', message)
+     *   }
+     * }
+     *
+     * @example
+     * {
+     *   onEvent: ({type, data}) => {
+     *     if(type === StytchEventType.CryptoWalletAuthenticate) {
+     *       console.log('Logged in with crypto wallet', data);
+     *     }
+     *   }
+     * }
+     */
+    callbacks?: Callbacks;
+}
+/**
+ * The Stytch Login Screen component.
+ * This component can only be used with the Stytch UI Client - use {@link createStytchUIClient}
+ * in your `_app.jsx` file.
+ *
+ * See the {@link https://stytch.com/docs/sdks/javascript-sdk online reference}
+ * and {@link https://storybook.stytch.com interactive examples} for more.
+ *
+ * @example
+ * <StytchLogin
+ *   config={{
+ *     products: ['emailMagicLinks', 'oauth'],
+ *     emailMagicLinksOptions: {
+ *       loginRedirectURL: 'https://example.com/authenticate',
+ *       signupRedirectURL: 'https://example.com/authenticate',
+ *     },
+ *     oauthOptions: {
+ *      providers: [{ type: OAuthProviders.Google }, { type: OAuthProviders.Microsoft }],
+ *    },
+ *   }}
+ *   styles={{
+ *     fontFamily: '"Helvetica New", Helvetica, sans-serif',
+ *     primaryColor: '#0577CA',
+ *     width: '321px',
+ *   }}
+ *   callbacks={{
+ *     onEvent: (event) => console.log(event)
+ *   }}
+ * />
+ *
+ * @param config - A {@link StytchLoginConfig} object
+ * @param styles - An optional {@link StyleConfig} to customize the look and feel of the screen.
+ * @param callbacks - An optional {@link Callbacks} object
+ */
+export declare const StytchLogin: ({ config, styles, callbacks }: StytchProps) => React.JSX.Element;
+export interface StytchResetPasswordProps extends StytchProps {
+    passwordResetToken: string;
+}
+/**
+ * The Stytch Reset Password component.
+ * This component can only be used with a {@link StytchUIClient} client constructor
+ * passed into the {@link StytchProvider}
+ *
+ * See the {@link https://stytch.com/docs/sdks/javascript-sdk online reference}
+ * and {@link https://storybook.stytch.com interactive examples} for more.
+ *
+ * @example
+ * <StytchPasswordReset
+ *   config={{
+ *     products: ['emailMagicLinks', 'oauth'],
+ *     emailMagicLinksOptions: {
+ *       loginRedirectURL: 'https://example.com/authenticate',
+ *       signupRedirectURL: 'https://example.com/authenticate',
+ *     },
+ *     oauthOptions: {
+ *      providers: [{ type: OAuthProviders.Google }, { type: OAuthProviders.Microsoft }],
+ *    },
+ *   }}
+ *   passwordResetToken="PvC5UudZ7TPZbELt95yXAQ-8MeEUCRob8bUQ-g52fIJs"
+ *   styles={{
+ *     fontFamily: '"Helvetica New", Helvetica, sans-serif',
+ *     primaryColor: '#0577CA',
+ *     width: '321px',
+ *   }}
+ *   callbacks={{
+ *     onEvent: (event) => console.log(event)
+ *   }}
+ * />
+ *
+ * @param config - A {@link StytchLoginConfig} object
+ * @param passwordResetToken - A Stytch password reset token
+ * @param styles - An optional {@link StyleConfig} to customize the look and feel of the screen.
+ * @param callbacks - An optional {@link Callbacks} object
+ */
+export declare const StytchPasswordReset: ({ config, styles, callbacks, passwordResetToken }: StytchResetPasswordProps) => React.JSX.Element;
+/**
+ * The Stytch Passkey Registration component.
+ * This component can only be used with a {@link StytchUIClient} client constructor
+ * passed into the {@link StytchProvider}
+ *
+ * See the {@link https://stytch.com/docs/sdks/javascript-sdk online reference}
+ * and {@link https://storybook.stytch.com interactive examples} for more.
+ *
+ * @example
+ * const styles = {
+ *     container: {
+ *       backgroundColor: '#e11e1e',
+ *     },
+ *     colors: {
+ *       primary: '#ff00f7',
+ *       secondary: '#5C727D',
+ *     },
+ *    }
+ *
+ * <StytchPasskeyRegistration
+ *   styles={styles}
+ *   callbacks={{
+ *     onEvent: (event) => console.log(event)
+ *   }}
+ * />
+ * />
+ *
+ * @param styles - An optional {@link StyleConfig} to customize the look and feel of the screen.
+ * @param callbacks - An optional {@link Callbacks} object
+ */
+export declare const StytchPasskeyRegistration: ({ config, styles, callbacks }: StytchProps) => React.JSX.Element;

package/dist/Stytch.js

@@ -0,0 +1,214 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StytchPasskeyRegistration = exports.StytchPasswordReset = exports.StytchLogin = void 0;
+const react_1 = __importStar(require("react"));
+const StytchContext_1 = require("./StytchContext");
+const invariant_1 = require("./utils/invariant");
+const errors_1 = require("./utils/errors");
+const useIsomorphicLayoutEffect_1 = __importDefault(require("./utils/useIsomorphicLayoutEffect"));
+/**
+ * The Stytch Login Screen component.
+ * This component can only be used with the Stytch UI Client - use {@link createStytchUIClient}
+ * in your `_app.jsx` file.
+ *
+ * See the {@link https://stytch.com/docs/sdks/javascript-sdk online reference}
+ * and {@link https://storybook.stytch.com interactive examples} for more.
+ *
+ * @example
+ * <StytchLogin
+ *   config={{
+ *     products: ['emailMagicLinks', 'oauth'],
+ *     emailMagicLinksOptions: {
+ *       loginRedirectURL: 'https://example.com/authenticate',
+ *       signupRedirectURL: 'https://example.com/authenticate',
+ *     },
+ *     oauthOptions: {
+ *      providers: [{ type: OAuthProviders.Google }, { type: OAuthProviders.Microsoft }],
+ *    },
+ *   }}
+ *   styles={{
+ *     fontFamily: '"Helvetica New", Helvetica, sans-serif',
+ *     primaryColor: '#0577CA',
+ *     width: '321px',
+ *   }}
+ *   callbacks={{
+ *     onEvent: (event) => console.log(event)
+ *   }}
+ * />
+ *
+ * @param config - A {@link StytchLoginConfig} object
+ * @param styles - An optional {@link StyleConfig} to customize the look and feel of the screen.
+ * @param callbacks - An optional {@link Callbacks} object
+ */
+const StytchLogin = ({ config, styles, callbacks }) => {
+    (0, invariant_1.invariant)((0, StytchContext_1.useIsMounted__INTERNAL)(), (0, errors_1.noProviderError)('<StytchLogin />'));
+    const stytchClient = (0, StytchContext_1.useStytch)();
+    const containerEl = (0, react_1.useRef)(null);
+    (0, useIsomorphicLayoutEffect_1.default)(() => {
+        if (!(0, StytchContext_1.isUIClient)(stytchClient)) {
+            throw Error(errors_1.noHeadlessClientError);
+        }
+        if (!containerEl.current) {
+            return;
+        }
+        if (!containerEl.current.id) {
+            const randId = Math.floor(Math.random() * 1e6);
+            containerEl.current.id = `stytch-magic-link-${randId}`;
+        }
+        stytchClient.mountLogin({
+            config,
+            callbacks,
+            elementId: `#${containerEl.current.id}`,
+            styles,
+        });
+    }, [stytchClient, config, styles, callbacks]);
+    return react_1.default.createElement("div", { ref: containerEl });
+};
+exports.StytchLogin = StytchLogin;
+/**
+ * The Stytch Reset Password component.
+ * This component can only be used with a {@link StytchUIClient} client constructor
+ * passed into the {@link StytchProvider}
+ *
+ * See the {@link https://stytch.com/docs/sdks/javascript-sdk online reference}
+ * and {@link https://storybook.stytch.com interactive examples} for more.
+ *
+ * @example
+ * <StytchPasswordReset
+ *   config={{
+ *     products: ['emailMagicLinks', 'oauth'],
+ *     emailMagicLinksOptions: {
+ *       loginRedirectURL: 'https://example.com/authenticate',
+ *       signupRedirectURL: 'https://example.com/authenticate',
+ *     },
+ *     oauthOptions: {
+ *      providers: [{ type: OAuthProviders.Google }, { type: OAuthProviders.Microsoft }],
+ *    },
+ *   }}
+ *   passwordResetToken="PvC5UudZ7TPZbELt95yXAQ-8MeEUCRob8bUQ-g52fIJs"
+ *   styles={{
+ *     fontFamily: '"Helvetica New", Helvetica, sans-serif',
+ *     primaryColor: '#0577CA',
+ *     width: '321px',
+ *   }}
+ *   callbacks={{
+ *     onEvent: (event) => console.log(event)
+ *   }}
+ * />
+ *
+ * @param config - A {@link StytchLoginConfig} object
+ * @param passwordResetToken - A Stytch password reset token
+ * @param styles - An optional {@link StyleConfig} to customize the look and feel of the screen.
+ * @param callbacks - An optional {@link Callbacks} object
+ */
+const StytchPasswordReset = ({ config, styles, callbacks, passwordResetToken }) => {
+    (0, invariant_1.invariant)((0, StytchContext_1.useIsMounted__INTERNAL)(), (0, errors_1.noProviderError)('<StytchResetPassword />'));
+    const stytchClient = (0, StytchContext_1.useStytch)();
+    const containerEl = (0, react_1.useRef)(null);
+    (0, useIsomorphicLayoutEffect_1.default)(() => {
+        if (!(0, StytchContext_1.isUIClient)(stytchClient)) {
+            throw Error(errors_1.noHeadlessClientError);
+        }
+        if (!containerEl.current) {
+            return;
+        }
+        if (!containerEl.current.id) {
+            const randId = Math.floor(Math.random() * 1e6);
+            containerEl.current.id = `stytch-reset-password-${randId}`;
+        }
+        if (passwordResetToken) {
+            stytchClient.mountResetPassword({
+                config,
+                callbacks,
+                elementId: `#${containerEl.current.id}`,
+                styles,
+                passwordResetToken,
+            });
+        }
+    }, [stytchClient, config, styles, callbacks, passwordResetToken]);
+    return react_1.default.createElement("div", { ref: containerEl });
+};
+exports.StytchPasswordReset = StytchPasswordReset;
+/**
+ * The Stytch Passkey Registration component.
+ * This component can only be used with a {@link StytchUIClient} client constructor
+ * passed into the {@link StytchProvider}
+ *
+ * See the {@link https://stytch.com/docs/sdks/javascript-sdk online reference}
+ * and {@link https://storybook.stytch.com interactive examples} for more.
+ *
+ * @example
+ * const styles = {
+ *     container: {
+ *       backgroundColor: '#e11e1e',
+ *     },
+ *     colors: {
+ *       primary: '#ff00f7',
+ *       secondary: '#5C727D',
+ *     },
+ *    }
+ *
+ * <StytchPasskeyRegistration
+ *   styles={styles}
+ *   callbacks={{
+ *     onEvent: (event) => console.log(event)
+ *   }}
+ * />
+ * />
+ *
+ * @param styles - An optional {@link StyleConfig} to customize the look and feel of the screen.
+ * @param callbacks - An optional {@link Callbacks} object
+ */
+const StytchPasskeyRegistration = ({ config, styles, callbacks }) => {
+    (0, invariant_1.invariant)((0, StytchContext_1.useIsMounted__INTERNAL)(), (0, errors_1.noProviderError)('<StytchPasskeyRegistration />'));
+    const stytchClient = (0, StytchContext_1.useStytch)();
+    const containerEl = (0, react_1.useRef)(null);
+    const user = (0, StytchContext_1.useStytchUser)();
+    (0, useIsomorphicLayoutEffect_1.default)(() => {
+        if (!(0, StytchContext_1.isUIClient)(stytchClient)) {
+            throw Error(errors_1.noHeadlessClientError);
+        }
+        if (!containerEl.current) {
+            return;
+        }
+        if (!containerEl.current.id) {
+            const randId = Math.floor(Math.random() * 1e6);
+            containerEl.current.id = `stytch-passkey-registration-${randId}`;
+        }
+        stytchClient.mountPasskeyRegistration({
+            config,
+            callbacks,
+            elementId: `#${containerEl.current.id}`,
+            styles,
+        });
+    }, [stytchClient, config, styles, callbacks, user]);
+    return react_1.default.createElement("div", { ref: containerEl });
+};
+exports.StytchPasskeyRegistration = StytchPasskeyRegistration;
+//# sourceMappingURL=Stytch.js.map

package/dist/Stytch.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Stytch.js","sourceRoot":"","sources":["../src/Stytch.tsx"],"names":[],"mappings":"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"}

package/dist/Stytch.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/Stytch.spec.js

@@ -0,0 +1,130 @@
+"use strict";
+var __awaiter = (this && this.__awaiter) || function (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());
+    });
+};
+var __rest = (this && this.__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 __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const vanilla_js_1 = require("@stytch/vanilla-js");
+const react_2 = require("@testing-library/react");
+const Stytch_1 = require("./Stytch");
+const StytchContext_1 = require("./StytchContext");
+const errors_1 = require("./utils/errors");
+const mockStytchClient = {
+    user: { getSync: () => null, onChange: () => () => null },
+    session: { getSync: () => null, onChange: () => () => null },
+    mountLogin: jest.fn(),
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+};
+beforeEach(() => {
+    jest.resetAllMocks();
+});
+describe('StytchLogin', () => {
+    const stytchUIConfig = {
+        emailMagicLinksOptions: {
+            createUserAsPending: true,
+            loginExpirationMinutes: 30,
+            loginRedirectURL: 'https://example.com/authenticate',
+            signupExpirationMinutes: 30,
+            signupRedirectURL: 'https://example.com/authenticate',
+        },
+        oauthOptions: {
+            providers: [{ type: vanilla_js_1.OAuthProviders.Google }, { type: vanilla_js_1.OAuthProviders.Microsoft }, { type: vanilla_js_1.OAuthProviders.Apple }],
+        },
+        products: [vanilla_js_1.Products.emailMagicLinks, vanilla_js_1.Products.oauth],
+    };
+    const stytchStyleConfig = {
+        fontFamily: '"Helvetica New", Helvetica, sans-serif',
+    };
+    it('expect error when not inside a StytchProvider', () => __awaiter(void 0, void 0, void 0, function* () {
+        expect(() => (0, react_2.render)(react_1.default.createElement(Stytch_1.StytchLogin, { config: stytchUIConfig, styles: stytchStyleConfig }))).toThrow((0, errors_1.noProviderError)('<StytchLogin />'));
+    }));
+    it('expect error when given a headless client', () => __awaiter(void 0, void 0, void 0, function* () {
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        const { mountLogin } = mockStytchClient, mockStytchHeadlessClient = __rest(mockStytchClient, ["mountLogin"]);
+        expect(() => (0, react_2.render)(react_1.default.createElement(StytchContext_1.StytchProvider, { stytch: mockStytchHeadlessClient },
+            react_1.default.createElement(Stytch_1.StytchLogin, { config: stytchUIConfig, styles: stytchStyleConfig })))).toThrow(errors_1.noHeadlessClientError);
+    }));
+    it('Creates a div and invokes stytchClient#mountLogin', () => __awaiter(void 0, void 0, void 0, function* () {
+        jest.spyOn(Math, 'random').mockReturnValueOnce(0.123456);
+        const { asFragment } = (0, react_2.render)(react_1.default.createElement(StytchContext_1.StytchProvider, { stytch: mockStytchClient },
+            react_1.default.createElement(Stytch_1.StytchLogin, { config: stytchUIConfig, styles: stytchStyleConfig })));
+        expect(mockStytchClient.mountLogin).toHaveBeenCalledWith({
+            elementId: '#stytch-magic-link-123456',
+            config: stytchUIConfig,
+            styles: stytchStyleConfig,
+        });
+        expect(asFragment()).toMatchInlineSnapshot(`
+      <DocumentFragment>
+        <div
+          id="stytch-magic-link-123456"
+        />
+      </DocumentFragment>
+    `);
+    }));
+    it('Invokes stytchClient#mountLogin again when properties change', () => __awaiter(void 0, void 0, void 0, function* () {
+        jest.spyOn(Math, 'random').mockReturnValueOnce(0.123456);
+        const { rerender } = (0, react_2.render)(react_1.default.createElement(StytchContext_1.StytchProvider, { stytch: mockStytchClient },
+            react_1.default.createElement(Stytch_1.StytchLogin, { config: stytchUIConfig, styles: stytchStyleConfig })));
+        expect(mockStytchClient.mountLogin).toHaveBeenCalledWith({
+            elementId: '#stytch-magic-link-123456',
+            config: stytchUIConfig,
+            styles: stytchStyleConfig,
+        });
+        const newStyleConfig = Object.assign(Object.assign({}, stytchStyleConfig), { width: '5000px' });
+        rerender(react_1.default.createElement(StytchContext_1.StytchProvider, { stytch: mockStytchClient },
+            react_1.default.createElement(Stytch_1.StytchLogin, { config: stytchUIConfig, styles: newStyleConfig })));
+        expect(mockStytchClient.mountLogin).toHaveBeenCalledWith({
+            elementId: '#stytch-magic-link-123456',
+            config: stytchUIConfig,
+            styles: newStyleConfig,
+        });
+        rerender(react_1.default.createElement(StytchContext_1.StytchProvider, { stytch: mockStytchClient },
+            react_1.default.createElement(Stytch_1.StytchLogin, { config: stytchUIConfig, styles: newStyleConfig })));
+        // third rerender should not have done anything
+        expect(mockStytchClient.mountLogin).toHaveBeenCalledTimes(2);
+    }));
+    it('Creates two unique divs when invoked twice on the same page', () => __awaiter(void 0, void 0, void 0, function* () {
+        jest.spyOn(Math, 'random').mockReturnValueOnce(0.123456).mockReturnValueOnce(0.789012);
+        const { asFragment } = (0, react_2.render)(react_1.default.createElement(StytchContext_1.StytchProvider, { stytch: mockStytchClient },
+            react_1.default.createElement(Stytch_1.StytchLogin, { config: stytchUIConfig, styles: stytchStyleConfig }),
+            react_1.default.createElement(Stytch_1.StytchLogin, { config: stytchUIConfig, styles: stytchStyleConfig })));
+        expect(mockStytchClient.mountLogin).toHaveBeenCalledTimes(2);
+        expect(mockStytchClient.mountLogin).toHaveBeenCalledWith(expect.objectContaining({
+            elementId: '#stytch-magic-link-123456',
+        }));
+        expect(mockStytchClient.mountLogin).toHaveBeenCalledWith(expect.objectContaining({
+            elementId: '#stytch-magic-link-789012',
+        }));
+        expect(asFragment()).toMatchInlineSnapshot(`
+      <DocumentFragment>
+        <div
+          id="stytch-magic-link-123456"
+        />
+        <div
+          id="stytch-magic-link-789012"
+        />
+      </DocumentFragment>
+    `);
+    }));
+});
+//# sourceMappingURL=Stytch.spec.js.map

package/dist/Stytch.spec.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Stytch.spec.js","sourceRoot":"","sources":["../src/Stytch.spec.tsx"],"names":[],"mappings":"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"}

package/dist/StytchContext.d.ts

@@ -0,0 +1,104 @@
+import React, { ComponentType, ReactNode } from 'react';
+import type { User, Session, StytchUIClient } from '@stytch/vanilla-js';
+import type { StytchHeadlessClient } from '@stytch/vanilla-js/headless';
+/**
+ * The Stytch Client object passed in to <StytchProvider /> in your `_app.js`.
+ * Either a StytchUIClient or StytchHeadlessClient.
+ */
+declare type StytchClient = StytchUIClient | StytchHeadlessClient;
+declare type SWRUser = {
+    user: null;
+    fromCache: false;
+    isInitialized: false;
+} | {
+    user: User | null;
+    fromCache: boolean;
+    isInitialized: true;
+};
+declare type SWRSession = {
+    session: null;
+    fromCache: false;
+    isInitialized: false;
+} | {
+    session: Session | null;
+    fromCache: boolean;
+    isInitialized: true;
+};
+export declare const useIsMounted__INTERNAL: () => boolean;
+export declare const isUIClient: (client: StytchClient) => client is StytchUIClient;
+/**
+ * Returns the active User.
+ * The Stytch SDKs are used for client-side authentication and session management.
+ * Check the isInitialized property to determine if the SDK has completed initialization.
+ * Check the fromCache property to determine if the session data is from persistent storage.
+ * See Next's {@link https://nextjs.org/docs/authentication#authenticating-statically-generated-pages documentation} for more.
+ * @example
+ * const {user, isInitialized, fromCache} = useStytchUser();
+ * if (!isInitialized) {
+ *     return <p>Loading...</p>;
+ * }
+ * return (<h1>Welcome, {user.name.first_name}</h1>);
+ */
+export declare const useStytchUser: () => SWRUser;
+/**
+ * Returns the user's active Stytch session.
+ * The Stytch SDKs are used for client-side authentication and session management.
+ * Check the isInitialized property to determine if the SDK has completed initialization.
+ * Check the fromCache property to determine if the session data is from persistent storage.
+ * See Next's {@link https://nextjs.org/docs/authentication#authenticating-statically-generated-pages documentation} for more.
+ * @example
+ * const {session, isInitialized, fromCache} = useStytchSession();
+ * useEffect(() => {
+ *   if (!isInitialized) {
+ *     return;
+ *   }
+ *   if (!session) {
+ *     router.replace('/login')
+ *   }
+ * }, [session, isInitialized]);
+ */
+export declare const useStytchSession: () => SWRSession;
+/**
+ * Returns the Stytch client stored in the Stytch context.
+ *
+ * @example
+ * const stytch = useStytch();
+ * useEffect(() => {
+ *   stytch.magicLinks.authenticate('...')
+ * }, [stytch]);
+ */
+export declare const useStytch: () => StytchClient;
+export declare const withStytch: <T extends object>(Component: React.ComponentType<T & {
+    stytch: StytchClient;
+}>) => React.ComponentType<T>;
+export declare const withStytchUser: <T extends object>(Component: React.ComponentType<T & {
+    stytchUser: User | null;
+    stytchUserIsInitialized: boolean;
+    stytchUserIsFromCache: boolean;
+}>) => React.ComponentType<T>;
+export declare const withStytchSession: <T extends object>(Component: React.ComponentType<T & {
+    stytchSession: Session | null;
+    stytchSessionIsInitialized: boolean;
+    stytchSessionIsFromCache: boolean;
+}>) => React.ComponentType<T>;
+export interface StytchProviderProps {
+    /**
+     * A Stytch client instance, created using either {@link createStytchHeadlessClient} or {@link createStytchUIClient}
+     */
+    stytch: StytchClient;
+    children?: ReactNode;
+}
+/**
+ * The Stytch Context Provider.
+ * Wrap your application with this component in `_app.js` in order to use Stytch everywhere in your app.
+ * @example
+ * const stytch = createStytchHeadlessClient('public-token-<find yours in the stytch dashboard>')
+ *
+ * return (
+ *   <StytchProvider stytch={stytch}>
+ *     <App />
+ *   </StytchProvider>
+ * )
+ */
+export declare const StytchProvider: ({ stytch, children }: StytchProviderProps) => JSX.Element;
+export {};