From 14a11375d7e40b11e5611e33ba293376221f92c5 Mon Sep 17 00:00:00 2001 From: Bharat Kashyap Date: Thu, 22 Aug 2024 18:07:33 +0530 Subject: [PATCH 1/7] docs: Add `next-auth` v4 example --- .../components/sign-in-page/sign-in-page.md | 6 +- .../.eslintrc.json | 3 + .../README.md | 34 ++++++ .../next-env.d.ts | 5 + .../next.config.mjs | 6 + .../package.json | 24 ++++ .../src/pages/_app.tsx | 107 ++++++++++++++++++ .../src/pages/_document.tsx | 27 +++++ .../src/pages/api/auth/[...nextauth].ts | 17 +++ .../src/pages/auth/signin.tsx | 96 ++++++++++++++++ .../src/pages/index.tsx | 22 ++++ .../src/pages/orders/index.tsx | 22 ++++ .../tsconfig.json | 23 ++++ pnpm-lock.yaml | 98 +++++++++++++++- 14 files changed, 487 insertions(+), 3 deletions(-) create mode 100644 examples/core-auth-nextjs-pages-nextauth-4/.eslintrc.json create mode 100644 examples/core-auth-nextjs-pages-nextauth-4/README.md create mode 100644 examples/core-auth-nextjs-pages-nextauth-4/next-env.d.ts create mode 100644 examples/core-auth-nextjs-pages-nextauth-4/next.config.mjs create mode 100644 examples/core-auth-nextjs-pages-nextauth-4/package.json create mode 100644 examples/core-auth-nextjs-pages-nextauth-4/src/pages/_app.tsx create mode 100644 examples/core-auth-nextjs-pages-nextauth-4/src/pages/_document.tsx create mode 100644 examples/core-auth-nextjs-pages-nextauth-4/src/pages/api/auth/[...nextauth].ts create mode 100644 examples/core-auth-nextjs-pages-nextauth-4/src/pages/auth/signin.tsx create mode 100644 examples/core-auth-nextjs-pages-nextauth-4/src/pages/index.tsx create mode 100644 examples/core-auth-nextjs-pages-nextauth-4/src/pages/orders/index.tsx create mode 100644 examples/core-auth-nextjs-pages-nextauth-4/tsconfig.json diff --git a/docs/data/toolpad/core/components/sign-in-page/sign-in-page.md b/docs/data/toolpad/core/components/sign-in-page/sign-in-page.md index 7e53c9ffebc..0e864fde194 100644 --- a/docs/data/toolpad/core/components/sign-in-page/sign-in-page.md +++ b/docs/data/toolpad/core/components/sign-in-page/sign-in-page.md @@ -126,8 +126,12 @@ export default function SignIn() { } ``` +:::success +If you're using the default [Next.js example](https://github.com/mui/mui-toolpad/tree/master/examples/core-auth-nextjs/), all of this is already configured for you. Otherwise, follow the [custom sign-in page instructions](https://authjs.dev/guides/pages/signin). +::: + :::info -If you're using the default [Next.js app directory example](https://github.com/mui/mui-toolpad/tree/master/examples/core-auth-nextjs/), all of this is already configured for you. Otherwise, follow the [custom sign-in page instructions](https://authjs.dev/guides/pages/signin). +If you're not on the Next Auth v5 version yet, see the [example with Next Auth v4](https://github.com/mui/mui-toolpad/tree/master/examples/core-auth-nextjs-pages-nextauth-4/) to get started. ::: ## Customization diff --git a/examples/core-auth-nextjs-pages-nextauth-4/.eslintrc.json b/examples/core-auth-nextjs-pages-nextauth-4/.eslintrc.json new file mode 100644 index 00000000000..bffb357a712 --- /dev/null +++ b/examples/core-auth-nextjs-pages-nextauth-4/.eslintrc.json @@ -0,0 +1,3 @@ +{ + "extends": "next/core-web-vitals" +} diff --git a/examples/core-auth-nextjs-pages-nextauth-4/README.md b/examples/core-auth-nextjs-pages-nextauth-4/README.md new file mode 100644 index 00000000000..713d86babaf --- /dev/null +++ b/examples/core-auth-nextjs-pages-nextauth-4/README.md @@ -0,0 +1,34 @@ +# Toolpad Core Playground - Next.js Pages Router with Next Auth 4 + +This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app). + +## Getting Started + +First, run the development server: + +```bash +npm run dev +# or +yarn dev +# or +pnpm dev +# or +bun dev +``` + +Open [http://localhost:3000](http://localhost:3000) with your browser to see the result. + +## Learn More + +To learn more about Next.js, take a look at the following resources: + +- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API. +- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial. + +You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome! + +## Deploy on Vercel + +The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js. + +Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details. diff --git a/examples/core-auth-nextjs-pages-nextauth-4/next-env.d.ts b/examples/core-auth-nextjs-pages-nextauth-4/next-env.d.ts new file mode 100644 index 00000000000..4f11a03dc6c --- /dev/null +++ b/examples/core-auth-nextjs-pages-nextauth-4/next-env.d.ts @@ -0,0 +1,5 @@ +/// +/// + +// NOTE: This file should not be edited +// see https://nextjs.org/docs/basic-features/typescript for more information. diff --git a/examples/core-auth-nextjs-pages-nextauth-4/next.config.mjs b/examples/core-auth-nextjs-pages-nextauth-4/next.config.mjs new file mode 100644 index 00000000000..d5456a15d4a --- /dev/null +++ b/examples/core-auth-nextjs-pages-nextauth-4/next.config.mjs @@ -0,0 +1,6 @@ +/** @type {import('next').NextConfig} */ +const nextConfig = { + reactStrictMode: true, +}; + +export default nextConfig; diff --git a/examples/core-auth-nextjs-pages-nextauth-4/package.json b/examples/core-auth-nextjs-pages-nextauth-4/package.json new file mode 100644 index 00000000000..57c59dcff8e --- /dev/null +++ b/examples/core-auth-nextjs-pages-nextauth-4/package.json @@ -0,0 +1,24 @@ +{ + "name": "playground-nextjs-pages-nextauth-4", + "version": "0.5.1", + "private": true, + "scripts": { + "dev": "next dev", + "lint": "next lint" + }, + "devDependencies": { + "@emotion/react": "11.13.0", + "@emotion/styled": "11.13.0", + "@mui/icons-material": "5.16.7", + "@mui/material": "5.16.7", + "@mui/material-nextjs": "5.16.6", + "@toolpad/core": "workspace:*", + "@types/react": "18.3.3", + "@types/react-dom": "18.3.0", + "eslint-config-next": "14.2.5", + "next": "14.2.5", + "next-auth": "^4.0.0", + "react": "18.3.1", + "react-dom": "18.3.1" + } +} diff --git a/examples/core-auth-nextjs-pages-nextauth-4/src/pages/_app.tsx b/examples/core-auth-nextjs-pages-nextauth-4/src/pages/_app.tsx new file mode 100644 index 00000000000..0172f8d5d33 --- /dev/null +++ b/examples/core-auth-nextjs-pages-nextauth-4/src/pages/_app.tsx @@ -0,0 +1,107 @@ +import * as React from 'react'; +import { AppProvider } from '@toolpad/core/nextjs'; +import { DashboardLayout } from '@toolpad/core/DashboardLayout'; +import Head from 'next/head'; +import { useRouter } from 'next/router'; +import { AppCacheProvider } from '@mui/material-nextjs/v14-pagesRouter'; +import DashboardIcon from '@mui/icons-material/Dashboard'; +import ShoppingCartIcon from '@mui/icons-material/ShoppingCart'; +import type { NextPage } from 'next'; +import type { AppProps } from 'next/app'; +import type { Navigation } from '@toolpad/core'; +import { SessionProvider, signIn, signOut, useSession } from 'next-auth/react'; +import LinearProgress from '@mui/material/LinearProgress'; + +export type NextPageWithLayout

