Example for authentication

[lednhatkhanh]

Hi, I want to ask if there is any example for authentication for angular 2? I'm very new to this so I have no idea about this, it would be good if we can have a working example for authentication!

[MarkPieszak]

I think the problem with adding it to these templates, is that authentication itself is very broad, in that, there are so may different ways someone could be doing it.

One way you could set it up for Angular is making an HTTP call passing in your credentials to some REST API (could be the web API), which would then pass back whatever type of authentication token you setup (bearer token, etc).

From there, you'd want some kind of service that stores this token, or makes it a default for future Http requests (easily done by extending Http with your own version, which passes those Authentication Headers automatically for you, if he user is already logged in).

Hope that gets you going in the right direction!

[piotrek-k]

I think the idea is not that bad. Setting up authentication - just like configurating angular - is definitely possible to automate. Of course there are many different ways of doing it, but there should be a solution for people who don't really care, who just want some authentication that works.

I remember that some time ago Microsoft have done something like that in Visual Studio 2013 (or maybe earlier) while creating new ASP.net 4.6 MVC apps. You've just clicked on "Create new project with authentication" and you could just start making actual app logic without wasting a few hours on configurating tokens, databases, etc. Maybe it was not always the best solution, but it worked in 99% cases.

I'm definitely approving this idea ;)

[Sampath-Lokuge]

Yes,This will give huge popularity for this template if author will integrate it. +1 for the idea @lednhatkhanh

[boban100janovski]

I have setup Authentication using IdentityServer, which takes care of all the heavy lifting, all you need to do is configure it and write the client side logic for handling the token (if you are using "Implcit Flow" there is a JS module for taking care of client side also OIDC client.)

I am using ROPC flow, i should have some free time soon and will write a blog about it, i will put the link here

[mika76]

I think an example with webapi as a token backend and angular 2 as frontend would be a huge hit! You already have identity as part of mvc and the template pretty much teaches you how to use it, so why not create a similar experience with this?

[mcquiggd]

Just a comment - please don't just limit any authentication examples to Angular - many people prefer React for example...

[mika76]

Sure or maybe vue...

[davidmorissette]

An OAuth2 / OpenId using implicit flow example / functionality including how to pass the token between client to server for pre-rendering and also how to renew the access token silently.

[brettjdicioccio]

Now that the ASP.NET Core 2.0 Web API template has an Individual User Accounts option which seems really promising it would be great if you guys redid the built in register/login/manage pages as part of the Angular code using token based Authentication. There are so many tutorials/courses out there for Angular w/ Firebase and Auth0, but not much on ASP.NET Core Identity and Angular.

[PeterWone]

Please, not like this!

Direct Angular support seems to me like a lot of unnecessary work when you could get a better result for less effort. ASP.NET Core MVC templates already handle auth/auth comprehensively, with elaborate support for Microsoft Identity. If you hand off to MVC on your own server instead of directly to an authentication provider, you gain the following advantages:

1. MVC can handle third party authenticators like Twitter which if I'm not mistaken is still OAuth1, and Facebook which does not support OpenID.
2. This is an inherently safer solution. Code on your server has much higher confidentiality than JavaScript in a browser of unknown provenance.
3. Strong integration with Microsoft Identity providing sophisticated support for both roles and the new security policies.
4. You can use this with other frameworks than Angular.

What I would like to see

1. Remix the SPA templates to include the same options MVC projects have. Hopefully you can steal shamelessly from the MVC project templates.
2. While you could deliver identity to the SPA client in a fragment as conventional identity providers do, you could also make it available from session state with one of those new one-shot items, for retrieval via Web API.

---

Why don't I just get with the program and use Angular like everyone else? Same reason I didn't want to get with the program and use Visual Basic twenty years ago. Employers choose it because there's an Angular dev under every bush. Devs choose it because there's an Angular employer under every bush. That doesn't mean it's bad but it also doesn't mean it's good. Just common.

[MarkPieszak]

Of course you can, and should, do all the Auth on your own server.

I think the person was wondering more-so how to handle the calls to those internal Apis and how to best handle sharing those tokens with future API calls, how to handle if the person leaves the site or even pushes F5 (knowing that they are/might still be authenticated, etc).

Just have an /API/login do all the aspnet Auth / openID / whatever-you-want goodness, and make sure you pass whatever headers you need inside each future call after that.

Hope that's what you were Looking for @PeterWone ?

[PeterWone]

This may be simple ignorance but I don't know any way to specify support for Identity when creating a new SPA with dotnet new aurelia (weapon of choice) or dotnet new angular.

I can mint a new core project in VS2017 with the security stuff, or mint a new core/spa project from the command line, but to combine them currently involves creating two projects and grafting them together which is messy and I always forget things.

You already read my thesis above so I won't repeat it; you seem to understand why I regard this as a better option and I'm sure you can see why I'd prefer a project template that does it all in one go with all the wrinkles ironed out in advance.

[JStarkl]

Here you find a good example, which i used:
https://code.msdn.microsoft.com/How-to-authorization-914d126b

or another one:
https://fullstackmark.com/post/10/user-authentication-with-angular-and-asp-net-core

[CliXiD]

Hi guys,

I would like to share my project (still in develop) that integrate with OpenIdDict Core for React Redux template in Password flow. This project also including .template.config. You can install this project as a dotnet template too.

https://github.com/CliXiD/ARRO

[tonywr71]

