Struggling with authentication

default discord avatar
arielarial
10 months ago
28

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-test
  • discord user avatar
    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

  • default discord avatar
    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?

  • discord user avatar
    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

  • default discord avatar
    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}}}
  • discord user avatar
    jacobsfletch
    Payload Team
    10 months ago

    what about when you hit the

    /me

    route directly



    in a new tab

  • default discord avatar
    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"],…}]
  • discord user avatar
    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

  • default discord avatar
    arielarial
    10 months ago

    that's it!

  • discord user avatar
    jacobsfletch
    Payload Team
    10 months ago

    amazing

  • default discord avatar
    arielarial
    10 months ago

    thank you so much! ✨ this was driving me crazy

  • discord user avatar
    jacobsfletch
    Payload Team
    10 months ago

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

  • default discord avatar
    arielarial
    10 months ago

    the payload/website repo helped A LOT as well

  • discord user avatar
    jacobsfletch
    Payload Team
    10 months ago

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



    it's been a sprint

  • default discord avatar
    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
  • discord user avatar
    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

  • default discord avatar
    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?

Open the post
Continue the discussion in Discord
Like what we're doing?
Star us on GitHub!

Star

Connect with the Payload Community on Discord

Discord

online

Can't find what you're looking for?

Get help straight from the Payload team with an Enterprise License.