Implement Single Sign On

13min
Follow the links below for provider setup based on your single sign on requirement.
﻿Integration Setup Guides﻿ 
﻿Pathfix keys﻿ 
Use Case
I already have a web app and login functionality and would like to add an ability for my users to login using their existing identities in application like Google, Facebook etc.
Once implemented I would like to map the my internal userId to the user's publicly shared emailId.
The external identity provider will give me the publicly shared emailId.
Assumptions
The document assumes that the login flow involves 3 pages. They have been separated for ease of understanding the implementation process. Feel free to club the logic based on your implementation.
Login (referred to as: LOGIN_PAGE_URL)
Session Validator (referred to as: SESSION_VALIDATOR_PAGE_URL)
Home (referred to as: LOGIN_PAGE_URL)
Login Page
Add the $pinc_onload with render
﻿
JS

function $pinc_onload() {
     //Pathfix library is ready, are you :)
     //$pincj is a no conflict reference to jquery library
	
    $pinc.events.on("$pinc.auth", "ready", () => { 
       //bind to loggedout event of the $pinc.ui.auth module
        $pinc.events.on("$pinc.ui.auth", "loggedout", () => { 
            //invoke the render
            $pinc.ui.auth.render($pincj(".login-div")) 
        }); 

        //bind to logged in event $pinc.ui.auth module
        $pinc.events.on("$pinc.ui.auth", "loggedin", () => { 
            console.log($pinc.auth.profile)
        }); 
    });

    function $pinc_getUserId(){
        return $pinc.auth.profile.email;
    }
}


function $pinc_onload() {
     //Pathfix library is ready, are you :)
     //$pincj is a no conflict reference to jquery library
	
    $pinc.events.on("$pinc.auth", "ready", () => { 
       //bind to loggedout event of the $pinc.ui.auth module
        $pinc.events.on("$pinc.ui.auth", "loggedout", () => { 
            //invoke the render
            $pinc.ui.auth.render($pincj(".login-div")) 
        }); 

        //bind to logged in event $pinc.ui.auth module
        $pinc.events.on("$pinc.ui.auth", "loggedin", () => { 
            console.log($pinc.auth.profile)
        }); 
    });

    function $pinc_getUserId(){
        return $pinc.auth.profile.email;
    }
}

﻿
Add the Pathfix helper script
The modules loaded here are pinc.auth.min and ui.auth. To learn more about module dependencies go Module dependencies﻿ .
data-user-id
This property is not used by the pinc.auth module. The module assumes an anonymous user at this stage.
﻿
HTML

<script
      src="https://labs.pathfix.com/helper.js"
      id="pinc.helper"
      modules="pinc.auth.min,ui.auth"
      data-public-key="...."
      data-user-id="$pinc_getUserId()"
      data-ui-providers="msazuread,discord,fb,github,google,linkedin,ms"
      data-ui-button-prefix="Login with"
      data-auth-success-url="[SESSION_VALIDATOR_PAGE_URL]"
></script>

    
<script
      src="https://labs.pathfix.com/helper.js"
      id="pinc.helper"
      modules="pinc.auth.min,ui.auth"
      data-public-key="...."
      data-user-id="$pinc_getUserId()"
      data-ui-providers="msazuread,discord,fb,github,google,linkedin,ms"
      data-ui-button-prefix="Login with"
      data-auth-success-url="[SESSION_VALIDATOR_PAGE_URL]"
></script>

    
﻿
Add the login container to your <body>
Add a div with a class name or id and where you want the login buttons to be rendered. 
HTML

<div class="login-div"></div>


<div class="login-div"></div>

﻿
All together
HTML

<!DOCTYPE html>
<html>
    <head>
        <script>
            function $pinc_onload() {
                //Pathfix library is ready, are you :)
                //$pincj is a no conflict reference to jquery library
	
                $pinc.events.on("$pinc.auth", "ready", () => { 
                //bind to loggedout event of the $pinc.ui.auth module
                    $pinc.events.on("$pinc.ui.auth", "loggedout", () => { 
                        //invoke the render
                        $pinc.ui.auth.render($pincj(".login-div")) 
                    }); 

                    //bind to logged in event $pinc.ui.auth module
                    $pinc.events.on("$pinc.ui.auth", "loggedin", () => { 
                        console.log($pinc.auth.profile)
                    }); 
                });
            }

            function $pinc_getUserId(){
                return $pinc.auth.profile.email;
            }   
        </script>
        <script src="https://labs.pathfix.com/helper.js" id="pinc.helper"
            modules="pinc.auth.min,ui.auth"
            data-public-key="...."
            data-user-id="$pinc_getUserId()"
            data-ui-providers="msazuread,discord,fb,github,google,linkedin,ms"
            data-ui-button-prefix="Login with"
            data-auth-success-url="[SESSION_VALIDATOR_PAGE_URL]"
        ></script>

    </head>
    <body>
        <div class="login-div"></div>
    </body>
