Custom login signin widget / Nodejs

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

Hi @Alex777. Your code looks right to me. Can you try running our custom login sample application? I’m curious to know if that does the right thing for you. You can find it here: https://github.com/okta/samples-nodejs-express-4/tree/master/custom-login

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.