How to authenticate in getServerSideProps?

default discord avatar
twoxic
5 months 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
    notchr
    5 months ago

    I think you want to use the Payload API



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


    sorry, Local API

  • discord user avatar
    jesschow
    Payload Team
    5 months ago

    Hey @twoxic how are you getting on here? Like @notchr 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
    twoxic
    5 months ago

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

  • default discord avatar
    markle
    3 months 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
    alamit
    3 months 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
    notchr
    3 months ago

    @alamit 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
    alamit
    3 months ago

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

  • default discord avatar
    notchr
    3 months ago

    Ah I see!

  • default discord avatar
    markle
    3 months 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
    generator101
    2 months ago

    @markle 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.
    2 months ago

    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
    generator101
    2 months ago

    @thgh. 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

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.