mui · bharatkashyap · Nov 22, 2024 · Nov 18, 2024 · Nov 18, 2024 · Nov 18, 2024
diff --git a/examples/core/auth-nextjs-email/README.md b/examples/core/auth-nextjs-email/README.md
@@ -4,7 +4,33 @@ This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next
 
 ## Getting Started
 
-First, run the development server:
+1. You need to have a Postgres database running. You can use the following docker command to start a Postgres database:
+
+```bash
+docker run --name postgres -e POSTGRES_PASSWORD=postgres -p 5432:5432 -d postgres
+```
+
+2. For the database created above, the connection string is `postgresql://postgres:postgres@localhost:5432/postgres`.
+
+3. Update the `DATABASE_URL` environment variable in the `.env` file with the connection string for the database you created above.
+
+4. Then, generate the Prisma Client:
+
+```bash
+npx prisma migrate dev --schema=./src/prisma/schema.prisma
+```
+
+5. You also need to supply the following enviroment variables for the email server to work:
+
+```bash
+EMAIL_SERVER_HOST=
+EMAIL_SERVER_PORT=
+EMAIL_SERVER_USER=
+EMAIL_SERVER_PASSWORD=
+EMAIL_FROM=
+```
+
+6. Finally, run the development server:
 
 ```bash
 npm run dev
@@ -16,7 +42,17 @@ pnpm dev
 bun dev
 ```
 
-Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+7. Open [http://localhost:3000](http://localhost:3000) with your browser to see the app running.
+
+## Clone using `create-toolpad-app`
+
+To copy this example and customize it for your needs, run
+
+```bash
+npx create-toolpad-app@latest --example auth-nextjs-email
+```
+
+and follow the instructions in the terminal.
 
 ## Learn More
 

diff --git a/examples/core/auth-nextjs-email/package.json b/examples/core/auth-nextjs-email/package.json
@@ -1,6 +1,6 @@
 {
   "name": "playground-nextjs-email",
-  "version": "0.5.2",
+  "version": "0.1.0",
   "private": true,
   "scripts": {
     "dev": "next dev",
@@ -14,10 +14,9 @@
     "@mui/material-nextjs": "^6",
     "@toolpad/core": "latest",
     "@prisma/client": "^5",
-    "prisma": "^5",
     "@auth/prisma-adapter": "^2",
-    "next": "^14",
-    "next-auth": "5.0.0-beta.20",
+    "next": "^15",
+    "next-auth": "5.0.0-beta.25",
     "nodemailer": "^6",
     "react": "^18",
     "react-dom": "^18"
@@ -28,6 +27,7 @@
     "@types/react": "^18",
     "@types/react-dom": "^18",
     "eslint": "^8",
-    "eslint-config-next": "^14"
+    "prisma": "^5",
+    "eslint-config-next": "^15"
   }
 }
diff --git a/examples/core/auth-nextjs-email/src/app/(dashboard)/orders/page.tsx b/examples/core/auth-nextjs-email/src/app/(dashboard)/orders/page.tsx
@@ -6,7 +6,8 @@ import { auth } from '../../../auth';
 
 export default async function OrdersPage() {
   const session = await auth();
-  const currentUrl = headers().get('referer') || 'http://localhost:3000';
+  const currentUrl =
+    (await headers()).get('referer') || process.env.AUTH_URL || 'http://localhost:3000';
 
   if (!session) {
     // Get the current URL to redirect to signIn with `callbackUrl`

diff --git a/examples/core/auth-nextjs-email/src/app/(dashboard)/page.tsx b/examples/core/auth-nextjs-email/src/app/(dashboard)/page.tsx
@@ -6,7 +6,8 @@ import { auth } from '../../auth';
 
 export default async function HomePage() {
   const session = await auth();
-  const currentUrl = headers().get('referer') || 'http://localhost:3000';
+  const currentUrl =
+    (await headers()).get('referer') || process.env.AUTH_URL || 'http://localhost:3000';
 
   if (!session) {
     // Get the current URL to redirect to signIn with `callbackUrl`

diff --git a/examples/core/auth-nextjs-pages-nextauth-4/README.md b/examples/core/auth-nextjs-pages-nextauth-4/README.md
@@ -18,6 +18,16 @@ bun dev
 
 Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
 
+## Clone using `create-toolpad-app`
+
+To copy this example and customize it for your needs, run
+
+```bash
+npx create-toolpad-app@latest --example auth-nextjs-pages-nextauth-4
+```
+
+and follow the instructions in the terminal.
+
 ## Learn More
 
 To learn more about Next.js, take a look at the following resources:

diff --git a/examples/core/auth-nextjs-pages-nextauth-4/package.json b/examples/core/auth-nextjs-pages-nextauth-4/package.json
@@ -14,8 +14,8 @@
     "@mui/material": "^6",
     "@mui/material-nextjs": "^6",
     "@toolpad/core": "latest",
-    "next": "^14",
-    "next-auth": "^4.24.7",
+    "next": "^15",
+    "next-auth": "^4.24.10",
     "react": "^18",
     "react-dom": "^18"
   },
@@ -25,6 +25,6 @@
     "@types/react": "^18",
     "@types/react-dom": "^18",
     "eslint": "^8",
-    "eslint-config-next": "^14"
+    "eslint-config-next": "^15"
   }
 }
diff --git a/examples/core/auth-nextjs-pages/README.md b/examples/core/auth-nextjs-pages/README.md
@@ -40,6 +40,16 @@ bun dev
 
 Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
 
+## Clone using `create-toolpad-app`
+
+To copy this example and customize it for your needs, run
+
+```bash
+npx create-toolpad-app@latest --example auth-nextjs-pages
+```
+
+and follow the instructions in the terminal.
+
 ## Learn More
 
 To learn more about Next.js, take a look at the following resources:

diff --git a/examples/core/auth-nextjs-pages/next.config.mjs b/examples/core/auth-nextjs-pages/next.config.mjs
@@ -1,6 +1,7 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   reactStrictMode: true,
+  transpilePackages: ['next-auth'],
 };
 
 export default nextConfig;
diff --git a/examples/core/auth-nextjs-pages/package.json b/examples/core/auth-nextjs-pages/package.json
@@ -14,8 +14,8 @@
     "@mui/material": "^6",
     "@mui/material-nextjs": "^6",
     "@toolpad/core": "latest",
-    "next": "^14",
-    "next-auth": "5.0.0-beta.20",
+    "next": "^15",
+    "next-auth": "5.0.0-beta.25",
     "react": "^18",
     "react-dom": "^18"
   },
