Making a Javascript OpenID Connect Client in 4 steps

When John, Breno, and I started the OpenID Connect work, one of the target was to make it as simple as putting two files on the client file system and calling a few functions from the calling page. With OpenID Connect, we have actually achieved it. You do not believe? Let me show.

Right – we need crypto for public client for various security reasons so we need JWT/JWS/JWA/JWK library, but by using it, it should be pretty simple.

For the demonstration purpose, I have asked Edmund to put all the necessary libraries into one file so we need to include only one javascript file: “openidconnect.js”, and put a callback page, “callback.html”.

Then, what you need to do is:

  1. Include the openidconnect.js script;
  2. Set the provider and client configuration info through JSON objects;
  3. Call the server – login;
  4. In the callback page, callback.html, you will get ID Token back, so that you can put it into the cookie to handle the session.

That’s it.

The details are as follows:

1) Include the openidconnect.js script

2) To perform authentication at the Identity Provider, set the provider and client configuration information

// set client_id and redirect_uri
var clientInfo = {
    client_id : 'MyClientId',
    redirect_uri : ''
OIDC.setClientInfo( clientInfo );

// set Identity Provider configuration information using discovery
var providerInfo ='');

// or set via manual configuration
// var providerInfo = {
//                      issuer: 'https:/',
//                      authorization_endpoint: '',
//                      jwks_uri: ''
//                    };

// set Identity Provider configuration
OIDC.setProviderInfo( providerInfo );

// store configuration for reuse in the callback page
OIDC.storeInfo(providerInfo, clientInfo);

3) Login

// Redirect to login
// login with default scope=openid, response_type=id_token

// login with options
OIDC.login( {
              scope : 'openid profile',
              response_type : 'code token id_token',
              max_age : 60,
              claims : {
                         id_token : ['email', 'phone_number'],
                         userinfo : ['given_name', 'family_name']

4) In callback page, you will get the ID Token and other tokens back.

In the sample callback page, we are essentially doing the following.

// Restore configuration information

// Get ID Token: Returns ID Token if valid, else error. 
var id_token = OIDC.getValidIdToken();

// Get code
var code = OIDC.getCode();

// Get Access Token
var token = OIDC.getAccessToken();

In reality, you need to do try and catch to handle errors and so on, but the above is the basic.

Pretty simple, huh?

26 Replies to “Making a Javascript OpenID Connect Client in 4 steps”

          1. Hi Nat, are there any plans to put the JavaScript file on GitHub together with a license, and possible on Bower as well? I would like to release a Web component for OpenID Connect based sign-in but I need to clarify your license first. Thanks!

  1. Thanks Nat – that is impressively simple!

    One quick question. In many cases, the Javascript app will need to talk to a web-service of some kind, which is completely separate from the OP (e.g. the OP is Google, but my Javascript app needs to talk to my own custom web service). Is it secure for the Javascript app send the ID token to the web service as a form of authentication? What about the audience field in the JWT in this case? Does OpenID Connect allow for obtaining a JWT with multiple audiences (the Javascript app plus the third party web service)?

  2. Hi Nat, this is a great start on an easy to use js library. I needed something for a demo presentation on using OIDC, and this fits perfectly. Are you planning on posting this to Github? I noticed that in the isValidIdToken() function, you are expecting the audience to be an array.
    If the audience is a string, the validation fails. The OIDC specs say it can
    either be a string, or an array of multiple audiences.

    If you post this to GH, I could submit a pull request for this.

    Thank you!

  3. Pingback: Homepage

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.