In what way is the information passed between components when using social signin with angular 2+?

Question

I am planning to support multiple login options(including social sign in with google and facebook) for my app in following way. When user clicks on login with google/facebook ,a new window opens, user authentication completes, server returns JWT, which I store in local storage and using a hostlistener, the previous window(or the parent window) knows about the successful authentication.

This flow is working fine(with a normal server-side authentication) but I am thinking about the security concern that may arise by storing the JWT in local storage. What is the standard way of sharing authentication information when using social signin?

Is there a better way to pass the JWT/authentication details from child window(where authentication happens) to parent window? One more option is to use Eventemitters to pass information between the 2 components, but what is the standard way that is being used by the sites that are using social signin and jwt?

EDIT: I want to replicate the behavior that most sites do i.e. when the until the user is authenticated, the parent window remains still and as soon as the authentication completes and is passed onto the parent window, it redirects to let's say homepage or redirect url.

Answer 1

If you really want to use a popup window for authentication, you can access the parent window of your application from the popup using

window.opener

The easiest way to send a token from the popup to the parent is to post a message (see the Mozilla docs)

window.opener.postMessage(messageContainingToken, window.location.origin);

The parent window needs to have a listener

window.addEventListener("message", receiveTokenMessage, false);

function receiveTokenMessage(event) {
   if (event.origin !== window.location.origin) {
       return;
   }
   let messageContainingToken = event.data;
}

The messageContainingToken can be the token itself or some more complex JSON. Then you can store the token in the SessionStorage, which is safer than the LocalStorage.

Update (suggestion):

I would suggest you not to use the popup window. Instead, on the login page, I would create buttons for "Login with SomeOauth2Provider". When a user clicks the button, he gets redirected to the SomeOauth2Provider website and after authentication, he gets redirected back to your Angular SPA (you provide a redirectUri). The Angular component that processes the redirectUri containing a token, would validate the token, save it to the SessionStorage and change the route to some initial view of your application.

I think it's much more user friendly to load your Angular application again after the redirect than opening a new window (which can also be disabled).

Answer 2

I suggest using firebase. They have packages for angular, production ready social-login implementations. Have a look: https://firebase.google.com/products/auth/

There is a nice article about authenticating users with firebase for angular applications: https://medium.com/@hellotunmbi/step-by-step-complete-firebase-authentication-in-angular-2-97ca73b8eb32