@stytch/nextjs 13.0.0 → 15.0.0

package/dist/index.d.ts

@@ -1,3 +1,275 @@
-export { StytchProvider, useStytch, useStytchSession, useStytchUser, withStytch, withStytchSession, withStytchUser, } from './StytchContext';
-export { StytchLogin, StytchPasswordReset, StytchPasskeyRegistration } from './Stytch';
-export type { StytchProviderProps } from './StytchContext';
+/// <reference types="react" />
+import React from "react";
+import { ReactNode } from "react";
+import { User, Session, StytchUIClient, Callbacks, StytchLoginConfig, StyleConfig } from "@stytch/vanilla-js";
+import { StytchHeadlessClient } from "@stytch/vanilla-js/headless";
+/**
+ * The Stytch Client object passed in to <StytchProvider /> in your `_app.js`.
+ * Either a StytchUIClient or StytchHeadlessClient.
+ */
+type StytchClient = StytchUIClient | StytchHeadlessClient;
+type SWRUser = {
+    user: null;
+    fromCache: false;
+    isInitialized: false;
+} | {
+    user: User | null;
+    fromCache: boolean;
+    isInitialized: true;
+};
+type SWRSession = {
+    session: null;
+    fromCache: false;
+    isInitialized: false;
+} | {
+    session: Session | null;
+    fromCache: boolean;
+    isInitialized: true;
+};
+/**
+ * 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>);
+ */
+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]);
+ */
+declare const useStytchSession: () => SWRSession;
+/**
+ * Returns the Stytch client stored in the Stytch context.
+ *
+ * @example
+ * const stytch = useStytch();
+ * useEffect(() => {
+ *   stytch.magicLinks.authenticate('...')
+ * }, [stytch]);
+ */
+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>;
+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>
+ * )
+ */
+declare const StytchProvider: ({ stytch, children }: StytchProviderProps) => JSX.Element;
+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
+ */
+declare const StytchLogin: ({ config, styles, callbacks }: StytchProps) => React.JSX.Element;
+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
+ */
+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
+ */
+declare const StytchPasskeyRegistration: ({ config, styles, callbacks }: StytchProps) => React.JSX.Element;
+export { StytchProvider, useStytch, useStytchSession, useStytchUser, withStytch, withStytchSession, withStytchUser, StytchLogin, StytchPasswordReset, StytchPasskeyRegistration };
+export type { StytchProviderProps };

package/dist/index.headless.d.ts

@@ -1 +1,16 @@
-export * from './createStytchHeadlessClient';
+import { StytchHeadlessClient } from "@stytch/vanilla-js/headless";
+/**
+ * Creates a Headless Stytch client object to call the stytch APIs.
+ * The Stytch client is not available serverside.
+ * @example
+ * const stytch = createStytchHeadlessClient('public-token-<find yours in the stytch dashboard>')
+ *
+ * return (
+ *   <StytchProvider stytch={stytch}>
+ *     <App />
+ *   </StytchProvider>
+ * )
+ * @returns A {@link StytchHeadlessClient}
+ */
+declare const createStytchHeadlessClient: (_PUBLIC_TOKEN: string, options?: import("@stytch/core/dist/public").StytchClientOptions | undefined) => StytchHeadlessClient;
+export { createStytchHeadlessClient };

package/dist/index.headless.js

@@ -1,18 +1,65 @@
-"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]; } };
+'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');
+
+/**
+ * Creates a Headless Stytch client object to call the stytch APIs.
+ * The Stytch client is not available serverside.
+ * @example
+ * const stytch = createStytchHeadlessClient('public-token-<find yours in the stytch dashboard>')
+ *
+ * return (
+ *   <StytchProvider stytch={stytch}>
+ *     <App />
+ *   </StytchProvider>
+ * )
+ * @returns A {@link StytchHeadlessClient}
+ */
+const createStytchHeadlessClient = (...args) => {
+    if (typeof window === 'undefined') {
+        return createStytchSSRProxy();
     }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __exportStar = (this && this.__exportStar) || function(m, exports) {
-    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+    return new headless.StytchHeadlessClient(...args);
 };
-Object.defineProperty(exports, "__esModule", { value: true });
-__exportStar(require("./createStytchHeadlessClient"), exports);
-//# sourceMappingURL=index.headless.js.map
+
+exports.createStytchHeadlessClient = createStytchHeadlessClient;