Invoking login callback URL from browser shows OKTA hosted login page instead of custom login page

Questions
,
1

Hi, I am using expressJS ExpressOIDC middleware to define routes and to configure custom login page like below:

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('login', {
          csrfToken: req.csrfToken(),
          issuer: process.env.OIDC_ISSUER
        });
      }
    },
loginCallback: {
      path: '/callback',
      failureRedirect: '/',
      afterCallback: '/'
    },

And in login.html i used the OKTA widget.

Now when i invoke http://localhost:3000/callback directly as its publicly exposed, expectation is to see my custom login page. But instead it shows OKTA login page.

Is there anyway we can change this behavior?

2

Assuming you’re following these instructions, did you use the test example file linked on that page to configure your custom widget?

If so, try checking the Okta Express Sample app and compare it to yours. This one will work correctly so if you can figure out the difference you should be able to see what you’re missing

3

Thanks Erin.
I cross verified the code with the links you provided and everything looks correct.
Just to make sure I articulated my issue correctly. I do NOT have any issue with the app as such which means i am able to get the custom login page(with okta widget) and when i login, it calls the callback and goes to home page.

But when i invoke http://localhost/callback in browser manually, i expect to get the my custom login page instead i am getting okta hosted login page.
Please let me know if you want me to provide all the code snippets.

Thanks,
Vasanth

4

At what stage do you see the Okta hosted login page? Are you immediately getting redirected there, or are sent to the login.html self-hosted widget first?

5

when i access the http://localhost/callback in browser manually, it goes to the OKTA login page immediately. Below is the network log

image
image1457×354 25 KB

6

hmm… I don’t see anything wrong with your configuration, but it does look like your app is triggering a redirect to Okta to sign in (via the authorize request).

Can you try out our express sample application that has a custom login page using the widget to see if you see the same behavior with it?