Having Trouble following Okta Auth JS and React Implicit callback is not redirecting to Secure Route component

Questions
1

Hi Team,

i am integrating Okta OpenId authentication by following examples from

implicit callback is not redirecting to the Secure route component. kindly support in this regard.

Thank you.

image
image776×810 28.2 KB

App.js
const App = () => {

const dispatch = useDispatch();
const history = useHistory();
const onAuthRequired = () => {
history.push(‘/’);
};
useEffect(() => {
// dispatch(initUserData());
}, [dispatch]);

return (

  <Suspense fallback={<DelayedFallback/>}>
    <ErrorBoundary>
      <BrowserRouter>
        <Security issuer='https://dev-1234.okta.com/oauth2/default'
                  clientId='0oa1234mzr4x6'
                  redirectUri={`${window.location.origin}/implicit/callback`}
                  onAuthRequired={onAuthRequired}
                  pkce={false}>
          <Switch>
            {/*<Route exact path="/" component={Login}/>*/}

            <Route path='/' render={() => <SignIn issuer='https://dev-712342.okta.com/oauth2/default'/>}/>
                        <SecureRoute path="list" component={List}/>
                        <Route path="*" to={NotFound}/>
            <Route path='/implicit/callback' component={LoginCallback}/>
          </Switch>
        </Security>

      </BrowserRouter>
    </ErrorBoundary>
  </Suspense>

);
};

SignIn.js
const SignIn = ({ issuer }) => {
const { authState } = useOktaAuth();

if (authState.isPending) {
    return <div>Loading...</div>;
}
return authState.isAuthenticated ?
    <Redirect to={{ pathname: '/list' }}/> :
    <Login issuer={issuer} />;

};

export default SignIn;

implicit URL after authentication
http://localhost:3000/implicit/callback#id_token=eyJraWQiOiJ4R3lZb2lVNXc2LTJ2aXNIYWNrc0lQTjJXSXBuMUQ2dmZzNlFCZGhPeVhvIiwiYWxnIjoiUlMyNTYifQ.eyJzdWIiOiIwMHVnZjk1bHQzWXJxaXJnQjR4NiIsIm5hbWUiOiJTYW50b3NoIEt1bWFyICBEaHVsaXBhbGEiLCJlbWFpbCI6InNhbnRvc2hkaHVsaXBhbGFAeWFob28uY29tIiwidmVyIjoxLCJpc3MiOiJodHRwczovL2Rldi03MTMzODIub2t0YS5jb20vb2F1dGgyL2RlZmF1bHQiLCJhdWQiOiIwb2F3OXluZ2lvcDQzYW16cjR4NiIsImlhdCI6MTU5OTU3MTA1NCwiZXhwIjoxNTk5NTc0NjU0LCJqdGkiOiJJRC5YcXBCZHJPWVB0anQ3WVNfeHJVR3lPbU9leks3SU9xS0dIbzNHMXFQQlR3IiwiYW1yIjpbInB3ZCJdLCJpZHAiOiIwMG9nZjk1aWpFMk1aMFlTUzR4NiIsIm5vbmNlIjoicUo4RlhFSVVGVUg2VkpMZElJYTJpQkhhVEhiZllhOFZEaVFlb0I0dWswVk4wQ2dXRVg1S3F3MURMeXBYbkRSZyIsInByZWZlcnJlZF91c2VybmFtZSI6InNhbnRvc2hkaHVsaXBhbGFAeWFob28uY29tIiwiYXV0aF90aW1lIjoxNTk5NTcxMDUzLCJhdF9oYXNoIjoidFYtczdkdGo5aTBzcnc5VFJ6eWtOZyJ9.JTM6WatkeFxwWLZRj3Ahwl3pE4T5nE6CSnT2ML3dRgiYQhVF3ZFV5O77-4172DeVtPuoLCo-OOXUKt9X8tigyJkHqKiXJqsBu324nQ28fWls3S5nnoGc2ZqpeIc2g-bg97WwVL4LMeSwq3baXwwKYZNXG7LPPQInWz3xUqoslQmaWn46BkLHC55ey03QwwAADkoY1vG8DLW2uEnbXGygDgdW34llcz8VCRnS-ZxAILHGsty8GqODO_q3AtTLZbRzxtm6yIwn4ba1kwy10-0Gf3fuJXVkeSx3lDGmrmnXiTkXdkpH6GU6-nuu-x45cY_ztEaNVS_d_kYIg_pnO9YLxg&access_token=eyJraWQiOiJ4R3lZb2lVNXc2LTJ2aXNIYWNrc0lQTjJXSXBuMUQ2dmZzNlFCZGhPeVhvIiwiYWxnIjoiUlMyNTYifQ.eyJ2ZXIiOjEsImp0aSI6IkFULkMyTVFTcFFGcXNHRHFaLWRJb1FwY1d4bUJDRXVTMEdMcnJhNXRhbTlLU0kiLCJpc3MiOiJodHRwczovL2Rldi03MTMzODIub2t0YS5jb20vb2F1dGgyL2RlZmF1bHQiLCJhdWQiOiJhcGk6Ly9kZWZhdWx0IiwiaWF0IjoxNTk5NTcxMDUzLCJleHAiOjE1OTk1NzQ2NTMsImNpZCI6IjBvYXc5eW5naW9wNDNhbXpyNHg2IiwidWlkIjoiMDB1Z2Y5NWx0M1lycWlyZ0I0eDYiLCJzY3AiOlsib3BlbmlkIiwicHJvZmlsZSIsImVtYWlsIl0sInN1YiI6InNhbnRvc2hkaHVsaXBhbGFAeWFob28uY29tIn0.iQxyvL0jEjl-pmGStLKOm0mWV-NBAskzJgrh3Z_tOjBF10TtKCuJtBzj4p37RLzSyQXagMU4rQtz4tWdeGAuiQnwi6U8LoR_Kv6m2f9bKskbFzV7EGUJyRauqtqsj-wHt-YxYPrpphuQmkjWiVAweC28_h83Rch1dzToTww35DE6yiEkV1_2vhIruEWH2GZgnWs-cSB9Gg4JWTW98EyiOl7Hd_HjKFIKzM_lFSaZkbW2VI1KNnGopbOmZkJ3ocQiKGUnz3ptVmeb7GtMKbG2NFirvVEl7vbwVdyu1A8-PPH6MdNloa843g8nvZPXTFFbbOojWvYG-sK1vcpoiTPqKw&token_type=Bearer&expires_in=3600&scope=openid+profile+email&state=9N7c9NFaybl4SlkBxE56AL7tixxCD1CiCtOoULUKCrLZ6lRWLqNblvOMS6nrU9GN

