@clerk/upgrade 0.2.0 → 0.3.0

package/dist/guide-generators/v5-guides/nextjs/import-changes.mdx

@@ -0,0 +1,98 @@
+## Changes to top-level exports
+
+As part of this release, some of the top-level exports of `@clerk/nextjs` have been changed in order to improve bundle size and tree-shaking efficiency. These changes have resulted in a ~75% reduction in build size for middleware bundles. However, you will likely need to make some changes to import paths as a result.
+
+<Callout type='info'>
+  Use the CLI tool, `npx @clerk/upgrade`, to automatically find occurences of old imports.
+</Callout>
+
+<Accordion titles={["@clerk/nextjs/server", "@clerk/nextjs/errors", "@clerk/nextjs/app-beta", "@clerk/nextjs/ssr", "@clerk/nextjs/edge-middleware", "@clerk/nextjs/edge-middlewarefiles", "@clerk/nextjs/api"]} heading="h4">
+  <AccordionPanel>
+    Previously these exports have been exported both from `@clerk/nextjs` and `@clerk/nextjs/server`. As of v5 they are only exported from the latter.
+
+    ```diff
+      import {
+        auth,
+        currentUser,
+        authMiddleware,
+        buildClerkProps,
+        verifyToken,
+        verifyJwt,
+        decodeJwt,
+        signJwt,
+        constants,
+        redirect,
+        createAuthenticateRequest,
+        createIsomorphicRequest,
+    - } from "@clerk/nextjs"
+    + } from "@clerk/nextjs/server"
+    ```
+
+  </AccordionPanel>
+  <AccordionPanel>
+    Exports related to errors are now under `@clerk/nextjs/errors`.
+
+    ```diff
+      import {
+        isClerkAPIResponseError,
+        isEmailLinkError,
+        isKnownError,
+        isMetamaskError,
+        EmailLinkErrorCode,
+    - } from "@clerk/nextjs"
+    + } from "@clerk/nextjs/errors"
+    ```
+
+  </AccordionPanel>
+  <AccordionPanel>
+    The `@clerk/nextjs` import will work with both the app and pages router.
+
+    ```diff
+    - import { } from "@clerk/nextjs/app-beta"
+    + import { } from "@clerk/nextjs"
+    ```
+
+    Some behavior may have changed between Clerk's beta and the stable release. Please check on your end if behavior stayed the same.
+
+  </AccordionPanel>
+  <AccordionPanel>
+    The top-level exports support SSR by default now.
+
+    ```diff
+    - import { } from "@clerk/nextjs/ssr"
+    + import { } from "@clerk/nextjs"
+    ```
+
+  </AccordionPanel>
+  <AccordionPanel>
+    ```diff
+    - import { } from "@clerk/nextjs/edge-middleware"
+    + import { } from "@clerk/nextjs"
+    ```
+  </AccordionPanel>
+  <AccordionPanel>
+    ```diff
+    - import { } from "@clerk/nextjs/edge-middlewarefiles"
+    + import { } from "@clerk/nextjs"
+    ```
+  </AccordionPanel>
+  <AccordionPanel>
+    The `@clerk/nextjs/api` subpath was removed completely. It re-exported helpers from `@clerk/clerk-sdk-node` and its types. If you relied on these, import from `@clerk/clerk-sdk-node` directly instead.
+
+    ```diff
+      import type {
+        ClerkMiddleware,
+        ClerkMiddlewareOptions,
+        LooseAuthProp,
+        RequireAuthProp,
+        StrictAuthProp,
+        WithAuthProp
+    - } from "@clerk/nextjs/api"
+    + } from "@clerk/clerk-sdk-node"
+
+    - import { requireAuth, withAuth } from "@clerk/nextjs/api"
+    + import { requireAuth, withAuth } from "@clerk/clerk-sdk-node"
+    ```
+
+  </AccordionPanel>
+</Accordion>

package/dist/guide-generators/v5-guides/nextjs/index.js

