Join MDN and developers like you at Mozilla's View Source conference, 12-14 September in Berlin, Germany. Learn more at https://viewsourceconf.org

Persistent Login

The navigator.id.get() API takes a set of options as an optional parameter. By using two of these options, allowPersistent and silent, you can enable the user to stay logged into your web site until the certificate signed by their identity provider expires.

allowPersistent

In all example code in this page, gotAssertion is the callback argument to navigator.id.get().

You use allowPersistent like this:

navigator.id.get(gotAssertion, {allowPersistent: true});

This option causes a new checkbox to appear in the BrowserID dialog asking the user if they want to stay signed in.

If the user checks the box to stay signed in, then the browser creates an assertion and passes it to gotAssertion as normal, but remembers the user selection.

silent

You use silent like this:

navigator.id.get(gotAssertion, {silent: true});

With this option the browser will not display any dialog to the user, but will call gotAssertion without any user intervention:

  • If the user had checked the box to stay signed in, and the user's certificate has not yet expired, then the browser will silently generate a new assertion and pass it into gotAssertion.
  • Otherwise, the browser will pass null into gotAssertion.

Supporting Persistent Login

First, on page load, call navigator.id.get({silent: true}):

$(function() {
  navigator.id.get(gotAssertion, {silent: true});
});

Next, inside gotAssertion, if the assertion is not null and validates, log the user in, otherwise call loggedOut():

function gotAssertion(assertion) {
  if (assertion !== null) {
    // Send assertion to the server for validation
    if (!validateAssertionOnServer(assertion) loggedOut();
    else loggedIn();
  } else {
    loggedOut();
  }
}

Finally, loggedOut() updates the page to indicate that the user is logged out. In particular, the page needs to display a "Sign In" button whose click handler will call navigator.id.get({allowPersistent: true}):

$('#browserid').click(function() { 
  navigator.id.get(gotAssertion{allowPersistent: true}); 
  return false; 
});

Example Code

You can see a sample implementation of this at http://myfavoritebooze.org/, whose source code is available on GitHub.

Document Tags and Contributors

 Contributors to this page: fscholz, wbamberg
 Last updated by: fscholz,