Debug information

  1. Request URL:

https://dev-712342.okta.com/oauth2/default/v1/authorize?client_id=0oaw9yngiop43amzr4x6&nonce=VU65oT9xIusJKpEe7Xo1HUuSFBiL7nbD2MbyIFdsQ9lcA65heirGg4ObDnSQlNsF&redirect_uri=http%3A%2F%2Flocalhost%3A3000%2Fimplicit%2Fcallback&response_type=id_token%20token&sessionToken=20111-hra2XUAI-Gf5HeEvdSPD3fK1kC74ahq6LrMy24Jj4362QC9jf&state=APWZEee9EGxGnokfq9sPGVA3DplgpNupkWi94aENX8VkStIHssyTubZ1SB5D0JSi&scope=openid%20email%20profile

Request Method:GET
Status Code: 302 Found
Remote Address:3.15.XX.XXX.XX
Referrer Policy:no-referrer-when-downgrade

client_id:0oaw9yngiop43amzr4x6
nonce:VU65oT9xIusJKpEe7Xo1HUuSFBiL7nbD2MbyIFdsQ9lcA65heirGg4ObDnSQlNsF
redirect_uri:http://localhost:3000/implicit/callback
response_type:id_token token
sessionToken:20111-hra2XUAI-Gf5HeEvdSPD3fK1kC74ahq6LrMy24Jj4362QC9jf
state:APWZEee9EGxGnokfq9sPGVA3DplgpNupkWi94aENX8VkStIHssyTubZ1SB5D0JSi
scope:openid email profile

2

Hi Team,

found that authstate is not being updated upon authService.redirect({ sessionToken }), which causing issue of not redirecting to Secure Route
authState.isAuthenticated and authState.isPending is always return false

3

shared more details in below link. kindly suggest

4

@d12santosh Can you please open a support ticket through an email to support@okta.com with this issue? One of our Developer Support Engineers will take the case and assist you in narrowing down the cause of the issue.

5

Thank you for your support , i am able to login with newly released okta-react 3.0.7.
not sure how to mark this as resolved.

7

@d12santosh Sounds great! Welcome~ I have been marked this question as closed.