How to enable okta verify push notification in react sign-in widget

Questions OAuth/OIDC
, , ,
1

Hi Everyone,

We are using react sign-in widget for our authentication and would like to enable the okta verify push notification flow for it. Below is our code for sample, can someone please help how to enable the okta verify push notification flow for it ?
It’s a SPA (single page application)

const Login = ({ setCorsErrorModalOpen }: LoginProps) => {
  const { oktaAuth } = useOktaAuth();
  const widgetRef: any = useRef();

  // Fetch otp and state from query params from email callback verification URI
  // Application should have http://localhost:8080/login as the email callback verification URI
  const queryParams = new URLSearchParams(window.location.search);
  const state = queryParams?.get('state') ?? '';

  useEffect(() => {
    if (!widgetRef.current) {
      return;
    }

    const { issuer, clientId, redirectUri, scopes, useInteractionCode } = 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,
      i18n: {
        en: {
          'primaryauth.title': 'Hi, Welcome back 👋',
        },
      },
      authParams: {
        // To avoid redirect do not set "pkce" or "display" here. OKTA-335945
        issuer,
        scopes,
      },
      useInteractionCodeFlow: useInteractionCode, // Set to true, if your org is OIE enabled
      state,
    });

    widget.renderEl(
      { el: widgetRef.current },
      (res: any) => {
        oktaAuth.handleLoginRedirect(res.tokens);
      },
      (err) => {
        throw err;
      },
    );

    // Note: Can't distinguish CORS error from other network errors
    const isCorsError = (err: any) => (err.name === 'AuthApiError' && !err.statusCode);

    widget.on('afterError', ({_context, error}: any) => {
      if (isCorsError(error)) {
        setCorsErrorModalOpen(true);
      }
    });

    return () => widget.remove();
  }, [oktaAuth]);
2

When users log into your application right now, are they being prompted for an additional factor? If not, do your sign on policies within Okta require that the user authenticate with Okta Verify Push and do you have an enrollment policy set up so that they will be able to enroll in this factor?

3

Users logging into our application right now, are not getting prompt for an additional factor.

We have an okta org and we use SSO credentials for logging into all internal company applications gated with OKTA. Issue we are stuck right now is, our new application that we are developing is not sending prompt for additional factor so we are stuck while logging into application. But if we login through some other internal application, which creates session in user’s machine and then if we try to login to our application, it silently lets user login. so trying to figure out what’s preventing user from not sending verify push on our new application that we are developing.

4

yes, we have the enrollment policy setup and digging further into the requests. I observed that,
prompt has value set as none during authorize? call. if I grab that entire authorize? url and paste into browser and change prompt to “login” it does send the okta very push with number challenge and works fine. but I’m not sure how to pass the prompt as login and where to make code changes for that in our above react sign in widget for that :thinking: and another issue I found is after successfully verifying challenge it doesn’t redirect app to the homepage of our application but gets stuck at https://.okta.com/login/token/redirect?stateToken=02.id.poHYmJNIZ8.

Other two calls to /api/v1/authn and openid-configuration works fine. can you please help with it? Thanks!

authorize call failing
authorize call failing1017×423 35.6 KB