Skip to content

Instantly share code, notes, and snippets.

@ocap-kirk

ocap-kirk/index.html

Last active May 28, 2020 18:56
Show Gist options
  • Save ocap-kirk/7b31a28eb35b4ce74a07b8200ddc174e to your computer and use it in GitHub Desktop.
Save ocap-kirk/7b31a28eb35b4ce74a07b8200ddc174e to your computer and use it in GitHub Desktop.
Download ZIP
Okta Sign-in Widget PKCE Example
Raw
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>
@dynamod92
Copy link

This is AMAZING. Seconding what @vmusiychuk said 👍

@dynamod92
Copy link

@tkirk-okta I've reviewed the React examples for using this widget, but for some reason, I'm not able to get them to work. Any tips on using this flow in a functional React component? Thank you!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment