Bogomil Shopov

Human. Artist. Hacker. I care about free and open-source software(F/LOSS), cybersecurity, ethical design, privacy, and technology. 20+ experience in technology. 40+ in being human. I encourage people to become better humans with heavy metal and technologies. I also promote technologies to be considerate of humans. Let's see how it goes!

Mozilla / Open Technologies · May 27, 2010

XAuth basics and an example.

What is XAuth?

XAuth is an open platform for extending authenticated user services across the web.

Participating services generate a browser token for each of their users. Publishers can then recognize when site visitors are logged in to those online services and present them with meaningful, relevant options.

Users can choose to authenticate directly from the publisher site and use the service to share, interact with friends, or participate in the site’s community. The XAuth Token can be anything, so services have the flexibility to define whatever level of access they choose.

How does it works

The main requirement for XAuth is you browser to support HTML5. XAuth essentially defines 3 different parties to the flow:

– Extenders are web services that a user is logged into that present some public API.
– Retrievers are web services that want to discover and consume one or more of the Extenders.
– is the final party. All communication of XAuth happens through an iframe and javascript This is just static hosting, all data is stored in the users browser.

Step 1: Enable

You can just put the following line into your website and it will be XAuth enabled:
<script type="text/javascript" src=""></script>

Step 2:Become an Extender

Let’s create the token and let’s save it to our browser:

function doLogin(doneUrl) {
token: "1", //set the token
expire: new Date().getTime() + 60*60*24*1000, // set the expire time
extend: [""], //allow this script to work only on your own domain
callback: location.replace(doneUrl)

Step 3:Become an Retriever

Let’s retrieve the token and show it on a web page :

function doRetrieve() {
retrieve: [""],
callback: onRetrieve

function onRetrieve(data) {
var numTokens = 0;
var str = '';
if (data && data.tokens) {
for (var token in data.tokens) {
if (numTokens > 0) str += ', ';
str += token + ': ' + data.tokens[token].token;

if (str == '') {
str = '(none)';
document.getElementById('login_status').innerHTML = str;

Step 4: Let’s put on the stage and show an example

Here it is >