Auth Lib Button


Using the Auth Lib Button

1. In the head of your HTML put:

<script src="/button.js"></script>

2. In your HTML, place the below tag where you would like the Auth Lib to appear


2. At the start of your application Javascript, start the Auth Lib Button

The config parameters for the Auth Lib Button are described below.

Auth Lib Button Parameters

All the parameters for the Auth Lib Core are also relevant here as well.

providers (Optional)

AuthButton.render({providers: ["gplus", "facebook", "safe"]})
Default: ["gplus", "facebook", "safe"]
The list of providers you want to present to the user to select from

showDropdown (Optional)

AuthButton.render({showDropdown: true})
Default: true
You can choose not to allow the user to access the drop down panel

dropdownHTML (Optional)

AuthButton.render({dropdownHTML: `<strong>Test</strong>`})
Default: null
Custom HTML you want to display in the drop down panel

showGravatar (Optional)

AuthButton.render({showGravatar: true})
Default: false
Show the user's Gravatar image instead of a standard 'user profile' image.

showPreviousProviderHint (Optional)

AuthButton.render({showPreviousProviderHint: false})
Default: false
Shows a little tick next to the provider the user used previously.

Auth Lib Button Methods


Call this method to show the sign in popover dialog.

Auth Lib Button Styling

The styling of the button can be overriden by CSS. See the Styling example page for details of this.

Custom Placeholder Element

Sometimes it is not convenient to put <auth-button></auth-button> in your code base. You can specify a DIV element for the Auth Button library to target instead:

1. Add an empty DIV element to your page

<div id="authButtonPlaceholder"></div>

2. When rendering the auth button, specify a second argument:

AuthButton.render({...}, "#authButtonPlaceholder");