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!