Making Asp.Net core route first and then making to React route next

Question

I am new to react but not to asp.net core application development. I am trying to create a react application with asp.net core + react template in visual studio. I am trying to do a Asp.Net MVC route first to call controller action which has [Authorize] attribute to make sure user is authenticated. I do not have any thing to show in Asp.Net MVC view. I want to immediately redirect user to react default route once user is authenticated via asp.net mvc controller action. Is there any specific routing mechanism to achieve that.

Right now my application goes through controller and action based on route and stops at view defined by controller action. I am trying to understand how to redirect user to use react route now. I tried using return redirecttoaction and returnredirecttoroute but no luck.

My Asp.Net Core MVC Action

[Authorize]
public ActionResult Index()
{
    var IsAuthenticated = HttpContext.User.Identity.IsAuthenticated;
    var UserName = "Guest";
    if (IsAuthenticated)
    {
        UserName = HttpContext.User.Identity.Name;
    }
    TempData["userName"] = UserName;

    //return View();
    return Redirect("my react first page");
}

I tried return Redirect("my react first page");

My Startup file method used for routing

    public void Configure(IApplicationBuilder app, IHostingEnvironment env)
            {
                if (env.IsDevelopment())
                {
                    app.UseDeveloperExceptionPage();
                }
                else
                {
                    app.UseExceptionHandler("/Error");
                    app.UseHsts();
                }

                app.UseHttpsRedirection();
                app.UseStaticFiles();
                app.UseSpaStaticFiles();
                app.UseAuthentication();


//MVC Part. I am trying this to authorize as FIRST step
                app.UseMvc(routes =>
                {
                    routes.MapRoute(
                        name: "default",
                        template: "{controller=DataAccess}/{action=Index}/{id?}");
                });

// React part I am trying this to be called once Authentication is done in controller action. Trying to call this as a SECOND step

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

                    if (env.IsDevelopment())
                    {
                        spa.UseReactDevelopmentServer(npmScript: "start");
                    }
                });
            }

If I do a redirect and force the react route will there be any issue missing react route features? I see this spa.UseReactDevelopmentServer(npmScript: "start"); is taking more time showing a timeout if I do a redirect. Any solution where User can be redirected to controller action do all authorization and use react default routing mechanism?

Is there any option to run react server first and do routing as starting server is taking more time leading to timeouts.

Note: I used Create-React-App to create my app.

Answer 1

Dont setup the same routes for both, let the server find the non React view, and let React have it own routes and view/templates

Answer 2

You should setup client side routing in react and server side routing in asp.net core.

Please note that client side routes are only limited to browser. They are not known to the server.

When you try to change page in react, browser (without sending request to server) redirects user to other page - provided you do not need any other information from server for this redirection.

In my opinion, you should design application in such a way that your server should not directly affect the routes defined in client side routing.

The ideal flow (again, in my opinion) for routing based on some decision on asp.net server would be:

• The client calls server for some decision
• Server sends response back to react
• React then interprets response and decides whether to redirect or not.
• If user is to be redirected, then where it should be redirected.

This logic (or any other similar logic) will also keep your server side logic completely decoupled from the client side technology.