= NextPage & { + getLayout?: (page: React.ReactElement) => React.ReactNode; + requireAuth?: boolean; +}; + +type AppPropsWithLayout = AppProps & { + Component: NextPageWithLayout; +}; + +const NAVIGATION: Navigation = [ + { + kind: 'header', + title: 'Main items', + }, + { + title: 'Dashboard', + icon: , + }, + { + segment: 'orders', + title: 'Orders', + icon: , + }, +]; + +const BRANDING = { + title: 'My Toolpad Core App', +}; + +const AUTHENTICATION = { + signIn, + signOut, +}; + +function getDefaultLayout(page: React.ReactElement) { + return {page}; +} + +function RequireAuth({ children }: { children: React.ReactNode }) { + const { status } = useSession(); + const router = useRouter(); + + if (status === 'loading') { + return ; + } + + if (status === 'unauthenticated') { + router.push('/auth/signin'); + } + + return children; +} + +function AppLayout({ children }: { children: React.ReactNode }) { + const { data: session } = useSession(); + return ( + + + + + + {children} + + + ); +} + +export default function App(props: AppPropsWithLayout) { + const { + Component, + pageProps: { session, ...pageProps }, + } = props; + + const getLayout = Component.getLayout ?? getDefaultLayout; + const requireAuth = Component.requireAuth ?? true; + + let pageContent = getLayout(); + if (requireAuth) { + pageContent = {pageContent}; + } + pageContent = {pageContent}; + + return ( + + {pageContent} + + ); +} diff --git a/examples/core-auth-nextjs-pages-nextauth-4/src/pages/_document.tsx b/examples/core-auth-nextjs-pages-nextauth-4/src/pages/_document.tsx new file mode 100644 index 00000000000..89e61aa4167 --- /dev/null +++ b/examples/core-auth-nextjs-pages-nextauth-4/src/pages/_document.tsx @@ -0,0 +1,27 @@ +import * as React from 'react'; +import { Html, Head, Main, NextScript, DocumentProps, DocumentContext } from 'next/document'; +import { + DocumentHeadTags, + DocumentHeadTagsProps, + documentGetInitialProps, +} from '@mui/material-nextjs/v14-pagesRouter'; + +export default function Document(props: DocumentProps & DocumentHeadTagsProps) { + return ( + + + + + + +

+ + + + ); +} + +Document.getInitialProps = async (ctx: DocumentContext) => { + const finalProps = await documentGetInitialProps(ctx); + return finalProps; +}; diff --git a/examples/core-auth-nextjs-pages-nextauth-4/src/pages/api/auth/[...nextauth].ts b/examples/core-auth-nextjs-pages-nextauth-4/src/pages/api/auth/[...nextauth].ts new file mode 100644 index 00000000000..e46763e118b --- /dev/null +++ b/examples/core-auth-nextjs-pages-nextauth-4/src/pages/api/auth/[...nextauth].ts @@ -0,0 +1,17 @@ +import NextAuth from 'next-auth'; +import GithubProvider from 'next-auth/providers/github'; + +export const authOptions = { + providers: [ + GithubProvider({ + clientId: process.env.GITHUB_CLIENT_ID ?? '', + clientSecret: process.env.GITHUB_CLIENT_SECRET ?? '', + }), + ], + secret: process.env.AUTH_SECRET, + pages: { + signIn: '/auth/signin', + }, +}; + +export default NextAuth(authOptions); diff --git a/examples/core-auth-nextjs-pages-nextauth-4/src/pages/auth/signin.tsx b/examples/core-auth-nextjs-pages-nextauth-4/src/pages/auth/signin.tsx new file mode 100644 index 00000000000..6b7f7102bd1 --- /dev/null +++ b/examples/core-auth-nextjs-pages-nextauth-4/src/pages/auth/signin.tsx @@ -0,0 +1,96 @@ +import * as React from 'react'; +import type { GetServerSidePropsContext, InferGetServerSidePropsType } from 'next'; +import Link from '@mui/material/Link'; +import { SignInPage } from '@toolpad/core/SignInPage'; +import { getProviders, signIn } from 'next-auth/react'; +import { getServerSession } from 'next-auth/next'; +import { useRouter } from 'next/router'; +import type { AuthProvider } from '@toolpad/core'; +import { authOptions } from '../api/auth/[...nextauth]'; + +function ForgotPasswordLink() { + return Forgot password?; +} + +function SignUpLink() { + return Sign up; +} + +export default function SignIn({ + providers, +}: InferGetServerSidePropsType) { + const router = useRouter(); + return ( + { + try { + const signInResponse = await signIn( + provider.id, + formData + ? { + email: formData.get('email') as string, + password: formData.get('password') as string, + redirect: false, + } + : { callbackUrl: callbackUrl ?? '/' }, + ); + if (signInResponse && signInResponse.error) { + // Handle Auth.js errors + return { + error: + signInResponse.error === 'CredentialsSignin' + ? 'Invalid credentials' + : 'An error with Auth.js occurred', + type: signInResponse.error, + }; + } + // If the sign in was successful, + // manually redirect to the callback URL + // since the `redirect: false` option was used + // to be able to display error messages on the same page without a full page reload + if (provider.id === 'credentials') { + router.push(callbackUrl ?? '/'); + } + return {}; + } catch (error) { + // An error boundary must exist to handle unknown errors + return { + error: 'Something went wrong.', + type: 'UnknownError', + }; + } + }} + slots={{ forgotPasswordLink: ForgotPasswordLink, signUpLink: SignUpLink }} + /> + ); +} + +SignIn.getLayout = (page: React.ReactNode) => page; + +SignIn.requireAuth = false; + +export async function getServerSideProps(context: GetServerSidePropsContext) { + const session = await getServerSession(context.req, context.res, authOptions); + + // If the user is already logged in, redirect. + // Note: Make sure not to redirect to the same page + // To avoid an infinite loop! + if (session) { + return { redirect: { destination: '/' } }; + } + + const providers = await getProviders(); + let providerMap: AuthProvider[] = []; + if (providers) { + providerMap = Object.entries(providers).map(([id, provider]) => { + return { id, name: provider.name }; + }); + } + + return { + props: { + providers: providerMap, + }, + }; +} diff --git a/examples/core-auth-nextjs-pages-nextauth-4/src/pages/index.tsx b/examples/core-auth-nextjs-pages-nextauth-4/src/pages/index.tsx new file mode 100644 index 00000000000..ff57b97d844 --- /dev/null +++ b/examples/core-auth-nextjs-pages-nextauth-4/src/pages/index.tsx @@ -0,0 +1,22 @@ +import * as React from 'react'; +import Typography from '@mui/material/Typography'; +import Box from '@mui/material/Box'; + +export default function HomePage() { + return ( + + + Welcome to Toolpad! + + + ); +} diff --git a/examples/core-auth-nextjs-pages-nextauth-4/src/pages/orders/index.tsx b/examples/core-auth-nextjs-pages-nextauth-4/src/pages/orders/index.tsx new file mode 100644 index 00000000000..c63eb5844df --- /dev/null +++ b/examples/core-auth-nextjs-pages-nextauth-4/src/pages/orders/index.tsx @@ -0,0 +1,22 @@ +import * as React from 'react'; +import Typography from '@mui/material/Typography'; +import Box from '@mui/material/Box'; + +export default function OrdersPage() { + return ( + + + Welcome to the Toolpad orders! + + + ); +} diff --git a/examples/core-auth-nextjs-pages-nextauth-4/tsconfig.json b/examples/core-auth-nextjs-pages-nextauth-4/tsconfig.json new file mode 100644 index 00000000000..bb5584ed1a4 --- /dev/null +++ b/examples/core-auth-nextjs-pages-nextauth-4/tsconfig.json @@ -0,0 +1,23 @@ +{ + "compilerOptions": { + "lib": ["dom", "dom.iterable", "esnext"], + "allowJs": true, + "skipLibCheck": true, + "strict": true, + "noEmit": true, + "esModuleInterop": true, + "module": "esnext", + "moduleResolution": "bundler", + "resolveJsonModule": true, + "isolatedModules": true, + "jsx": "preserve", + "incremental": true, + "plugins": [ + { + "name": "next" + } + ] + }, + "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"], + "exclude": ["node_modules"] +} diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 69d9ef3d67b..502b0bbff1f 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -1180,6 +1180,48 @@ importers: specifier: 3.4.3 version: 3.4.3 + playground/nextauth-4/nextjs-pages: + devDependencies: + '@emotion/react': + specifier: 11.13.0 + version: 11.13.0(@types/react@18.3.3)(react@18.3.1) + '@emotion/styled': + specifier: 11.13.0 + version: 11.13.0(@emotion/react@11.13.0(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1) + '@mui/icons-material': + specifier: 5.16.7 + version: 5.16.7(@mui/material@5.16.7(@emotion/react@11.13.0(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.0(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@types/react@18.3.3)(react@18.3.1) + '@mui/material': + specifier: 5.16.7 + version: 5.16.7(@emotion/react@11.13.0(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.0(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + '@mui/material-nextjs': + specifier: 5.16.6 + version: 5.16.6(@emotion/cache@11.13.1)(@emotion/server@11.11.0)(@mui/material@5.16.7(@emotion/react@11.13.0(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.0(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@types/react@18.3.3)(next@14.2.5(@babel/core@7.25.2)(@opentelemetry/api@1.9.0)(@playwright/test@1.45.3)(babel-plugin-macros@3.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react@18.3.1) + '@toolpad/core': + specifier: workspace:* + version: link:../../../packages/toolpad-core/build + '@types/react': + specifier: 18.3.3 + version: 18.3.3 + '@types/react-dom': + specifier: 18.3.0 + version: 18.3.0 + eslint-config-next: + specifier: 14.2.5 + version: 14.2.5(eslint-import-resolver-webpack@0.13.8(eslint-plugin-import@2.29.1)(webpack@5.93.0(esbuild@0.23.1)))(eslint@8.57.0)(typescript@5.5.4) + next: + specifier: 14.2.5 + version: 14.2.5(@babel/core@7.25.2)(@opentelemetry/api@1.9.0)(@playwright/test@1.45.3)(babel-plugin-macros@3.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + next-auth: + specifier: ^4.0.0 + version: 4.24.7(next@14.2.5(@babel/core@7.25.2)(@opentelemetry/api@1.9.0)(@playwright/test@1.45.3)(babel-plugin-macros@3.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + react: + specifier: 18.3.1 + version: 18.3.1 + react-dom: + specifier: 18.3.1 + version: 18.3.1(react@18.3.1) + playground/nextjs: devDependencies: '@emotion/react': @@ -2061,7 +2103,7 @@ packages: resolution: {integrity: sha512-AAH4lEkpmzFWrGVlHaxJB7RLH21uPQ9+He+eFLWHmF9IuFQVugz8eAsamaW0DXRrTfco5zj1wWtpdcXJUOfsag==} engines: {node: '>=6.9.0'} peerDependencies: - '@babel/core': ^7.0.0-0 + '@babel/core': ^7.24.8 '@babel/preset-typescript@7.24.7': resolution: {integrity: sha512-SyXRe3OdWwIwalxDg5UtJnJQO+YPcTfwiIY2B0Xlddh9o7jpWLvv8X1RthIeDOxQ+O1ML5BLPCONToObyVQVuQ==} @@ -2134,7 +2176,7 @@ packages: '@docsearch/react@3.6.0': resolution: {integrity: sha512-HUFut4ztcVNmqy9gp/wxNbC7pTOHhgVVkHVGCACTuLhUKUhKAF9KYHJtMiLUJxEqiFLQiuri1fWF8zqwM/cu1w==} peerDependencies: - '@types/react': '>= 16.8.0 < 19.0.0' + '@types/react': 18.3.3 react: '>= 16.8.0 < 19.0.0' react-dom: '>= 16.8.0 < 19.0.0' search-insights: '>= 1 < 3' @@ -7003,6 +7045,9 @@ packages: resolution: {integrity: sha512-7vuh85V5cdDofPyxn58nrPjBktZo0u9x1g8WtjQol+jZDaE+fhN+cIvTj11GndBnMnyfrUOG1sZQxCdjKh+DKg==} engines: {node: '>= 10.13.0'} + jose@4.15.9: + resolution: {integrity: sha512-1vUQX+IdDMVPj4k8kOxgUqlcK518yluMuGZwqlr44FS1ppZB/5GWh4rZG89erpOBOJjU/OBsnCVFfapsRz6nEA==} + jose@5.6.2: resolution: {integrity: sha512-F1t1/WZJ4JdmCE/XoMYw1dPOW5g8JF0xGm6Ox2fwaCAPlCzt+4Bh0EWP59iQuZNHHauDkCdjx+kCZSh5z/PGow==} @@ -7740,6 +7785,17 @@ packages: nested-error-stacks@2.1.1: resolution: {integrity: sha512-9iN1ka/9zmX1ZvLV9ewJYEk9h7RyRRtqdK0woXcqohu8EWIerfPUjYJPg0ULy0UqP7cslmdGc8xKDJcojlKiaw==} + next-auth@4.24.7: + resolution: {integrity: sha512-iChjE8ov/1K/z98gdKbn2Jw+2vLgJtVV39X+rCP5SGnVQuco7QOr19FRNGMIrD8d3LYhHWV9j9sKLzq1aDWWQQ==} + peerDependencies: + next: ^12.2.5 || ^13 || ^14 + nodemailer: ^6.6.5 + react: ^17.0.2 || ^18 + react-dom: ^17.0.2 || ^18 + peerDependenciesMeta: + nodemailer: + optional: true + next-auth@5.0.0-beta.20: resolution: {integrity: sha512-+48SjV9k9AtUU3JbEIa4PXNjKIewfFjVGL7Xs2RKkuQ5QqegDNIQiIG8sLk6/qo7RTScQYIGKgeQ5IuQRtrTQg==} peerDependencies: @@ -7921,6 +7977,9 @@ packages: oauth4webapi@2.11.1: resolution: {integrity: sha512-aNzOnL98bL6izG97zgnZs1PFEyO4WDVRhz2Pd066NPak44w5ESLRCYmJIyey8avSBPOMtBjhF3ZDDm7bIb7UOg==} + oauth@0.9.15: + resolution: {integrity: sha512-a5ERWK1kh38ExDEfoO6qUHJb32rd7aYmPHuyCu3Fta/cnICvYmgd2uhuKXvPD+PXB+gCEYYEaQdIRAjCOwAKNA==} + object-assign@4.1.1: resolution: {integrity: sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==} engines: {node: '>=0.10.0'} @@ -7971,6 +8030,10 @@ packages: obuf@1.1.2: resolution: {integrity: sha512-PX1wu0AmAdPqOL1mWhqmlOd8kOIZQwGZw6rh7uby9fTc5lhaOWFLX3I6R1hrF9k3zUY40e6igsLGkDXK92LJNg==} + oidc-token-hash@5.0.3: + resolution: {integrity: sha512-IF4PcGgzAr6XXSff26Sk/+P4KZFJVuHAJZj3wgO3vX2bMdNVp/QXTP3P7CEm9V1IdG8lDLY3HhiqpsE/nOwpPw==} + engines: {node: ^10.13.0 || >=12.0.0} + on-finished@2.4.1: resolution: {integrity: sha512-oVlzkg3ENAhCk2zdv7IJwd/QUD4z2RxRwpkcGY8psCVcCYZNq4wYnVWALHM+brtuJjePWiYF/ClmuDr8Ch5+kg==} engines: {node: '>= 0.8'} @@ -8006,6 +8069,9 @@ packages: resolution: {integrity: sha512-ur5UIdyw5Y7yEj9wLzhqXiy6GZ3Mwx0yGI+5sMn2r0N0v3cKJvUmFH5yPP+WXh9e0xfyzyJX95D8l088DNFj7A==} hasBin: true + openid-client@5.6.5: + resolution: {integrity: sha512-5P4qO9nGJzB5PI0LFlhj4Dzg3m4odt0qsJTfyEtZyOlkgpILwEioOhVVJOrS1iVH494S4Ee5OCjjg6Bf5WOj3w==} + oppa@0.4.0: resolution: {integrity: sha512-DFvM3+F+rB/igo3FRnkDWitjZgBH9qZAn68IacYHsqbZBKwuTA+LdD4zSJiQtgQpWq7M08we5FlGAVHz0yW7PQ==} engines: {node: '>=10'} @@ -17052,6 +17118,8 @@ snapshots: merge-stream: 2.0.0 supports-color: 8.1.1 + jose@4.15.9: {} + jose@5.6.2: {} joycon@3.1.1: {} @@ -17904,6 +17972,21 @@ snapshots: nested-error-stacks@2.1.1: {} + next-auth@4.24.7(next@14.2.5(@babel/core@7.25.2)(@opentelemetry/api@1.9.0)(@playwright/test@1.45.3)(babel-plugin-macros@3.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1): + dependencies: + '@babel/runtime': 7.25.0 + '@panva/hkdf': 1.2.0 + cookie: 0.5.0 + jose: 4.15.9 + next: 14.2.5(@babel/core@7.25.2)(@opentelemetry/api@1.9.0)(@playwright/test@1.45.3)(babel-plugin-macros@3.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + oauth: 0.9.15 + openid-client: 5.6.5 + preact: 10.11.3 + preact-render-to-string: 5.2.3(preact@10.11.3) + react: 18.3.1 + react-dom: 18.3.1(react@18.3.1) + uuid: 8.3.2 + next-auth@5.0.0-beta.20(next@14.2.5(@babel/core@7.25.2)(@opentelemetry/api@1.9.0)(@playwright/test@1.45.3)(babel-plugin-macros@3.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react@18.3.1): dependencies: '@auth/core': 0.34.2 @@ -18146,6 +18229,8 @@ snapshots: oauth4webapi@2.11.1: {} + oauth@0.9.15: {} + object-assign@4.1.1: {} object-hash@2.2.0: {} @@ -18205,6 +18290,8 @@ snapshots: obuf@1.1.2: {} + oidc-token-hash@5.0.3: {} + on-finished@2.4.1: dependencies: ee-first: 1.1.1 @@ -18245,6 +18332,13 @@ snapshots: opener@1.5.2: {} + openid-client@5.6.5: + dependencies: + jose: 4.15.9 + lru-cache: 6.0.0 + object-hash: 2.2.0 + oidc-token-hash: 5.0.3 + oppa@0.4.0: dependencies: chalk: 4.1.2 From 248e927f1105c519e6dc6e36bd35bec248a73ac3 Mon Sep 17 00:00:00 2001 From: Bharat Kashyap Date: Thu, 22 Aug 2024 18:12:20 +0530 Subject: [PATCH 2/7] fix: CI --- pnpm-lock.yaml | 94 -------------------------------------------------- 1 file changed, 94 deletions(-) diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 502b0bbff1f..b0151d0a460 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -1180,48 +1180,6 @@ importers: specifier: 3.4.3 version: 3.4.3 - playground/nextauth-4/nextjs-pages: - devDependencies: - '@emotion/react': - specifier: 11.13.0 - version: 11.13.0(@types/react@18.3.3)(react@18.3.1) - '@emotion/styled': - specifier: 11.13.0 - version: 11.13.0(@emotion/react@11.13.0(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1) - '@mui/icons-material': - specifier: 5.16.7 - version: 5.16.7(@mui/material@5.16.7(@emotion/react@11.13.0(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.0(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@types/react@18.3.3)(react@18.3.1) - '@mui/material': - specifier: 5.16.7 - version: 5.16.7(@emotion/react@11.13.0(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.0(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) - '@mui/material-nextjs': - specifier: 5.16.6 - version: 5.16.6(@emotion/cache@11.13.1)(@emotion/server@11.11.0)(@mui/material@5.16.7(@emotion/react@11.13.0(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.0(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@types/react@18.3.3)(next@14.2.5(@babel/core@7.25.2)(@opentelemetry/api@1.9.0)(@playwright/test@1.45.3)(babel-plugin-macros@3.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react@18.3.1) - '@toolpad/core': - specifier: workspace:* - version: link:../../../packages/toolpad-core/build - '@types/react': - specifier: 18.3.3 - version: 18.3.3 - '@types/react-dom': - specifier: 18.3.0 - version: 18.3.0 - eslint-config-next: - specifier: 14.2.5 - version: 14.2.5(eslint-import-resolver-webpack@0.13.8(eslint-plugin-import@2.29.1)(webpack@5.93.0(esbuild@0.23.1)))(eslint@8.57.0)(typescript@5.5.4) - next: - specifier: 14.2.5 - version: 14.2.5(@babel/core@7.25.2)(@opentelemetry/api@1.9.0)(@playwright/test@1.45.3)(babel-plugin-macros@3.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) - next-auth: - specifier: ^4.0.0 - version: 4.24.7(next@14.2.5(@babel/core@7.25.2)(@opentelemetry/api@1.9.0)(@playwright/test@1.45.3)(babel-plugin-macros@3.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1) - react: - specifier: 18.3.1 - version: 18.3.1 - react-dom: - specifier: 18.3.1 - version: 18.3.1(react@18.3.1) - playground/nextjs: devDependencies: '@emotion/react': @@ -7045,9 +7003,6 @@ packages: resolution: {integrity: sha512-7vuh85V5cdDofPyxn58nrPjBktZo0u9x1g8WtjQol+jZDaE+fhN+cIvTj11GndBnMnyfrUOG1sZQxCdjKh+DKg==} engines: {node: '>= 10.13.0'} - jose@4.15.9: - resolution: {integrity: sha512-1vUQX+IdDMVPj4k8kOxgUqlcK518yluMuGZwqlr44FS1ppZB/5GWh4rZG89erpOBOJjU/OBsnCVFfapsRz6nEA==} - jose@5.6.2: resolution: {integrity: sha512-F1t1/WZJ4JdmCE/XoMYw1dPOW5g8JF0xGm6Ox2fwaCAPlCzt+4Bh0EWP59iQuZNHHauDkCdjx+kCZSh5z/PGow==} @@ -7785,17 +7740,6 @@ packages: nested-error-stacks@2.1.1: resolution: {integrity: sha512-9iN1ka/9zmX1ZvLV9ewJYEk9h7RyRRtqdK0woXcqohu8EWIerfPUjYJPg0ULy0UqP7cslmdGc8xKDJcojlKiaw==} - next-auth@4.24.7: - resolution: {integrity: sha512-iChjE8ov/1K/z98gdKbn2Jw+2vLgJtVV39X+rCP5SGnVQuco7QOr19FRNGMIrD8d3LYhHWV9j9sKLzq1aDWWQQ==} - peerDependencies: - next: ^12.2.5 || ^13 || ^14 - nodemailer: ^6.6.5 - react: ^17.0.2 || ^18 - react-dom: ^17.0.2 || ^18 - peerDependenciesMeta: - nodemailer: - optional: true - next-auth@5.0.0-beta.20: resolution: {integrity: sha512-+48SjV9k9AtUU3JbEIa4PXNjKIewfFjVGL7Xs2RKkuQ5QqegDNIQiIG8sLk6/qo7RTScQYIGKgeQ5IuQRtrTQg==} peerDependencies: @@ -7977,9 +7921,6 @@ packages: oauth4webapi@2.11.1: resolution: {integrity: sha512-aNzOnL98bL6izG97zgnZs1PFEyO4WDVRhz2Pd066NPak44w5ESLRCYmJIyey8avSBPOMtBjhF3ZDDm7bIb7UOg==} - oauth@0.9.15: - resolution: {integrity: sha512-a5ERWK1kh38ExDEfoO6qUHJb32rd7aYmPHuyCu3Fta/cnICvYmgd2uhuKXvPD+PXB+gCEYYEaQdIRAjCOwAKNA==} - object-assign@4.1.1: resolution: {integrity: sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==} engines: {node: '>=0.10.0'} @@ -8030,10 +7971,6 @@ packages: obuf@1.1.2: resolution: {integrity: sha512-PX1wu0AmAdPqOL1mWhqmlOd8kOIZQwGZw6rh7uby9fTc5lhaOWFLX3I6R1hrF9k3zUY40e6igsLGkDXK92LJNg==} - oidc-token-hash@5.0.3: - resolution: {integrity: sha512-IF4PcGgzAr6XXSff26Sk/+P4KZFJVuHAJZj3wgO3vX2bMdNVp/QXTP3P7CEm9V1IdG8lDLY3HhiqpsE/nOwpPw==} - engines: {node: ^10.13.0 || >=12.0.0} - on-finished@2.4.1: resolution: {integrity: sha512-oVlzkg3ENAhCk2zdv7IJwd/QUD4z2RxRwpkcGY8psCVcCYZNq4wYnVWALHM+brtuJjePWiYF/ClmuDr8Ch5+kg==} engines: {node: '>= 0.8'} @@ -8069,9 +8006,6 @@ packages: resolution: {integrity: sha512-ur5UIdyw5Y7yEj9wLzhqXiy6GZ3Mwx0yGI+5sMn2r0N0v3cKJvUmFH5yPP+WXh9e0xfyzyJX95D8l088DNFj7A==} hasBin: true - openid-client@5.6.5: - resolution: {integrity: sha512-5P4qO9nGJzB5PI0LFlhj4Dzg3m4odt0qsJTfyEtZyOlkgpILwEioOhVVJOrS1iVH494S4Ee5OCjjg6Bf5WOj3w==} - oppa@0.4.0: resolution: {integrity: sha512-DFvM3+F+rB/igo3FRnkDWitjZgBH9qZAn68IacYHsqbZBKwuTA+LdD4zSJiQtgQpWq7M08we5FlGAVHz0yW7PQ==} engines: {node: '>=10'} @@ -17118,8 +17052,6 @@ snapshots: merge-stream: 2.0.0 supports-color: 8.1.1 - jose@4.15.9: {} - jose@5.6.2: {} joycon@3.1.1: {} @@ -17972,21 +17904,6 @@ snapshots: nested-error-stacks@2.1.1: {} - next-auth@4.24.7(next@14.2.5(@babel/core@7.25.2)(@opentelemetry/api@1.9.0)(@playwright/test@1.45.3)(babel-plugin-macros@3.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1): - dependencies: - '@babel/runtime': 7.25.0 - '@panva/hkdf': 1.2.0 - cookie: 0.5.0 - jose: 4.15.9 - next: 14.2.5(@babel/core@7.25.2)(@opentelemetry/api@1.9.0)(@playwright/test@1.45.3)(babel-plugin-macros@3.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) - oauth: 0.9.15 - openid-client: 5.6.5 - preact: 10.11.3 - preact-render-to-string: 5.2.3(preact@10.11.3) - react: 18.3.1 - react-dom: 18.3.1(react@18.3.1) - uuid: 8.3.2 - next-auth@5.0.0-beta.20(next@14.2.5(@babel/core@7.25.2)(@opentelemetry/api@1.9.0)(@playwright/test@1.45.3)(babel-plugin-macros@3.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react@18.3.1): dependencies: '@auth/core': 0.34.2 @@ -18229,8 +18146,6 @@ snapshots: oauth4webapi@2.11.1: {} - oauth@0.9.15: {} - object-assign@4.1.1: {} object-hash@2.2.0: {} @@ -18290,8 +18205,6 @@ snapshots: obuf@1.1.2: {} - oidc-token-hash@5.0.3: {} - on-finished@2.4.1: dependencies: ee-first: 1.1.1 @@ -18332,13 +18245,6 @@ snapshots: opener@1.5.2: {} - openid-client@5.6.5: - dependencies: - jose: 4.15.9 - lru-cache: 6.0.0 - object-hash: 2.2.0 - oidc-token-hash: 5.0.3 - oppa@0.4.0: dependencies: chalk: 4.1.2 From c5be9d5394a14fe0141d8fb6863b0e969419ef31 Mon Sep 17 00:00:00 2001 From: Bharat Kashyap Date: Thu, 29 Aug 2024 15:59:32 +0530 Subject: [PATCH 3/7] fix: Misc --- .../package.json | 4 ++-- .../src/pages/api/auth/[...nextauth].ts | 18 ++++++++++++++++++ 2 files changed, 20 insertions(+), 2 deletions(-) diff --git a/examples/core-auth-nextjs-pages-nextauth-4/package.json b/examples/core-auth-nextjs-pages-nextauth-4/package.json index 57c59dcff8e..6f77c71b5e8 100644 --- a/examples/core-auth-nextjs-pages-nextauth-4/package.json +++ b/examples/core-auth-nextjs-pages-nextauth-4/package.json @@ -1,6 +1,6 @@ { - "name": "playground-nextjs-pages-nextauth-4", - "version": "0.5.1", + "name": "core-auth-nextjs-pages-nextauth-4", + "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", diff --git a/examples/core-auth-nextjs-pages-nextauth-4/src/pages/api/auth/[...nextauth].ts b/examples/core-auth-nextjs-pages-nextauth-4/src/pages/api/auth/[...nextauth].ts index e46763e118b..c123c23d503 100644 --- a/examples/core-auth-nextjs-pages-nextauth-4/src/pages/api/auth/[...nextauth].ts +++ b/examples/core-auth-nextjs-pages-nextauth-4/src/pages/api/auth/[...nextauth].ts @@ -1,5 +1,6 @@ import NextAuth from 'next-auth'; import GithubProvider from 'next-auth/providers/github'; +import CredentialsProvider from 'next-auth/providers/credentials'; export const authOptions = { providers: [ @@ -7,6 +8,23 @@ export const authOptions = { clientId: process.env.GITHUB_CLIENT_ID ?? '', clientSecret: process.env.GITHUB_CLIENT_SECRET ?? '', }), + CredentialsProvider({ + // The name to display on the sign in form (e.g. 'Sign in with...') + credentials: { + email: { label: 'Email Address', type: 'email' }, + password: { label: 'Password', type: 'password' }, + }, + async authorize(credentials) { + if (credentials?.password !== 'password') { + return null; + } + return { + id: 'test', + name: 'Test User', + email: String(credentials?.email), + }; + }, + }), ], secret: process.env.AUTH_SECRET, pages: { From 7dd00219f45d6e0cd1a90e1e5707dc3d8c542a4f Mon Sep 17 00:00:00 2001 From: Bharat Kashyap Date: Thu, 29 Aug 2024 16:05:06 +0530 Subject: [PATCH 4/7] docs: Improve Toolpad Core contributing instructions --- CONTRIBUTING.md | 74 ++++++++++++++++++++++++++++++------------------- 1 file changed, 46 insertions(+), 28 deletions(-) diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index dffbb46a036..d84c06681f0 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -23,6 +23,52 @@ _If you're looking into contributing to the docs, follow the [instructions](#bui - git - node.js +### Developing on Toolpad Core + +This uses the local version of Toolpad Core as built in the mono-repository, and allows for quickly testing out changes and their results. + +Some application examples for different JavaScript frameworks (such as Next.js, Vite…) are present in the `playground` folder that can be used to quickly develop on Toolpad Core on a live application. + +1. Install dependencies: + + ```bash + pnpm install + ``` + +2. Run the built-in watch mode + + ```bash + pnpm dev + ``` + +3. Run any application in the `playground` folder in development mode, such as `nextjs` + + ```bash + cd playground/nextjs + ``` + + ```bash + pnpm dev + ``` + +### Test changes to Toolpad Core on a live application + +To test changes to Toolpad Core on a live application, you can run the apps in the `playground` folder. + +1. Run Toolpad Core locally + + ```bash + pnpm --filter @toolpad/core dev + ``` + +2. Run the playground app + + ```bash + pnpm --filter playground-nextjs dev + ``` + +You should now be able to test changes to Toolpad Core on a live application. Follow similar steps to run apps in the `examples` folder after adding them to the workspace in `pnpm-workspace.yaml`. + ### Running Toolpad Studio apps inside the monorepo (recommended) This uses the local version of Toolpad Studio as built in the mono-repository. @@ -151,34 +197,6 @@ pnpm install -### Developing on Toolpad Core - -This uses the local version of Toolpad Core as built in the mono-repository, and allows for quickly testing out changes and their results. - -Some application examples for different JavaScript frameworks (such as Next.js, Vite…) are present in the `playground` folder that can be used to quickly develop on Toolpad Core on a live application. - -1. Install dependencies: - - ```bash - pnpm install - ``` - -2. Run the built-in watch mode - - ```bash - pnpm dev - ``` - -3. Run any application in the `playground` folder in development mode, such as `nextjs` - - ```bash - cd playground/nextjs - ``` - - ```bash - pnpm dev - ``` - ## Running integration tests The playwright tests can be run in one of two modes: From c1dc8d4a3ecb12c1521c4a770ae34a4ef900b4dd Mon Sep 17 00:00:00 2001 From: Bharat Kashyap Date: Thu, 29 Aug 2024 16:27:48 +0530 Subject: [PATCH 5/7] fix: For dev, removed --- examples/core-auth-nextjs-pages-nextauth-4/package.json | 2 +- pnpm-lock.yaml | 8 ++++---- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/examples/core-auth-nextjs-pages-nextauth-4/package.json b/examples/core-auth-nextjs-pages-nextauth-4/package.json index 6f77c71b5e8..1b2c221769d 100644 --- a/examples/core-auth-nextjs-pages-nextauth-4/package.json +++ b/examples/core-auth-nextjs-pages-nextauth-4/package.json @@ -12,7 +12,7 @@ "@mui/icons-material": "5.16.7", "@mui/material": "5.16.7", "@mui/material-nextjs": "5.16.6", - "@toolpad/core": "workspace:*", + "@toolpad/core": "latest", "@types/react": "18.3.3", "@types/react-dom": "18.3.0", "eslint-config-next": "14.2.5", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 4334a246881..ef1fc929815 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -194,7 +194,7 @@ importers: version: 7.35.0(eslint@8.57.0) eslint-plugin-react-compiler: specifier: latest - version: 0.0.0-experimental-72f06b2-20240822(eslint@8.57.0) + version: 0.0.0-experimental-0924e7a-20240827(eslint@8.57.0) eslint-plugin-react-hooks: specifier: 4.6.2 version: 4.6.2(eslint@8.57.0) @@ -5891,8 +5891,8 @@ packages: peerDependencies: eslint: '>=7.0.0' - eslint-plugin-react-compiler@0.0.0-experimental-72f06b2-20240822: - resolution: {integrity: sha512-tmcPYVSeSCktvNgGNE/CKY5Gn29wMMSdHMb/IglSTWoddtDZ5YhAoGgiTAerKN+rmB0bBtjFSRjh1ZjmgH+mhQ==} + eslint-plugin-react-compiler@0.0.0-experimental-0924e7a-20240827: + resolution: {integrity: sha512-+4TR1/HqOQ8c3OlmMmOVRXOVpjFjYXp94k7LMNjWTM6biT3zvX1+uj3lNtmUFs4h8n/E1pnAEXx3Y+ypJmbe4g==} engines: {node: ^14.17.0 || ^16.0.0 || >= 18.0.0} peerDependencies: eslint: '>=7' @@ -15752,7 +15752,7 @@ snapshots: globals: 13.24.0 rambda: 7.5.0 - eslint-plugin-react-compiler@0.0.0-experimental-72f06b2-20240822(eslint@8.57.0): + eslint-plugin-react-compiler@0.0.0-experimental-0924e7a-20240827(eslint@8.57.0): dependencies: '@babel/core': 7.25.2 '@babel/parser': 7.25.3 From f640f9fc5397c92c8bf454680dd357be42376e6b Mon Sep 17 00:00:00 2001 From: Bharat Kashyap Date: Thu, 29 Aug 2024 18:14:30 +0530 Subject: [PATCH 6/7] fix: Correct deps, upgrade to `material-ui` v6 --- .../package.json | 34 +++++++++++-------- .../src/pages/index.tsx | 4 ++- pnpm-lock.yaml | 25 ++++++++++---- 3 files changed, 41 insertions(+), 22 deletions(-) diff --git a/examples/core-auth-nextjs-pages-nextauth-4/package.json b/examples/core-auth-nextjs-pages-nextauth-4/package.json index 1b2c221769d..1319b752f3a 100644 --- a/examples/core-auth-nextjs-pages-nextauth-4/package.json +++ b/examples/core-auth-nextjs-pages-nextauth-4/package.json @@ -1,24 +1,30 @@ { "name": "core-auth-nextjs-pages-nextauth-4", "version": "0.1.0", - "private": true, "scripts": { "dev": "next dev", "lint": "next lint" }, - "devDependencies": { - "@emotion/react": "11.13.0", - "@emotion/styled": "11.13.0", - "@mui/icons-material": "5.16.7", - "@mui/material": "5.16.7", - "@mui/material-nextjs": "5.16.6", + "dependencies": { + "@emotion/react": "^11", + "@emotion/styled": "^11", + "@emotion/cache": "^11", + "@emotion/server": "^11", + "@mui/icons-material": "^6", + "@mui/material": "^6", + "@mui/material-nextjs": "^6", "@toolpad/core": "latest", - "@types/react": "18.3.3", - "@types/react-dom": "18.3.0", - "eslint-config-next": "14.2.5", - "next": "14.2.5", - "next-auth": "^4.0.0", - "react": "18.3.1", - "react-dom": "18.3.1" + "next": "^14", + "next-auth": "^4.24.7", + "react": "^18", + "react-dom": "^18" + }, + "devDependencies": { + "typescript": "^5", + "@types/node": "^20", + "@types/react": "^18", + "@types/react-dom": "^18", + "eslint": "^8", + "eslint-config-next": "^14" } } diff --git a/examples/core-auth-nextjs-pages-nextauth-4/src/pages/index.tsx b/examples/core-auth-nextjs-pages-nextauth-4/src/pages/index.tsx index ff57b97d844..a2fb3e42035 100644 --- a/examples/core-auth-nextjs-pages-nextauth-4/src/pages/index.tsx +++ b/examples/core-auth-nextjs-pages-nextauth-4/src/pages/index.tsx @@ -1,8 +1,10 @@ import * as React from 'react'; import Typography from '@mui/material/Typography'; import Box from '@mui/material/Box'; +import { useSession } from 'next-auth/react'; export default function HomePage() { + const { data: session } = useSession(); return ( - Welcome to Toolpad! + Welcome to Toolpad{session ? `, ${session.user?.name}!` : ''} ); diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 946cb5aa31d..e848119e049 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -670,7 +670,7 @@ importers: dependencies: '@auth/core': specifier: 0.34.2 - version: 0.34.2 + version: 0.34.2(nodemailer@6.9.14) '@emotion/cache': specifier: 11.13.1 version: 11.13.1 @@ -1083,7 +1083,7 @@ importers: dependencies: '@auth/core': specifier: 0.34.2 - version: 0.34.2 + version: 0.34.2(nodemailer@6.9.14) '@mui/material': specifier: 6.0.0 version: 6.0.0(@emotion/react@11.13.3(@types/react@18.3.4)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.4)(react@18.3.1))(@types/react@18.3.4)(react@18.3.1))(@types/react@18.3.4)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) @@ -1223,7 +1223,7 @@ importers: version: 14.2.6(@babel/core@7.25.2)(@opentelemetry/api@1.9.0)(@playwright/test@1.46.1)(babel-plugin-macros@3.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) next-auth: specifier: 5.0.0-beta.20 - version: 5.0.0-beta.20(next@14.2.6(@babel/core@7.25.2)(@opentelemetry/api@1.9.0)(@playwright/test@1.46.1)(babel-plugin-macros@3.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react@18.3.1) + version: 5.0.0-beta.20(next@14.2.6(@babel/core@7.25.2)(@opentelemetry/api@1.9.0)(@playwright/test@1.46.1)(babel-plugin-macros@3.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(nodemailer@6.9.14)(react@18.3.1) react: specifier: 18.3.1 version: 18.3.1 @@ -1265,7 +1265,7 @@ importers: version: 14.2.6(@babel/core@7.25.2)(@opentelemetry/api@1.9.0)(@playwright/test@1.46.1)(babel-plugin-macros@3.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) next-auth: specifier: 5.0.0-beta.20 - version: 5.0.0-beta.20(next@14.2.6(@babel/core@7.25.2)(@opentelemetry/api@1.9.0)(@playwright/test@1.46.1)(babel-plugin-macros@3.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react@18.3.1) + version: 5.0.0-beta.20(next@14.2.6(@babel/core@7.25.2)(@opentelemetry/api@1.9.0)(@playwright/test@1.46.1)(babel-plugin-macros@3.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(nodemailer@6.9.14)(react@18.3.1) react: specifier: 18.3.1 version: 18.3.1 @@ -7727,6 +7727,10 @@ packages: node-releases@2.0.14: resolution: {integrity: sha512-y10wOWt8yZpqXmOgRo77WaHEmhYQYGNA6y421PKsKYWEK8aW+cqAphborZDhqfyKrbZEN92CN1X2KbafY2s7Yw==} + nodemailer@6.9.14: + resolution: {integrity: sha512-Dobp/ebDKBvz91sbtRKhcznLThrKxKt97GI2FAlAyy+fk19j73Uz3sBXolVtmcXjaorivqsbbbjDY+Jkt4/bQA==} + engines: {node: '>=6.0.0'} + nopt@7.2.1: resolution: {integrity: sha512-taM24ViiimT/XntxbPyJQzCG+p4EKOpgD3mxFwW38mGjVUrfERQOeY4EDHjdnptttfHuHQXFx+lTP08Q+mLa/w==} engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0} @@ -10257,7 +10261,7 @@ snapshots: '@argos-ci/util@2.1.0': {} - '@auth/core@0.34.2': + '@auth/core@0.34.2(nodemailer@6.9.14)': dependencies: '@panva/hkdf': 1.2.0 '@types/cookie': 0.6.0 @@ -10266,6 +10270,8 @@ snapshots: oauth4webapi: 2.11.1 preact: 10.11.3 preact-render-to-string: 5.2.3(preact@10.11.3) + optionalDependencies: + nodemailer: 6.9.14 '@babel/cli@7.24.8(@babel/core@7.25.2)': dependencies: @@ -17654,11 +17660,13 @@ snapshots: nested-error-stacks@2.1.1: {} - next-auth@5.0.0-beta.20(next@14.2.6(@babel/core@7.25.2)(@opentelemetry/api@1.9.0)(@playwright/test@1.46.1)(babel-plugin-macros@3.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react@18.3.1): + next-auth@5.0.0-beta.20(next@14.2.6(@babel/core@7.25.2)(@opentelemetry/api@1.9.0)(@playwright/test@1.46.1)(babel-plugin-macros@3.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(nodemailer@6.9.14)(react@18.3.1): dependencies: - '@auth/core': 0.34.2 + '@auth/core': 0.34.2(nodemailer@6.9.14) next: 14.2.6(@babel/core@7.25.2)(@opentelemetry/api@1.9.0)(@playwright/test@1.46.1)(babel-plugin-macros@3.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) react: 18.3.1 + optionalDependencies: + nodemailer: 6.9.14 next-router-mock@0.9.13(next@14.2.6(@babel/core@7.25.2)(@opentelemetry/api@1.9.0)(@playwright/test@1.46.1)(babel-plugin-macros@3.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react@18.3.1): dependencies: @@ -17759,6 +17767,9 @@ snapshots: node-releases@2.0.14: {} + nodemailer@6.9.14: + optional: true + nopt@7.2.1: dependencies: abbrev: 2.0.0 From 9b9f4d476aa796745ef11e1ec1378997dffa0db9 Mon Sep 17 00:00:00 2001 From: Bharat Kashyap Date: Tue, 3 Sep 2024 13:15:23 +0530 Subject: [PATCH 7/7] fix: Add section for examples specifically --- CONTRIBUTING.md | 22 +++++++++++++++------- 1 file changed, 15 insertions(+), 7 deletions(-) diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index d84c06681f0..54d60937da0 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -51,24 +51,32 @@ Some application examples for different JavaScript frameworks (such as Next.js, pnpm dev ``` -### Test changes to Toolpad Core on a live application +### Testing the example apps -To test changes to Toolpad Core on a live application, you can run the apps in the `playground` folder. +You can also test the example apps to make sure they work as expected. -1. Run Toolpad Core locally +1. Add the example app to the workspace + + ```yaml + packages: + - 'packages/*' + - 'docs' + - 'test' + - 'examples/nextjs' + ``` + +2. Run Toolpad Core locally ```bash pnpm --filter @toolpad/core dev ``` -2. Run the playground app +3. Run the example app ```bash - pnpm --filter playground-nextjs dev + pnpm --filter core-nextjs dev ``` -You should now be able to test changes to Toolpad Core on a live application. Follow similar steps to run apps in the `examples` folder after adding them to the workspace in `pnpm-workspace.yaml`. - ### Running Toolpad Studio apps inside the monorepo (recommended) This uses the local version of Toolpad Studio as built in the mono-repository.