Okta-signin-widget POSTing to /authn when I want it to use /authorize for OIDC

[dsoerensen]

Looking through the API, I notice the /authorize endpoint is meant for OIDC flows, but my application is sending requests to /authn which is the normal (?) auth endpoint and not the the one I want.

Here is my config:

export const OKTA_DOMAIN = process.env.DOMAIN || '{removed for privacy}';
export const CLIENT_ID = process.env.CLIENT_ID || '{removed for privacy}';
export const CALLBACK_PATH = '/login/callback';

const ISSUER = `https://${OKTA_DOMAIN}/oauth2/default`;
const HOST = window.location.host;
const REDIRECT_URI = `http://${HOST}${CALLBACK_PATH}`;
const SCOPES = 'openid profile email';

const config = {
  oidc: {
    issuer: ISSUER,
    clientId: CLIENT_ID,
    redirectUri: REDIRECT_URI,
    scopes: SCOPES.split(/\s+/)
  }
};

export default config;

And here is my widget:

import React, { ReactNode, ReactElement, useEffect } from 'react';
import { useOktaAuth } from '@okta/okta-react';
import * as OktaSignIn from '@okta/okta-signin-widget';
import '@okta/okta-signin-widget/dist/css/okta-sign-in.min.css';

import { Tokens } from '../App.d.ts'
import config from '../config.js';

interface Props {
  content?: Array<any>;
  children?: ReactNode | ReactElement;
}

const Login: React.FC<Props> = ({ content }) => {
  const { authState, authService } = useOktaAuth();

  useEffect(() => {
    const { issuer, clientId, redirectUri, scopes } = config.oidc;
    const widget = new OktaSignIn({
      /**
       * Note: when using the Sign-In Widget for an OIDC flow, it still
       * needs to be configured with the base URL for your Okta Org. Here
       * we derive it from the given issuer for convenience.
       */
      baseUrl: issuer.split('/oauth2')[0],
      clientId,
      redirectUri,
      logo: '/react.svg',
      i18n: {
        en: {
          'primaryauth.title': 'Sign in to Haven'
        }
      },
      authParams: {
        // To avoid redirect do not set "pkce" or "display" here. OKTA-335945
        issuer,
        scopes
      }
    });
    widget.remove(); // I added this in because the the component would rerender and wouldn't be able to 
    add another widget because one was already there...
    widget.renderEl(
      { el: '#login-main' },
      ({ tokens }: Tokens) => {
        // Add tokens to storage
        const tokenManager = authService.getTokenManager();
        tokenManager.add('idToken', tokens.idToken);
        tokenManager.add('accessToken', tokens.accessToken);

        // Return to the original URL (if auth was initiated from a secure route), falls back to the origin
        const fromUri = authService.getFromUri();
        window.location.assign(fromUri);
      },
      (err: any) => {
        throw err;
      }
    );
  }, [authState]);

  console.log('Inside Login');
  console.log('authstate.isPending: ', authState.isPending);

  return authState.isPending ? (
    <div>Signing in...</div>
  ) : (
    <div className='login-container'>
      <div id='login-main' />
    </div>
  );
};

export default Login;

[phi1ipp]

widget first needs to obtain session token by calling /authn and then use it to initiate OIDC login flow by calling /authorize

I might be wrong, but you may need to use https://github.com/okta/okta-signin-widget#showsignintogettokens