asp.net core bff mode with React redirect issue

Question

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

I've used asp.net core with a React project and only modified setupProxy.js to add the endpoint 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 results in a callback URL mismatch. The redirect uri should be https://localhost:8443/signin-oidc, but the redirect uri is: https://44466/signin-oidc.

My login component is now very simple:

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

When you send the request using url (port 44466) it works as expected:

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

The development server will recognize that it is not a static asset and proxy your request to http://localhost:8443/.... as a fallback. DocumentationRelated

Similar to the picture

If you redirect on the backend it will send a 302 statue code with the target location and another request will be sent as shown

You can press F12 to select NetWork and watch the requests you send