Issue with OAuth Redirect in Electron App Using Nextron Framework in Production

to authenticate and interact with YouTube APIs. The app works perfectly in development mode, but I am facing an issue in production mode regarding the OAuth redirect URI.

In development mode, the redirect URI is set to http://localhost:8888/home/, and everything works fine. However, in production mode, Electron’s base path changes to app://./home, and the redirect URI still points to http://localhost:8888/home/. When I authenticate, the app redirects to:
http://localhost:8888/home/?code=4%2F0ATx3LY6dc-FXjIbAjbSGnteGsvIDl3D-Sn4iW7IHW0s5vz_CptRrXdiw45DdFwU5HQ-Hpw&scope=https%3A%2F%2Fwww.googleapis.com%2Fauth%2Fyoutube

This results in a white screen and a red error in the Chrome network tab. No specific error message is displayed in console.
I have the following files:

main.ts

import path from 'path';
import { app, ipcMain } from 'electron';
import serve from 'electron-serve';
import { createWindow } from './helpers';

require('./server');
const isProd = process.env.NODE_ENV === 'production';

if (isProd) {
  serve({ directory: 'app' });
  app.setAsDefaultProtocolClient('app');
} else {
  app.setPath('userData', `${app.getPath('userData')} (development)`);
}

(async () => {
  await app.whenReady();

  const mainWindow = createWindow('main', {
    width: 1000,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js'),
    },
  });

  if (isProd) {
    await mainWindow.loadURL('app://./home');
  } else {
    const port = process.argv[2];
    await mainWindow.loadURL(`http://localhost:${port}/home`);
    mainWindow.webContents.openDevTools();
  }
})();

app.on('window-all-closed', () => {
  app.quit();
});

ipcMain.on('message', async (event, arg) => {
  event.reply('message', `${arg} World!`);
});

auth.tsx:

import { useEffect } from 'react';
import { useRouter } from 'next/router';

const AuthPage = () => {
  const router = useRouter();

  useEffect(() => {
    const { code } = router.query;
    if (code) {
      const authYoutube = async () => {
        try {
          const response = await fetch('/api/auth', {
            method: 'POST',
            headers: {
              'Content-Type': 'application/json',
            },
            body: JSON.stringify({ code }),
          });

          if (response.ok) {
            const tokens = await response.json();
            router.push(
              `/?tokens=${encodeURIComponent(JSON.stringify(tokens))}`
            );
          } else {
            console.error('Failed to fetch tokens:', await response.json());
          }
        } catch (error) {
          console.error('Error fetching tokens:', error);
        }
      };

      authYoutube();
    } else {
      const authUrl = `${process.env.NEXT_PUBLIC_GOOGLE_AUTH_URL}?client_id=${process.env.NEXT_PUBLIC_CLIENT_ID}&redirect_uri=${process.env.NEXT_PUBLIC_REDIRECT_URI}&response_type=code&scope=https://www.googleapis.com/auth/youtube`;
      window.location.href = authUrl;
    }
  }, [router.query]);

  return null;
};

export default AuthPage;

I have tried the intercepting the redirect URI, I want something like proxy or interception so my redirect URI remain the same as well as the base url in production remain same but it convert or redirect to production home page