reactjsoktaokta-signin-widget

Okta React + embedded SignIn Widget returning 401 for all login attempts

I am trying to use Okta to sign in to my react application. Any users assigned either

returning 401 error, as shown in the screenshots below. User auth is successful in okta however, as shown by the okta logs

enter image description here

enter image description here

enter image description here

Following is my App.js file

const history = useHistory();

  const customAuthHandler = () => {
    history.push('/login');
  };

  const restoreOriginalUri = async (_oktaAuth, originalUri) => {
    history.replace(toRelativeUrl(originalUri || '/', window.location.origin));
  };

return (
<Security>
        oktaAuth={oktaAuth}
        onAuthRequired={customAuthHandler}
        restoreOriginalUri={restoreOriginalUri}
      >
<Switch>
          <Route exact path="/" render={() => <Home />} />
          <Route path="/login" render={() => <Login />} />
          <Route path="/login/callback" component={LoginCallback} />
          <SecureRoute path="/users" render={() => <List />} />
.......
</Switch>
</Security>
);

The login page has the default embedded Okta SignIn Widget as mentioned in the react okta docs here - Sign in to your SPA with the embedded Okta Sign-In Widget | Okta Developer (the mentioned src/Login.jsx and src/OktaSignInWidget.jsx are almost similar)

What do I seem to be missing here, the okta react widget is almost identical to the one in the docs, any users used are assigned to the app in one way or the other yet the widget shows access denied. Is this a generic message which is displayed for many errors? Any help would be appreciated.

The latest version of okta SDKs for auth, react-router-dom v5 for routing

Solution

  • I was able to fix the issue, as I was using Interaction code, I had to enable it in the Okta admin dashboard. To do this go to

    Security > API > Authorization server > Default auth server > Access Policies > Default Policy Rule > Edit Rule > Select Interaction Code checkbox if unselected

    Your auth server/access policy/Rule may be different according to your use case but I am using all defaults.