</html>    
<!DOCTYPE html>
<html>
    <head>
        <script>
            function $pinc_onload() {
                //Pathfix library is ready, are you :)
                //$pincj is a no conflict reference to jquery library
	
                $pinc.events.on("$pinc.auth", "ready", () => { 
                //bind to loggedout event of the $pinc.ui.auth module
                    $pinc.events.on("$pinc.ui.auth", "loggedout", () => { 
                        //invoke the render
                        $pinc.ui.auth.render($pincj(".login-div")) 
                    }); 

                    //bind to logged in event $pinc.ui.auth module
                    $pinc.events.on("$pinc.ui.auth", "loggedin", () => { 
                        console.log($pinc.auth.profile)
                    }); 
                });
            }

            function $pinc_getUserId(){
                return $pinc.auth.profile.email;
            }   
        </script>
        <script src="https://labs.pathfix.com/helper.js" id="pinc.helper"
            modules="pinc.auth.min,ui.auth"
            data-public-key="...."
            data-user-id="$pinc_getUserId()"
            data-ui-providers="msazuread,discord,fb,github,google,linkedin,ms"
            data-ui-button-prefix="Login with"
            data-auth-success-url="[SESSION_VALIDATOR_PAGE_URL]"
        ></script>

    </head>
    <body>
        <div class="login-div"></div>
    </body>
</html>    
﻿
﻿
Session Validator Page
Add the $pinc_onload without render
The session validator page is used as an intermediate page to either send the user to the home page or back to login. This page is usually merged with the home page to avoid too many redirects. We have included it in this document for clarity in understanding.
JS

function $pinc_onload() {
     //Pathfix libraries are loaded
     //$pincj is a no conflict reference to jquery library
	
     $pinc.events.on("$pinc.auth", "ready", () => { 
       //bind to logged out event handler
       $pinc.events.on("$pinc.ui.auth", "loggedout", () => { 
            sessionCheck()
       }); 

      //bind to logged in event handler
       $pinc.events.on("$pinc.ui.auth", "loggedin", () => { 
	    //code to send any additional information about the session to the server
            console.log($pinc.auth.profile)
	        //redirect to home page
            alert(`Welcome back ${$pinc.auth.profile.firstName}. Sending you to HOME page...`)
       }); 
     });
}

function sessionCheck(){
	//check if you have any other form of session
	//if not then send the user back to the Login page
	alert("No active session, redirecting to LOGIN page...")
}
function $pinc_onload() {
     //Pathfix libraries are loaded
     //$pincj is a no conflict reference to jquery library
	
     $pinc.events.on("$pinc.auth", "ready", () => { 
       //bind to logged out event handler
       $pinc.events.on("$pinc.ui.auth", "loggedout", () => { 
            sessionCheck()
       }); 

      //bind to logged in event handler
       $pinc.events.on("$pinc.ui.auth", "loggedin", () => { 
	    //code to send any additional information about the session to the server
            console.log($pinc.auth.profile)
	        //redirect to home page
            alert(`Welcome back ${$pinc.auth.profile.firstName}. Sending you to HOME page...`)
       }); 
     });
}

function sessionCheck(){
	//check if you have any other form of session
	//if not then send the user back to the Login page
	alert("No active session, redirecting to LOGIN page...")
}
﻿
Add the script tag
HTML
JS

<script
      src="https://labs.pathfix.com/helper.js"
      id="pinc.helper"
      modules="pinc.auth.min,ui.auth"
      data-public-key="...."
      data-user-id="$pinc_getUserId()"
      data-ui-providers="msazuread,discord,fb,github,google,linkedin,ms"
></script>

<script
      src="https://labs.pathfix.com/helper.js"
      id="pinc.helper"
      modules="pinc.auth.min,ui.auth"
      data-public-key="...."
      data-user-id="$pinc_getUserId()"
      data-ui-providers="msazuread,discord,fb,github,google,linkedin,ms"
></script>
﻿
All together
HTML


<!DOCTYPE html>
<html>
    <head>
        <script>
            function $pinc_onload() {
                //Pathfix libraries are loaded
                //$pincj is a no conflict reference to jquery library
                
                $pinc.events.on("$pinc.auth", "ready", () => { 
                //bind to logged out event handler
                $pinc.events.on("$pinc.ui.auth", "loggedout", () => { 
                        sessionCheck()
                }); 

                //bind to logged in event handler
                $pinc.events.on("$pinc.ui.auth", "loggedin", () => { 
                    //code to send any additional information about the session to the server
                        console.log($pinc.auth.profile)
                        //redirect to home page
                        alert(`Welcome back ${$pinc.auth.profile.firstName}. Sending you to HOME page...`)
                }); 
                });
            }
        </script> 
        <script
            src="https://labs.pathfix.com/helper.js"
            id="pinc.helper"
            modules="pinc.auth.min,ui.auth"
            data-public-key="...."
            data-user-id="$pinc_getUserId()"
            data-ui-providers="msazuread,discord,fb,github,google,linkedin,ms"
        ></script>
    </head>
