Recommended authentication UX in AngularJS SPA with own and external (Google, FB…) profiles

Question

I\'m developing an Asp.net MVC + Web API + AngularJS SPA. I would like to have several types of registration/authentication:

• own profile provider
• external

Answer 1

By no means am I familiar with Microsoft backends, but still I'll give it a try ;-) :

Good resources on how the authentication/authorisation should be done in Angular-based SPA:

• https://github.com/fnakstad/angular-client-side-auth
  live demo: http://angular-client-side-auth.herokuapp.com/login

  • As you requested there are 2 methods of authenticating:
    • own profile
    • external providers.
      It redirects to the provider website though :-/
  • NodeJS on the backend

• Good ng-conf talk on how authorisation is done in Google Doubleclick Manager application: http://www.youtube.com/watch?v=62RvRQuMVyg&t=2m29s
  It's not quite what you want (authentication), but the solution begins to kick in on the authentication phase. Furthermore it may be useful later and the approach Ido is presenting seems really sound.
  Slides: https://docs.google.com/file/d/0B4F6Csor-S1cNThqekp4NUZCSmc/edit

• Last but not least: Mastering Web Application Development with AngularJS.
  A brilliant Angular book by Paweł Kozłowski and Pete Bacon Darwin.
  It has a whole chapter or two dedicated to auth- stuff. It shows some complex solutions, such as retrial and session-expired interceptors. But even if you will not use approaches from the book directly, those chapters are still a must-reads since they may give you an inspiration for devising your own auth- solutions.

  Remark - http-auth-interceptor: As it is mentioned in the book, the securityInterceptor solution was originally invented by Witold Szczerba. See the blog post.
  http-auth-interceptor code, mentioned by @CorySilva, is actually sample code to concepts explained in the post.

  btw: Those 2 chapters are great, but I hope that the Community comes up with some easier solutions in the future. Every time I read this interceptor promise api-based code I get a severe headache :)

  btw2: If somebody doesn't consider oneself an Angular expert, the entire book is definetly a must-read and great complement after reading the Guide

As for building the login page with ASP - I suggest using ASP only as a backend and middleware and drawing whole the app with Angular.
You can start with your approach and switch to the pure-Angular SPA if it will begin to require more and more crazy hacks to make technologies play together nicely.
But I might be wrong and this particular case won't require applying any hacks.