@@ -0,0 +1,80 @@
+import { readFileSync } from 'fs';
+import { parseInline } from 'marked';
+import path from 'path';
+import { fileURLToPath } from 'url';
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+const VERSION = 'v5';
+async function generate() {
+  const data = (await import(`../../versions/${VERSION}/index.js`)).default['nextjs'];
+  let output = '';
+  output += `---
+title: Upgrading Next.js from v4 to v5
+description: Learn how to upgrade Clerk's Next.js SDK from v4 to v5.
+---`;
+  output += '\n\n';
+  output += read('intro');
+  output += '\n';
+  output += read('version-requirements');
+
+  // This is a guide-specific item, no matcher for this
+  const defaultsChangeItem = {
+    title: 'Changes to default variables',
+    content: `\nThe default values of some [appearance variables](/docs/components/customization/variables) have changed which may impact your UI (if you are not already overriding them).
+
+    - The default \`colorPrimary\` value changed from \`#103FEF\` to \`#2F3037\`. As the new color is a dark grey, the \`colorPrimary\` of the dark theme was changed to \`#FFFFFF\`.
+    - The default \`fontSize\` value changed from \`1rem\` to \`0.8125rem\`
+    - The default \`fontWeight\` values changed from \`{ normal: 400, medium: 500, bold: 600 }\` to \`{ normal: 400, medium: 500, bold: 700 }\`
+    - Previously, the default value for \`fontSmoothing\` was \`auto\`. This value is now unset. If you want to pass a custom value to it, you can still do so.\n`
+  };
+  output += '\n';
+  output += read('retheme-changes');
+  const apperanceChanges = data.filter(i => i.category === 'appearance');
+  apperanceChanges.push(defaultsChangeItem);
+  const localizationChanges = data.filter(i => i.category === 'localization');
+  output += '\n';
+  output += '### Appearance changes';
+  output += '\n\n';
+  output += `<Accordion titles={[${apperanceChanges.map(i => `"${parseInline(i.title)}"`).join(', ')}]}>`;
+  output += '\n';
+  output += apperanceChanges.map(i => `<AccordionPanel>${i.content}</AccordionPanel>`).join('\n');
+  output += '</Accordion>';
+  output += '\n\n';
+  output += '### Localization changes';
+  output += '\n\n';
+  output += `<Accordion titles={[${localizationChanges.map(i => `"${parseInline(i.title)}"`).join(', ')}]}>`;
+  output += '\n';
+  output += localizationChanges.map(i => `<AccordionPanel>${i.content}</AccordionPanel>`).join('\n');
+  output += '</Accordion>';
+  output += '\n\n';
+  output += read('middleware-changes');
+  output += '\n\n';
+  output += read('import-changes');
+  output += '\n';
+  output += read('after-sign-x-handling');
+  output += '\n';
+  output += read('deprecation-removals');
+  const deprecationRemovals = data.filter(i => i.category === 'deprecation-removal');
+  const otherChanges = data.filter(i => !i.category);
+  output += '### Deprecation removals';
+  output += '\n\n';
+  output += `<Accordion titles={[${deprecationRemovals.map(i => `"${parseInline(i.title)}"`).join(', ')}]}>`;
+  output += '\n';
+  output += deprecationRemovals.map(i => `<AccordionPanel>${i.content}</AccordionPanel>`).join('\n');
+  output += '</Accordion>';
+  output += '\n\n';
+  output += '### Other breaking changes';
+  output += '\n\n';
+  output += `<Accordion titles={[${otherChanges.map(i => `"${parseInline(i.title)}"`).join(', ')}]}>`;
+  output += '\n';
+  output += otherChanges.map(i => `<AccordionPanel>${i.content}</AccordionPanel>`).join('\n');
+  output += '</Accordion>';
+  output += '\n\n';
+
+  // TODO: deal with HOF removals
+
+  return output;
+}
+generate().then(console.log);
+function read(p) {
+  return readFileSync(path.join(__dirname, p + '.mdx'), 'utf8');
+}

package/dist/guide-generators/v5-guides/nextjs/intro.mdx

