HTML Block⚓︎
Including the HTML Block⚓︎
Calling getHtmlLogin with the session identifier, will return an HTML snippet that can be dropped into any web page to add a nextAuth login control.
The getHtmlLogin API call can optionally also take a UserContext JSON object, to include additional session information.
The HTML snippet automates the login process, it will a button for triggering a push login or a QR code when a push login is not possible. When displaying in a mobile browser, a button for an app-to-app login is shown. Animations are included to display the progress of the login on the mobile device. If an appname is set in createServer or updateServer, the name nextAuth in the HTML Block is replaced by appname.
Obviously, the nextAuth login control should only be displayed when the user is not logged in. Use getSession to determine the status of the session.
Near the end of the HTML page the output from getHtmlFooter should be included. The HTML footer includes JavaScript and CSS to render the nextAuth login control. When using the logout functionality, the HTML footer should also be included on every page, even when not displaying the nextAuth login control.
By default, the HTML footer will simply refresh the page upon a successful login or a logout.
Restyling the Login Block⚓︎
The entire HTML Block is wrapped in an HTML <div> with class='nextauth-block'. Using CSS you can completely restyle the login block and override the standard CSS.
Responding to Multiple Sessions⚓︎
It is possible to keep track of multiple sessions in the same browser session. This is useful, for example, when an user logs in (session A) to enrol an additional mobile device (session B). Updates on session B can be displayed to provide feedback to the user when the new mobile device is enrolled successfully. Session A remains active, even when the mobile device logs out of session B (when the enrolment is completed).
To listen to additional sessions, getHtmlFooter takes an HtmlFooterBody as additional argument, with a list of (serverid,nonce) pairs that should also be tracked for updates.
Reacting to Status Updates⚓︎
By default, the HTML footer will refresh the page upon a successful login or a logout. This behaviour, as well as the responsive to other state changes, can be customized.
| JavaScript Function | Description |
|---|---|
nextauthwsdoupdate(loggedin,serverid,nonce,i) |
Called when a login/logout status update is received. |
nextauthwsprovokeconfirm(serverid,nonce) |
Called when the push login has been received by the mobile device (but not approved yet). |
nextauthwscanprovoke(serverid,nonce) |
Called when it is possible to perform a push login. |
Processing Login and Logout Events⚓︎
If a function nextauthwsdoupdate(loggedin,serverid,nonce,i) exists, it is called on every login/logout of a session identifier and it will override the default page refresh. loggedin will be 0 for a logout and 1 for a login. The serverid, nonce and i are included to distinguish between different sessions: i refers to the index of the (serverid,nonce) pair when passed to getHtmlFooter: '0' for the (serverid,nonce) passed directly and '1' and higher for (serverid,nonce) pairs passed through the HtmlFooterBody argument.
Processing Push Login Events⚓︎
The nextauthwsprovokeconfirm(serverid,nonce) function is called when it is possible to perform a push login on the specified session. This function is called at loading time of the HTML page, right after establishing the websocket connection to the nextAuth server. Defining function does not override the default behaviour of the HTML Block (i.e. display the button to perform the push login).
The nextauthwscanprovoke(serverid,nonce) function is called when the push login message has been received by the mobile device. Defining function does not override the default behaviour of the HTML Block (i.e. changing the color and text of the button).
Replacing the HTML Block and Footer⚓︎
The entire login block and the footer can be replaced with custom HTML and scripts. The easiest way is to simply not use the getHtmlLogin and getHtmlFooter API calls and embed the relevant HTML, JavaScript and CSS directly in your website.
As an alternative, the nextAuth server allows to embed custom HTML code directly in the nextAuth server, which can be rendered through getHtmlLogin and getHtmlFooter. Please contact support for assistance with deploying custom HTML blocks directly on the nextAuth server, as this cannot be performed through the standard API.