# 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: <a href="https://pod.pathfix.com/login-management-for-spa-and-everyone-else">Login Management for SPA and Everyone Else</a> ) 

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

There are two ways to achieve it. 
<ul>
<li>
The easy way</li>
<li>The not-so-easy way</li>
</ul>

I will go through option 1 :) 

<b>The Easy Way</b>
<p>
I take the code for the login extension available in <a href="https://app.pathfix.com">Pathfix App</a>. 
</p>

```HTML

	<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](https://cdn.hashnode.com/res/hashnode/image/upload/v1598952669539/nMiKWJJCE.png)

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

![login.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1598952910949/Z319hhtAR.png)


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


```JavaScript

	function onLoggedIn(){
		//N5:
		console.log($pinc.auth.profile)
	}

	function onLoggedOut(){
		//Code to redirect to login page
	}
	
```

That's it.