@stytch/react 0.0.1 → 0.1.0

package/README.md

@@ -1,4 +1,4 @@
-# Stytch-React
+# @stytch/react
 
 Stytch's React Library
 
@@ -9,7 +9,7 @@ With `npm`
 
 ## Documentation
 
-For full documentation please refer to Stytch's javascript SDK documentation on https://stytch.com/docs/sdks.
+For full documentation please refer to Stytch's javascript SDK documentation at https://stytch.com/docs/sdks.
 
 ## Example Usage
 
@@ -30,7 +30,7 @@ ReactDOM.render(
 // Now use Stytch in your components
 const App = () => {
   const stytchProps = {
-    loginOrSignupView: {
+    config: {
       products: ['emailMagicLinks'],
       emailMagicLinksOptions: {
         loginRedirectURL: 'https://example.com/authenticate',
@@ -40,7 +40,7 @@ const App = () => {
         createUserAsPending: true,
       },
     },
-    style: {
+    styles: {
       fontFamily: '"Helvetica New", Helvetica, sans-serif',
       width: '321px',
       primaryColor: '#0577CA',
@@ -54,10 +54,9 @@ const App = () => {
 
   return (
     <div id="login">
-      <Stytch
-        publicToken={stytchProps.publicToken}
-        loginOrSignupView={stytchProps.loginOrSignupView}
-        style={stytchProps.style}
+      <StytchLogin
+        config={stytchProps.loginOrSignupView}
+        styles={stytchProps.style}
         callbacks={stytchProps.callbacks}
       />
     </div>

package/dist/index.d.ts

@@ -1,32 +1,193 @@
 /// <reference types="react" />
-import { Config, StyleConfig, User, Session, StytchUIClient } from "@stytch/vanilla-js";
-import * as React from "react";
+// We need to import the StytchUIClient type to give the TSDoc parser a hint as to where it is from
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+import { Callbacks, StytchLoginConfig, StyleConfig, User, Session, StytchUIClient } from "@stytch/vanilla-js";
+import React from "react";
+import { ReactNode } from "react";
 import { StytchHeadlessClient } from "@stytch/vanilla-js/headless";
+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;
+}
 /**
- * Stytch JS React Component
+ * The Stytch Login Screen component.
+ * This component can only be used with a {@link StytchUIClient} client constructor
+ * passed into the {@link StytchProvider}
  *
- * [Documentation](https://stytch.com/docs/javascript-sdk)
+ * 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 props {@link StytchProps}
+ */
+declare const StytchLogin: ({ config, styles, callbacks }: StytchProps) => JSX.Element;
+/**
+ * The Stytch Client object passed in to <StytchProvider /> in your application root.
+ * Either a StytchUIClient or StytchHeadlessClient.
  */
-declare const Stytch: ({ config, styles }: {
-    config: Config;
-    styles: StyleConfig;
-}) => JSX.Element | null;
 type StytchClient = StytchUIClient | StytchHeadlessClient;
-declare const useStytchUser: () => User | null;
-declare const useStytchSession: () => Session | null;
+type SWRUser = {
+    /**
+     * Either the active {@link User} object, or null if the user is not logged in.
+     */
+    user: User | null;
+    /**
+     * If true, indicates that the value returned is from the application cache and a state refresh is in progress.
+     */
+    fromCache: boolean;
+};
+type SWRSession = {
+    /**
+     * Either the active {@link Session} object, or null if the user is not logged in.
+     */
+    session: Session | null;
+    /**
+     * If true, indicates that the value returned is from the application cache and a state refresh is in progress.
+     */
+    fromCache: boolean;
+};
+/**
+ * Returns the active User.
+ * Check the fromCache property to determine if the user data is from persistent storage.
+ * @example
+ * const {user} = useStytchUser();
+ * return (<h1>Welcome, {user.name.first_name}</h1>);
+ * @returns A {@link SWRUser}
+ */
+declare const useStytchUser: () => SWRUser;
+/**
+ * Returns the active user's Stytch session.
+ * @example
+ * const {session} = useStytchSession();
+ * useEffect(() => {
+ *   if (!session) {
+ *     router.replace('/login')
+ *   }
+ * }, [session]);
+ * @returns A {@link SWRSession}
+ */
+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;
+    stytchUserIsFromCache: boolean;
 }>) => React.ComponentType<T>;
 declare const withStytchSession: <T extends object>(Component: React.ComponentType<T & {
     stytchSession: Session | null;
+    stytchSessionIsFromCache: boolean;
 }>) => React.ComponentType<T>;
 type StytchProviderProps = {
+    /**
+     * A Stytch client instance, either a {@link StytchUIClient} or {@link StytchHeadlessClient}
+     */
     stytch: StytchClient;
-    children?: React.ReactNode;
+    children?: ReactNode;
 };
+/**
+ * The Stytch Context Provider.
+ * Wrap your application with this component in the root file in order to use Stytch everywhere in your app.
+ * @example
+ * const stytch = new StytchHeadlessClient('public-token-<find yours in the stytch dashboard>')
+ *
+ * ReactDOM.render(
+ *   <StytchProvider stytch={stytch}>
+ *     <App />
+ *   </StytchProvider>,
+ *   document.getElementById('root'),
+ * )
+ */
 declare const StytchProvider: ({ stytch, children }: StytchProviderProps) => JSX.Element;
-export { Stytch, useStytchUser, useStytchSession, useStytch, withStytch, withStytchUser, withStytchSession, StytchProviderProps, StytchProvider };
+export { StytchLogin, StytchProvider, useStytch, useStytchSession, useStytchUser, withStytch, withStytchSession, withStytchUser };
+export type { StytchProviderProps };

package/dist/index.esm.d.ts

@@ -1,32 +1,193 @@
 /// <reference types="react" />
-import { Config, StyleConfig, User, Session, StytchUIClient } from "@stytch/vanilla-js";
-import * as React from "react";
+// We need to import the StytchUIClient type to give the TSDoc parser a hint as to where it is from
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+import { Callbacks, StytchLoginConfig, StyleConfig, User, Session, StytchUIClient } from "@stytch/vanilla-js";
+import React from "react";
+import { ReactNode } from "react";
 import { StytchHeadlessClient } from "@stytch/vanilla-js/headless";
+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;
+}
 /**
- * Stytch JS React Component
+ * The Stytch Login Screen component.
+ * This component can only be used with a {@link StytchUIClient} client constructor
+ * passed into the {@link StytchProvider}
  *
- * [Documentation](https://stytch.com/docs/javascript-sdk)
+ * 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 props {@link StytchProps}
+ */
+declare const StytchLogin: ({ config, styles, callbacks }: StytchProps) => JSX.Element;
+/**
+ * The Stytch Client object passed in to <StytchProvider /> in your application root.
+ * Either a StytchUIClient or StytchHeadlessClient.
  */
-declare const Stytch: ({ config, styles }: {
-    config: Config;
-    styles: StyleConfig;
-}) => JSX.Element | null;
 type StytchClient = StytchUIClient | StytchHeadlessClient;
-declare const useStytchUser: () => User | null;
-declare const useStytchSession: () => Session | null;
+type SWRUser = {
+    /**
+     * Either the active {@link User} object, or null if the user is not logged in.
+     */
+    user: User | null;
+    /**
+     * If true, indicates that the value returned is from the application cache and a state refresh is in progress.
+     */
+    fromCache: boolean;
+};
+type SWRSession = {
+    /**
+     * Either the active {@link Session} object, or null if the user is not logged in.
+     */
+    session: Session | null;
+    /**
+     * If true, indicates that the value returned is from the application cache and a state refresh is in progress.
+     */
+    fromCache: boolean;
+};
+/**
+ * Returns the active User.
+ * Check the fromCache property to determine if the user data is from persistent storage.
+ * @example
+ * const {user} = useStytchUser();
+ * return (<h1>Welcome, {user.name.first_name}</h1>);
+ * @returns A {@link SWRUser}
+ */
+declare const useStytchUser: () => SWRUser;
+/**
+ * Returns the active user's Stytch session.
+ * @example
+ * const {session} = useStytchSession();
+ * useEffect(() => {
+ *   if (!session) {
+ *     router.replace('/login')
+ *   }
+ * }, [session]);
+ * @returns A {@link SWRSession}
+ */
+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;
+    stytchUserIsFromCache: boolean;
 }>) => React.ComponentType<T>;
 declare const withStytchSession: <T extends object>(Component: React.ComponentType<T & {
     stytchSession: Session | null;
+    stytchSessionIsFromCache: boolean;
 }>) => React.ComponentType<T>;
 type StytchProviderProps = {
+    /**
+     * A Stytch client instance, either a {@link StytchUIClient} or {@link StytchHeadlessClient}
+     */
     stytch: StytchClient;
-    children?: React.ReactNode;
+    children?: ReactNode;
 };
+/**
+ * The Stytch Context Provider.
+ * Wrap your application with this component in the root file in order to use Stytch everywhere in your app.
+ * @example
+ * const stytch = new StytchHeadlessClient('public-token-<find yours in the stytch dashboard>')
+ *
+ * ReactDOM.render(
+ *   <StytchProvider stytch={stytch}>
+ *     <App />
+ *   </StytchProvider>,
+ *   document.getElementById('root'),
+ * )
+ */
 declare const StytchProvider: ({ stytch, children }: StytchProviderProps) => JSX.Element;
-export { Stytch, useStytchUser, useStytchSession, useStytch, withStytch, withStytchUser, withStytchSession, StytchProviderProps, StytchProvider };
+export { StytchLogin, StytchProvider, useStytch, useStytchSession, useStytchUser, withStytch, withStytchSession, withStytchUser };
+export type { StytchProviderProps };

package/dist/index.esm.js

@@ -1,94 +1,222 @@
-import * as React from 'react';
-import { StytchUIClient } from '@stytch/vanilla-js';
+import React, { useRef, useState, useEffect, useCallback, createContext, useContext, useMemo, useLayoutEffect } from 'react';
 
-const StytchUserContext = React.createContext(null);
-const StytchSessionContext = React.createContext(null);
-const StytchContext = React.createContext({});
+const noProviderError = (item) => `${item} can only be used inside <StytchProvider>.`;
+const providerMustBeUniqueError = 'You cannot render a <StytchProvider> inside another <StytchProvider>.';
+const noSSRError = `The @stytch/react library is not meant for use with serverside environments like NextJS.
+Use the @stytch/nextjs library instead - 
+npm remove @stytch/react && npm install @stytch/nextjs
+`;
+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 from @stytch/vanilla-js and not from the @stytch/vanilla-js/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 initialUser = {
+    user: null,
+    fromCache: false,
+};
+const initialSession = {
+    session: null,
+    fromCache: 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.mountLogin !== undefined;
+};
+/**
+ * Returns the active User.
+ * Check the fromCache property to determine if the user data is from persistent storage.
+ * @example
+ * const {user} = useStytchUser();
+ * return (<h1>Welcome, {user.name.first_name}</h1>);
+ * @returns A {@link SWRUser}
+ */
 const useStytchUser = () => {
-    return React.useContext(StytchUserContext);
+    invariant(useIsMounted__INTERNAL(), noProviderError('useStytchUser'));
+    return useContext(StytchUserContext);
 };
+/**
+ * Returns the active user's Stytch session.
+ * @example
+ * const {session} = useStytchSession();
+ * useEffect(() => {
+ *   if (!session) {
+ *     router.replace('/login')
+ *   }
+ * }, [session]);
+ * @returns A {@link SWRSession}
+ */
 const useStytchSession = () => {
-    return React.useContext(StytchSessionContext);
+    invariant(useIsMounted__INTERNAL(), noProviderError('useStytchSession'));
+    return useContext(StytchSessionContext);
 };
+/**
+ * Returns the Stytch client stored in the Stytch context.
+ *
+ * @example
+ * const stytch = useStytch();
+ * useEffect(() => {
+ *   stytch.magicLinks.authenticate('...')
+ * }, [stytch]);
+ */
 const useStytch = () => {
-    return React.useContext(StytchContext);
+    const ctx = useContext(StytchContext);
+    invariant(ctx.isMounted, noProviderError('useStytch'));
+    return ctx.client;
 };
 const withStytch = (Component) => {
     const WithStytch = (props) => {
-        return React.createElement(Component, { ...props, stytch: useStytch() });
+        invariant(useIsMounted__INTERNAL(), noProviderError('withStytch'));
+        return React.createElement(Component, Object.assign({}, props, { stytch: useStytch() }));
     };
     WithStytch.displayName = `withStytch(${Component.displayName || Component.name || 'Component'})`;
     return WithStytch;
 };
 const withStytchUser = (Component) => {
     const WithStytchUser = (props) => {
-        return React.createElement(Component, { ...props, stytchUser: useStytchUser() });
+        invariant(useIsMounted__INTERNAL(), noProviderError('withStytchUser'));
+        const { user, fromCache } = useStytchUser();
+        return React.createElement(Component, Object.assign({}, props, { stytchUser: user, stytchUserIsFromCache: fromCache }));
     };
     WithStytchUser.displayName = `withStytchUser(${Component.displayName || Component.name || 'Component'})`;
     return WithStytchUser;
 };
 const withStytchSession = (Component) => {
     const WithStytchSession = (props) => {
-        return React.createElement(Component, { ...props, stytchSession: useStytchSession() });
+        invariant(useIsMounted__INTERNAL(), noProviderError('withStytchSession'));
+        const { session, fromCache } = useStytchSession();
+        return React.createElement(Component, Object.assign({}, props, { stytchSession: session, stytchSessionIsFromCache: fromCache }));
     };
     WithStytchSession.displayName = `withStytchSession(${Component.displayName || Component.name || 'Component'})`;
     return WithStytchSession;
 };
+/**
+ * The Stytch Context Provider.
+ * Wrap your application with this component in the root file in order to use Stytch everywhere in your app.
+ * @example
+ * const stytch = new StytchHeadlessClient('public-token-<find yours in the stytch dashboard>')
+ *
+ * ReactDOM.render(
+ *   <StytchProvider stytch={stytch}>
+ *     <App />
+ *   </StytchProvider>,
+ *   document.getElementById('root'),
+ * )
+ */
 const StytchProvider = ({ stytch, children }) => {
-    const [user, setUser] = React.useState(null);
-    const [session, setSession] = React.useState(null);
-    React.useEffect(() => {
-        const unsubscribeUser = stytch.user.onChange((user) => setUser(user));
-        const unsubscribeSession = stytch.session.onChange((session) => setSession(session));
+    invariant(!useIsMounted__INTERNAL(), providerMustBeUniqueError);
+    invariant(typeof window !== 'undefined', noSSRError);
+    const ctx = useMemo(() => ({ client: stytch, isMounted: true }), [stytch]);
+    const [user, setUser] = useAsyncState({
+        user: stytch.user.getSync(),
+        fromCache: true,
+    });
+    const [session, setSession] = useAsyncState({
+        session: stytch.session.getSync(),
+        fromCache: true,
+    });
+    useEffect(() => {
+        const unsubscribeUser = stytch.user.onChange((user) => setUser({
+            user,
+            fromCache: false,
+        }));
+        const unsubscribeSession = stytch.session.onChange((session) => setSession({
+            session,
+            fromCache: false,
+        }));
         return () => {
             unsubscribeUser();
             unsubscribeSession();
         };
     }, [stytch, setUser, setSession]);
-    return (React.createElement(StytchContext.Provider, { value: stytch },
-        React.createElement(StytchUserContext.Provider, { value: session && user },
-            React.createElement(StytchSessionContext.Provider, { value: user && session }, children))));
+    const finalSess = !!session.session === !!user.user ? session : initialSession;
+    const finalUser = !!session.session === !!user.user ? user : initialUser;
+    return (React.createElement(StytchContext.Provider, { value: ctx },
+        React.createElement(StytchUserContext.Provider, { value: finalUser },
+            React.createElement(StytchSessionContext.Provider, { value: finalSess }, children))));
 };
 
 /**
- * Returns a unique element ID.
- * Client-side only - will return null for server-side
- * resolves: https://stytch.slack.com/archives/C015UDB4X33/p1641450131000800
- * based on: https://github.com/vercel/next.js/issues/7322#issuecomment-968858477
- */
-const useUniqueElementId = () => {
-    const [elementId, setElementId] = React.useState(null);
-    React.useEffect(() => {
-        const randId = Math.floor(Math.random() * 1e6);
-        setElementId(`stytch-magic-link-${randId}`);
-    }, []);
-    return elementId;
-};
-/**
- * Stytch JS React Component
+ * The Stytch Login Screen 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.
  *
- * [Documentation](https://stytch.com/docs/javascript-sdk)
+ * @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 props {@link StytchProps}
  */
-const Stytch = ({ config, styles }) => {
+const StytchLogin = ({ config, styles, callbacks }) => {
+    invariant(useIsMounted__INTERNAL(), noProviderError('<StytchLogin />'));
     const stytchClient = useStytch();
-    const elementId = useUniqueElementId();
-    React.useEffect(() => {
-        if (!stytchClient || !elementId) {
+    const containerEl = useRef(null);
+    useLayoutEffect(() => {
+        if (!isUIClient(stytchClient)) {
+            throw Error(noHeadlessClientError);
+        }
+        if (!containerEl.current) {
             return;
         }
-        if (!(stytchClient instanceof StytchUIClient)) {
-            throw Error(`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 from @stytch/vanilla-js and not from the @stytch/vanilla-js/headless.
-`);
+        if (containerEl.current.id) {
+            return;
         }
-        stytchClient.mount({
+        const randId = Math.floor(Math.random() * 1e6);
+        const elementId = `stytch-magic-link-${randId}`;
+        containerEl.current.id = elementId;
+        stytchClient.mountLogin({
             config,
+            callbacks,
             elementId: `#${elementId}`,
             styles,
         });
-    }, [elementId, stytchClient]);
-    return elementId ? React.createElement("div", { id: elementId }) : null;
+    }, [stytchClient]);
+    return React.createElement("div", { ref: containerEl });
 };
 
-export { Stytch, StytchProvider, useStytch, useStytchSession, useStytchUser, withStytch, withStytchSession, withStytchUser };
+export { StytchLogin, StytchProvider, useStytch, useStytchSession, useStytchUser, withStytch, withStytchSession, withStytchUser };

package/dist/index.js

@@ -3,119 +3,231 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
-var vanillaJs = require('@stytch/vanilla-js');
 
-function _interopNamespace(e) {
-  if (e && e.__esModule) return e;
-  var n = Object.create(null);
-  if (e) {
-    Object.keys(e).forEach(function (k) {
-      if (k !== 'default') {
-        var d = Object.getOwnPropertyDescriptor(e, k);
-        Object.defineProperty(n, k, d.get ? d : {
-          enumerable: true,
-          get: function () { return e[k]; }
-        });
-      }
-    });
-  }
-  n["default"] = e;
-  return Object.freeze(n);
+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 providerMustBeUniqueError = 'You cannot render a <StytchProvider> inside another <StytchProvider>.';
+const noSSRError = `The @stytch/react library is not meant for use with serverside environments like NextJS.
+Use the @stytch/nextjs library instead - 
+npm remove @stytch/react && npm install @stytch/nextjs
+`;
+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 from @stytch/vanilla-js and not from the @stytch/vanilla-js/headless.`;
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+function invariant(cond, message) {
+    if (!cond)
+        throw new Error(message);
 }
 
-var React__namespace = /*#__PURE__*/_interopNamespace(React);
+// 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 StytchUserContext = React__namespace.createContext(null);
-const StytchSessionContext = React__namespace.createContext(null);
-const StytchContext = React__namespace.createContext({});
+const initialUser = {
+    user: null,
+    fromCache: false,
+};
+const initialSession = {
+    session: null,
+    fromCache: 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.mountLogin !== undefined;
+};
+/**
+ * Returns the active User.
+ * Check the fromCache property to determine if the user data is from persistent storage.
+ * @example
+ * const {user} = useStytchUser();
+ * return (<h1>Welcome, {user.name.first_name}</h1>);
+ * @returns A {@link SWRUser}
+ */
 const useStytchUser = () => {
-    return React__namespace.useContext(StytchUserContext);
+    invariant(useIsMounted__INTERNAL(), noProviderError('useStytchUser'));
+    return React.useContext(StytchUserContext);
 };
+/**
+ * Returns the active user's Stytch session.
+ * @example
+ * const {session} = useStytchSession();
+ * useEffect(() => {
+ *   if (!session) {
+ *     router.replace('/login')
+ *   }
+ * }, [session]);
+ * @returns A {@link SWRSession}
+ */
 const useStytchSession = () => {
-    return React__namespace.useContext(StytchSessionContext);
+    invariant(useIsMounted__INTERNAL(), noProviderError('useStytchSession'));
+    return React.useContext(StytchSessionContext);
 };
+/**
+ * Returns the Stytch client stored in the Stytch context.
+ *
+ * @example
+ * const stytch = useStytch();
+ * useEffect(() => {
+ *   stytch.magicLinks.authenticate('...')
+ * }, [stytch]);
+ */
 const useStytch = () => {
-    return React__namespace.useContext(StytchContext);
+    const ctx = React.useContext(StytchContext);
+    invariant(ctx.isMounted, noProviderError('useStytch'));
+    return ctx.client;
 };
 const withStytch = (Component) => {
     const WithStytch = (props) => {
-        return React__namespace.createElement(Component, { ...props, stytch: useStytch() });
+        invariant(useIsMounted__INTERNAL(), noProviderError('withStytch'));
+        return React__default["default"].createElement(Component, Object.assign({}, props, { stytch: useStytch() }));
     };
     WithStytch.displayName = `withStytch(${Component.displayName || Component.name || 'Component'})`;
     return WithStytch;
 };
 const withStytchUser = (Component) => {
     const WithStytchUser = (props) => {
-        return React__namespace.createElement(Component, { ...props, stytchUser: useStytchUser() });
+        invariant(useIsMounted__INTERNAL(), noProviderError('withStytchUser'));
+        const { user, fromCache } = useStytchUser();
+        return React__default["default"].createElement(Component, Object.assign({}, props, { stytchUser: user, stytchUserIsFromCache: fromCache }));
     };
     WithStytchUser.displayName = `withStytchUser(${Component.displayName || Component.name || 'Component'})`;
     return WithStytchUser;
 };
 const withStytchSession = (Component) => {
     const WithStytchSession = (props) => {
-        return React__namespace.createElement(Component, { ...props, stytchSession: useStytchSession() });
+        invariant(useIsMounted__INTERNAL(), noProviderError('withStytchSession'));
+        const { session, fromCache } = useStytchSession();
+        return React__default["default"].createElement(Component, Object.assign({}, props, { stytchSession: session, stytchSessionIsFromCache: fromCache }));
     };
     WithStytchSession.displayName = `withStytchSession(${Component.displayName || Component.name || 'Component'})`;
     return WithStytchSession;
 };
+/**
+ * The Stytch Context Provider.
+ * Wrap your application with this component in the root file in order to use Stytch everywhere in your app.
+ * @example
+ * const stytch = new StytchHeadlessClient('public-token-<find yours in the stytch dashboard>')
+ *
+ * ReactDOM.render(
+ *   <StytchProvider stytch={stytch}>
+ *     <App />
+ *   </StytchProvider>,
+ *   document.getElementById('root'),
+ * )
+ */
 const StytchProvider = ({ stytch, children }) => {
-    const [user, setUser] = React__namespace.useState(null);
-    const [session, setSession] = React__namespace.useState(null);
-    React__namespace.useEffect(() => {
-        const unsubscribeUser = stytch.user.onChange((user) => setUser(user));
-        const unsubscribeSession = stytch.session.onChange((session) => setSession(session));
+    invariant(!useIsMounted__INTERNAL(), providerMustBeUniqueError);
+    invariant(typeof window !== 'undefined', noSSRError);
+    const ctx = React.useMemo(() => ({ client: stytch, isMounted: true }), [stytch]);
+    const [user, setUser] = useAsyncState({
+        user: stytch.user.getSync(),
+        fromCache: true,
+    });
+    const [session, setSession] = useAsyncState({
+        session: stytch.session.getSync(),
+        fromCache: true,
+    });
+    React.useEffect(() => {
+        const unsubscribeUser = stytch.user.onChange((user) => setUser({
+            user,
+            fromCache: false,
+        }));
+        const unsubscribeSession = stytch.session.onChange((session) => setSession({
+            session,
+            fromCache: false,
+        }));
         return () => {
             unsubscribeUser();
             unsubscribeSession();
         };
     }, [stytch, setUser, setSession]);
-    return (React__namespace.createElement(StytchContext.Provider, { value: stytch },
-        React__namespace.createElement(StytchUserContext.Provider, { value: session && user },
-            React__namespace.createElement(StytchSessionContext.Provider, { value: user && session }, children))));
+    const finalSess = !!session.session === !!user.user ? session : initialSession;
+    const finalUser = !!session.session === !!user.user ? 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))));
 };
 
 /**
- * Returns a unique element ID.
- * Client-side only - will return null for server-side
- * resolves: https://stytch.slack.com/archives/C015UDB4X33/p1641450131000800
- * based on: https://github.com/vercel/next.js/issues/7322#issuecomment-968858477
- */
-const useUniqueElementId = () => {
-    const [elementId, setElementId] = React__namespace.useState(null);
-    React__namespace.useEffect(() => {
-        const randId = Math.floor(Math.random() * 1e6);
-        setElementId(`stytch-magic-link-${randId}`);
-    }, []);
-    return elementId;
-};
-/**
- * Stytch JS React Component
+ * The Stytch Login Screen 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.
  *
- * [Documentation](https://stytch.com/docs/javascript-sdk)
+ * @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 props {@link StytchProps}
  */
-const Stytch = ({ config, styles }) => {
+const StytchLogin = ({ config, styles, callbacks }) => {
+    invariant(useIsMounted__INTERNAL(), noProviderError('<StytchLogin />'));
     const stytchClient = useStytch();
-    const elementId = useUniqueElementId();
-    React__namespace.useEffect(() => {
-        if (!stytchClient || !elementId) {
+    const containerEl = React.useRef(null);
+    React.useLayoutEffect(() => {
+        if (!isUIClient(stytchClient)) {
+            throw Error(noHeadlessClientError);
+        }
+        if (!containerEl.current) {
             return;
         }
-        if (!(stytchClient instanceof vanillaJs.StytchUIClient)) {
-            throw Error(`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 from @stytch/vanilla-js and not from the @stytch/vanilla-js/headless.
-`);
+        if (containerEl.current.id) {
+            return;
         }
-        stytchClient.mount({
+        const randId = Math.floor(Math.random() * 1e6);
+        const elementId = `stytch-magic-link-${randId}`;
+        containerEl.current.id = elementId;
+        stytchClient.mountLogin({
             config,
+            callbacks,
             elementId: `#${elementId}`,
             styles,
         });
-    }, [elementId, stytchClient]);
-    return elementId ? React__namespace.createElement("div", { id: elementId }) : null;
+    }, [stytchClient]);
+    return React__default["default"].createElement("div", { ref: containerEl });
 };
 
-exports.Stytch = Stytch;
+exports.StytchLogin = StytchLogin;
 exports.StytchProvider = StytchProvider;
 exports.useStytch = useStytch;
 exports.useStytchSession = useStytchSession;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stytch/react",
-  "version": "0.0.1",
+  "version": "0.1.0",
   "description": "Stytch's official React Library",
   "main": "./dist/index.js",
   "module": "./dist/index.esm.js",
@@ -12,19 +12,32 @@
     "build": "npm run clean && npm run compile",
     "clean": "rm -rf ./dist",
     "compile": "rollup -c",
-    "dev": "tsc -p tsconfig.build.json --watch"
+    "dev": "tsc -p tsconfig.build.json --watch",
+    "test": "jest"
   },
   "license": "MIT",
+  "homepage": "https://stytch.com/docs/sdks/javascript-sdk",
   "author": "Stytch",
+  "keywords": [
+    "stytch",
+    "react",
+    "nextjs",
+    "typescript",
+    "auth",
+    "authentication",
+    "session",
+    "jwt",
+    "user"
+  ],
   "devDependencies": {
     "@babel/runtime": "^7.18.6",
-    "@stytch/vanilla-js": "0.0.1",
+    "@stytch/vanilla-js": "0.1.0",
     "eslint-config-custom": "0.0.0",
     "rollup": "^2.56.3",
-    "typescript": "^4.5.3"
+    "typescript": "4.7.4"
   },
   "peerDependencies": {
-    "@stytch/vanilla-js": "^0.0.1",
+    "@stytch/vanilla-js": "^0.1.0",
     "react": ">= 17.0.2",
     "react-dom": ">= 17.0.2"
   }