Hello All,
I have been attempting to try and integrate okta login to a GitHub.io application. I’ll throw a link to the app bellow but it is a very simple vanilla JS, HTML and CSS application.
My main question is can I use okta to initially direct users to a login page (index.html) and then redirect them to the main application page after a successful login(main.html)? I have added https://web-dev-jr.github.io/JS-Pomodor/main to my Login redirect URIs via my Okta dashboard and my code at index.html looks like this;
const oktaSignIn = new OktaSignIn({
baseUrl: "https://dev-70746537.okta.com",
**redirect_uri: "https://web-dev-jr.github.io/JS-Pomodor/main",**
clientId: "0oabhudxi6ZwiOiOu5d6",
authParams: {
issuer: "https://dev-70746537.okta.com/oauth2/default",
responseType: ['token', 'id_token'],
display: 'page',
}
});
if (oktaSignIn.token.hasTokensInUrl()) {
oktaSignIn.token.parseTokensFromUrl(
// If we get here, the user just logged in.
function success(res) {
var accessToken = res[0];
var idToken = res[1];
oktaSignIn.tokenManager.add('accessToken', accessToken);
oktaSignIn.tokenManager.add('idToken', idToken);
window.location.hash='';
document.getElementById("messageBox").innerHTML = "Hello, " + idToken.claims.email + "! You just logged in!";
},
function error(err) {
console.error(err);
}
);
} else {
oktaSignIn.session.get(function (res) {
// If we get here, the user is already signed in.
if (res.status === 'ACTIVE') {
document.getElementById("messageBox").innerHTML = "Hello, " + res.login + "! You are logged in!";
return;
}
oktaSignIn.renderEl(
{ el: '#okta-login-container' },
function success(res) {},
function error(err) {
console.error(err);
}
);
});
}
</script>
the link to my GitHub repo is: https://github.com/Web-Dev-Jr/JS-Pomodor/tree/main
If it is not possible to do this with GitHub.io pages or I’m doing something wrong I would greatly appreciate any insight.
Thank you all in advance!
Sam