# Node Express server side web app with custom login screen showing error during login callback

**URL:** <https://devforum.okta.com/t/node-express-server-side-web-app-with-custom-login-screen-showing-error-during-login-callback/13275>\
**Category:** Questions\
**Created:** [March 10, 2021, 6:59pm UTC](https://devforum.okta.com/t/node-express-server-side-web-app-with-custom-login-screen-showing-error-during-login-callback/13275 "2021-03-10T18:59:20Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![dsrvasanth](https://avatars.discourse-cdn.com/v4/letter/d/b38774/32.png) [@dsrvasanth](https://devforum.okta.com/u/dsrvasanth)\
**Post date:** [March 10, 2021, 6:59pm UTC](https://devforum.okta.com/t/node-express-server-side-web-app-with-custom-login-screen-showing-error-during-login-callback/13275/1 "2021-03-10T18:59:20Z")

</div>

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:

```auto
  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](https://developer.okta.com/code/javascript/okta_sign-in_widget/#server-side-web-application-using-authorization-code-flow)

```auto
<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](https://dev-85865421.okta.com/oauth2/default)”] is undefined”

 ![image](https://global.discourse-cdn.com/oktadev/original/2X/4/44ba0afd25609313840883d38386f82b25c7051b.png)

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

---

<div class="post-metadata">

**Author:** ![dsrvasanth](https://avatars.discourse-cdn.com/v4/letter/d/b38774/32.png) [@dsrvasanth](https://devforum.okta.com/u/dsrvasanth)\
**Post date:** [March 10, 2021, 7:06pm UTC](https://devforum.okta.com/t/node-express-server-side-web-app-with-custom-login-screen-showing-error-during-login-callback/13275/2 "2021-03-10T19:06:33Z")

</div>

After doing some investigation, what i noticed is when i click login button from home page to show the login widget, in the server side session store data an entry is made with key “oidc:[https://dev-85865421.okta.com/oauth2/default](https://dev-85865421.okta.com/oauth2/default)” only when i use OKTA hosted widget. If i use the custom login widget , this session store data is missing.

---

<div class="post-metadata">

**Author:** ![andrea](https://sea1.discourse-cdn.com/oktadev/user_avatar/devforum.okta.com/andrea/32/2172_2.png) [@andrea](https://devforum.okta.com/u/andrea)\
**Post date:** [January 26, 2024, 11:56pm UTC](https://devforum.okta.com/t/node-express-server-side-web-app-with-custom-login-screen-showing-error-during-login-callback/13275/3 "2024-01-26T23:56:12Z")

</div>


