Login Management for SPA and Everyone Else (Part II)

This article picks up from my original post (if you haven't read that, you can read it here: Login Management for SPA and Everyone Else )

In this post, we will complete the implementation and add the Login with the providers we want.

There are two ways to achieve it.

• The easy way
• The not-so-easy way

I will go through option 1 :)

The Easy Way

I take the code for the login extension available in Pathfix App.

 <div> <script id='pinc.helper' src='https://labs.pathfix.com/helper.js' modules='pinc.auth.min,ui.auth' data-client-id='xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx' providers='msazuread,discord,fb,github,google,linkedin,ms' data-ui-button-prefix='Login with' data-on-logged-in='onLoggedIn()' data-on-logged-out='onLoggedOut()' data-auth-success-url=''></script> </div> 

The code from Pathfix will handle the steps involved in N1:/N2:/N3:/N4: from the login flow chart (as below)

As soon as this is placed I see the login buttons like so...

To handle the post login event I add the following code:

 function onLoggedIn(){ //N5: console.log($pinc.auth.profile) } function onLoggedOut(){ //Code to redirect to login page } 

That's it.