I am trying to setup Node/Express server side web application with custom login screen.
And i am using ExpressOIDC router config as below to define custom login view handler:
const oidc = new ExpressOIDC({
issuer: process.env.OIDC_ISSUER,
client_id: process.env.OIDC_CLIENT_ID,
client_secret: process.env.OIDC_CLIENT_SECRET,
appBaseUrl: process.env.BASE_URL,
scope: 'openid profile email',
routes: {
login: {
viewHandler: (req, res) => {
const baseUrl = url.parse(process.env.OIDC_ISSUER).protocol + '//' + url.parse(process.env.OIDC_ISSUER).host;
// Render your custom login page, you must create this view for your application and use the Okta Sign-In Widget
res.render('login1', {
csrfToken: req.csrfToken(),
baseUrl: baseUrl,
clientId: process.env.OIDC_CLIENT_ID,
redirectUri: process.env.BASE_URL+'/callback',
issuer: process.env.OIDC_ISSUER
});
}
}
loginCallback: {
path: '/callback',
failureRedirect: '/',
afterCallback: '/users'
},
And i followed the below link to setup the login view
https://developer.okta.com/code/javascript/okta_sign-in_widget/#server-side-web-application-using-authorization-code-flow
<html>
<head>
<style>
body {
font-family: Helvetica Neue,Helvetica,Arial,sans-serif;
}
</style>
<script src="https://global.oktacdn.com/okta-signin-widget/5.4.1/js/okta-sign-in.min.js" type="text/javascript"></script>
<link href="https://global.oktacdn.com/okta-signin-widget/5.4.1/css/okta-sign-in.min.css" type="text/css" rel="stylesheet"/>
<!-- Optional, customizable css theme options. Link your own customized copy of this file or override styles in-line -->
<link href="https://ok1static.oktacdn.com/assets/js/sdk/okta-signin-widget/1.13.0/css/okta-theme.css" type="text/css" rel="stylesheet"/>
</head>
<body>
<div id="banner">
<center>Custom Login Page</center>
</div>
<div id="app-container"></div>
<script type="text/javascript">
const signIn = new OktaSignIn({
baseUrl: '<%= baseUrl %>', // e.g. https://dev-1234.oktapreview.com
el: '#app-container',
clientId: '<%=clientId%>',
redirectUri: '<%=redirectUri%>',
authParams: {
issuer: '<%=issuer%>',
pkce: false,
responseType: ['code']
}
});
// A query parameter named `code` will be passed to the login redirect URI
// This should be handled by server-side code. The code can be exchanged for tokens
signIn.showSignInAndRedirect().catch(function(error) {
console.log(error);
});
</script>
</body>
</html>
I am getting the custom login screen and after entering the credentials and clicking the login button, its authenticating successfully and trying to redirect to the callback route, and i am getting an error
“Error Error: did not find expected authorization request details in session, req.session[“oidc:https://dev-85865421.okta.com/oauth2/default”] is undefined”
The same code works perfectly after commenting out the login viewhandler code, which shows the OKTA hosted login screen.
Any help or hint would be really appreciated.
Also i am looking to setup custom login screen without OKTA widget. Please show me the right direction to implement the same