DEV Community

loading...
Cover image for Login Management for SPA and Everyone Else (Part II)

Login Management for SPA and Everyone Else (Part II)

Ralph Vaz
Tech founder of Pathfix
Originally published at pod.pathfix.com ・1 min read

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)

Codeflow for OAuth Login (5).png

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

login.png

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.

Discussion (0)