How to separate Run frontend and backend for frontend?

Help
, ,
1

Hello team,

I have implemented the backend for the frontend pattern (BFF).
I followed this article Backend For Frontend Authentication Pattern with Auth0 and ASP.NET Core
It works perfectly for me.
But I want to run both frontend and backend for frontend in different ports. Currently react project and backend run in the same port.
I want to run different ports to deploy different environments.
I just want to know is it possible to run separately react project and backend project with differents ports.

Thanks in advance

2

Hey there!

I guess the potential answer will be as with this Stackoverflow question:

but maybe I’m wrong and @cibrax will share some insight as he’s the author of that article :slight_smile:

3

Hello,

The following code change should do that trick

app.UseSpa(spa =>
            {
                spa.Options.SourcePath = "ClientApp";

                if (env.IsDevelopment())
                {
                    //spa.UseReactDevelopmentServer(npmScript: "start");
                    spa.UseProxyToSpaDevelopmentServer("https://yourreactserver");
                }
            });

That should point the .NET app to a different development server for the react app running in a different port (and it would use the react proxy to emulate requests from the same domain). Otherwise, if you change domains, this BFF approach will not work as it relies on cookies being passed from the frontend to the backend.

Thanks
Pablo.

1 Like
4

Thanks for helping on this one @cibrax !

5

Thank you for your support. It is very useful information. I will try that and then let you know.
Thanks again guys

1 Like
6

Hi Pablo,

Thanks for your help. I tried your solution but facing some problems.

app.UseSpa(spa =>
            {
                spa.Options.SourcePath = "ClientApp";

                if (env.IsDevelopment())
                {
                    //spa.UseReactDevelopmentServer(npmScript: "start");
                    spa.UseProxyToSpaDevelopmentServer("http://localhost:3000/");
                }
            });

Backend listen on https://localhost:44331/ this URL.

Frontend listen on http://localhost:3000/ this URL.

When I am trying to hit login from http://localhost:3000/ this URL login method is not called.

When I am trying to hit login from https://localhost:44331/ this URL login method is called.

The login method returns ChallengeResult from auth0. I mean return login screen.

public ActionResult Login(string returnUrl = "/")
        {
            return new ChallengeResult("Auth0", new AuthenticationProperties() { RedirectUri = returnUrl });
        }

I do not understand why the login method is not called from http://localhost:3000/

Also, I noticed GetUser method is called from http://localhost:3000/

 public ActionResult GetUser()
        {
            if (User.Identity.IsAuthenticated)
            {
                var claims = ((ClaimsIdentity)this.User.Identity).Claims.Select(c =>
                    new { type = c.Type, value = c.Value })
                    .ToArray();

                return Json(new { isAuthenticated = true, claims = claims });
            }

            return Json(new { isAuthenticated = false });
        }

Here is my AuthController.

public class AuthController: Controller
    {

        public ActionResult Login(string returnUrl = "/")
        {
            return new ChallengeResult("Auth0", new AuthenticationProperties() { RedirectUri = returnUrl });
        }

        [Authorize]
        public async Task<ActionResult> Logout()
        {
            await HttpContext.SignOutAsync();
            return new SignOutResult("Auth0", new AuthenticationProperties
            {
                RedirectUri = Url.Action("Index", "Home")
                //RedirectUri = Url.Action("Index", "fetch-data")
            });
        }

        public ActionResult GetUser()
        {
            if (User.Identity.IsAuthenticated)
            {
                var claims = ((ClaimsIdentity)this.User.Identity).Claims.Select(c =>
                    new { type = c.Type, value = c.Value })
                    .ToArray();

                return Json(new { isAuthenticated = true, claims = claims });
            }

            return Json(new { isAuthenticated = false });
        }
    }

The Login method returned a view and get user method returned data.
Please help me to understand this problem. I want to work BFF application on different ports.
Also, With Authentication login and logout. I set up all callback URLs and logout URL.

Thanks

7

This topic was automatically closed 15 days after the last reply. New replies are no longer allowed.