Hello,
Im trying to setup the signin widget on my application (nodejs backend), however i keep getting the okta signin page.
I have followed example provided by oidc-middleware.
Here are my code and configuration.
SERVER.JS
const express = require('express');
const session = require('express-session');
const {
ExpressOIDC
} = require('@okta/oidc-middleware');
const app = express();
const oidc = new ExpressOIDC({
issuer: 'https ://XXXX.oktapreview.com/oauth2/default',
client_id: 'XXXX',
client_secret: 'XXXX',
redirect_uri: 'http://localhost:3000/authorization-code/callback',
scope: 'openid profile'
}, {
routes: {
login: {
viewHandler: (req, res, next) => {
const baseUrl = "https ://XXXX.oktapreview.com";
res.render('login2', {
csrfToken: req.csrfToken(),
baseUrl: baseUrl
});
}
}
}
});
app.use(session({
secret: 'this-should-be-very-random',
resave: true,
saveUninitialized: false
}));
app.use(oidc.router);
app.get('/', (req, res) => {
if (req.userinfo) {
res.send(`Hello ${req.userinfo.name}! <a href="logout">Logout</a>`);
} else {
res.send('Please <a href="/login">login</a>');
}
});
app.get('/protected', oidc.ensureAuthenticated(), (req, res) => {
res.send('Top Secret');
});
app.get('/logout', (req, res) => {
req.logout();
res.redirect('/');
});
oidc.on('ready', () => {
app.listen(3000, () => console.log('app started'));
});
oidc.on('error', err => {
// An error occurred while setting up OIDC
});
LOGIN.EJS
<html>
<head>
<style>
body {
font-family: Helvetica Neue,Helvetica,Arial,sans-serif;
}
</style>
<script src="https://ok1static.oktacdn.com/assets/js/sdk/okta-signin-widget/1.13.0/js/okta-sign-in.min.js" type="text/javascript"></script>
<link href="https://ok1static.oktacdn.com/assets/js/sdk/okta-signin-widget/1.13.0/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"/>
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
</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
});
signIn.renderEl({ el: '#app-container' }, (res) => {
var form = $('<form>', {
method: 'POST',
action: '/login'
});
$(document.body).append(form);
var sessionTokenField = $('<input type="hidden" name="sessionToken"/>');
var csrfTokenField = $('<input type="hidden" name="_csrf" value="<%= csrfToken %>"/>');
sessionTokenField.val(res.session.token)
form.append(sessionTokenField);
form.append(csrfTokenField);
form.submit();
}, (err) => {
console.error(err);
});
</script>
</body>
</html>
WEB APP config:
Thank you for your help.This text will be blurred