DEV Community 👩‍💻👨‍💻

Cover image for Login Management for SPA and Everyone Else (Part II)
Ralph Vaz
Ralph Vaz

Posted on • Originally published at pod.pathfix.com

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)

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.

Top comments (0)

🌚 Friends don't let friends browse without dark mode.

Sorry, it's true.