Like what we’re doing? Star us on GitHub!

Struggling with authentication

arielarial
4 months ago
27

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
  • jacobsfletch
    Payload Team
    4 months ago

    Hi @arielarial - you might need to add the

    credentials: 'include'

    request header so that the http-only cookie gets attached

  • arielarial
    4 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
    4 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
    4 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
    4 months ago

    what about when you hit the

    /me

    route directly



    in a new tab

  • arielarial
    4 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
    4 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
    4 months ago

    that's it!

  • jacobsfletch
    Payload Team
    4 months ago

    amazing

  • arielarial
    4 months ago

    thank you so much! ✨ this was driving me crazy

  • jacobsfletch
    Payload Team
    4 months ago

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

  • arielarial
    4 months ago

    the payload/website repo helped A LOT as well

  • jacobsfletch
    Payload Team
    4 months ago

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



    it's been a sprint

  • arielarial
    4 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
    4 weeks 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

Open the post
Continue the discussion in Discord
Can't find what you're looking for?
Get help straight from the Payload team with an Enterprise License.Learn More