How to redirect to frontend URI after OAuth process if backend and frontend are deployed in separate web services.

[mmdmirh]

I am trying to detach frontend folder and put it into a separate repo to deploy in a static web app server.
So the static folder is no longer needed by backend and the api requests in frontend need ${backendurl}.
The problem is that the callback url for oauth is the backend address and thus the user faces error.
How can I set backend to redirect the frontend address?
I used the frontend address in login button as callback address, and also added the frontend address to Allowed external redirect URLs in backend authentication.

[mmdmirh]

Solved!

All we need is to enable CORS in backend, for frontend by adding its address to Allowed Origins. then check Enable Access-Control-Allow-Credentials.
The api.ts also needs to be update. it needs backend url as base url and credentials: 'include' in the requests. forexample .auth/me request changes to the following:

export async function getUserInfo(): Promise<UserInfo[]> {
    const response = await fetch(`${backendUrl}/.auth/me`,{
        credentials: 'include', // This tells the browser to include cookies
    });
    console.log("Getting User info")
    if (!response.ok) {
        console.log("No identity provider found. Access to chat will be blocked.")
        return [];
    }

    const payload = await response.json();
    return payload;
}

Where backend url is defined in environment variable as VITE_BACKEND_UR and imported by:
const backendUrl = import.meta.env.VITE_BACKEND_URL;