@@ -25,6 +25,6 @@
     "@types/react": "^18",
     "@types/react-dom": "^18",
     "eslint": "^8",
-    "eslint-config-next": "^14"
+    "eslint-config-next": "^15"
   }
 }
diff --git a/examples/core/auth-nextjs-passkey/README.md b/examples/core/auth-nextjs-passkey/README.md
@@ -17,7 +17,7 @@ docker run --name postgres -e POSTGRES_PASSWORD=postgres -p 5432:5432 -d postgre
 4. Then, generate the Prisma Client:
 
 ```bash
-npx prisma generate --schema=./src/prisma/schema.prisma
+npx prisma migrate dev --schema=./src/prisma/schema.prisma
 ```
 
 5. Finally, run the development server:
@@ -34,6 +34,16 @@ bun dev
 
 6. Open [http://localhost:3000](http://localhost:3000) with your browser to see the app running.
 
+## Clone using `create-toolpad-app`
+
+To copy this example and customize it for your needs, run
+
+```bash
+npx create-toolpad-app@latest --example auth-nextjs-passkey
+```
+
+and follow the instructions in the terminal.
+
 ## Learn More
 
 To learn more about Next.js, take a look at the following resources:

diff --git a/examples/core/auth-nextjs-passkey/package.json b/examples/core/auth-nextjs-passkey/package.json
@@ -6,27 +6,26 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "@auth/prisma-adapter": "2.4.2",
-    "@emotion/react": "11.13.3",
-    "@emotion/styled": "11.13.0",
-    "@mui/icons-material": "6.0.2",
-    "@mui/lab": "6.0.0-beta.9",
-    "@mui/material": "6.0.2",
-    "@mui/material-nextjs": "6.0.2",
-    "@prisma/client": "5.19.1",
-    "@simplewebauthn/browser": "9.0.1",
-    "@simplewebauthn/server": "9.0.3",
+    "@auth/prisma-adapter": "^2",
+    "@emotion/react": "^11",
+    "@emotion/styled": "^11",
+    "@mui/icons-material": "^6",
+    "@mui/material": "^6",
+    "@mui/material-nextjs": "^6",
+    "@prisma/client": "^5",
+    "@simplewebauthn/browser": "^9",
+    "@simplewebauthn/server": "^9",
     "@toolpad/core": "latest",
-    "next": "^14",
-    "next-auth": "5.0.0-beta.20",
-    "react": "18.3.1",
-    "react-dom": "18.3.1"
+    "next": "^15",
+    "next-auth": "5.0.0-beta.25",
+    "react": "^18",
+    "react-dom": "^18"
   },
   "devDependencies": {
-    "@types/node": "22.5.1",
-    "@types/react": "18.3.5",
-    "@types/react-dom": "18.3.0",
-    "eslint-config-next": "^14",
-    "prisma": "5.19.1"
+    "@types/node": "^22",
+    "@types/react": "^18",
+    "prisma": "^5",
+    "@types/react-dom": "^18",
+    "eslint-config-next": "^15"
   }
 }
