Cannot GET /admin

[ashermyers]

Bug Report

Cannot access the /admin express endpoint, using node:lts and npx create payload. / redirects to /admin just fine but /admin returns a 404 error. MongoDB connects successfully and all logs are positive.

[jmikrut]

What command are you running? Are you running yarn dev? If not, are you running in production (NODE_ENV=production?)?

Typically this will happen if you are trying to run in production, but you have not yet built your admin panel.

I will move this to a discussion though because this is very likely something you are doing incorrectly rather than being an issue with Payload itself.

I'll happily continue to help here though!

[ashermyers]

After building, I got the /admin route working, although /admin/styles.css is not being built. How do I build the assets?

[jmikrut]

I'm afraid I'm not sure what you're asking here. CSS should definitely get built alongside of the admin panel. Are you talking about custom CSS?

Does your CSS work in dev mode?

[jlimas]

Faced the same issue, and the solution was as @jmikrut said, I had the NODE_ENV set to production, exporting the variable to development instead fixed the issue and I was able to run npm run dev without issues.

[tinycoding5]

After I updated the authentication, I am also facing the same issue. All admin pages are 404.
Here is my strategy file and user collections

import { generatePayloadCookie } from 'payload'

const ClerkStrategy = async ({ payload, headers }) => {
  const clerk = await import('@clerk/nextjs/server')
  // get current user id
  const { userId } = clerk.auth()
  if (!userId) {
    return {
      user: null,
    }
  }

  // get user by clerkId

  let newUser;
  const user = await payload.find({
    collection: 'users',
    where: {
      clerkId: {
        equal: userId
      },
    },
  })

  if (user?.docs.length === 0) {
    const clerkUser = await clerk.currentUser()

    const name = `${clerkUser.firstName} ${clerkUser.lastName}`
    const email = clerkUser.emailAddresses?.[0].emailAddress
    const createdUser = await payload.create({
      collection: 'users',
      data: {
        email: email,
        name: name,
        clerkId: userId,
      },
    });

    newUser = createdUser;
  } else {
    newUser = user?.docs[0]
  }

  const collectionConfig = payload.collections['users'].config;

  const cookie = generatePayloadCookie({
    collectionConfig,
    payload: payload,
    token: userId,
  });

  return {
    user: newUser || null,
    responseHeaders: headers
  }
}

export default ClerkStrategy

import type { CollectionConfig } from 'payload'

import { authenticated } from '../../access/authenticated'
import ClerkStrategy from 'src/payload/strategies/ClerkStrategy'

const Users: CollectionConfig = {
  slug: 'users',
  access: {
    admin: authenticated,
    create: authenticated,
    delete: authenticated,
    read: authenticated,
    update: authenticated,
  },
  admin: {
    defaultColumns: ['name', 'email', "clerkId"],
    useAsTitle: 'name',
  },
  auth: {
    disableLocalStrategy: true,
    strategies: [{
      name: 'clerk-strategy',
      authenticate: ClerkStrategy
    }],
  },
  fields: [
    {
      name: 'clerkId',
      type: 'text',
      required: true,
    },
    {
      name: 'email',
      type: 'text',
      // required: true,
    },
    {
      name: 'name',
      type: 'text',
    },
  ],
  timestamps: true,
}

export default Users

[tinycoding5]

import jwt from 'jsonwebtoken'
import { NextApiRequest } from 'next'
import { getCookieExpiration } from 'payload'

const ClerkStrategy = async ({ payload, headers }) => {
  const clerk = await import('@clerk/nextjs/server')
  const collectionConfig = payload.collections['users'].config
  // get current user id
  const { userId } = clerk.auth()
  if (!userId) {
    return {
      user: null,
    }
  }

  console.log('userId from clerk', userId)
  // get user by clerkId

  let newUser
  const user = await payload.find({
    collection: 'users',
    where: {
      clerkId: {
        equal: userId,
      },
    },
  })

  if (user?.docs.length === 0) {
    const clerkUser = await clerk.currentUser()

    const name = `${clerkUser.firstName} ${clerkUser.lastName}`
    const email = clerkUser.emailAddresses?.[0].emailAddress
    const createdUser = await payload.create({
      collection: 'users',
      data: {
        email: email,
        name: name,
        clerkId: userId,
      },
    })
    newUser = createdUser
  } else {
    newUser = user?.docs[0]
  }

  let fieldsToSign = {
    email: newUser.email,
    id: newUser.id,
    collection: 'users',
    clerkId: userId,
    name: newUser.name,
  }

  const token = jwt.sign(fieldsToSign, payload.secret, {
    expiresIn: collectionConfig.auth.tokenExpiration, // Set token expiration as per configuration
  })

  headers.Authorization = `${collectionConfig.slug} API-Key ${token}`
  headers.sameSite = collectionConfig.auth.cookies.sameSite
  headers.expires = getCookieExpiration(collectionConfig.auth.tokenExpiration)

  newUser.collection = 'users'
  newUser._strategy = 'clerkOauth'

  const response = {
    user: newUser || null,
    responseHeaders: headers,
  }

  return response
}

export default ClerkStrategy

[Inner-Journey]

Thank you so much, it solved it!
Mind sharing with me how you came up with the solution?

[tinycoding5]

I found the 400 bad request in network. The error showed the user collection store issue.
I review the several PR's related to the authentication and strategy.
After I added this, the issue was resolved

newUser.collection = 'users'
newUser._strategy = 'clerkOauth'

[Inner-Journey]

Thanks for the answer,
I couldn't see any error message, I got 404 with

Server Error: NEXT_NOT_FOUND
The above error occurred in the component.

Any Ideas? would be nice to figure the next one on my own.

[tinycoding5]

Please see the log in the terminal.
You can find the errors