Oidc-client-js: No request to exchange code for access_token is made

Created on 24 Feb 2020 · 10Comments · Source: IdentityModel/oidc-client-js

Hi,

I've just given a go implementing PKCE in a React app. I can see that my app is making an authorization request, receives an auth code (and state) but then there's no subsequent call to exchange the token.

The auth code and state are received on the redirect_uri I specify in config. Is this correct? I was under the impression that the redirect_uri is used as the callback for the token exchange request.

My config looks like:

const settings = {
  authority: '',
  metadata: {
    authorization_endpoint: '',
    token_endpoint: '',
  },
  client_id: '',
  redirect_uri: '',
  post_logout_redirect_uri: '',
  response_type: 'code',
  scope: 'openid profile',
};

and I trigger a sign-in like this:

signin = () => {
    if (this.userManager) {
      return this.userManager.signinRedirect()
    }
  }

Where you see '' there is an actual value, I've just redacted it. All of the above fields are set.

Any ideas, please?

EDIT:
Now my understanding is that I need to be using signinRedirectCallback() instead, and the callback url used by this will be the one specified in my settings. Of course, I'm now receiving the 'usual' error: No state in response and haven't managed to fix yet.

Source

mihalios

All 10 comments

Re-reading the docs:

redirect_uri (string): The redirect URI of your client application to receive a response from the OIDC/OAuth2 provider.

Do I need to handle the callback or can the library do that? In this case do I need to set another callback for the token exchange request?

mihalios on 24 Feb 2020

I finally managed to complete the implementation of the Auth Code Flow w PKCE. I'm not sure I followed the recommended approach but that's what I did:

Created a callback html page, that's the redirect_uri specified in settings.
In my Auth react component I invoke .signinRedirect()
In the callback page I have embedded js code that invokes .signinRedirectCallback() and that results in my token get added in the Session Storage.

Does this sounds reasonable?

mihalios on 24 Feb 2020

I'm also trying to implement in React. It looks like you did exactly what's shown here: https://github.com/skoruba/react-oidc-client-js .

If you're able to make your code public, do you think you could share it? I'm trying to do the same method but am having difficulties with the callback html page -specifically getting a

{"error":"invalid_client","error_description":"Bad client credentials"}

error, which might be a configuration problem on my end.

cschloer on 24 Feb 2020

👍1

@cschloer Afraid I can't publish at the moment. But if you have your code on github I can happily take a look.

I think your error might be caused by several issues, hard to tell without looking at code.

mihalios on 24 Feb 2020

Unfortunately mine is also private but here are the relevant lines of code if you have any thoughts:

signin-callback.html

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Authentification callback processing..</title>
</head>

<body>
    <noscript>
        You need to enable JavaScript to run this app.
    </noscript>

    <h1>Authentification callback processing...</h1>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/oidc-client/1.8.2/oidc-client.js"></script>
    <script>
        new Oidc.UserManager({ response_mode: "query" }).signinRedirectCallback().then(function () {
            window.location = "index.html";
        }).catch(function (e) {
          throw e;
            console.error(e);
        });
    </script>

</body>

</html>

auth.js

import PropTypes from 'prop-types';
import { Log, User, UserManager } from 'oidc-client';

const redirectUri = 'http://localhost:3000/signin-callback.html';

const settings = {
  authority: process.env.REACT_APP_AUTH_URL,
  client_id: process.env.REACT_APP_AUTH_CLIENT_ID,
  redirect_uri: redirectUri,
  silent_redirect_uri: `${window.location.origin}/silent-renew.html`,
  post_logout_redirect_uri: `${window.location.origin}`,
  response_type: 'code',
  scope: 'openid profile',
};

const userManager = new UserManager(settings);

export const authPropTypes = PropTypes.shape({});

export default function authReducer(state = {}, action) {
  switch (action.type) {
    default:
      return state;
  }
}

export function login() {
  return async (dispatch, getState) => {
    userManager.signinRedirect();
  };
}

The auth functions are in a redux store currently, albeit with no state associated with it yet.

cschloer on 25 Feb 2020

Made some progress by switching to this wrapper here: https://github.com/maxmantz/redux-oidc

cschloer on 25 Feb 2020

This is all very interesting to me I'm trying to implement the PKCE flow but am having some similar issues but have some clues now, I will keep you posted if I succeed

dexygen on 25 Feb 2020

@cschloer I assume you either resolved your problem or took a different approach by switching to the wrapper you mentioned above, so I will close this.

mihalios on 3 Mar 2020

👍1

How this issue is resolved ?

abelkbil on 26 May 2020

@abelkbil Did you read all comments? That's the approach I took and it worked:

Created a callback html page, that's the redirect_uri specified in settings.
In my Auth react component I invoke .signinRedirect()
In the callback page I have embedded js code that invokes .signinRedirectCallback() and that results in my token get added in the Session Storage.

mihalios on 26 May 2020

👍1

Was this page helpful?

0 / 5 - 0 ratings