diff --git a/examples/core/auth-nextjs-passkey/src/app/(dashboard)/orders/page.tsx b/examples/core/auth-nextjs-passkey/src/app/(dashboard)/orders/page.tsx
@@ -7,7 +7,8 @@ import { auth } from '../../../auth';
 
 export default async function OrdersPage() {
   const session = await auth();
-  const currentUrl = headers().get('referer') || 'http://localhost:3000';
+  const currentUrl =
+    (await headers()).get('referer') || process.env.AUTH_URL || 'http://localhost:3000';
 
   if (!session) {
     // Get the current URL to redirect to signIn with `callbackUrl`

diff --git a/examples/core/auth-nextjs-passkey/src/app/(dashboard)/page.tsx b/examples/core/auth-nextjs-passkey/src/app/(dashboard)/page.tsx
@@ -7,7 +7,8 @@ import { auth } from '../../auth';
 
 export default async function HomePage() {
   const session = await auth();
-  const currentUrl = headers().get('referer') || 'http://localhost:3000';
+  const currentUrl =
+    (await headers()).get('referer') || process.env.AUTH_URL || 'http://localhost:3000';
 
   if (!session) {
     // Get the current URL to redirect to signIn with `callbackUrl`
@@ -27,7 +28,7 @@ export default async function HomePage() {
         textAlign: 'center',
       }}
     >
-      <Typography sx={{ mb: 2 }}>Welcome to Toolpad, {session?.user?.name || 'User'}!</Typography>
+      <Typography sx={{ mb: 2 }}>Welcome to Toolpad, {session?.user?.email || 'User'}!</Typography>
     </Box>
   );
 }
diff --git a/examples/core/auth-nextjs-passkey/src/auth.ts b/examples/core/auth-nextjs-passkey/src/auth.ts
@@ -26,7 +26,6 @@ export const { handlers, auth, signIn, signOut } = NextAuth({
   pages: {
     signIn: '/auth/signin',
   },
-  debug: true,
   callbacks: {
     authorized({ auth: session, request: { nextUrl } }) {
       const isLoggedIn = !!session?.user;

diff --git a/examples/core/auth-nextjs-themed/package.json b/examples/core/auth-nextjs-themed/package.json
@@ -21,8 +21,8 @@
     "clsx": "^2",
     "@react-spring/web": "^9",
     "@toolpad/core": "latest",
-    "next": "^14",
-    "next-auth": "^5.0.0-beta.20",
+    "next": "^15",
+    "next-auth": "^5.0.0-beta.25",
     "react": "^18",
     "react-dom": "^18"
   },
@@ -31,7 +31,7 @@
     "@types/react": "^18",
     "@types/react-dom": "^18",
     "eslint": "^8",
-    "eslint-config-next": "^14",
+    "eslint-config-next": "^15",
     "typescript": "^5"
   }
 }
diff --git a/examples/core/auth-nextjs/README.md b/examples/core/auth-nextjs/README.md
@@ -40,6 +40,16 @@ npx auth secret
 
 To get the required credentials from GitHub, we need to create an application in their developer settings. Read this [detailed guide on Auth.js](https://authjs.dev/guides/configuring-github) on how to obtain those.
 
+## Clone using `create-toolpad-app`
+
+To copy this example and customize it for your needs, run
+
+```bash
+npx create-toolpad-app@latest --example auth-nextjs
+```
+
+and follow the instructions in the terminal.
+
 ## Learn More
 
 To learn more about Next.js, take a look at the following resources:

diff --git a/examples/core/auth-nextjs/package.json b/examples/core/auth-nextjs/package.json
@@ -12,8 +12,8 @@
     "@mui/material": "^6",
     "@mui/material-nextjs": "^6",
     "@toolpad/core": "latest",
-    "next": "^14",
-    "next-auth": "5.0.0-beta.20",
+    "next": "^15",
+    "next-auth": "5.0.0-beta.25",
     "react": "^18",
     "react-dom": "^18"
   },
@@ -23,6 +23,6 @@
     "@types/react": "^18",
     "@types/react-dom": "^18",
     "eslint": "^8",
-    "eslint-config-next": "^14"
+    "eslint-config-next": "^15"
   }
 }
