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).
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.
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.
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);
}
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.
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