Securing a SPA by authorization server before first load

Question

I am using the 'new' project templates for angular SPA applications in dotnet core 2.1 as written in the article Use the Angular project template with ASP.NET Core.

But this article doesn't mention anything about securing the SPA itself. All information i find is about securing a WEBAPI but first of all i am interested in securing the SPA.

That means: When i open up my SPA e.g. https://localhost:44329/ i would like to be redirected to the authorization server immediatly instead of clicking some button that will do the authentication.

Background:

• I have to ensure that only a authenticated users are allowed to see the SPA.
• I want to use Authorization Code Grant to get refresh tokens from my authorization server.
• I cannot use Implicit Grant because refresh tokens cannot be kept private on the browser

Current approach is to enforce a MVC policy that requires a authenticated user. But this can only be applied to a MVC Controller. That's why i added HomeController to serve the first request.

See project structure:

My Startup.cs:

public void ConfigureServices(IServiceCollection services) {     services.AddAuthentication(options =>         {             options.DefaultAuthenticateScheme = CookieAuthenticationDefaults.AuthenticationScheme;             options.DefaultSignInScheme = CookieAuthenticationDefaults.AuthenticationScheme;             options.DefaultChallengeScheme = "CustomScheme";         })         .AddCookie()         .AddOAuth("CustomScheme", options =>         {             // Removed for brevity         });      services.AddMvc(config =>     {         // Require a authenticated user         var policy = new AuthorizationPolicyBuilder()             .RequireAuthenticatedUser()             .Build();         config.Filters.Add(new AuthorizeFilter(policy));     });      // In production, the Angular files will be served from this directory     services.AddSpaStaticFiles(configuration =>     {         configuration.RootPath = "ClientApp/dist";     }); }  // This method gets called by the runtime. Use this method to configure the HTTP request pipeline. public void Configure(IApplicationBuilder app, IHostingEnvironment env) {     if (env.IsDevelopment())     {         app.UseDeveloperExceptionPage();     }     else     {         app.UseExceptionHandler("/Home/Error");     }      app.UseAuthentication();      app.UseStaticFiles();     app.UseSpaStaticFiles();      app.UseMvc(routes =>     {         routes.MapRoute(             name: "default",             template: "{controller=Home}/{action=Index}/{id?}");     });      app.UseSpa(spa =>     {         spa.Options.SourcePath = "ClientApp";          if (env.IsDevelopment())         {             spa.UseAngularCliServer(npmScript: "start");         }     }); } 

Current behaviour: When i spin up my SPA i'm immediately redirected to my authorization server because of the MVC policy. After successful authentication i see the Index method of the home controller but not my SPA.

So the question is how should i serve my SPA after i have been redirected from authentication server?

Answer 1

I have something that seems to work.

In my researches I stumbbled apon this post suggesting to use a middleware instead of the Authorize attribute.

Now, the method used in that post authService does not seem to work in my case (no clue why, I'll continue the investigation and post whaterver I find later on).

So I decided to go with a simpler solution. Here is my config

        app.Use(async (context, next) =>         {             if (!context.User.Identity.IsAuthenticated)             {                 await context.ChallengeAsync("oidc");             }             else             {                 await next();             }         }); 

In this case, oidc kicks in BEFORE the Spa app and the flow is working properly. No need for a Controller at all.

HTH