title: Decorate api requests with Bearer token in NextJS getServerSideProps
body: <p>I am using <code>axios</code> interceptors to decorate all my requests with an <code>Authorization</code> header.</p>
  <p>I get the token from <code>@auth0/nextjs-auth0</code> by using an API route <code>/api/token</code>:</p>
  <pre><code>import auth0 from '@/libs/auth0/auth0';
  import { AccessTokenResponse } from '@auth0/nextjs-auth0/dist/tokens/token-cache';
  import { NextApiRequest, NextApiResponse } from 'next';
  
  export async function getAccessToken(
    req: NextApiRequest,
    res: NextApiResponse
  ): Promise&lt;AccessTokenResponse&gt; {
    const tokenCache = auth0(req).tokenCache(req, res);
    return tokenCache.getAccessToken();
  }
  
  export default async function token(
    req: NextApiRequest,
    res: NextApiResponse
  ): Promise&lt;void&gt; {
    try {
      const { accessToken } = await getAccessToken(req, res);
      res.status(200).end(accessToken);
    } catch (error) {
      res.status(error.status || 500).end(error.message);
    }
  }
  </code></pre>
  <p>The api route works fine on the client side requests and I can see the token being added and requests going through.</p>
  <pre><code>const { token } = await axios.get('/api/token');
  
      const result = {
        ...config,
        headers: {
          Authorization: `Bearer ${data}`,
        },
      };
      return result;
  </code></pre>
  <p>However this does not work for the SSR pages when I use the same <code>axios</code> interceptors.</p>
  <p>I tried full qualifying the url like so:</p>
  <pre><code>const { token } = await axios.get('http://localhost:3000/api/token');
  </code></pre>
  <p>But this throws an error in the SSR layer:</p>
  <pre><code>The user does not have a valid session.
  </code></pre>
  <p>I do not know how to get the token from the token cache to be used in the interceptor for the api calls made via SSR?</p>
  <p>Any ideas or similar experience?</p>