Simplify your stack and build anything. Or everything.
Build tomorrow’s web with a modern solution you truly own.
Code-based nature means you can build on top of it to power anything.
It’s time to take back your content infrastructure.

How to authenticate in getServerSideProps?

default discord avatar
twoxic2 years ago
12

I’ve been using this example

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

to set up authentication in my app. However, this example does authentication in the client-side. For my app I’d like to do check if the user is authenticated server-side in getServerSideProps and then pass the user to the client-side, which in turn makes some other user-specific requests where needed.



However, I’m a bit lost on where to start: Simply calling

http://blabla.com/api/users/me

is obviously not possible since the server-side does not have the authentication cookies set.



What is the best strategy to achieve this?



Thanks in advance!

  • default discord avatar
    notchr2 years ago

    I think you want to use the Payload API



    https://payloadcms.com/docs/local-api/overview

    sorry, Local API

  • default discord avatar
    jessrynkar2 years ago

    Hey

    @399871533276987392

    how are you getting on here? Like

    @1049775120559898725

    said, the local api has auth operations which make this simple and easy >

    https://payloadcms.com/docs/local-api/overview#auth-operations
  • default discord avatar
    twoxic2 years ago

    For now I've chosen the simpler route and just authenticated in the frontend!

  • default discord avatar
    markle57332 years ago

    I am following in the same footsteps as Twoxic I believe, setting it up following the instructions, and then unclear on how to make an authenticated request. Is it possible to add into the repo an example of an authenticated request on a collection that isn't users?

  • default discord avatar
    a.lamit2 years ago

    If you want to make authenticated REST/GraphQL requests in getServerSide props, you would need to explicitly forward

    req.headers.cookie

    in your requests, as HTTP only are only included by default in the browser.



    example given:


    export const getServerSideProps = async ({req, res}) => {
      const cookie = req.headers.cookie;
      const user = await fetch("https://your-payload-url/api/users/me", {
        method: 'GET',
        cookie,
      }).then(res => res.json());
    
    return { props: { user } };
    }
  • default discord avatar
    notchr2 years ago
    @1014274687271968848

    I believe the fetch request also needs credentials: 'include', otherwise the cookies are not automatically sent with the request, right?



    Say I want to login on the frontend, setting the authentication cookie

  • default discord avatar
    a.lamit2 years ago

    In the browser runtime yes, in the server runtime credentials has no effect.

  • default discord avatar
    notchr2 years ago

    Ah I see!

  • default discord avatar
    markle57332 years ago

    Thanks for help guys, I think I got it working. (The error I was running into was due to my fetch request being wonky). I still have a lot to learn in regards to the authentication, and what is actually happening behind the scenes.

  • default discord avatar
    generator1012 years ago
    @158082417075159040

    is it possible to share your authentication stuff? I am trying to use the nextjs 13 app directory to authenticate server side too

  • default discord avatar
    thgh.last year

    fyi, here is how you do it in

    server components

    app routes:



    import { cookies } from 'next/headers'
    
    const me = await fetch(
      'http://localhost:' + process.env.PORT + '/api/users/me',
      { headers: { Cookie: cookies().toString() } }
    ).then((r) => r.json())
  • default discord avatar
    generator101last year
    @476523795251855360

    have you used this with the app route method?

    https://nextjs.org/docs/app/api-reference/functions/cookies

    nice, just tested it and it works like a charm

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.