Hi, everyone. I'm struggling with authentication in frontend (Next.js)
I made a wrapper component in
_app
that uses
checkUser()
to see if there's a user logged in (with
Me
query) and then returns
Login
component if user is
null
.
The login process works as expected, and returns user's email as requested and error if email/password is wrong. I've followed payload/website and am using only fetch/graphQL, no Apollo. Then what I'm trying to do is call
checkUser()
again from parent to update
user
state. But user still returns null.
I don't know if this pattern is wrong, if HTTP-only cookies aren't being set, or something else. What am I doing wrong here?
Example monorepo:
https://github.com/arieltonglet/payload-login-testHi @arielarial - you might need to add the
credentials: 'include'
request header so that the http-only cookie gets attached
hi @jacobsfletch ! I'm adding it here:
should it be elsewhere?
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
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}}}
what about when you hit the
/me
route directly
in a new tab
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"],…}]
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
that's it!
amazing
thank you so much! ✨ this was driving me crazy
No problem! Happy to help. I know the feeling too well haha
the payload/website repo helped A LOT as well
Nice! We're launching it on MONDAY so keep a look out!
it's been a sprint
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-testUpdate: We now have an official auth example
https://github.com/payloadcms/payload/tree/master/examples/authwhich includes a nextjs front-end that may help others coming into this thread
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-cmswhich comes from this blogpost:
https://payloadcms.com/blog/nextjs-payload-cms-authThis might be a bit confusing for some people (me ha-ha). Is your "official" auth example linked from the docs somewhere?
Star
Discord
online
Get help straight from the Payload team with an Enterprise License.