Unified Identity is the holy grail of website authentication. Allowing your users to log into your website through any mechanism they want, while always having the same account details, provides a really smooth and convenient user experience.

Unfortunately, unified identity can be tricky to implement properly! How many times have you logged into a website with Google Login, for instance, then come back to the site later and created an account with email / password only to discover you now have two separate accounts! This happens to me all the time and is really frustrating.

In a perfect world, a user should be able to log into your website with:

Google

Facebook

Twitter

Email or Username and Password

Any other OAuth provider

And always have the same account / account data — regardless of how they choose to log in at any particular point in time.

Unified Identity Management

Over the past few months we’ve been collaborating with our good friends over at OAuth.io to build a unified identity management system that combines OAuth.io’s broad support for social login providers with Stormpath’s powerful user management, authorization and data security service.

Here’s how it works:

You’ll use OAuth.io’s service to connect your Google, Facebook, Twitter, or any other social login services.

You’ll then use Stormpath to store your user accounts and link them together to give you a single, unified identity for every user.

It’s really simple to do and works very well!

And because OAuth.io supports over 100 separate OAuth providers, you can allow your website visitors to log in with just about any service imaginable!

User Registration & Unification Demo

To see how it works, I’ve created a small demo app you can check out here: https://unified-identity-demo.herokuapp.com/

Everything is working in plain old Javascript — account registration, unified identity linking, etc.

Go ahead and give it a try! It looks something like this:

If you’d like to dig into the code yourself, or play around with the demo app on your own, you can visit our project repository on Github here: https://github.com/stormpath/unified-identity-demo

If you’re a Heroku user, you can even deploy it directly to your own account by clicking the button below!

Configure Stormpath + OAuth.io Integration

Let’s take a look at how simple it is to add unified identity to your own web apps now.

Firstly, you’ll need to go and create an

Don’t worry — both are totally free to use.

Next, you’ll need to create a Stormpath Application.

Next, you’ll need to log into your OAuth.io Dashboard, visit the “Users Overview” tab, and enter your Stormpath Application name and credentials.

Finally, you need to visit the “Integrated APIs” tab in your OAuth.io Dashboard and add in your Google app, Facebook app, and Twitter app credentials. This makes it possible for OAuth.io to easily handle social login for your web app:

Show Me the Code!

Now that we’ve got the setup stuff all ready to go, let’s take a look at some code.

The first thing you’ll need to do is activate the OAuth.io Javascript library in your HTML pages:

<script src="/static/js/oauth.min.js"></script> <script> OAuth.initialize("YOUR_OAUTHIO_PUBLIC_KEY"); </script> 1 2 3 4 5 <script src = "/static/js/oauth.min.js" > </script> <script> OAuth . initialize ( "YOUR_OAUTHIO_PUBLIC_KEY" ) ; </script>

You’ll most likely want to include this at the bottom of the <head> section in your HTML page(s). This will initialize the OAuth.io library.

Next, in order to register a new user via email / password you can use the following HTML / Javascript snippet:

<form onsubmit="return register()"> <input id="firstName", placeholder="First Name", required> <input id="lastName", placeholder="Last Name", required> <input id="email", placeholder="Email", required, type="email"> <input id="password", placeholder="Password", required, type="password"> <button type="submit"> Register </form> <script> function register() { User.signup({ firstname: document.getElementById('firstName').value, lastname: document.getElementById('lastName').value, email: document.getElementById('email').value, password: document.getElementById('password').value }).done(function(user) { // Redirect the user to the dashboard if the registration was // successful. window.location = '/dashboard'; }).fail(function(err) { alert(err); }); return false; } </script> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 < form onsubmit = "return register()" > < input id = "firstName" , placeholder = "First Name" , required > < input id = "lastName" , placeholder = "Last Name" , required > < input id = "email" , placeholder = "Email" , required , type = "email" > < input id = "password" , placeholder = "Password" , required , type = "password" > < button type = "submit" > Register < / form > <script> function register ( ) { User . signup ( { firstname : document . getElementById ( 'firstName' ) . value , lastname : document . getElementById ( 'lastName' ) . value , email : document . getElementById ( 'email' ) . value , password : document . getElementById ( 'password' ) . value } ) . done ( function ( user ) { // Redirect the user to the dashboard if the registration was // successful. window . location = '/dashboard' ; } ) . fail ( function ( err ) { alert ( err ) ; } ) ; return false ; } </script>

This will create a new user account for you, with the user account stored in Stormpath.

Now, in order to log a user in via a social provider (Google, Facebook, Twitter, etc.) — you can do something like this:

<script> function link(provider) { var user = User.getIdentity(); OAuth.popup(provider).then(function(p) { return user.addProvider(p); }).done(function() { // User identity has been linked! }); } </script> <button type="button" onclick="link('facebook')">Link Facebook</button> <button type="button" onclick="link('google')">Link Google</button> <button type="button" onclick="link('twitter')">Link Twitter</button> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 <script> function link ( provider ) { var user = User . getIdentity ( ) ; OAuth . popup ( provider ) . then ( function ( p ) { return user . addProvider ( p ) ; } ) . done ( function ( ) { // User identity has been linked! } ) ; } </script> < button type = "button" onclick = "link('facebook')" > Link Facebook < / button > < button type = "button" onclick = "link('google')" > Link Google < / button > < button type = "button" onclick = "link('twitter')" > Link Twitter < / button >

If a user clicks any of the three defined buttons above, they’ll be prompted to log into their social account and accept permissions — and once they’ve done this, they’ll then have their social account ‘linked’ to their normal user account that was previously created.

Once a user’s account has been ‘linked’, the user can log into any of their accounts and will always have the same account profile returned.

Nice, right?!

Simple Identity Management

Hopefully this quick guide has shown you how easy it can be to build unified identity into your next web application. With Stormpath and OAuth.io, it can take just minutes to get a robust, secure, user authentication system up and running.

To dive in, check out the demo project on github: https://github.com/stormpath/unified-identity-demo

Happy Hacking!