Single Page App (SPA--Angular) and Authentication Best Practices?

Question

We are investigating the best ways to integrate standard authentication (login) with our Angular SPA. We have come across two patterns (see below) and would like to see which is perceived as a 'better' architecture to integrate authentication into our Angular website.

PATTERN 1--KEEP LOGIN SEPARATE from the SPA (see here): In this pattern the login process is done outside of the SPA (separate page load) and once user is authenticated they are redirected to the SPA (another page load).

PATTERN 2--INTEGRATE LOGIN INTO SPA (see here and here): In this pattern, the authentication process is within the SPA and login state is managed through the Angular router and services.

We are leaning towards PATTERN 2, however we would like to hear from the SO community what your thoughts are and how you compare these two patterns.

Thank you!

Answer 1

I was considering the same a few months back and finally decided to go with the login inside the SPA solution.

I think the determining factor for deciding between the two approaches is if you would mind loading the full application before a user is logged in.

If the login is part of the SPA then the bootstrapping will have taken place before the login is presented to the user. This has two disadvantages. First you load a lot of js, css etc that you might not even need upfront. Secondly you give unauthorized users access to your code. I consider both to be minor issues as they can both be addressed but still there to consider.

If the login is separate from the SPA, it gives you a maintenance overhead since you have to maintain something outside your application and also requires integration with your app (eg theming, logos, fonts etc). But then again, Gmail is doing it :P

I do not know what server technology you are using, but google's presentation from ng-conf offers some great solution to the above problem (unfortunately I had already implemented my solution when this came out)

https://docs.google.com/file/d/0B4F6Csor-S1cNThqekp4NUZCSmc/edit (slide 9 ownwards)