via postman i can login and get responses like expected, but when trying to fetch the /Me endpoint from my front-end, i always get { users : none } back, even if called directly after passing login. when i try to logout i get a "no user" error.

i have seen

credentials : 'include'

i tried adding it to the request but i get cors errors even though both urls (localhost with ports) are whitelisted

does anyone have an idea what i am doing wrong here?

jacobsfletch
2 years ago
To make authentication work across domains you need to set cors, csrf, and the cookie domain. Our official auth example demonstrates this pretty simply, check it out;
https://github.com/payloadcms/payload/tree/master/examples/auth/cms#readme

The
credentials: include
line in your front-end fetch will automatically attach Payload's http-only cookie to the request, but Payload will only respect that request and cookie if the settings are configured.

If you're still seeing a cors error after setting the config, double check that the values are correct. You may be using environment variables that are not loaded. This has tripped me up more times than I'm willing to admit.

Also note that Postman will not trigger cors errors because it makes the request server-side and cors is a browser-only concept.

shiru_nog2 years ago

thanks for the quick response!

the cookie domain i had not set but the cors and csrf configs are like in the example with the exception of using strings directly

const clientUrls = ['http://localhost:5173', 'http://localhost:3000'];

export default buildConfig({
  serverURL: process.env.PAYLOAD_PUBLIC_SERVER_URL,
  admin: {
    user: Admins.slug,
  },
  cors: clientUrls,
  csrf: clientUrls,
  collections: [Admins, players],
  typescript: {
    outputFile: path.resolve(__dirname, "payload-types.ts"),
  },
  graphQL: {
    schemaOutputFile: path.resolve(__dirname, "generated-schema.graphql"),
  },
});

the cors errors persists

jacobsfletch
2 years ago
Can you paste the error here? And possibly your request as well.

shiru_nog2 years ago

https://i.imgur.com/tGYWsVZ.png

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://localhost:3000/api/players/login. (Reason: expected ‘true’ in CORS header ‘Access-Control-Allow-Credentials’).

https://i.imgur.com/0F5TVjw.png

 const res = await fetch('http://localhost:3000/api/players/login', {
      method: 'POST',
      credentials: 'include',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        email: username,
        password: password,
      }),
      });

jacobsfletch
2 years ago
Weird, your response headers indicate that
http://localhost:5173
is whitelisted as expected

http://localhost:5173
is the address of your front-end right?
shiru_nog2 years ago
Yes
jacobsfletch
2 years ago
Are you able to hit any other endpoints with success? Like
/api/players
?
shiru_nog2 years ago
when i leave out the credentials : 'include'

i can log in , get the correct user info and token

but in the same function, after the user token retrieval, when fetching /me again, it shows not logged in, when using not the credential line (it goes through) but with the line, the cors errors appear

so nothing with the credential line included goes through, everything without goes through, works but as expected when your not logged in
jacobsfletch
2 years ago
Ok this is making more sense

The reason you are logging in the first time with success, but do not remain logged in, is because of the cookie domain settings

You need to whitelist
localhost
as seen here:
https://github.com/payloadcms/payload/blob/master/examples/auth/cms/src/collections/Users.ts#L14

This will allow Payload to attach the http-only cookie to your browser and read it back on every
/me
request
shiru_nog2 years ago
https://i.imgur.com/w7leWko.png

i tried swapping secure to false since it did not work the first time i tried, ignore that pls
jacobsfletch
2 years ago
Can you verify your cookie settings by inspecting the cookie in your browser?

In Chrome, Inspector > Application > Cookies

You can see what domain, etc is being attached
shiru_nog2 years ago
hmm might need to swap browsers here 😄

nothing appears there but just to be clear , i cannot log in with 'credentials : "include"' right
jacobsfletch
2 years ago
Right and that is because
credentials: include
attaches that cookie to the request

But all signs are pointing to a bad cookie
shiru_nog2 years ago
yea , that seems to be missing , there is nothing i have specifically do right?

im not experienced at all with web development to be honest, sorry if im being stupid here, usually doing more c++ or gamedev stuff ^^
jacobsfletch
2 years ago
It's all good! Happy to help. I think we're close.

Do you have any custom hooks that might be manipulating the user in the response?
shiru_nog2 years ago
there are some hooks, but they dont do anything as far as i can tell

https://i.imgur.com/U98Gm0Y.png

https://i.imgur.com/fpgHnuz.png
jacobsfletch
2 years ago
Try commenting those out temporarily
shiru_nog2 years ago
no effect

what about
```
  app.use(payload.authenticate);
```
? i seen it somewhere, had commented it out bc it did not seem to be required

https://i.imgur.com/Pn3ThPS.png

here is a login response btw

maybe there is some useful info
jarrod_not_jared
2 years ago
@277050857852370944
can you paste what your most recent Players auth config looks like?
shiru_nog2 years ago
i was able to fix this issue 20 min ago , the essential parts i was missing was setting cookie settings in the user collection, jacob pointed that out, and lastly correctly setting the cookie.
jarrod_not_jared
2 years ago
Amazing, happy to hear it 👍
notchr2 years ago
@808734492645785600
Do you know why
https://payloadcms.com/docs/authentication/using-middleware
adding an express route, req.user is always undefined

Can confirm im including credentials in the request

also, the docs mention payload.authenticate as middleware, but it always returns undefined
jacobsfletch
2 years ago
What do your custom Express routes look like? Here's a common setup using Payload authentication middleware with cors:
```
app.options('/your-route', cors);
app.post('/your-route', [
  payload.authenticate,
  express.json({}),
  cors,
  doSomething,
]);
```
You might also just want to use the
endpoints
config which does the same thing behind a nice API, check it out:
https://payloadcms.com/docs/rest-api/overview#custom-endpoints

It's also possible that you're calling the authentication middleware
before
initializing Payload. More details here
https://github.com/payloadcms/payload/issues/2327

Open

Continue the discussion in Discord

Star on GitHub

Star

Chat on Discord

Discord

online

Can't find what you're looking for?

Get dedicated engineering support directly from the Payload team.