oidc-ts-client

Library to provide OpenID Connect (OIDC) and OAuth2 protocol support for client-side, browser-based JavaScript client applications, as well as management functions for user sessions and access tokens management. Also included is support for user session and access token management. You can find source code on GitHub (opens in a new tab).

Set your application configuration

Import the oidc-client-ts (opens in a new tab) library using CDN

<script src="https://cdn.jsdelivr.net/npm/oidc-client-ts@latest/dist/browser/oidc-client-ts.min.js"></script>

Setup your oidc configurations:

create new JS file for Signin settings with the following:

    // Copyright (c) Brock Allen & Dominick Baier. All rights reserved.
    // Licensed under the Apache License, Version 2.0. See LICENSE in the project root for license information.
 
    ///////////////////////////////
    // UI event handlers
    ///////////////////////////////
    document.getElementById('signin').addEventListener("click", signin, false);
    document.getElementById('signin-popup').addEventListener("click", signinPopup, false);
 
    ///////////////////////////////
    // OidcClient config
    ///////////////////////////////
    oidc.Log.setLogger(console);
    oidc.Log.level = oidc.Log.INFO;
 
    var settings = {
        authority: 'https://example.accounts.justpass.me/openid/',
        client_id: '678605',
        redirect_uri: 'http://127.0.0.1:5501/example/home.html',
        post_logout_redirect_uri: 'http://127.0.0.1:5501/example/',
        scope: 'openid email roles',
        filterProtocolClaims: true,
        loadUserInfo: true
    };
    var mgr = new oidc.UserManager(settings);
    mgr.signoutCallback().then(() => {
        console.log("Signout successful")
    }).catch(function(err) {
        console.error(err);
    });
 
    mgr.getUser().then((user) => {
        if (user){
            window.location = '/example/home.html'
        }
    }).catch(function(err) {
        console.error(err);
    });
 
    ///////////////////////////////
    // functions for UI elements
    ///////////////////////////////
    function signin() {
        mgr.signinRedirect().catch(function(err) {
            console.log(err);
        });
    }
 
    function signinPopup() {
        mgr.signinPopup().then(user => {
            if (user){
                window.location = '/example/home.html'
            }
        }).catch(function(err) {
            console.log(err);
        });
    }

Create other JS file for signout settings with the following:

    // Copyright (c) Brock Allen & Dominick Baier. All rights reserved.
    // Licensed under the Apache License, Version 2.0. See LICENSE in the project root for license information.
 
    ///////////////////////////////
    // UI event handlers
    ///////////////////////////////
    document.getElementById('signout').addEventListener("click", signout, false);
    document.getElementById('signout-popup').addEventListener("click", signoutPopup, false);
 
    ///////////////////////////////
    // OidcClient config
    ///////////////////////////////
    oidc.Log.setLogger(console);
    oidc.Log.level = oidc.Log.INFO;
 
    var settings = {
        authority: 'https://example.accounts.justpass.me/openid/',
        client_id: '678605',
        redirect_uri: 'http://127.0.0.1:5501/example/home.html',
        post_logout_redirect_uri: 'http://127.0.0.1:5501/example/',
        scope: 'openid email roles',
        filterProtocolClaims: true,
        loadUserInfo: true
    };
    var mgr = new oidc.UserManager(settings);
    var userEmailTag = document.getElementById('user-email');
 
    mgr.signinCallback().then((user) => {
        userEmailTag.innerHTML = user.profile.email
    }).catch(function(err) {
        mgr.getUser().then((user) => {
            if (user){
                userEmailTag.innerHTML = user.profile.email
            } else {
                window.location = '/example'
            }
        }).catch(function(err) {
            console.error(err);
        });
    });
 
 
 
    ///////////////////////////////
    // functions for UI elements
    ///////////////////////////////
 
    function signout() {
        mgr.signoutRedirect().then(function(req) {
            console.log("signed out successfully")
        }).catch(function(err) {
            console.log(err);
        });
    }
 
    function signoutPopup() {
        mgr.signoutPopup().then(function(req) {
            console.log("signed out successfully")
            window.location = '/example'
        }).catch(function(err) {
            console.log(err);
        });
    }
    ```

Add redirect_uri, post_logout_redirect_uri to your app settings as shown in the example below.

Alt text

Get the Authorization Endpoint url, client_id from your app info as shown in the example below.

Alt text

Change the authority url, client_id in the pervious blocks of code with the ones you got from your app info.
Include the Js files you created, CDN link in the html file which contain the signin and signout buttons

If you want to try an example

    git clone https://github.com/justpass-me/oidc-vanilla-js
    cd oidc-vanilla-js
    run index.html

React iOS