fix build and update examples/auth project

design-system/website/components/Navigation.tsx

@@ -4,7 +4,7 @@
 import { Fragment, type ReactNode } from 'react'
 import { jsx, useTheme } from '@keystone-ui/core'
 import Link from 'next/link'
-import { useRouter } from 'next/router'
+import { usePathname } from 'next/navigation'
 
 const Brand = () => {
   const { palette } = useTheme()
@@ -37,8 +37,8 @@ const Section = ({ label, children }: SectionProps) => {
 type NavItemProps = { href: string, children: ReactNode }
 const NavItem = ({ href, children }: NavItemProps) => {
   const { palette, radii, spacing } = useTheme()
-  const router = useRouter()
-  const isSelected = router.pathname === href
+  const pathname = usePathname()
+  const isSelected = pathname === href
   return (
     <li
       css={{

examples/auth/app/(admin)/.admin/index.tsx

@@ -0,0 +1,15 @@
+/* eslint-disable */
+import * as view0 from '@keystone-6/core/___internal-do-not-use-will-break-in-patch/admin-ui/id-field-view'
+import * as view1 from '@keystone-6/core/fields/types/text/views'
+import * as view2 from '@keystone-6/core/fields/types/password/views'
+import * as view3 from '@keystone-6/core/fields/types/checkbox/views'
+
+const adminConfig = {}
+
+export const config = {
+  lazyMetadataQuery: {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"keystone","loc":{"start":22,"end":30}},"arguments":[],"directives":[],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"adminMeta","loc":{"start":39,"end":48}},"arguments":[],"directives":[],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"routePrefix","loc":{"start":59,"end":70}},"arguments":[],"directives":[],"loc":{"start":59,"end":70}},{"kind":"Field","name":{"kind":"Name","value":"lists","loc":{"start":79,"end":84}},"arguments":[],"directives":[],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"key","loc":{"start":97,"end":100}},"arguments":[],"directives":[],"loc":{"start":97,"end":100}},{"kind":"Field","name":{"kind":"Name","value":"isHidden","loc":{"start":111,"end":119}},"arguments":[],"directives":[],"loc":{"start":111,"end":119}},{"kind":"Field","name":{"kind":"Name","value":"fields","loc":{"start":130,"end":136}},"arguments":[],"directives":[],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"path","loc":{"start":151,"end":155}},"arguments":[],"directives":[],"loc":{"start":151,"end":155}},{"kind":"Field","name":{"kind":"Name","value":"createView","loc":{"start":168,"end":178}},"arguments":[],"directives":[],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"fieldMode","loc":{"start":195,"end":204}},"arguments":[],"directives":[],"loc":{"start":195,"end":204}}],"loc":{"start":179,"end":218}},"loc":{"start":168,"end":218}}],"loc":{"start":137,"end":230}},"loc":{"start":130,"end":230}}],"loc":{"start":85,"end":240}},"loc":{"start":79,"end":240}}],"loc":{"start":49,"end":248}},"loc":{"start":39,"end":248}}],"loc":{"start":31,"end":254}},"loc":{"start":22,"end":254}},{"kind":"Field","name":{"kind":"Name","value":"authenticatedItem"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"InlineFragment","typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"User"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"name"}}]}}]}}]}}]},
+  fieldViews: [view0,view1,view2,view3],
+  adminMetaHash: '1jejxdq',
+  adminConfig,
+  apiPath: '/api/graphql',
+};

examples/auth/app/(admin)/[listKey]/[id]/page.tsx

@@ -0,0 +1,4 @@
+'use client'
+import { ItemPage } from '@keystone-6/core/___internal-do-not-use-will-break-in-patch/admin-ui/pages/ItemPage'
+
+export default ItemPage

examples/auth/app/(admin)/[listKey]/create/page.tsx

@@ -0,0 +1,4 @@
+'use client'
+import { CreateItemPage } from '@keystone-6/core/___internal-do-not-use-will-break-in-patch/admin-ui/pages/CreateItemPage'
+
+export default CreateItemPage

examples/auth/app/(admin)/[listKey]/page.tsx

@@ -0,0 +1,4 @@
+'use client'
+import { ListPage } from '@keystone-6/core/___internal-do-not-use-will-break-in-patch/admin-ui/pages/ListPage'
+
+export default ListPage

examples/auth/app/(admin)/init/page.tsx

@@ -0,0 +1,7 @@
+'use client'
+/* eslint-disable */
+import { getInitPage } from '@keystone-6/auth/pages/InitPage'
+
+const fieldPaths = ["name","password"]
+
+export default getInitPage({"listKey":"User","fieldPaths":["name","password"],"enableWelcome":true})

examples/auth/app/(admin)/layout.tsx

@@ -0,0 +1,16 @@
+'use client'
+import { Layout } from '@keystone-6/core/___internal-do-not-use-will-break-in-patch/admin-ui/pages/App'
+import { config } from './.admin'
+
+
+export default function AdminLayout ({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <Layout config={config as any}>
+      {children}
+    </Layout>
+  )
+}

examples/auth/app/(admin)/no-access/page.tsx

@@ -0,0 +1,4 @@
+'use client'
+import { getNoAccessPage } from '@keystone-6/core/___internal-do-not-use-will-break-in-patch/admin-ui/pages/NoAccessPage'
+
+export default getNoAccessPage({ sessionsEnabled: true })

examples/auth/app/(admin)/page.tsx

@@ -0,0 +1,2 @@
+'use client'
+export { HomePage as default } from '@keystone-6/core/___internal-do-not-use-will-break-in-patch/admin-ui/pages/HomePage'

examples/auth/app/(admin)/signin/page.tsx

@@ -0,0 +1,5 @@
+'use client'
+/* eslint-disable */
+import { getSigninPage } from '@keystone-6/auth/pages/SigninPage'
+
+export default getSigninPage({"identityField":"name","secretField":"password","mutationName":"authenticateUserWithPassword","successTypename":"UserAuthenticationWithPasswordSuccess","failureTypename":"UserAuthenticationWithPasswordFailure"})

examples/auth/app/layout.tsx

@@ -0,0 +1,11 @@
+export default function RootLayout ({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <html lang="en">
+      <body>{children}</body>
+    </html>
+  )
+}

examples/auth/keystone.ts

@@ -59,6 +59,7 @@ export default withAuth<TypeInfo<Session>>(
     },
     lists,
     ui: {
+      basePath: '/',
       // only admins can view the AdminUI
       isAccessAllowed: (context) => {
         return context.session?.data?.isAdmin ?? false

examples/auth/next.config.mjs

@@ -0,0 +1,14 @@
+// you don't need this if you're building something outside of the Keystone repo
+
+export default {
+  experimental: {
+    // without this, 'Error: Expected Upload to be a GraphQL nullable type.'
+    serverComponentsExternalPackages: ['graphql'],
+  },
+  eslint: {
+    ignoreDuringBuilds: true,
+  },
+  typescript: {
+    ignoreBuildErrors: true,
+  },
+}

examples/auth/package.json

@@ -12,7 +12,8 @@
   "dependencies": {
     "@keystone-6/auth": "workspace:^",
     "@keystone-6/core": "workspace:^",
-    "@prisma/client": "^5.0.0"
+    "@prisma/client": "^5.0.0",
+    "next": "^14.2.0"
   },
   "devDependencies": {
     "prisma": "^5.0.0",

examples/auth/tsconfig.json

@@ -0,0 +1,34 @@
+{
+  "compilerOptions": {
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": false,
+    "noEmit": true,
+    "incremental": true,
+    "module": "esnext",
+    "esModuleInterop": true,
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ]
+  },
+  "include": [
+    "next-env.d.ts",
+    ".next/types/**/*.ts",
+    "**/*.ts",
+    "**/*.tsx"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
+}

packages/auth/src/index.ts

@@ -99,19 +99,20 @@ export function createAuth<ListTypeInfo extends BaseListTypeInfo> ({
    *
    * The signin page is always included, and the init page is included when initFirstItem is set
    */
-  const authGetAdditionalFiles = () => {
+  const authGetAdditionalFiles = ({ tsx }: { tsx: boolean }) => {
+    const ext = tsx ? 'tsx' : 'js'
     const filesToWrite: AdminFileToWrite[] = [
       {
         mode: 'write',
         src: signinTemplate({ gqlNames, identityField, secretField }),
-        outputPath: 'pages/signin.js',
+        outputPath: `signin/page.${ext}`,
       },
     ]
     if (initFirstItem) {
       filesToWrite.push({
         mode: 'write',
         src: initTemplate({ listKey, initFirstItem }),
-        outputPath: 'pages/init.js',
+        outputPath: `init/page.${ext}`,
       })
     }
     return filesToWrite
@@ -262,7 +263,7 @@ export function createAuth<ListTypeInfo extends BaseListTypeInfo> ({
       ui = {
         ...ui,
         publicPages: [...publicPages, ...authPublicPages],
-        getAdditionalFiles: [...getAdditionalFiles, authGetAdditionalFiles],
+        getAdditionalFiles: [...getAdditionalFiles, () => authGetAdditionalFiles({ tsx: ui?.tsx ?? true })],
 
         isAccessAllowed: async (context: KeystoneContext) => {
           if (await hasInitFirstItemConditions(context)) return true

packages/auth/src/templates/init.ts

@@ -8,15 +8,17 @@ type InitTemplateArgs = {
 
 export const initTemplate = ({ listKey, initFirstItem }: InitTemplateArgs) => {
   // -- TEMPLATE START
-  return `import { getInitPage } from '@keystone-6/auth/pages/InitPage';
+  return `'use client'
+/* eslint-disable */
+import { getInitPage } from '@keystone-6/auth/pages/InitPage'
 
-const fieldPaths = ${JSON.stringify(initFirstItem.fields)};
+const fieldPaths = ${JSON.stringify(initFirstItem.fields)}
 
 export default getInitPage(${JSON.stringify({
     listKey,
     fieldPaths: initFirstItem.fields,
     enableWelcome: !initFirstItem.skipKeystoneWelcome,
-  })});
+  })})
 `
   // -- TEMPLATE END
 }

packages/auth/src/templates/signin.ts

@@ -10,15 +10,17 @@ export const signinTemplate = ({
   secretField: string
 }) => {
   // -- TEMPLATE START
-  return `import { getSigninPage } from '@keystone-6/auth/pages/SigninPage'
+  return `'use client'
+/* eslint-disable */
+import { getSigninPage } from '@keystone-6/auth/pages/SigninPage'
 
 export default getSigninPage(${JSON.stringify({
     identityField: identityField,
     secretField: secretField,
     mutationName: gqlNames.authenticateItemWithPassword,
     successTypename: gqlNames.ItemAuthenticationWithPasswordSuccess,
     failureTypename: gqlNames.ItemAuthenticationWithPasswordFailure,
-  })});
+  })})
 `
   // -- TEMPLATE END
 }

packages/core/src/___internal-do-not-use-will-break-in-patch/admin-ui/pages/ItemPage/index.tsx

@@ -2,7 +2,6 @@
 /** @jsx jsx */
 
 import copyToClipboard from 'clipboard-copy'
-import { useRouter } from 'next/router'
 import {
   Fragment,
   type HTMLAttributes,
@@ -43,6 +42,7 @@ import { GraphQLErrorNotice } from '../../../../admin-ui/components/GraphQLError
 import { usePreventNavigation } from '../../../../admin-ui/utils/usePreventNavigation'
 import { CreateButtonLink } from '../../../../admin-ui/components/CreateButtonLink'
 import { BaseToolbar, ColumnLayout, ItemPageHeader } from './common'
+import { useRouter } from '../../../../admin-ui/router'
 
 type ItemPageProps = {
   params: { 

packages/core/src/admin-ui/components/Navigation.tsx

@@ -235,7 +235,7 @@ export const Navigation = () => {
 
   return (
     <NavigationContainer authenticatedItem={authenticatedItem}>
-      <NavItem href={routePrefix}>Dashboard</NavItem>
+      <NavItem href={routePrefix || '/'}>Dashboard</NavItem>
       <ListNavItems lists={renderableLists} />
     </NavigationContainer>
   )

packages/core/src/admin-ui/templates/no-access.ts

@@ -1,7 +1,8 @@
 import type { KeystoneConfig } from '../../types'
 
 export const noAccessTemplate = (session: KeystoneConfig['session']) =>
-  `import { getNoAccessPage } from '@keystone-6/core/___internal-do-not-use-will-break-in-patch/admin-ui/pages/NoAccessPage'
+  `'use client'
+import { getNoAccessPage } from '@keystone-6/core/___internal-do-not-use-will-break-in-patch/admin-ui/pages/NoAccessPage'
 
 export default getNoAccessPage({ sessionsEnabled: ${!!session} })
 `

packages/core/src/lib/create-admin-meta.ts

@@ -88,7 +88,7 @@ export function createAdminMeta (
 ) {
   const { lists } = config
   const adminMetaRoot: AdminMetaRootVal = {
-    routePrefix: config.ui?.basePath ?? '/admin',
+    routePrefix: config.ui?.basePath?.replace(/^\//, '') ?? '/admin',
     listsByKey: {},
     lists: [],
     views: [],

packages/core/src/lib/createAdminUIMiddleware.ts

@@ -26,7 +26,7 @@ export function createAdminUIMiddlewareWithNextApp (
     },
   } = config
 
-  if (basePath.endsWith('/')) throw new TypeError('basePath must not end with a trailing slash')
+  if (basePath !== '/' && basePath.endsWith('/')) throw new TypeError('basePath must not end with a trailing slash')
 
   return async (req: express.Request, res: express.Response) => {
     const { pathname } = url.parse(req.url)

packages/core/src/lib/createSystem.ts

@@ -53,7 +53,8 @@ export function getSystemPaths (cwd: string, config: KeystoneConfig | __Resolved
 
   const srcPath = path.join(cwd, 'src')
   const hasSrc = fs.existsSync(srcPath)
-  const adminPath = path.join(cwd, hasSrc ? 'src' : '', `app/${config.ui?.basePath ? config.ui?.basePath : '(admin)'}`)
+  const basePath = config.ui?.basePath?.replace(/^\//, '') ?? ''
+  const adminPath = path.join(cwd, hasSrc ? 'src' : '', `app/${basePath || '(admin)'}`)
 
   return {
     config: getBuiltKeystoneConfigurationPath(cwd),

packages/core/src/lib/defaults.ts

@@ -141,7 +141,7 @@ export function resolveDefaults <TypeInfo extends BaseKeystoneTypeInfo> (config:
     telemetry: config.telemetry ?? true,
     ui: {
       ...config.ui,
-      basePath: config.ui?.basePath ?? '',
+      basePath: config.ui?.basePath ?? '/admin',
       isAccessAllowed: config.ui?.isAccessAllowed ?? defaultIsAccessAllowed,
       isDisabled: config.ui?.isDisabled ?? false,
       getAdditionalFiles: config.ui?.getAdditionalFiles ?? [],

packages/core/src/scripts/build.ts

@@ -44,7 +44,7 @@ export async function build (
 
   console.log('✨ Building Admin UI')
   await nextBuild(
-    paths.admin,
+    cwd,
     undefined,
     undefined,
     undefined,

packages/core/src/scripts/start.ts

@@ -49,7 +49,7 @@ export async function start (
   console.log(`✅ GraphQL API ready`)
   if (!system.config.ui?.isDisabled && ui) {
     console.log('✨ Preparing Admin UI Next.js app')
-    const nextApp = next({ dev: false, dir: paths.admin })
+    const nextApp = next({ dev: false, dir: cwd })
     await nextApp.prepare()
 
     expressServer.use(await createAdminUIMiddlewareWithNextApp(system.config, keystone.context, nextApp))