Auth Lib Bar

Documentation

Using the Auth Lib Bar

1. In the head of your HTML put:

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

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

<auth-bar></auth-bar>

2. At the start of your application Javascript, start the Auth Bar

AuthBar.render({...});
The config parameters for the Auth Bar are described below.

Auth Lib Bar Parameters

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

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

siteTitle (Optional)

AuthBar.render({siteTitle: "Site Title"})
Title to display in the Auth Bar

siteSubTitle (Optional)

AuthBar.render({siteSubTitle: "Site Sub Title"})
Sub title to display in the Auth Bar

logoImageUrl (Optional)

AuthBar.render({logoUrl: "https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png"})
Default: https://auth-lib.tr-api-services.net/assets/tr_labs_logo_white.svg
Logo URL in the top left

logoUrl (Optional)

AuthBar.render({logoUrl: "https://www.google.com/"})
Default: https://labs.refinitiv.com
URL the logo goes to when clicked

Custom Placeholder Element

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

1. Add an empty DIV element to your page

<div id="authBarPlaceholder"></div>

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

AuthBar.render({...}, "#authBarPlaceholder");

Custom inner content

You can insert custom HTML into the Auth Bar center (between the logo on the left and user image on the right). You can do this by inserting the HTML in the middle of the auth-bar tags. You can see an example here.

<auth-bar>
    <div>Content in Auth Bar</div>
</auth-bar>