Issue with Cross-Domain Authentication Between Azure-hosted Sites and Auth0

Help
,
1

Hello,

We have two domains as follows:

We have deployed an app service on Azure for testing, and we own the following domains:
(These domains have names similar to actual domains, but the domains below do not actually exist)

A. https://example-login.azurewebsites.net
B. https://example-afterlogin.azurewebsites.net

Both A and B domains contain frontend source code using Auth0 and Next.js. For testing purposes, the source code for both sites is currently in the same state. When there is no session, accessing either the A or B domain leads to Auth0’s login page, and users are required to log in.

What we desire is a structure where, upon successful login on Site A, the user is redirected to Site B with a valid session applied, allowing them to use the service seamlessly.

The frontend source code we have written is as follows:

import { NextApiRequest, NextApiResponse } from "next";
import { handleAuth, handleLogin, handleCallback } from "@auth0/nextjs-auth0";

export const GET = handleAuth({
  async login(req: NextApiRequest, res: NextApiResponse) {
    return await handleLogin(req, res);
  },
  async callback(req: NextApiRequest, res: NextApiResponse) {
    try {
      return await handleCallback(req, res, {
        redirectUri: `https://example-afterlogin.azurewebsites.net/api/auth/callback`,
      });
    } catch (error) {
      console.log(error);
    }
  },
});

Additionally, we have configured Auth0 on the application side as follows:

- Application URIs
Application Login URI: https://example-login.azurewebsites.net
Allowed Callback URLs: https://*.azurewebsites.net/api/auth/callback
Allowed Web Origins: https://*.azurewebsites.net

- Cross-Origin Authentication
Allow Cross-Origin Authentication: ON
Allowed Origins(CORS): https://*.azurewebsites.net

Based on the above situation, when we log in on Site A, we encounter an error in the callback function, and the following error log is generated:

CallbackHandlerError: Callback handler failed. CAUSE: unauthorized_client (The redirect URI is wrong. You sent https://example-afterlogin.azurewebsites.net.azurewebsites.net, and we expected https://example-login.azurewebsites.net)
at /home/site/wwwroot/.next/server/chunks/877.js:2225:19
at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
at async callback (/home/site/wwwroot/.next/server/app/api/auth/[auth0]/route.js:132:20)
at async /home/site/wwwroot/.next/server/chunks/877.js:2053:24
at async /home/site/wwwroot/.next/server/chunks/632.js:5632:37 {
  code: 'ERR_CALLBACK_HANDLER_FAILURE',
  cause: IdentityProviderError: unauthorized_client (The redirect URI is wrong. You sent https://example-afterlogin.azurewebsites.net, and we expected https://example-login.azurewebsites.net)
      at NodeClient.callback (/home/site/wwwroot/.next/server/chunks/877.js:170:23)
      at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
      at async /home/site/wwwroot/.next/server/chunks/877.js:550:29
      at async /home/site/wwwroot/.next/server/chunks/877.js:2222:13
      at async callback (/home/site/wwwroot/.next/server/app/api/auth/[auth0]/route.js:132:20)
      at async /home/site/wwwroot/.next/server/chunks/877.js:2053:24
      at async /home/site/wwwroot/.next/server/chunks/632.js:5632:37 {
    error: 'unauthorized_client',
    errorDescription: 'The redirect URI is wrong. You sent https://example-afterlogin.azurewebsites.net, and we expected https://example-login.azurewebsites.net',
    status: 400,
    statusCode: 400,
    openIdState: {
      returnTo: 'https://example-login.azurewebsites.net/'
    }
  },
  status: 400
}
- error TypeError: Cannot read properties of undefined (reading 'headers')

Could you please advise us on what we might have done wrong? We will provide any additional information if needed.

Thank you.

1 Like