@stytch/nextjs 0.1.0 → 0.2.0

package/README.md

@@ -63,3 +63,98 @@ 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 NextJS bindings - [@stytch/nextjs](https://www.npmjs.com/package/@stytch/nextjs)
+
+```shell
+# NPM
+npm install @stytch/vanilla-js @stytch/nextjs
+# Yarn
+yarn add @stytch/vanilla-js @stytch/nextjs
+```
+
+### Step 2: Remove the old SDK
+
+- Remove the `@stytch/stytch-react` package
+- If you are explicitly loading the `stytch.js` script via a blocking `beforeInteractive` tag 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 Stytch client in `_app.js`
+
+- 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 `createStytchHeadlessClient` from `@stytch/nextjs/headless`
+- To create the Stytch UI client, use `createStytchUIClient` from `@stytch/nextjs/ui`
+- Pass it into `<StytchProvider />` component from `@stytch/nextjs`
+
+```jsx
+import React from 'react';
+import { StytchProvider } from '@stytch/nextjs';
+import { createStytchHeadlessClient } from '@stytch/nextjs/headless';
+// Or alternately
+// import { createStytchUIClient } from '@stytch/nextjs/ui';
+
+const stytch = createStytchHeadlessClient(process.env.NEXT_PUBLIC_STYTCH_PUBLIC_TOKEN);
+
+function MyApp({ Component, pageProps }) {
+  return (
+    <StytchProvider stytch={stytch}>
+      <Component {...pageProps} />
+    </StytchProvider>
+  );
+}
+
+export default MyApp;
+```
+
+### Step 4: Update calls to `useStytchUser` , `useStytchSession`, and `useStytchLazy`
+
+- `useStytchUser` and `useStytchSession` hooks now return envelope objects - `{ user, isInitialized, isCached }` and `{ session, isInitialized, isCached }` respectively.
+  - In SSR/SSG contexts, as well as the first clientside render, `user`/`session` will be null and `isInitialized` will be false
+  - The SDK will read `user`/`session` out of persistent storage, and rerender with `isCached: true` - at this point you’re reading the [stale-while-revalidating](https://swr.vercel.app/) 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 { useRouter } from 'next/router';
+import { useStytchUser } from '@stytch/nextjs';
+
+export default function Profile() {
+  const router = useRouter();
+  const { user, isInitialized } = useStytchUser();
+
+  useEffect(() => {
+    if (isInitialized && user === null) {
+      router.push('/login');
+    }
+  }, [user, isInitialized]);
+
+  return (
+    <Layout>
+      <h1>Your 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.esm.js

@@ -221,19 +221,17 @@ 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 });
 };
 

package/dist/index.js

@@ -229,19 +229,17 @@ 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 });
 };
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stytch/nextjs",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "Stytch's official Next.js Library",
   "main": "./dist/index.js",
   "module": "./dist/index.esm.js",
@@ -21,13 +21,13 @@
   "author": "Stytch",
   "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"
   },
@@ -43,4 +43,4 @@
     "jwt",
     "user"
   ]
-}
+}