[3.0.0-beta.32] Issue with Payload on an existing nextjs app while changing its admin and api paths

[ydemetriades]

Link to reproduction

No response

Describe the Bug

Title

[3.0.0-beta.32] Issue with Payload on an existing Next.js app while changing its admin and api paths

Environment:

• Payload version: 3.0.0-beta.32
• Next.js with TurboRepo

Issue Description: I am integrating Payload CMS into an existing Next.js application that uses TurboRepo and includes multiple local packages. I've modified the admin and API paths for Payload to /center/admin and /center/api respectively. Despite these changes, I'm facing issues with user authentication, receiving 401 Unauthorized errors.

Configuration:

• Payload configuration (payload.config.ts):

  // serverURL: process.env.NEXT_PUBLIC_SITE_URL ?? "http://localhost:3000",
  routes: {
  admin: '/center/admin',
  api: '/center/api',
  }

  I have attempted to configure serverURL, cors, and csrf settings in payload.config.ts without success.

• Directory structure:

  .
  ├── app
  │   ├── (app)
  │   │   ├── (dashboard)
  │   │   ├── admin
  │   │   ├── api
  │   │   ├── layout.tsx
  │   │   └── layout.tsx
  │   │   └── not-found.tsx
  │   └── (payload)
  │       ├── center
  │       │   ├── admin
  │       │   └── api
  │       ├── custom.scss
  │       └── layout.tsx

Current Behavior:

• Fresh database: Access to /center/admin initiates the create-first-user flow. However, the /center/api/form-state endpoint returns 401 Unauthorized errors.
• Existing database (with an available user): The /center/api/login endpoint returns 401 Unauthorized.

Additional Information:

• The directory structure has been adjusted multiple times to troubleshoot this issue without success.

• I set up a new application using create-payload-app (beta.32) to isolate the issue. This new setup, detailed below, allowed me to successfully access the admin panel at /center and the API at /center/api without any authentication problems, indicating the issue may be specific to my existing application structure.

  Directory Structure of New Setup:

  .
  ├── app
  │   ├── (app)
  │   └── (payload)
  │       ├── center
  │       │   ├── admin
  │       │   └── api
  │       ├── custom.scss
  │       └── layout.tsx

• For a detailed view of the original issue discussion, please visit the following Discord thread where the issue was initially discussed, providing additional insights and exchanges that might be helpful for troubleshooting.

Possible Causes:

• There might be conflicts or overlooked configurations due to the existing routes and structure of the Next.js application that uses similar paths.
• Potential bug with Payload's handling of non-default admin and API paths.

To Reproduce

I haven't been able to reproduce it with another existing app yet

Payload Version

3.0.0-beta.32

Adapters and Plugins

db-mongodb

[ydemetriades]

I am closing this issue as I have resolved it. It was a CSRF misconfiguration.

[github-actions[bot]]

This issue has been automatically locked. Please open a new issue if this issue persists with any additional detail.