@@ -0,0 +1,21 @@
+# Upgrading Next.js from v4 to v5
+
+By the end of this guide, you’ll have successfully upgraded your Next.js project to use `@clerk/nextjs` v5. You’ll learn how to update your dependencies, resolve breaking changes, and find deprecations.
+
+Step-by-step instructions will lead you through the process. If you’re looking for a reference list of changes, check out the general [upgrading from v4 to v5 guide](/docs/upgrade-guides/upgrading-from-v4-to-v5).
+
+To aid you in this upgrade, Clerk built a CLI called [`@clerk/upgrade`](https://www.npmjs.com/package/@clerk/upgrade). Throughout this guide you'll see prompts to use the CLI which you can invoke directly in your terminal.
+
+<CodeBlockTabs type="installer" options={["npm", "yarn", "pnpm"]}>
+```bash filename="terminal"
+npx @clerk/upgrade
+```
+
+```bash filename="terminal"
+yarn dlx @clerk/upgrade
+```
+
+```bash filename="terminal"
+pnpm dlx @clerk/upgrade
+```
+</CodeBlockTabs>

package/dist/guide-generators/v5-guides/nextjs/middleware-changes.mdx

@@ -0,0 +1,251 @@
+## New Middleware architecture
+
+User and customer feedback about `authMiddleware()` has been clear in that Middleware logic was a often friction point. As such, in v5 you will find a completely new Middleware helper called [`clerkMiddleware()`](/docs/references/nextjs/clerk-middleware) that will hopefully alleviate all of the issues folks had with `authMiddleware()`.
+
+Additionally, there are now new helpers that enable controlling auth on a _per-page and/or per-layout basis_ when using App Router. While you can still configure which routes are protected via Middleware, the page-based protection strategy is what is now recommended, as the co-location of auth protection configuration with the code for the pages themselves results in a superior developer experience that adds clarity as you navigate your codebase.
+
+### Per-route auth config
+
+Sometimes, code speaks louder than words. Let's get right into an example:
+
+<Tabs type="auth-protect-layout-page" items={["Layout", "Page"]}>
+<Tab>
+```ts filename="app/src/dashboard/layout.tsx"
+import { auth } from '@clerk/nextjs/server'
+
+export default async function DashboardLayout({ children }) {
+    auth().protect();
+    // 👆 This one line is all it takes - the layout and all its children
+    // will now redirect to your sign in page for un-authenticated users.
+
+    return <>{children}</>
+
+}
+
+````
+</Tab>
+<Tab>
+```ts filename="app/src/dashboard/page.tsx"
+import { auth } from '@clerk/nextjs/server'
+
+export default async function DashboardPage() {
+    auth().protect();
+    // 👆 This one line is all it takes - the layout and all its children
+    // will now redirect to your sign in page for un-authenticated users.
+
+    return <p>This page is now protected!</p>
+}
+````
+
+</Tab>
+</Tabs>
+
+In this example, we add `auth().protect()` to a layout, and like magic, that layout and all of it's children will be gated by auth. The same logic can be applied for pages.
+
+Want to get more specific with permission gating? Add the role you are gating as a param:
+
+```ts filename="app/src/admin/layout.tsx"
+import { auth } from '@clerk/nextjs/server';
+
+export default async function AdminLayout({ children }) {
+  auth().protect({ role: 'org:admin' });
+
+  return <>{children}</>;
+}
+```
+
+Note that in order for this to work, you will still need Middleware to be present, but it only requires the most minimal configuration:
+
+```ts filename="middleware.ts"
+import { clerkMiddleware } from '@clerk/nextjs/server';
+
+export default clerkMiddleware();
+
+export const config = {
+  matcher: ['/((?!.*\\..*|_next).*)', '/', '/(api|trpc)(.*)'],
+};
+```
+
+If you are using the pages router, per-route gating won't work. Instead, configure your auth gating via Middleware as described in the next section.
+
+### Middleware auth config
+
+If you prefer to define your auth logic within the Middleware, you can still do this using the new `clerkMiddleware`. The primary change from the previous `authMiddleware()` is that `clerkMiddleware()` does not protect any routes by default, instead requiring the developer to add routes they would like to be protected by auth. This is a substantial contrast to the previous `authMiddleware()`, which protected all routes by default, requiring the developer to add exceptions. The API was also substantially simplified, and it has become easier to combine with other Middleware helpers smoothly as well.
+
+Here's an example that replicates the auth protection scheme above, but entirely inside the Middleware:
+
+```ts filename="middleware.ts"
+import { clerkMiddleware, createRouteMatcher } from '@clerk/nextjs/server';
+
+const isDashboardRoute = createRouteMatcher(['/dashboard(.*)']);
+const isAdminRoute = createRouteMatcher(['/admin']);
+
+export default clerkMiddleware((auth, req) => {
+  // Restrict admin route to users with specific role
+  if (isAdminRoute(req)) auth().protect({ role: 'org:admin' });
+
+  // Restrict dashboard routes to logged in users
+  if (isDashboardRoute(req)) auth().protect();
+});
+
+export const config = {
+  matcher: ['/((?!.*\\..*|_next).*)', '/', '/(api|trpc)(.*)'],
+};
+```
+
+A couple things to note here:
+
+- The `createRouteMatcher` helper makes it easy to define route groups that you can leverage inside the Middleware function and check in whichever order you'd like. Note that it can take an array of routes as well.
+- With `clerkMiddleware`, you're defining the routes you want **to be protected**, rather than the routes you don't want to be protected.
+- You are able to use the same `auth().protect()` helpers that you can use within layouts/pages here in the Middleware.
+
+### Migrating to `clerkMiddleware()`
+
+Clerk strongly recommends migrating to the new `clerkMiddleware()` for an improved DX and access to all present and upcoming features, but also want to note that `authMiddleware()`, while deprecated, will continue to work in v5 and will not be removed until the next major version, so you do not _need_ to make any changes to your Middleware setup this version.
+
+The most basic migration will be updating the import and changing out the default export.
+
+```diff
+- import { authMiddleware } from "@clerk/nextjs"
++ import { clerkMiddleware } from '@clerk/nextjs/server'
+
+- export default authMiddleware()
++ export default clerkMiddleware()
+
+  export const config = {
+    matcher: ["/((?!.*\\..*|_next).*)", "/", "/(api|trpc)(.*)"],
+  }
+```
+
+Of course, in most cases you'll have a more complicated setup than this. You can find some examples below for how to migrate a few common use cases. Be sure to review the [`clerkMiddleware()` documentation](/docs/references/nextjs/clerk-middleware) and [route protection guide](/docs/references/nextjs/route-protection) if your specific use case is not mentioned.
+
+<Accordion titles={["Making the index page public", "Protecting a single route path", "Combining with other Middlewares (like i18n)"]} heading="h4">
+  <AccordionPanel>
+    By default, `clerkMiddleware()` treats all pages as public, so you no longer need to explcitly set `/` as public.
+
+    Before:
+
+    ```ts filename="middleware.ts"
+    import { authMiddleware } from "@clerk/nextjs"
+
+    export default authMiddleware({
+      publicRoutes: ["/"],
+    })
+
+    export const config = {
+      matcher: ["/((?!.+\\.[\\w]+$|_next).*)", "/", "/(api|trpc)(.*)"],
+    }
+    ```
+
+    After:
+
+    ```ts filename="middleware.ts"
+    import {
+      clerkMiddleware,
+      createRouteMatcher
+    } from "@clerk/nextjs/server"
+
+    export default clerkMiddleware()
+
+    export const config = {
+      matcher: ["/((?!.+\\.[\\w]+$|_next).*)", "/", "/(api|trpc)(.*)"],
+    }
+    ```
+
+  </AccordionPanel>
+  <AccordionPanel>
+    Having all routes public except everything under `/dashboard`.
+
+    Before:
+
+    ```ts filename="middleware.ts"
+    import { authMiddleware } from "@clerk/nextjs"
+
+    export default authMiddleware({
+      publicRoutes: (req) => !req.url.includes("/dashboard"),
+    })
+
+    export const config = {
+      matcher: ["/((?!.+\\.[\\w]+$|_next).*)", "/", "/(api|trpc)(.*)"],
+    }
+    ```
+
+    After:
+
+    ```ts filename="middleware.ts"
+    import {
+      clerkMiddleware,
+      createRouteMatcher
+    } from "@clerk/nextjs/server"
+
+    const isDashboardRoute = createRouteMatcher(["/dashboard(.*)"])
+
+    export default clerkMiddleware((auth, request) => {
+      if (isDashboardRoute(request)) {
+        auth().protect()
+      }
+    })
+
+    export const config = {
+      matcher: ["/((?!.+\\.[\\w]+$|_next).*)", "/", "/(api|trpc)(.*)"],
+    }
+    ```
+
+  </AccordionPanel>
+  <AccordionPanel>
+    You can call other Middlewares inside `clerkMiddleware()`, giving you more direct control over what is called where. An example would be [next-intl](https://next-intl-docs.vercel.app/) to add internationalization to your app.
+
+    Before:
+
+    ```ts filename="middleware.ts"
+    import { authMiddleware } from "@clerk/nextjs"
+    import createMiddleware from "next-intl/middleware"
+
+    const intlMiddleware = createMiddleware({
+      locales: ["en", "de"],
+      defaultLocale: "en",
+    })
+
+    export default authMiddleware({
+      beforeAuth: (req) => {
+        return intlMiddleware(req);
+      },
+      publicRoutes: ["((?!^/dashboard/).*)"],
+    })
+
+    export const config = {
+      matcher: ["/((?!.+\\.[\\w]+$|_next).*)", "/", "/(api|trpc)(.*)"],
+    }
+    ```
+
+    After:
+
+    ```ts filename="middleware.ts"
+    import {
+      clerkMiddleware,
+      createRouteMatcher
+    } from "@clerk/nextjs/server"
+    import createMiddleware from "next-intl/middleware"
+
+    const intlMiddleware = createMiddleware({
+      locales: ["en", "de"],
+      defaultLocale: "en",
+    })
+
+    const isDashboardRoute = createRouteMatcher(["/dashboard(.*)"])
+
+    export default clerkMiddleware((auth, request) => {
+      if (isDashboardRoute(request)) {
+        auth().protect()
+      }
+
+      return intlMiddleware(request)
+    })
+
+    export const config = {
+      matcher: ["/((?!.+\\.[\\w]+$|_next).*)", "/", "/(api|trpc)(.*)"],
+    }
+    ```
+
+  </AccordionPanel>
+</Accordion>

package/dist/guide-generators/v5-guides/nextjs/retheme-changes.mdx

@@ -0,0 +1,10 @@
+## Redesigned components
+
+The new version ships with improved design and UX across all of Clerk's [UI components](/docs/components/overview). If you have used the [`appearance` prop](/docs/components/customization/overview) or tokens for a [custom theme](/docs/components/customization/overview#create-a-custom-theme), you will likely need to make some adjustments to ensure your styling is still looking great. If you're using the [localization prop](/docs/components/customization/localization) you will likely need to make adjustments to account for added or removed localization keys.
+
+<Callout type='info'>
+  If you are not customizing the appearance of your components, or using `localization`, you can skip this section. Otherwise, it's recommended to use our CLI (`npx @clerk/upgrade`) to scan for changes required as part of the component
+  redesign more quickly.
+</Callout>
+
+The sections below contain more info on each change made to the customization ids and localization keys for reference. Regardless of how thoroughly you have reviewed the following information, you should still take some time to manually look through each of your views to ensure that everything looks good.

package/dist/guide-generators/v5-guides/nextjs/version-requirements.mdx

@@ -0,0 +1,34 @@
+## Minimum version requirements
+
+We have updated some of our minumum version requirements for Node.js, React, and Next.js such that versions that are no longer supported or are at end-of-life are no longer guaranteed to work correctly with Clerk. Please take a moment to check your dependencies and ensure you are up to date!
+
+**Updating Node.js**
+
+You need to have Node.js `18.17.0` or later installed. Last year, Node.js 16 entered EOL (End of life) status so it's time to bump the required version for `@clerk/nextjs`, too. You can check your Node.js version by running `node -v` in your terminal. Learn more about how to [update and install Node.js](https://nodejs.org/en/learn/getting-started/how-to-install-nodejs).
+
+**Updating React**
+
+`@clerk/nextjs` now requires you to use React 18 or higher. You can update your project by installing the latest version of `react` and `react-dom`.
+
+<CodeBlockTabs type="installer" options={["npm", "yarn", "pnpm"]}>
+    ```bash filename="terminal"
+    npm install react@latest react-dom@latest
+    ```
+
+    ```bash filename="terminal"
+    yarn add react@latest react-dom@latest
+    ```
+
+    ```bash filename="terminal"
+    pnpm add react@latest react-dom@latest
+    ```
+</CodeBlockTabs>
+
+If you are upgrading from React 17 or lower, make sure to [learn about how to upgrade your React version to 18](https://react.dev/blog/2022/03/08/react-18-upgrade-guide) as well.
+
+**Updating Next.js**
+
+`@clerk/nextjs` now requires you to use Next.js version `13.0.4` or later. Check out Next's upgrade guides for more guidance if you have not yet upgraded to Next.js 13:
+
+- [Upgrading from 12 to 13](https://nextjs.org/docs/pages/building-your-application/upgrading/version-13)
+- [Upgrading from 13 to 14](https://nextjs.org/docs/app/building-your-application/upgrading/version-14)

package/dist/guide-generators/v5-guides/node-setters-removals.mdx

@@ -0,0 +1,34 @@
+### Clerk client setters removed in favor of `createClerkClient` options
+
+The following setter methods have been removed in the lastest version. If you were using any of these functions, their functionality can be replaced by instead passing the correponding option to `createClerkClient`.
+
+- `setClerkApiVersion`
+- `setClerkHttpOptions`
+- `setClerkServerApiUrl`
+- `setClerkApiKey`
+
+Code example:
+
+```diff
+  import {
+     clerkClient,
+-    setClerkApiKey,
+-    setClerkApiVersion,
+-    setClerkHttpOptions,
+-    setClerkServerApiUrl
+} from "@clerk/clerk-sdk-node"
+ 
+- setClerkApiKey("...")
+- setClerkApiVersion("...")
+- setClerkHttpOptions("...")
+- setClerkServerApiUrl("...")
+
+  const clerkClient = createClerkClient({
++     secretKey: "..."
++     apiVersion: "..."
++     httpOptions: "..."
++     serverApiUrl: "..."
+  })
+
+  await clerkClient.users.getUser(userId);
+```

package/dist/guide-generators/v5-guides/pagination-args.mdx

@@ -0,0 +1,3 @@
+#### Changes to pagination arguments for some functions
+
+There were some changes made to pagination-related arguments passed into functions, in order to make it more clear how to control paginated results. See each function impacted by these changes below:

package/dist/guide-generators/v5-guides/pagination-return.mdx

@@ -0,0 +1,3 @@
+#### Changes to some function return signatures
+
+There have been changes to return signatures for some functions. Since Clerk's API responses are paginated, the `totalCount` property is helpful in determining the total number of items in the response easily. This change also aligns the response shape with what is returned from the Clerk backend API. Each impacted function is listed below, along with code examples:

package/dist/guide-generators/v5-guides/path-routing.mdx

@@ -0,0 +1,50 @@
+### Path routing is now the default
+
+On components like [`<SignIn />`](/docs/components/authentication/sign-in) you can define the props `routing` and `path`. `routing` can be set to `'hash' | 'path' | 'virtual'` and describes the routing strategy that should be used. `path` defines where the component is mounted when `routing="path"` is used.
+
+In the latest version, the **default** `routing` strategy has become `'path'`. Unless you change the `routing` prop, you'll need to define the `path` prop. The affected components are:
+
+- `<SignIn />`
+- `<SignUp />`
+- `<UserProfile />`
+- `<CreateOrganization />`
+- `<OrganizationProfile />`
+
+Here's how you'd use the components going forward:
+
+```jsx
+<SignIn path="/sign-in" />
+<SignUp path="/sign-up" />
+<UserProfile path="/user-profile" />
+<CreateOrganization path="/create-org" />
+<OrganizationProfile path="/org-profile" />
+```
+
+If you don't define the `path` prop an error will be thrown. Of course, you can still use `routing="hash"` or `routing="virtual"`.
+
+```jsx
+<UserProfile routing="hash" />
+<OrganizationProfile routing="virtual" />
+```
+
+However, there are two exceptions to this behavior. If you're using `@clerk/nextjs` or `@clerk/remix`, you can set environment variables for `<SignIn />` and `<SignUp />`.
+
+<CodeBlockTabs options={["Next.js", "Remix"]}>
+```env filename=".env.local"
+NEXT_PUBLIC_CLERK_SIGN_IN_URL=/sign-in
+NEXT_PUBLIC_CLERK_SIGN_UP_URL=/sign-up
+```
+
+```env filename=".env"
+CLERK_SIGN_IN_URL=/sign-in
+CLERK_SIGN_UP_URL=/sign-up
+```
+</CodeBlockTabs>
+
+**Only** if you're using one of these two frameworks and defined both environment variables, you're able to use the `<SignIn />` and `<SignUp />` components without any props.
+
+```jsx
+// Only works for Next.js / Remix when environment variables are set
+<SignIn />
+<SignUp />
+```

package/dist/guide-generators/v5-guides/per-sdk.mdx

@@ -0,0 +1,16 @@
+## SDK Guides
+
+Select the SDK(s) you are using for your project from the list below to read through a summary of all the breaking changes:
+
+> Note: I want a prettier selection component here, in it's absence for now there's a list
+
+- [Next.js](upgrading-nextjs-from-v4-to-v5)
+- [Remix](#remix)
+- [Expo](#expo)
+- [Gatsby](#gatsby)
+- [Backend](#backend)
+- [Node](#node)
+- [Fastify](#fastify)
+- [React](#react)
+- [JS](#js)
+- [Chrome Extension](#chrome-extension)