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.
Top comments (0)