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

We have used what Beyers described before and it works well for most apps, and I use it frequently.

In our current application we are working on the premise that separation of concern should apply to route management.

Normal lifecycle:

1. User goes to www.server.com
2. Server sends down index.html
3. Client makes request for minified assets (.js, .css., etc.)
4. Angular loads -- a directive removes the loading class from the body (revealing the login section)
   1. The Angular LoginCtrl makes an autologin attempt. (Login and Autologin in an Angular service).
   2. The server returns a HTTP 401
5. The login screen remains visible.
6. User successfully logs in ( server gives the browser a authToken cookie; angular does not know or care)
7. Angular sets some isAuthenticated variables in the BodyCtrl and LoginCtrl
8. The login section receives a class of .hidden and the content recieves a class of .visible (insert ng-hide/show animations for fun)
9. User starts filling out a form, but takes an obligitory, 30 minute phone call from relative.
10. Server has expired his session 10 minutes ago
11. User finishes and submits form but the server return unauthorized (401)
12. http-auth-interceptor intercepts the 401 from the server, caches the submit call and publishes a "login-required' event.
13. The BodyCtrl listens and sets isAuthenticated = false and then the ng-class and ng-show/hide do there work on the login and content sections.
14. User re-signs in and 'login-confirmed' event is published
15. http-auth-interceptor posts cached call.
16. User is happy
17. (the content section can also display some public views as our rest api has some routes that are made public -- displaying the public views is handled by a simple function similar to isAuthenticated)

Angular Ctrl structure:

index.html

We could get a little more creative on how display the public views/routes but you get the idea. We only have a few public routes and they are mainly for registration, password resets, etc.

Disclaimer: I have yet to integrate with and oauth/external authentication services. Hopefully this setup will still hold water.

Any critique of this process is welcome.