1. Create your client page

The client page is where you will ask users to login. This can be implemented in a variety of ways, but the intent is for your application to invoke a sign in popup via some application triggered action.
The code sample below uses the industry standard oidc-client to provide a simple "Login with Seismic" button that will open the popup and allow the user to login.
The resulting bearer token will then be output to the client.html page.

📘
Redirect vs Popup vs Silent
When you implement a login flow, you can leverage 3 different approaches for how the users login and where they are taken.

Redirect - This flow will take the user through a sequence of pages and ultimately put them at their final destination. This flow can be a bit jarring for users and is often difficult to implement in a way that is seamless for users. Use .signinRedirect() for this flow.

Popup - In situations where users will need to log in, this is a pretty clean flow. A simple popup dialog is presented where users can log in. All information can then be exchanged in the browser back to the client page. Use .signinPopup() for this flow.

Silent - This flow is ideal in the enterprise where SSO is the predominant approach. The silent flow will log users in completely seamlessly with no popups or redirects, but it does require the user is already signed in to your SSO system. Use .signinSilent() for this flow.

<html>
    <body>
        Tenant:<input id="tenant"></input>
        <span id="login" style="background:#f1592a; color:white; padding:6px; border-radius:5px; cursor:pointer;">Login with Seismic</span>
        <span id="directlogin" style="background:#f1592a; color:white; padding:6px; border-radius:5px; cursor:pointer;">Direct Login</span>
        <span id="silentlogin" style="background:#f1592a; color:white; padding:6px; border-radius:5px; cursor:pointer;">Silent Login</span>
        
        <pre id="response" style="white-space:pre-wrap; word-break:break-word;"></pre>
        
        <script src="https://cdnjs.cloudflare.com/ajax/libs/oidc-client/1.6.1/oidc-client.min.js"></script>
        <script type="text/javascript">

            var settings = {
                authority: 'https://auth.seismic.com/tenants/<tenant name here>',
                client_id: '<your client_id>',
                redirect_uri: "<your redirect url>",
                silent_redirect_uri: "<redirect url for silent flows>",
                scope: 'seismic.reporting',
                response_type: "token",
                loadUserInfo: false
            };
            settings.authority = 'https://auth.seismic.com/tenants/' + window.location.search.substring(1);   
            document.getElementById("tenant").value = window.location.search.substring(1);   
            document.getElementById("tenant").focus();
            document.getElementById("tenant").addEventListener("input", function(e){
                window.location.search = e.target.value;   
            });
             
            var manager = new Oidc.UserManager(settings);
            
            manager.events.addUserLoaded(function (loadedUser) {
                console.log(loadedUser);
                console.log("Authorization: " + loadedUser.token_type + ' ' + loadedUser.access_token);
                document.getElementById("response").innerHTML = "Authorization: " + loadedUser.token_type + ' ' + loadedUser.access_token;
            });


            document.getElementById("login").addEventListener("click", function() {            
                manager
                    .signinPopup({
                        popupWindowFeatures : 'location=no,toolbar=no,width=680,height=700'
                    })
                    .catch(function(error) {
                        console.error('error while logging in through the popup', error);
                    });
            });            
            document.getElementById("directlogin").addEventListener("click", function() {
                manager
                    .signinPopup({
                        popupWindowFeatures : 'location=no,toolbar=no,width=680,height=700',
                        extraQueryParams: { //your params go here
                            authentication_mode : 'directlogon'
                        }
                    })
                    .catch(function(error) {
                        console.error('error while logging in through the popup', error);
                    });            
            });
            document.getElementById("silentlogin").addEventListener("click", function() {
                manager
                    .signinSilent()
                    //.signinPopup()
                    .catch(function(error) {
                        console.error('error while logging in through the popup', error);
                    });
            });


        </script>
    </body>
</html>

📘Redirect vs Popup vs Silent

📘
Redirect vs Popup vs Silent