ocap-kirk/index.html

## index.html
<!DOCTYPE html>
<html>

<head>
    <!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> -->
    <script src="https://global.oktacdn.com/okta-signin-widget/3.2.1/js/okta-sign-in.min.js" type="text/javascript"></script>
    <link href="https://global.oktacdn.com/okta-signin-widget/3.2.1/css/okta-sign-in.min.css" type="text/css" rel="stylesheet" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>

<body>
    <!-- Render the login widget here -->
    <div id="okta-login-container"></div>
    <div id="yourInfo">
    </div>
    <!-- Script to init the widget -->
    <script type="text/javascript">
    var clientID = "0oao10dkk2LhdSsdj0h7";
    var redirectUrl = "https://oktawidgetpkce.glitch.me/";
    var issuer = "https://partnerpoc.oktapreview.com/oauth2/default";
    var signIn = new OktaSignIn({
        baseUrl: 'https://partnerpoc.oktapreview.com',
        authParams: {
            pkce: true,
            issuer: issuer,
            grantType: 'authorization_code',
            display: 'page',
            responseType: 'code',
        },
        el: '#okta-login-container'
    });

    signIn.authClient.token.parseFromUrl()
        .then(function(tokenOrTokens) {
            // manage token or tokens
            // Add the token to tokenManager to automatically renew the token when needed
            tokenOrTokens.forEach(token => {
                if (token.idToken) {
                    signIn.authClient.tokenManager.add('id_token', token);
                    $("#yourInfo").append("<div><h2>ID Token</h2>");
                    $("#yourInfo").append("<p>" + token.idToken + "</p>");
                    $("#yourInfo").append("</div>");
                }
                if (token.accessToken) {
                    signIn.authClient.tokenManager.add('access_token', token);
                    $("#yourInfo").append("<div><h2>Access Token</h2>");
                    $("#yourInfo").append("<p>" + token.accessToken + "</p>");
                    $("#yourInfo").append("</div>");
                }
            });
            console.log("Your Tokens have been stored!");
            //show div
        })

        .catch(function(err) {
            console.log(err);
            signIn.authClient.tokenManager.get('id_token')
                .then(function(token) {
                    if (token) {
                        // Token is valid
                        $("#yourInfo").append("<div><h2>ID Token</h2>");
                        $("#yourInfo").append("<p>" + token.idToken + "</p>");
                        $("#yourInfo").append("</div>");

                        signIn.authClient.tokenManager.get('access_token')
                            .then(function(token2) {
                                // Token is valid
                                $("#yourInfo").append("<div><h2>Access Token</h2>");
                                $("#yourInfo").append("<p>" + token2.accessToken + "</p>");
                                $("#yourInfo").append("</div>");
                            });
                        console.log(token);
                    } else {
                        // Token has expired

                        if (signIn.authClient.tx.exists()) {
                            //session esists, renew token
                            console.log('A session exists!');
                        } else {
                            console.log('A session does not exist.');
                        };
                        signIn.renderEl({
                                clientId: clientID,
                                redirectUri: redirectUrl,
                            },
                            function() {},
                            function(err) { console.err(err) });
                    }
                })
                .catch(function(err) {
                    // OAuth Error
                    signIn.renderEl({
                            clientId: clientID,
                            redirectUri: redirectUrl,
                        },
                        function() {},
                        function(err) { console.err(err) });
                    console.error(err);
                });
        });
    </script>
</body>

</html>
	<!DOCTYPE html>
	<html>

	<head>
	<!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> -->
	<script src="https://global.oktacdn.com/okta-signin-widget/3.2.1/js/okta-sign-in.min.js" type="text/javascript"></script>
	<link href="https://global.oktacdn.com/okta-signin-widget/3.2.1/css/okta-sign-in.min.css" type="text/css" rel="stylesheet" />
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
	</head>

	<body>
	<!-- Render the login widget here -->
	<div id="okta-login-container"></div>
	<div id="yourInfo">
	</div>
	<!-- Script to init the widget -->
	<script type="text/javascript">
	var clientID = "0oao10dkk2LhdSsdj0h7";
	var redirectUrl = "https://oktawidgetpkce.glitch.me/";
	var issuer = "https://partnerpoc.oktapreview.com/oauth2/default";
	var signIn = new OktaSignIn({
	baseUrl: 'https://partnerpoc.oktapreview.com',
	authParams: {
	pkce: true,
	issuer: issuer,
	grantType: 'authorization_code',
	display: 'page',
	responseType: 'code',
	},
	el: '#okta-login-container'
	});

	signIn.authClient.token.parseFromUrl()
	.then(function(tokenOrTokens) {
	// manage token or tokens
	// Add the token to tokenManager to automatically renew the token when needed
	tokenOrTokens.forEach(token => {
	if (token.idToken) {
	signIn.authClient.tokenManager.add('id_token', token);
	$("#yourInfo").append("<div><h2>ID Token</h2>");
	$("#yourInfo").append("<p>" + token.idToken + "</p>");
	$("#yourInfo").append("</div>");
	}
	if (token.accessToken) {
	signIn.authClient.tokenManager.add('access_token', token);
	$("#yourInfo").append("<div><h2>Access Token</h2>");
	$("#yourInfo").append("<p>" + token.accessToken + "</p>");
	$("#yourInfo").append("</div>");
	}
	});
	console.log("Your Tokens have been stored!");
	//show div
	})

	.catch(function(err) {
	console.log(err);
	signIn.authClient.tokenManager.get('id_token')
	.then(function(token) {
	if (token) {
	// Token is valid
	$("#yourInfo").append("<div><h2>ID Token</h2>");
	$("#yourInfo").append("<p>" + token.idToken + "</p>");
	$("#yourInfo").append("</div>");

	signIn.authClient.tokenManager.get('access_token')
	.then(function(token2) {
	// Token is valid
	$("#yourInfo").append("<div><h2>Access Token</h2>");
	$("#yourInfo").append("<p>" + token2.accessToken + "</p>");
	$("#yourInfo").append("</div>");
	});
	console.log(token);
	} else {
	// Token has expired

	if (signIn.authClient.tx.exists()) {
	//session esists, renew token
	console.log('A session exists!');
	} else {
	console.log('A session does not exist.');
	};
	signIn.renderEl({
	clientId: clientID,
	redirectUri: redirectUrl,
	},
	function() {},
	function(err) { console.err(err) });
	}
	})
	.catch(function(err) {
	// OAuth Error
	signIn.renderEl({
	clientId: clientID,
	redirectUri: redirectUrl,
	},
	function() {},
	function(err) { console.err(err) });
	console.error(err);
	});
	});
	</script>
	</body>

	</html>