@stytch/react 0.1.0 → 0.2.0

package/README.md

@@ -67,3 +67,90 @@ const App = () => {
 ## Typescript Support
 
 There are built in typescript definitions in the npm package.
+
+## Migrating from @stytch/stytch-react
+
+If you are migrating from [@stytch/stytch-react](https://www.npmjs.com/package/@stytch/stytch-react), follow the steps below:
+
+### Step 1: Install the new libraries
+
+- The core SDK is now bundled in its own module - [@stytch/vanilla-js](https://www.npmjs.com/package/@stytch/vanilla-js)
+- We now have a library specifically for React bindings - [@stytch/react](https://www.npmjs.com/package/@stytch/react)
+
+```shell
+# NPM
+npm install @stytch/vanilla-js @stytch/react
+# Yarn
+yarn add @stytch/vanilla-js @stytch/react
+```
+
+### Step 2: Remove the old SDK
+
+- Remove the `@styth/stytch-react` package
+- If you are explicitly loading the `stytch.js` script in the document header, remove it. It isn't needed anymore.
+
+```shell
+# NPM
+npm rm @stytch/stytch-react
+# Yarn
+yarn remove @stytch/stytch-react
+```
+
+### Step 3: Initialize the client in your Application Root
+
+- Determine if you need the Headless or UI client. If you plan to use the `<StytchLogin />` component in your application then you should use the the UI client. Otherwise use the Headless client to minimize application bundle size.
+- To create the Stytch Headless client, use `StytchHeadlessClient` from `@stytch/vanilla-js/headless`
+- To create the Stytch UI client, use `StytchUIClient` from `@stytch/vanilla-js`
+- Pass it into `<StytchProvider />` component from `@stytch/react`
+
+```jsx
+import React from 'react';
+import { StytchProvider } from '@stytch/react';
+import { StytchHeadlessClient } from '@stytch/vanilla-js/headless';
+// Or alternately
+// import { StytchUIClient } from '@stytch/vanilla-js';
+
+const stytch = new StytchHeadlessClient(process.env.REACT_APP_STYTCH_PUBLIC_TOKEN);
+
+function WrappedApp() {
+  return (
+    <StytchProvider stytch={stytch}>
+      <App />
+    </StytchProvider>
+  );
+}
+
+export default WrappedApp;
+```
+
+### Step 4: Update calls to `useStytchUser` , `useStytchSession`, and `useStytchLazy`
+
+- `useStytchUser` and `useStytchSession` hooks now return envelope objects - `{ user, isCached }` and `{ session, isCached }` respectively.
+  - On first render the SDK will read user/session out of persistent storage, and serve them with `isCached: true` - at this point you’re reading the stale-while-revalidating value
+  - The SDK will make network requests to pull the most up-to-date user and session objects, and serve them with `isCached: false`
+- `useStytchLazy` is no longer required - you may always call `useStytch` now
+
+```jsx
+import React, { useEffect } from 'react';
+import { useStytchUser } from '@stytch/react';
+
+export default function Profile() {
+  const router = useRouter();
+  const { user, isCached } = useStytchUser();
+
+  return (
+    <Layout>
+      <h1>Your {isCached ? 'Cached' : null} Profile</h1>
+      <pre>{JSON.stringify(user, null, 2)}</pre>
+    </Layout>
+  );
+}
+```
+
+### Step 5: UI Naming Changes
+
+We've made a number of small changes to our naming conventions to make the API cleaner and easier to understand.
+
+- The `<Stytch />` login component is now called `<StytchLogin />`
+- The `OAuthProvidersTypes` enum is now called `OAuthProviders`
+- The `SDKProductTypes` enum is now called `Products`

package/dist/index.d.ts

@@ -101,6 +101,21 @@ interface StytchProps {
  * @param props {@link StytchProps}
  */
 declare const StytchLogin: ({ config, styles, callbacks }: StytchProps) => 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
+ * TODO
+ */
+declare const StytchPasswordReset: ({ config, styles, callbacks, passwordResetToken }: StytchResetPasswordProps) => JSX.Element;
 /**
  * The Stytch Client object passed in to <StytchProvider /> in your application root.
  * Either a StytchUIClient or StytchHeadlessClient.
@@ -189,5 +204,5 @@ type StytchProviderProps = {
  * )
  */
 declare const StytchProvider: ({ stytch, children }: StytchProviderProps) => JSX.Element;
-export { StytchLogin, StytchProvider, useStytch, useStytchSession, useStytchUser, withStytch, withStytchSession, withStytchUser };
+export { StytchLogin, StytchPasswordReset, StytchProvider, useStytch, useStytchSession, useStytchUser, withStytch, withStytchSession, withStytchUser };
 export type { StytchProviderProps };

package/dist/index.esm.d.ts

@@ -101,6 +101,21 @@ interface StytchProps {
  * @param props {@link StytchProps}
  */
 declare const StytchLogin: ({ config, styles, callbacks }: StytchProps) => 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
+ * TODO
+ */
+declare const StytchPasswordReset: ({ config, styles, callbacks, passwordResetToken }: StytchResetPasswordProps) => JSX.Element;
 /**
  * The Stytch Client object passed in to <StytchProvider /> in your application root.
  * Either a StytchUIClient or StytchHeadlessClient.
@@ -189,5 +204,5 @@ type StytchProviderProps = {
  * )
  */
 declare const StytchProvider: ({ stytch, children }: StytchProviderProps) => JSX.Element;
-export { StytchLogin, StytchProvider, useStytch, useStytchSession, useStytchUser, withStytch, withStytchSession, withStytchUser };
+export { StytchLogin, StytchPasswordReset, StytchProvider, useStytch, useStytchSession, useStytchUser, withStytch, withStytchSession, withStytchUser };
 export type { StytchProviderProps };

package/dist/index.esm.js

@@ -203,20 +203,56 @@ const StytchLogin = ({ config, styles, callbacks }) => {
         if (!containerEl.current) {
             return;
         }
-        if (containerEl.current.id) {
-            return;
+        if (!containerEl.current.id) {
+            const randId = Math.floor(Math.random() * 1e6);
+            containerEl.current.id = `stytch-magic-link-${randId}`;
         }
-        const randId = Math.floor(Math.random() * 1e6);
-        const elementId = `stytch-magic-link-${randId}`;
-        containerEl.current.id = elementId;
         stytchClient.mountLogin({
             config,
             callbacks,
-            elementId: `#${elementId}`,
+            elementId: `#${containerEl.current.id}`,
             styles,
         });
-    }, [stytchClient]);
+    }, [stytchClient, config, styles, callbacks]);
+    return React.createElement("div", { ref: containerEl });
+};
+/**
+ * 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
+ * TODO
+ */
+const StytchPasswordReset = ({ config, styles, callbacks, passwordResetToken }) => {
+    invariant(useIsMounted__INTERNAL(), noProviderError('<StytchResetPassword />'));
+    const stytchClient = useStytch();
+    const containerEl = useRef(null);
+    useLayoutEffect(() => {
+        if (!isUIClient(stytchClient)) {
+            throw Error(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.createElement("div", { ref: containerEl });
 };
 
-export { StytchLogin, StytchProvider, useStytch, useStytchSession, useStytchUser, withStytch, withStytchSession, withStytchUser };
+export { StytchLogin, StytchPasswordReset, StytchProvider, useStytch, useStytchSession, useStytchUser, withStytch, withStytchSession, withStytchUser };

package/dist/index.js

@@ -211,23 +211,60 @@ const StytchLogin = ({ config, styles, callbacks }) => {
         if (!containerEl.current) {
             return;
         }
-        if (containerEl.current.id) {
-            return;
+        if (!containerEl.current.id) {
+            const randId = Math.floor(Math.random() * 1e6);
+            containerEl.current.id = `stytch-magic-link-${randId}`;
         }
-        const randId = Math.floor(Math.random() * 1e6);
-        const elementId = `stytch-magic-link-${randId}`;
-        containerEl.current.id = elementId;
         stytchClient.mountLogin({
             config,
             callbacks,
-            elementId: `#${elementId}`,
+            elementId: `#${containerEl.current.id}`,
             styles,
         });
-    }, [stytchClient]);
+    }, [stytchClient, config, styles, callbacks]);
+    return React__default["default"].createElement("div", { ref: containerEl });
+};
+/**
+ * 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
+ * TODO
+ */
+const StytchPasswordReset = ({ config, styles, callbacks, passwordResetToken }) => {
+    invariant(useIsMounted__INTERNAL(), noProviderError('<StytchResetPassword />'));
+    const stytchClient = useStytch();
+    const containerEl = React.useRef(null);
+    React.useLayoutEffect(() => {
+        if (!isUIClient(stytchClient)) {
+            throw Error(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__default["default"].createElement("div", { ref: containerEl });
 };
 
 exports.StytchLogin = StytchLogin;
+exports.StytchPasswordReset = StytchPasswordReset;
 exports.StytchProvider = StytchProvider;
 exports.useStytch = useStytch;
 exports.useStytchSession = useStytchSession;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stytch/react",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "Stytch's official React Library",
   "main": "./dist/index.js",
   "module": "./dist/index.esm.js",
@@ -12,7 +12,7 @@
     "build": "npm run clean && npm run compile",
     "clean": "rm -rf ./dist",
     "compile": "rollup -c",
-    "dev": "tsc -p tsconfig.build.json --watch",
+    "dev": "rollup -c -w",
     "test": "jest"
   },
   "license": "MIT",
@@ -31,14 +31,14 @@
   ],
   "devDependencies": {
     "@babel/runtime": "^7.18.6",
-    "@stytch/vanilla-js": "0.1.0",
-    "eslint-config-custom": "0.0.0",
+    "@stytch/vanilla-js": "workspace:*",
+    "eslint-config-custom": "workspace:*",
     "rollup": "^2.56.3",
     "typescript": "4.7.4"
   },
   "peerDependencies": {
-    "@stytch/vanilla-js": "^0.1.0",
+    "@stytch/vanilla-js": "^0.2.0",
     "react": ">= 17.0.2",
     "react-dom": ">= 17.0.2"
   }
-}
+}