Struggling with authentication

arielarial

10 months ago

28

• 

  jacobsfletch

  Payload Team

  10 months ago

  Hi @arielarial - you might need to add the

  credentials: 'include'

  request header so that the http-only cookie gets attached

• 

  arielarial

  10 months ago

  hi @jacobsfletch ! I'm adding it here:

  
  https://github.com/arieltonglet/payload-login-test/blob/main/frontend/graphql/index.ts#L14
  
  

  should it be elsewhere?

• 

  jacobsfletch

  Payload Team

  10 months ago

  Ok, could it be that you are not awaiting your async

  checkUser

  here:

  https://github.com/arieltonglet/payload-login-test/blob/main/frontend/components/LoginContent.tsx#L20
  

  
  

  try running your effect asynchronously

  
  

  
  

  useEffect(async () => {
    await checkUser();
  }, []);

  
  

  
  

  if that's not it, open your network tab and look at the

  /me

  request

  
  

  
  

  you should see the payload token attached as a cookie

• 

  arielarial

  10 months ago

  hm.. so, React doesn't like async effects. but response from Me is user

  null

  anyway

  
  

  
  

  I don't see payload token. should it be in Headers tab?

  
  

  
  

  No, wait. I tried using an incognito window and it is showing now.

  Cookie: payload-token=[...]
  

  But response still

  {"data":{"meUser":{"user":null}}}
• 

  jacobsfletch

  Payload Team

  10 months ago

  what about when you hit the

  /me

  route directly

  
  

  
  

  in a new tab

• 

  arielarial

  10 months ago

  it works! 🤔

  
  

  
  

  tried adding a logout button, but it's the same: cookie is being sent, but the response is

  errors: [{message: "No User", locations: [{line: 3, column: 3}], path: ["logoutUser"],…}]
• 

  jacobsfletch

  Payload Team

  10 months ago

  Ok, we're getting there

  
  

  
  

  I'm pretty sure you need to whitelist your domain in the

  csrf

  config

  
  

  
  

  like this, in your payload config.

  
  

   csrf: [
     'http://localhost:3000'
   ]

  
  

  change the url to match your Next.js app

• 

  arielarial

  10 months ago

  that's it!

• 

  jacobsfletch

  Payload Team

  10 months ago

  amazing

• 

  arielarial

  10 months ago

  thank you so much! ✨ this was driving me crazy

• 

  jacobsfletch

  Payload Team

  10 months ago

  No problem! Happy to help. I know the feeling too well haha

• 

  arielarial

  10 months ago

  the payload/website repo helped A LOT as well

• 

  jacobsfletch

  Payload Team

  10 months ago

  Nice! We're launching it on MONDAY so keep a look out!

  
  

  
  

  it's been a sprint

• 

  arielarial

  10 months ago

  that's awesome 🎉

  
  

  
  

  I've updated the example repo for anyone looking for something like this (also for future me) ->

  https://github.com/arieltonglet/payload-login-test
• 

  jacobsfletch

  Payload Team

  6 months ago

  Update: We now have an official auth example

  https://github.com/payloadcms/payload/tree/master/examples/auth

  which includes a nextjs front-end that may help others coming into this thread

• 

  Twoxic

  5 months ago

  I had the same issue, using

  csrf

  fixed it. Thanks!

  
  
  

  @jacobsfletch you mention that being the official example. Meanwhile I've been using

  https://github.com/payloadcms/next-auth-cms

  which comes from this blogpost:

  https://payloadcms.com/blog/nextjs-payload-cms-auth
  
  

  This might be a bit confusing for some people (me ha-ha). Is your "official" auth example linked from the docs somewhere?