I added ASP.Net authorisation and membership to my angular5/asp.net application. I think if this was part of the template in VS2017 then it'd get more takeup as this is non-trivial. I did it by generating two apps, being a standard MVC app and an Angular app, then copying the bits I needed from the MVC app into the angular app. This is just a copy of my notes - it's a bit rough around the edges, so if you see something that needs elaborating, by all means, let me know and I'll see how I go correcting it. My link is here.

[lankaapura]

Hi all, I've created a sample for authentication with Identity server 4 with Angular4. It supports server pre-rendering as well. Hope it helps.
https://github.com/lankaapura/Angular-AspNetCore-Idsvr

[ghost]

Not having this feature is actually turning me away from SPA. It would be great if we could just do:
dotnet new reactredux --auth individual
and bam, you've got identity configured out of the box.

[tbertenshaw]

Is this issue in progress and potentially in the 2.1 time frame? Would be good to know so i can decide if javascript services will work with a asp.net 4.5 (identity) port i am planning.

[kwakuduahc1]

I think this will be a great feature. I have combed the internet for hours trying to find a good solution

[tstojecki]

The challenge with adding --auth to SPA template is that it isn't clear what type of auth you would want to enable for this.

In theory, if you're in a SPA calling a web api, you should be looking at an implict flow for authorization and to get an access token. There is a number of drawbacks to it, among them one that considers implict flow less secure due to the nature of how access token is being passed through the front-channel and there is no way to authenticate the client as the SPAs have no way to securely store the secret. You get (or should be getting) short lived access tokens with no referesh token and have to resort to iframe based approaches around obtaining new tokens upon expiration (libraries like adal.js or oidc.js do that). Lots to consider.

Aspnet mvc template does auth (when working with separate authorization server such as IdentityServer or AAD) with a combination of an authorization code flow (considered more secure than implicit flow) and cookies (server only). That doesn't lend itself well to SPAs. You could in theory serve your SPA from the public directory of the mvc app (static files middleware), but you end up with a cookie based auth at the end, so problems like csrf remain.

@SteveSandersonMS has there been a discussion about this internally? You mentioned this is on the backlog, would be interesting to hear the options the team has considered.

[PeterWone]

There is no secure way to perform secret based authentication in a SPA because SPA code runs in a container of uncertain provenance, and cannot maintain confidentiality because it can’t keep secrets from its container. Better to let MVC to handle the entire unauthenticated user experience including the authentication process. Once this is complete and the tokens are in hand, launch the SPA with an embedded token that can be exchanged for a bundle of identity and access tokens. The embedded token would be invalidated after one redemption to thwart attacks based on acquisition of this token. With this approach a SPA never handles secrets and cannot disclose them.

…

________________________________ From: tstojecki <notifications@github.com> Sent: Saturday, July 7, 2018 7:31:48 PM To: aspnet/JavaScriptServices Cc: Peter Wone; Mention Subject: Re: [aspnet/JavaScriptServices] Example for authentication (#548) The challenge with adding --auth to SPA template is that it isn't clear what type of auth you would want to enable for this. In theory, if you're in a SPA calling a web api, you should be looking at an implict flow for authorization and to get an access token. There is a number of drawbacks to it, among them one that considers implict flow less secure due to the nature of how access token is being passed through the front-channel and there is no way to authenticate the client as the SPAs have no way to securely store the secret. You get (or should be getting) short lived access tokens with no referesh token and have to resort to iframe based approaches around obtaining new tokens upon expiration (libraries like adal.js or oidc.js do that). Lots to consider. Aspnet mvc template does auth (when working with separate authorization server such as IdentityServer or AAD) with a combination of an authorization code flow (considered more secure than implicit flow) and cookies (server only). That doesn't lend itself well to SPAs. You could in theory serve your SPA from the public directory of the mvc app (static files middleware), but you end up with a cookie based auth at the end, so problems like csrf remain. @SteveSandersonMS<https://github.com/SteveSandersonMS> has there been a discussion about this internally? You mentioned this is on the backlog, would be interesting to hear the options the team has considered. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub<https://github.com/aspnet/JavaScriptServices/issues/548#issuecomment-403202540>, or mute the thread<https://github.com/notifications/unsubscribe-auth/AFPoOJQMPWSmh-4q5Pd2iJw5cCfYJX5cks5uEIAEgaJpZM4LYMpz>.

[tstojecki]

Agreed that there is no way to perform secret based auth in spa, which is why the implicit flow was created in the first place - to support these types (non confidential) clients.
The fact is that it is the de facto way of authenticating spa (non-confidential) clients. Once we introduce the server backend, we no longer talking a non-confidential client and sure, the server auth is more secure, but the weakness in those scenarios is always in how you're going to pass that token down to the spa following the server auth.
The option you suggest @PeterWone is one example. Another one I have seen is where the SPA is protected by cookie based auth of a web application hosting it. The downside there is that you end up with a proxy for you web api calls so that you can call local /api endpoints in the webapp hosting the spa and those are forwarded through to another api using the access_token obtained during authorization. Another downside any time cookies are in the picture is csrf (no xss though).

I am pretty sure that those are the kind of arguments that are the reason for why there is currently no --auth option for SPAs.

[arshadwhoami]

Hi ,Is there any sample for msal authentication through react as frontend and asp.net core as backend in which tokens has to be passed for calling web api's

[mkArtakMSFT]

@javiercn isn't this now covered with the recent changes in SPA templates?

[javiercn]

@mkArtakMSFT Yes, but for modern versions of angular. The code is in the template, so users can grab it as a starting point to adjust it for an older version.