</html>                       

<!DOCTYPE html>
<html>
    <head>
        <script>
            function $pinc_onload() {
                //Pathfix libraries are loaded
                //$pincj is a no conflict reference to jquery library
                
                $pinc.events.on("$pinc.auth", "ready", () => { 
                //bind to logged out event handler
                $pinc.events.on("$pinc.ui.auth", "loggedout", () => { 
                        sessionCheck()
                }); 

                //bind to logged in event handler
                $pinc.events.on("$pinc.ui.auth", "loggedin", () => { 
                    //code to send any additional information about the session to the server
                        console.log($pinc.auth.profile)
                        //redirect to home page
                        alert(`Welcome back ${$pinc.auth.profile.firstName}. Sending you to HOME page...`)
                }); 
                });
            }
        </script> 
        <script
            src="https://labs.pathfix.com/helper.js"
            id="pinc.helper"
            modules="pinc.auth.min,ui.auth"
            data-public-key="...."
            data-user-id="$pinc_getUserId()"
            data-ui-providers="msazuread,discord,fb,github,google,linkedin,ms"
        ></script>
    </head>
</html>                       
﻿
﻿
Home Page
The home page is the landing page for your user once they are logged in successfully.
Add the $pinc_onload without render
JS


function $pinc_onload() {
     //Pathfix libraries are loaded
     //$pincj is a no conflict reference to jquery library
	
     $pinc.events.on("$pinc.auth", "ready", () => { 
        //bind to logged out event handler
        $pinc.events.on("$pinc.ui.auth", "loggedout", () => { 
            sessionCheck()
        }); 

        //bind to logged in event handler
        $pinc.events.on("$pinc.ui.auth", "loggedin", () => { 
            console.log($pinc.auth.profile)
	        //redirect to home page
            alert(`Welcome back ${$pinc.auth.profile.firstName}. Sending you to HOME page...`)
       }); 

     });
}

function sessionCheck(){
	//check if you have any other form of session
	//if not then send the user back to the Login page
	alert("No active session, redirecting to LOGIN page...")
}

function $pinc_signout(){
	//the function name can be anything
    $pinc.auth.signOut(() => { 
        sessionCheck();
    });
}

function $pinc_getUserId(){
    //returning email but this doesn't have to necessarily be the email
    //you can return your own internal userId.
    //The value of data-user-id is not used by the identity module 
    return $pinc.auth.profile.email;
}

function $pinc_onload() {
     //Pathfix libraries are loaded
     //$pincj is a no conflict reference to jquery library
	
     $pinc.events.on("$pinc.auth", "ready", () => { 
        //bind to logged out event handler
        $pinc.events.on("$pinc.ui.auth", "loggedout", () => { 
            sessionCheck()
        }); 

        //bind to logged in event handler
        $pinc.events.on("$pinc.ui.auth", "loggedin", () => { 
            console.log($pinc.auth.profile)
	        //redirect to home page
            alert(`Welcome back ${$pinc.auth.profile.firstName}. Sending you to HOME page...`)
       }); 

     });
}

function sessionCheck(){
	//check if you have any other form of session
	//if not then send the user back to the Login page
	alert("No active session, redirecting to LOGIN page...")
}

function $pinc_signout(){
	//the function name can be anything
    $pinc.auth.signOut(() => { 
        sessionCheck();
    });
}

function $pinc_getUserId(){
    //returning email but this doesn't have to necessarily be the email
    //you can return your own internal userId.
    //The value of data-user-id is not used by the identity module 
    return $pinc.auth.profile.email;
}
﻿
Add the script tag
HTML
JS

<script
      src="https://labs.pathfix.com/helper.js"
      id="pinc.helper"
      modules="pinc.auth.min,ui.auth"
      data-public-key="...."
      data-user-id="$pinc_getUserId()"
      data-ui-providers="msazuread,discord,fb,github,google,linkedin,ms"
></script>

<script
      src="https://labs.pathfix.com/helper.js"
      id="pinc.helper"
      modules="pinc.auth.min,ui.auth"
      data-public-key="...."
      data-user-id="$pinc_getUserId()"
      data-ui-providers="msazuread,discord,fb,github,google,linkedin,ms"
></script>
﻿
﻿
﻿
﻿
﻿
﻿
﻿
﻿
Updated 03 Mar 2023
Did this page help you?
Step-by-Step
Creating Custom OAuth Button