diff --git a/examples/core/tutorial/package.json b/examples/core/tutorial/package.json
@@ -10,7 +10,7 @@
   "dependencies": {
     "react": "^18",
     "react-dom": "^18",
-    "next": "^14",
+    "next": "^15",
     "@toolpad/core": "latest",
     "@mui/material": "^6",
     "@mui/material-nextjs": "^6",
@@ -24,6 +24,6 @@
     "@types/react": "^18",
     "@types/react-dom": "^18",
     "eslint": "^8",
-    "eslint-config-next": "^14"
+    "eslint-config-next": "^15"
   }
 }
diff --git a/package.json b/package.json
@@ -89,7 +89,7 @@
     "eslint-plugin-mocha": "10.5.0",
     "eslint-plugin-react": "7.37.2",
     "eslint-plugin-react-compiler": "latest",
-    "eslint-plugin-react-hooks": "4.6.2",
+    "eslint-plugin-react-hooks": "5.0.0",
     "eslint-plugin-testing-library": "^6.4.0",
     "eslint-plugin-typescript-enum": "2.1.0",
     "execa": "9.5.1",

diff --git a/packages/create-toolpad-app/src/generateProject.ts b/packages/create-toolpad-app/src/generateProject.ts
@@ -41,7 +41,7 @@ export default function generateProject(
   const files = new Map<string, { content: string }>([
     ['theme.ts', { content: theme }],
     ['next-env.d.ts', { content: nextTypes }],
-    ['next.config.mjs', { content: nextConfig }],
+    ['next.config.mjs', { content: nextConfig(options) }],
     ['.eslintrc.json', { content: eslintConfig }],
     ['tsconfig.json', { content: tsConfig }],
     ['README.md', { content: readme }],

diff --git a/packages/create-toolpad-app/src/templates/nextConfig.ts b/packages/create-toolpad-app/src/templates/nextConfig.ts
@@ -1,7 +1,11 @@
-const nextConfig = `
+import { Template } from '../types';
+
+const nextConfig: Template = (options) => `
   /** @type {import('next').NextConfig} */
-  const nextConfig = {};
+  const nextConfig = {
+    ${options.router === 'nextjs-pages' ? 'transpilePackages: ["next-auth"],' : ''}
+  };
   export default nextConfig;
-  `;
+`;
 
 export default nextConfig;