asp.net core with react redirection issues bff pattern

Question

I'm trying to understand how the routing should work from the frontend to the backend. I'm using the duende.bff package in asp.net core 7 and have this setup according to the documentation and this tutorial: https://timdeschryver.dev/blog/lets-make-our-spa-more-secure-by-setting-up-a-net-bff-with-duende-and-auth0#creating-a-bff-api. Now I'm trying to understand how to redirect from the frontend to the backend so that a user can authorize using Auth0.

I've used the asp.net core with react project and have only modified the setupProxy.js to add the endpoints that should be forwarded to the backend:

    const { createProxyMiddleware } = require('http-proxy-middleware');const { env } = require('process');
    
    const target = env.ASPNETCORE_HTTPS_PORT ? https://localhost:${env.ASPNETCORE_HTTPS_PORT} :env.ASPNETCORE_URLS ? env.ASPNETCORE_URLS.split(';')[0] : 'http://localhost:48637';
    
    const context = [
    "/bff/login",
    "/api",
    "/signin-oidc",
    "/signout-callback-oidc"
    ];
    
    const onError = (err, req, resp, target) => {console.error(${err.message});}
    
    module.exports = function (app) {const appProxy = createProxyMiddleware(context, {target: target,// Handle errors to prevent the proxy middleware from crashing when// the ASP NET Core webserver is unavailableonError: onError,secure: false,// Uncomment this line to add support for proxying websockets//ws: true,headers: {Connection: 'Keep-Alive'}});
    
    app.use(appProxy);};

This still gives me a callback URL mismatch. the redirect uri should be https://localhost:8443/signin-oidc, but is redirect_uri: https://44466/signin-oidc.

My login component is pretty straightforward right now:

    import React from 'react';
    import LoginLogo from './Login_logo';
    import './Login_page.css';
    
    const Login_page = () => {
    
        return (
            <div className="login-page">
                <div className='login-page-header'>
                    <LoginLogo />
                    <h1 className="title">sipster</h1>
                </div>
                <div className='login-page-input'>
                    <button className='login-button'> <a href="/bff/login">Login</a></button>
                </div>
            </div>
        );
    };
    
    export default Login_page;

Answer 1

It just worked as expected,when you send request with url (port 44466):

"/bff/login",
"/api",
"/signin-oidc",
"/signout-callback-oidc"

the development server will recognize that it’s not a static asset, and will proxy your request to http://localhost:8443/.... as a fallback. the doucment related

similar with the pic

And if you redirect in backend ,it send 302 statue code with target location back ,and it would send another request as shown in this pic

You could Press F12 select NetWork and observe the request you've sent