Better way to add authorization header

[aadilghani1]

Hello 👋

Is there a better way to pass the authorization headers other than the client itself. I am using RSC only and get a warning since I am setting the headers from the server component.

Warning: "nextjs-auth0 is attempting to set cookies from a server component,see https://github.com/auth0/nextjs-auth0#using-this-sdk-with-react-server-components"

My middleware injects the authorization header in the request and my apollo client reads and reinjects this. I can sense something off here already;

Here is my apollo client:

// src/apollo-client.ts
import { createHttpLink } from '@apollo/client';
import {
  ApolloClient,
  InMemoryCache,
  registerApolloClient,
} from '@apollo/experimental-nextjs-app-support';
import { headers } from 'next/headers';

export const { getClient, query } = registerApolloClient(() => {
  const httpLink = () => {
    const readOnlyHeaders = headers();
    const authorization = readOnlyHeaders.get('Authorization');
    if (!authorization) {
      throw new Error('Missing authorization header');
    }
    return createHttpLink({
      uri: process.env.PLATFORM_GRAPHQL_ENDPOINT,
      credentials: 'include',
      headers: {
        authorization,
      },
    });
  };

  return new ApolloClient({
    link: httpLink(),
    cache: new InMemoryCache(),
    ssrMode: true,
  });
});

[alessbell]

Hi @aadilghani1 👋

The way you're registering Apollo Client here for use in RSC is correct, with a couple of minor notes I'll add below. Unfortunately it seems the source of your error is unrelated to Apollo Client.

Two nits: the ssrMode: true config option isn't needed when you initialize your ApolloClient as this is for (pre-RSC) SSR with getDataFromTree. And also credentials: 'include' won't do anything here running on the server since it's a browser API.

I'm going to go ahead and close this issue out, but please feel free to post a follow-up comment if there's anything I've missed.

[github-actions]

Do you have any feedback for the maintainers? Please tell us by taking a one-minute survey. Your responses will help us understand Apollo Client usage and allow us to serve you better.