stack-auth · N2D4 · Nov 6, 2025 · Oct 25, 2025 · Oct 25, 2025 · Oct 25, 2025
diff --git a/apps/dashboard/.eslintrc.cjs b/apps/dashboard/.eslintrc.cjs
@@ -8,7 +8,11 @@ module.exports = {
     "no-restricted-imports": [
       "error",
       {
+        paths: [
+          ...defaults.rules["no-restricted-imports"][1].paths ?? [],
+        ],
         patterns: [
+          ...defaults.rules["no-restricted-imports"][1].patterns ?? [],
           {
             group: ["next/navigation", "next/router"],
             importNames: ["useRouter"],

diff --git a/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/(overview)/globe.tsx b/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/(overview)/globe.tsx
@@ -1,10 +1,11 @@
 import { useThemeWatcher } from '@/lib/theme';
 import useResizeObserver from '@react-hook/resize-observer';
 import { useUser } from '@stackframe/stack';
+import { use } from '@stackframe/stack-shared/dist/utils/react';
 import { getFlagEmoji } from '@stackframe/stack-shared/dist/utils/unicode';
 import { Typography } from '@stackframe/stack-ui';
 import dynamic from 'next/dynamic';
-import { RefObject, use, useEffect, useId, useLayoutEffect, useRef, useState } from 'react';
+import { RefObject, useEffect, useId, useLayoutEffect, useRef, useState } from 'react';
 import { GlobeMethods } from 'react-globe.gl';
 
 export const globeImages = {

diff --git a/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/(overview)/setup-page.tsx b/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/(overview)/setup-page.tsx
@@ -5,12 +5,13 @@ import { APIEnvKeys, NextJsEnvKeys } from '@/components/env-keys';
 import { InlineCode } from '@/components/inline-code';
 import { StyledLink } from '@/components/link';
 import { useThemeWatcher } from '@/lib/theme';
+import { use } from "@stackframe/stack-shared/dist/utils/react";
 import { deindent } from '@stackframe/stack-shared/dist/utils/strings';
 import { Button, Tabs, TabsContent, TabsList, TabsTrigger, Typography, cn } from "@stackframe/stack-ui";
 import { Book, X } from "lucide-react";
 import dynamic from "next/dynamic";
 import Image from 'next/image';
-import { Suspense, use, useRef, useState } from "react";
+import { Suspense, useRef, useState } from "react";
 import type { GlobeMethods } from 'react-globe.gl';
 import { PageLayout } from "../page-layout";
 import { useAdminApp } from '../use-admin-app';

diff --git a/apps/dev-launchpad/public/index.html b/apps/dev-launchpad/public/index.html
@@ -311,11 +311,19 @@ <h2 style="margin-top: 64px;">Background services</h2>
         {
           name: "Convex example",
           portSuffix: "27",
-          importance: 2,
+          importance: 0,
           description: [
             "Convex example",
           ],
         },
+        {
+          name: "Lovable React 18 example",
+          portSuffix: "32",
+          importance: 0,
+          description: [
+            "Lovable React 18 example",
+          ],
+        },
       ];
 
       const appsContainers = document.querySelectorAll(".apps-container");

diff --git a/configs/eslint/defaults.js b/configs/eslint/defaults.js
@@ -107,6 +107,10 @@ module.exports = {
         selector: "CallExpression > MemberExpression[property.name='$transaction']",
         message: "Calling .$transaction is disallowed. Use retryTransaction() instead.",
       },
+      {
+        selector: "ImportDeclaration[source.value='react'] ImportSpecifier[imported.name='use']",
+        message: "Use `use` from @stack-shared/dist/utils/react instead (as it also supports React 18).",
+      },
     ],
     "@typescript-eslint/no-misused-promises": [
       "error",
@@ -119,14 +123,6 @@ module.exports = {
     "no-restricted-imports": [
       "error",
       {
-        patterns: [
-          {
-            group: ["react"],
-            importNames: ["use"],
-            message:
-              'Directly importing "use" from react will cause next.js middlewares to break on compile time. do import React from "react" and use React.use instead.',
-          },
-        ],
         patterns: [
           {
             group: ["@vercel/functions"],

diff --git a/examples/lovable-react-18-example/.env.development b/examples/lovable-react-18-example/.env.development
@@ -0,0 +1,6 @@
+# Contains the credentials for the internal project of Stack's default development environment setup.
+# Do not use in a production environment, instead replace it with actual values gathered from https://app.stack-auth.com.
+
+VITE_STACK_API_URL=http://localhost:${NEXT_PUBLIC_STACK_PORT_PREFIX:-81}02
+VITE_STACK_PROJECT_ID=internal
+VITE_STACK_PUBLISHABLE_CLIENT_KEY=this-publishable-client-key-is-for-local-development-only
diff --git a/examples/lovable-react-18-example/.gitignore b/examples/lovable-react-18-example/.gitignore
@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/examples/lovable-react-18-example/.mcp.json b/examples/lovable-react-18-example/.mcp.json
@@ -0,0 +1,8 @@
+{
+  "mcpServers": {
+    "stack-auth": {
+      "type": "http",
+      "url": "https://mcp.stack-auth.com/"
+    }
+  }
+}
diff --git a/examples/lovable-react-18-example/README.md b/examples/lovable-react-18-example/README.md
@@ -0,0 +1,73 @@
+# Welcome to your Lovable project
+
+## Project info
+
+**URL**: https://lovable.dev/projects/216a06f3-619b-4a7a-848e-54b52396418a
+
+## How can I edit this code?
+
+There are several ways of editing your application.
+
+**Use Lovable**
+
+Simply visit the [Lovable Project](https://lovable.dev/projects/216a06f3-619b-4a7a-848e-54b52396418a) and start prompting.
+
+Changes made via Lovable will be committed automatically to this repo.
+
+**Use your preferred IDE**
+
+If you want to work locally using your own IDE, you can clone this repo and push changes. Pushed changes will also be reflected in Lovable.
+
+The only requirement is having Node.js & npm installed - [install with nvm](https://github.com/nvm-sh/nvm#installing-and-updating)
+
+Follow these steps:
+
+```sh
+# Step 1: Clone the repository using the project's Git URL.
+git clone <YOUR_GIT_URL>
+
+# Step 2: Navigate to the project directory.
+cd <YOUR_PROJECT_NAME>
+
+# Step 3: Install the necessary dependencies.
+npm i
+
+# Step 4: Start the development server with auto-reloading and an instant preview.
+npm run dev
+```
+
+**Edit a file directly in GitHub**
+
+- Navigate to the desired file(s).
+- Click the "Edit" button (pencil icon) at the top right of the file view.
+- Make your changes and commit the changes.
+
+**Use GitHub Codespaces**
+
+- Navigate to the main page of your repository.
+- Click on the "Code" button (green button) near the top right.
+- Select the "Codespaces" tab.
+- Click on "New codespace" to launch a new Codespace environment.
+- Edit files directly within the Codespace and commit and push your changes once you're done.
+
+## What technologies are used for this project?
+
+This project is built with:
+
+- Vite
+- TypeScript
+- React
+- shadcn-ui
+- Tailwind CSS
+
+## How can I deploy this project?
+
+Simply open [Lovable](https://lovable.dev/projects/216a06f3-619b-4a7a-848e-54b52396418a) and click on Share -> Publish.
+
+## Can I connect a custom domain to my Lovable project?
+
+Yes, you can!
+
+To connect a domain, navigate to Project > Settings > Domains and click Connect Domain.
+
+Read more here: [Setting up a custom domain](https://docs.lovable.dev/features/custom-domain#custom-domain)
diff --git a/examples/lovable-react-18-example/components.json b/examples/lovable-react-18-example/components.json
@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "default",
+  "rsc": false,
+  "tsx": true,
+  "tailwind": {
+    "config": "tailwind.config.ts",
+    "css": "src/index.css",
+    "baseColor": "slate",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  }
+}
diff --git a/examples/lovable-react-18-example/index.html b/examples/lovable-react-18-example/index.html
@@ -0,0 +1,24 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Build Something Extraordinary</title>
+    <meta name="description" content="Transform your ideas into reality with cutting-edge technology and innovative solutions" />
+    <meta name="author" content="Lovable" />
+
+    <meta property="og:title" content="216a06f3-619b-4a7a-848e-54b52396418a" />
+    <meta property="og:description" content="Lovable Generated Project" />
+    <meta property="og:type" content="website" />
+    <meta property="og:image" content="https://lovable.dev/opengraph-image-p98pqg.png" />
+
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta name="twitter:site" content="@lovable_dev" />
+    <meta name="twitter:image" content="https://lovable.dev/opengraph-image-p98pqg.png" />
+  </head>
+
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
diff --git a/examples/lovable-react-18-example/package.json b/examples/lovable-react-18-example/package.json
@@ -0,0 +1,85 @@
+{
+  "name": "@stackframe/lovable-react-18-example",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "build:dev": "vite build --mode development",
+    "lint": "echo 'No linting for this example'",
+    "preview": "vite preview",
+    "clean": "rimraf dist && rimraf node_modules"
-    "clean": "rimraf dist && rimraf node_modules"
+   "devDependencies": {
+     "@eslint/js": "^9.32.0",
+     "@tailwindcss/typography": "^0.5.16",
+     "@types/node": "^22.16.5",
+     "@types/react": "^18.3.23",
+     "@types/react-dom": "^18.3.7",
+     "@vitejs/plugin-react": "^4.3.4",
+     "autoprefixer": "^10.4.21",
+     "eslint": "^9.32.0",
+     "eslint-plugin-react-hooks": "^5.2.0",
+     "eslint-plugin-react-refresh": "^0.4.20",
+     "globals": "^15.15.0",
+     "lovable-tagger": "^1.1.11",
+     "postcss": "^8.5.6",
+     "rimraf": "^6.0.1",
+     "tailwindcss": "^3.4.17",
+     "typescript": "^5.8.3",
+     "typescript-eslint": "^8.38.0",
+     "vite": "^5.4.19"
+   }
-    "clean": "rimraf dist && rimraf node_modules"
+   "devDependencies": {
+     "@eslint/js": "^9.32.0",
+     "@tailwindcss/typography": "^0.5.16",
+     "@types/node": "^22.16.5",
+     "@types/react": "^18.3.23",
+     "@types/react-dom": "^18.3.7",
+     "@vitejs/plugin-react": "^4.3.4",
+     "autoprefixer": "^10.4.21",
+     "eslint": "^9.32.0",
+     "eslint-plugin-react-hooks": "^5.2.0",
+     "eslint-plugin-react-refresh": "^0.4.20",
+     "globals": "^15.15.0",
+     "lovable-tagger": "^1.1.11",
+     "postcss": "^8.5.6",
+     "rimraf": "^6.0.1",
+     "tailwindcss": "^3.4.17",
+     "typescript": "^5.8.3",
+     "typescript-eslint": "^8.38.0",
+     "vite": "^5.4.19"
+   }
+  },
+  "dependencies": {
+    "@hookform/resolvers": "^3.10.0",
+    "@radix-ui/react-accordion": "^1.2.11",
+    "@radix-ui/react-alert-dialog": "^1.1.14",
+    "@radix-ui/react-aspect-ratio": "^1.1.7",
+    "@radix-ui/react-avatar": "^1.1.10",
+    "@radix-ui/react-checkbox": "^1.3.2",
+    "@radix-ui/react-collapsible": "^1.1.11",
+    "@radix-ui/react-context-menu": "^2.2.15",
+    "@radix-ui/react-dialog": "^1.1.14",
+    "@radix-ui/react-dropdown-menu": "^2.1.15",
+    "@radix-ui/react-hover-card": "^1.1.14",
+    "@radix-ui/react-label": "^2.1.7",
+    "@radix-ui/react-menubar": "^1.1.15",
+    "@radix-ui/react-navigation-menu": "^1.2.13",
+    "@radix-ui/react-popover": "^1.1.14",
+    "@radix-ui/react-progress": "^1.1.7",
+    "@radix-ui/react-radio-group": "^1.3.7",
+    "@radix-ui/react-scroll-area": "^1.2.9",
+    "@radix-ui/react-select": "^2.2.5",
+    "@radix-ui/react-separator": "^1.1.7",
+    "@radix-ui/react-slider": "^1.3.5",
+    "@radix-ui/react-slot": "^1.2.3",
+    "@radix-ui/react-switch": "^1.2.5",
+    "@radix-ui/react-tabs": "^1.1.12",
+    "@radix-ui/react-toast": "^1.2.14",
+    "@radix-ui/react-toggle": "^1.1.9",
+    "@radix-ui/react-toggle-group": "^1.1.10",
+    "@radix-ui/react-tooltip": "^1.2.7",
+    "@tanstack/react-query": "^5.83.0",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "cmdk": "^1.1.1",
+    "date-fns": "^3.6.0",
+    "embla-carousel-react": "^8.6.0",
+    "input-otp": "^1.4.2",
+    "lucide-react": "^0.462.0",
+    "next-themes": "^0.3.0",
+    "react": "^18.3.1",
+    "react-day-picker": "^8.10.1",
+    "react-dom": "^18.3.1",
+    "react-hook-form": "^7.61.1",
+    "react-resizable-panels": "^2.1.9",
+    "react-router-dom": "^6.30.1",
+    "recharts": "^2.15.4",
+    "sonner": "^1.7.4",
+    "tailwind-merge": "^2.6.0",
+    "tailwindcss-animate": "^1.0.7",
+    "vaul": "^0.9.9",
+    "zod": "^3.25.76",
+    "@stackframe/react": "workspace:*"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.32.0",
+    "@tailwindcss/typography": "^0.5.16",
+    "@types/node": "^22.16.5",
+    "@types/react": "^18.3.23",
+    "@types/react-dom": "^18.3.7",
+    "@vitejs/plugin-react": "^4.3.4",
+    "autoprefixer": "^10.4.21",
+    "eslint": "^9.32.0",
+    "eslint-plugin-react-hooks": "^5.2.0",
+    "eslint-plugin-react-refresh": "^0.4.20",
+    "globals": "^15.15.0",
+    "lovable-tagger": "^1.1.11",
+    "postcss": "^8.5.6",
+    "tailwindcss": "^3.4.17",
+    "typescript": "^5.8.3",
+    "typescript-eslint": "^8.38.0",
+    "vite": "^5.4.19"
+  }
+}
diff --git a/examples/lovable-react-18-example/postcss.config.js b/examples/lovable-react-18-example/postcss.config.js
@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};
diff --git a/examples/lovable-react-18-example/public/favicon.ico b/examples/lovable-react-18-example/public/favicon.ico
diff --git a/examples/lovable-react-18-example/public/placeholder.svg b/examples/lovable-react-18-example/public/placeholder.svg
diff --git a/examples/lovable-react-18-example/public/robots.txt b/examples/lovable-react-18-example/public/robots.txt
@@ -0,0 +1,14 @@
+User-agent: Googlebot
+Allow: /
+
+User-agent: Bingbot
+Allow: /
+
+User-agent: Twitterbot
+Allow: /
+
+User-agent: facebookexternalhit
+Allow: /
+
+User-agent: *
+Allow: /