Authentication in .net Core with ReactJS SPA

Question

I trying add authentication to .net Core 2.1 application. Starting from scratch: We can create new web application with react using VS template.

In this tempate we can see:

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


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

I also added Auth controller and views with login/register endpoints.

How can I add logic which will reject access to SPA untill we will login to application?

I know how to use asp.net identity regullary but with this SPA I need advice.

Nan Yu · Accepted Answer · 2019-05-30 07:40:53Z

6

In Middleware you can check whether user is authenticated , for example :

app.UseSpa(spa =>
{
    spa.ApplicationBuilder.MapWhen(
        (context)=>!context.User.Identity.IsAuthenticated, 
        ab => {
            ab.Run(async (ctx )=> {
                ctx.Response.StatusCode = 401;
                //redirect to login page
                ctx.Response.Headers.Add("Location", "....");
                //await ctx.Response.WriteAsync("Authecation Failed");
            });
        }
    );

    spa.Options.SourcePath = "ClientApp";

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

answered May 30, 2019 at 7:40

Nan Yu

27.7k9 gold badges75 silver badges157 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

R.Prog Over a year ago

Can I skip favicon.ico request? Becouse currently with this solution favicon request is also redirected.

Tony · Accepted Answer · 2019-05-30 06:54:35Z

1

For authentication with SPA you can use some server side tech like JWT to authenticate user. So if user login success you can give them the token and when user request your API you can submit the token within the header of the request so that the server know who you are and allow you access the API resource or not.

You can take a look at openiddict. They have full example with Angular app

answered May 30, 2019 at 6:54

Tony

20.3k7 gold badges42 silver badges62 bronze badges

Collectives™ on Stack Overflow

Authentication in .net Core with ReactJS SPA

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related