---
title: $pinc.ui.auth
slug: dollarpincuiauth
docTags: 
createdAt: 2020-06-10T10:37:20.000Z
---

**Dependencies**

- $pinc
- $pinc.oauth
- $pinc.auth

**Script module (separate each by a comma)**

- pinc.auth.min
- ui.auth

### What does it do?

Our ui.auth module depends heavily on the pinc.auth.module and provides a user interface to enable the equivalent of a multi provider SSO. The is the primary module behind the [Single Sign on (SSO) / Social login](docId:8ojvXce-GcPu6NI-OHuUY)

Primary Functions

- Render list of login buttons based on [$pinc.auth.providers](https://docs.pathfix.com/properties)  &#x20;
- Listen to internal events of $pinc.auth module and convert them into simplified events that map to [data-on-logged-out](docId\:E2ZqvjgkdAfqzLqHZ2Su1) and [data-on-logged-in](docId\:ruHMB8bRObe3_nrwyEGEK)

**Example**

**Part 1**. Code to include in the Login Page

:::CodeblockTabs
```html

<html>
    <body>
        <div>
            <script src="https://labs.pathfix.com/helper.js" 
            modules="pinc.auth.min,ui.auth"
            data-public-key="...">
            data-auth-providers="fb,ms"
            data-auth-success-url="/dashboard"
            ></script>
        <div>    
    </body>
</html>



```

```javascript
```
:::



**Part 2**. Code to include in your Redirect Page

```html

<html>
    <head>
        <script>
            function _loggedInCallback(){
                //Aha! Login successfull
                console.log($pinc.auth.profile)
            }

            function _loggedOutCallback(){
                //Redirect to login page
                window.location = "/login"
            }

        </script>   
        <script src="https://labs.pathfix.com/helper.js" 
            modules="pinc.auth.min,ui.auth"
            data-public-key="...">
            data-on-logged-in="_loggedInCallback()"
            data-on-logged-out="_loggedOutCallback()"
            data-auth-providers="fb,ms"
            ></script>
    </head>
    <body>
    </body>
</html>

```





