Server side authentication with cookies

[jimwheaton]

I store an authentication token (JWT) in a cookie. I'm trying to access this server side by creating an AuthLink that I compose with HttpLink, which is then passed to the withData HOC. The problem is that in my AuthLink component, I don't seem to have access to the request so that I can set cookies so that the graphql request made in getDataFromTree is properly authenticated.

I've looked at other approaches that are similar to next-apollo and they all pass in the ctx from getInitialProps into the function that initializes the ApolloClient. For example:

// example `withApollo` HOC that passes `ctx` (albeit indirectly through `getToken`)
// that can be accessed in an AuthLink component to access the request cookies
static async getInitialProps(context) {
      const { Component, router, ctx } = context;
      const apolloClient = await initApollo(
        {},
        {
          getToken: () => nextCookies(ctx).token,
        },
      );

When using the withData HOC, it doesn't appear that the request context is made available to the ApolloClient init function, so I'm unable to access and set the cookies in the server side graphql request:

// withData.js
WithApollo.getInitialProps = async ctx => {
          const { AppTree } = ctx

          let pageProps = {}
          if (PageComponent.getInitialProps) {
            pageProps = await PageComponent.getInitialProps(ctx)
          }

          // Run all GraphQL queries in the component tree
          // and extract the resulting data
          const apolloClient = initApolloClient(apolloConfig, null) // <-- ctx not passed in

I feel like I'm missing something obvious. How do I make an authenticated server side graphql request with next-apollo? Is there a way to get the current request so that I can get the cookies server side?

[jimwheaton]

Update: I ended up copying the HOC in this repo, but passing in the ctx when the ApolloClient is created so that I can get access to the cookies from the original page request, and set these in an "authLink" HttpLink that gets passed as the config param to ApolloClient.

[adamsoffer]

Hey @jimwheaton - glad you got that sorted. I'll make sure to update the lib to support this.

[nghiepdev]

Hi all, Are there any updates?

[alanchrt]

I've got this exact use case as well. But, I'm not sure I totally follow how patching next-apollo to pass the context into initApolloClient() enables accessing the original incoming request/cookies. Is there any way to hook into initApolloClient() or createApolloClient() to actually access that context/customize client creation? Or is there some way through apollo-link-context, maybe?

@jimwheaton Any chance you have a snippet of what this looks like downstream of the changes you made to the HoC (and possibly what those changes look like in case I misunderstand)? ie. how you actually get the cookies out of the request/context and pass them along in your apollo client SSR requests?

[adamsoffer]

@alanctkc withData should really be able to accept an ApolloClient instance so you can customize it with context. To avoid breaking changes, we could have withApollo accept both, a simple ApolloClient config object or the ApolloClient instance itself. A bit oversubscribed at the moment so probably can't get to it this week but open to PRs!

[alyavasilyeva]

Let me fix it :)

[Rodeoclash]

I just ran into a bit of strife trying to get this working as well. The documentation on the homepage (https://github.com/adamsoffer/next-apollo#documentation) implies that const config can be a function which will accept a context as an argument, however this doesn't seem to be the case until @alyavasilyeva PR has been released. On the other hand I could be missing something obvious!

[mikeruddy]

Does this still not work @adamsoffer?

Seems like the docs or the software is broken. Maybe just put BROKEN - UNSUPPORTED on the readme? That way people don't waste their time with this package. I can make that PR if you like!

[adamsoffer]

@mikeruddy I just published v4.0.0 with a fix. Check out the README or this example for the latest configuration instructions.