Overview
Credenza Presence consists of a set of UI elements designed to integrate Credenza Passport with your website or app. These elements ensure seamless integration and user-friendly experience.
Presence begins with a persistent navigation bar that can be positioned anywhere on the screen. As an overlay, it will not impact the positioning of any elements that already exist in the HTML rendering, though the decision on where to position the overlay may take existing elements into account
Initializing Presence
To display the navigation bar, a call needs to be made to the Passport object:
passport.showNavigation({"right":"25px","bottom":"50px"});We recommend the lower right corner of the page. When the user is logged out, the mini banner shows a red dot to indicate the user is logged out
When in the logged out state, clicking on the navigation bar will automatically open a centered dialog box for the user to login
This dialog can also be rendered without the navigation bar support by calling:
passport.openUI()Once the user is logged in, the navigation bar will still be rendered, but the dot will turn green. Clicking on the band will open a menu with several options, including purchasing tokens, generating a cryptographically-signed identifying code called Passport ID, scanning a proprietary QR Code called PassScan, managing your account, and signing out.
Handling Cloak Configuration
If you set passport.config.content.cloak to true, the passport login screen will always be shown until the user logs in. This means that even if a user navigates away, they will still see the login prompt until they are successfully logged in.
For example, if a user tries to access other parts of the site without logging in, the login screen will appear, ensuring that only authenticated users access the content. This can add an extra layer of security by making sure that users are logged in before they can interact with certain parts of the application.
To enable this, add the following configuration to your passport config when creating passport instance.
With this configuration, you ensure that users need to log in each time they visit your application, making their experience more secure and authenticated.