title: How to use a next-auth jwt in relay-nextjs?
body: <p>I am trying to use <code>next-auth</code> with <code>relay-nextjs</code>. I setup <code>next-auth</code> per <a href="https://github.com/praveenweb/next-auth-hasura-example/blob/main/pages/api/auth/%5B...nextauth%5D.js" rel="nofollow noreferrer">a hasura jwt example</a>, and <code>relay-nextjs</code> per <a href="https://reverecre.github.io/relay-nextjs/docs/configuration#usage-in-a-page" rel="nofollow noreferrer">the official docs</a>. I want to pass a <code>next-auth</code> jwt Bearer token in the <code>relay-nextjs</code> Authorization header sent  to the GraphQL endpoint.</p>
  <ol>
  <li><p><code>next-auth</code> provides a <code>getSession</code> method. <a href="https://github.com/nextauthjs/next-auth/blob/60fdf26a569937dd0b483f14ee35f398183b2d79/src/client/index.js#L140" rel="nofollow noreferrer">Under the hood</a>, this <a href="https://github.com/nextauthjs/next-auth/blob/60fdf26a569937dd0b483f14ee35f398183b2d79/src/client/index.js#L297" rel="nofollow noreferrer">requests</a> a server endpoint.</p>
  </li>
  <li><p><code>relay-nextjs</code> provides a <code>serverSideProps</code> property of a <code>withRelay</code> HoC. You pass your page component to <code>withRelay</code>. You add a function to <code>serverSideProps</code> that will send a token to the page's Relay environment.</p>
  </li>
  </ol>
  <p>My problem is <code>getSession</code> is null inside <code>serverSideProps</code>:</p>
  <pre><code>serverSideProps: async (ctx) =&gt; {
      const { getSession } = await import('next-auth/client');
  
      // This is an example of getting an auth token from the request context.
      // If you don't need to authenticate users this can be removed and return an
      // empty object instead.
      const token = await getSession();
      return { token };
    }
  </code></pre>
  <p>If I can get the token here, it works in <code>relay-nextjs</code>. Returning a string works fine, adds it to the header.</p>
  <p>There's a <code>next-auth</code> cookie with the app page request. I checked it against the endpoint called by <code>getSession</code>. The cookies don't match. They do, until this part after the last dot, which changes on each request.</p>
  <pre><code>session-token=xxxx.xxxxxxxx.xxxxx
  </code></pre>
  <p>I ran it through the debugger, and it looks like <code>relay-nextjs</code> executes before the <code>next-auth</code> callback.</p>
  <p>One approach I'm trying now is store the <code>next-auth</code> token in a database, and run a prisma query instead of <code>getSession</code>. Any input is welcomed.</p>