<p>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. </p> <p>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: </p> <pre class="brush:php;toolbar:false;">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);};</pre> <p>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. </p> <p>My login component is now very simple: </p> <pre class="brush:php;toolbar:false;">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;</pre></p>

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