Skip to content

Instantly share code, notes, and snippets.

@ocap-kirk
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.
Okta Sign-in Widget PKCE Example
<!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>
@vmusiychuk
Copy link

Hi, I have no idea how - but your example really works,
I've spent many hours trying to run OKTA widget with PKCE by using examples from OKTA documentations, but no luck (I think all of them are incorrect).
But this is work!

@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