[@auth0/nextjs-auth0] Custom headers or query parameters on server-side requests

Help
,
1

I’m using the @auth0/nextjs-auth0 v3.5.0, in my Next.js app-routter application, v 14.2.13.

There are some calls that are made to my Auth0 application that are server-side (e.g., POST https://my-auth0-tentant.com/oauth/token, which happens, if I got it correctly, on the handleAuth({ callback: handleCallback({ redirectUri }) }) method).

I need to add some custom headers, or custom query parameters, to that server-side call (because we are adding a WAF in front of the Auth0 tenant, and there are some rules and policies we have to setup).

I’ve tried doing:

handleAuth({
    callback: handleCallback({
        redirectUri,
        authorizationParams: {
            'my-custom-key': 'my-custom-value',
        }
    })
})

but it didn’t do it (the custom values are not added to the server-side call).

Is it possible to achieve what I want? And if so, how?
Also, I’ve mentioned the /oauth/token call, but if there are others, they should also be considered.

Appreciate any help.

3

Hi @lvilasboas-dti,

Welcome to the Auth0 Community!

Can you try adding the custom parameters to the login method? Example:

login: handleLogin({
        authorizationParams: {
            'my-custom-key': 'my-custom-value',
        },

In my testing, I do not see the custom parameter when adding it to handleCallback, but I do see it passed through when I add it to handleLogin.

Please let me know how that goes!

Best,

Mary Beth

4

Hi @marybeth.hunter , thank you for your response!

But that does not achieve what I need - the only thing that it does is adding those parameters as query parameters to the URL the user ultimately gets redirect to when they get to the Auth0 instance.

I need a way to add it to the server-side requests, if that is possible.

5

Hi @lvilasboas-dti,

I understand! I did some research into this and it looks like you can access custom query parameters via req.query.

If you add a custom query parameter to the redirect_uri, for example, you can access it in server-side functions using req.query.

Adding custom query parameter:

import { handleLogin } from '@auth0/nextjs-auth0';

export default function login(req, res) {
  handleLogin(req, res, {
    authorizationParams: {
      // Example of passing a custom query parameter to Auth0
      redirect_uri: `${process.env.AUTH0_REDIRECT_URI}?foo=bar`
    }
  });
}

Accessing custom query parameters:

export default function handler(req, res) {
  const { foo } = req.query;  // Access 'foo' parameter

  // Your logic here with 'foo'
  res.status(200).json({ message: `Received foo: ${foo}` });
}

If you need to pass the custom parameters to a server-side API or third-party service after authentication, you can fetch the token and include the parameters in the request. For example:

import { getSession } from '@auth0/nextjs-auth0';

export default async function handler(req, res) {
  const session = getSession(req, res);

  if (!session) {
    return res.status(401).send('Unauthorized');
  }

  // Get the Auth0 access token
  const accessToken = session.accessToken;

  // You can include custom parameters in your server-side request
  const customParams = {
    foo: req.query.foo,
  };

  const response = await fetch('https://your-api-endpoint.com', {
    method: 'POST',
    headers: {
      Authorization: `Bearer ${accessToken}`,
      'Content-Type': 'application/json',
    },
    body: JSON.stringify(customParams),
  });

  const data = await response.json();
  res.status(200).json(data);
}

Let me know how that goes!

Thanks,

Mary Beth

6

Hey @marybeth.hunter ,

thank you for the thorough explanation - but again, it does not touch what I need.

When the user returns from the universal login flow (which happens on the tenant, and NOT on my application), they’ll go to the handleCallback SDK method.

This method, internally, makes a request to the tenant, on the /oauth/token endpoint, correct? This request is the one I need to add custom query parameters.

The handleLogin method does not apply to the situation.
And the other example you mentioned, where I make a request to your-api-endpoint.com, is trivial - of course if my application (i.e., I control it) makes a request to some endpoint I can add whatever I want to it.

The problem is with the internal requests the SDK makes to the tenant.

8

Hi @lvilasboas-dti,

Thank you for your reply, and I apologize for the delay. I have been out of the office.

I understand - I have reached out internally to the product team to get more input on this. I will keep you updated!

Best,

Mary Beth

9

Hi @lvilasboas-dti,

Apologies for the delay here - I just heard back from the team. Regarding custom headers/query parameters on server-side requests:

  • custom headers: they are ignored
  • custom query params: they ignored for /token endpoint. They can be used on /authorize and then can be incorporated into New Universal Llgin templates if they include ext- prefix. Read this. Available in postLogin event.request.query for calls to /authorize
  • custom body params: they are available in postLogin and M2M event.request.body in Actions

Thanks,

Mary Beth