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.

Blog

Login Management for SPA and Everyone Else (Part II)

Ralph Vaz

Join Our Newsletter. No Spam, Only the good stuff.

Related