Okta Logout With Nuxt.js/Vue and OpenId

Viewed 459

I've seen a lot of people have this issue (not just with Vue), where when you try to log the user out this error is seen:

{
"errorCode": "invalid_client",
"errorSummary": "A client_id must be provided in the request.",
"errorLink": "invalid_client",
"errorId": "oae1R3sir06RJOLBoPOl08IUQ",
"errorCauses": []
}

It is extremely confusing given the fact that the Okta documentation does not say that you need to specify a client_id as a query param, instead you need to supply id_token_hint and post_logout_redirect_uri. I've tried this multiple ways, first using the built in Vue auth module:

this.$auth.logout();

This method redirects to the correct logout url, but only supplies a client_id and redirect url as query params (which doesn't match the Okta documentation here: https://developer.okta.com/docs/guides/sign-users-out/vue/sign-out-of-okta/

After reviewing that documentation I setup my method like this:

      this.token = (this.$auth.strategy as LocalScheme).token.get() as string;
      this.token = this.token.replace('Bearer ', '');

      // Clear remote session
      window.location.href = `${
        this.$auth.ctx.$config.OAUTH_ISSUER
      }/v1/logout?id_token_hint=${
        this.token
      }&post_logout_redirect_uri=${encodeURIComponent(
        'http://localhost:3000'
      )}`;

Both methods give the same exact error, at this point I can't tell if it is an issue with how the Okta App is setup, or if I'm doing something wrong when supplying the query parameters.

1 Answers

I don't think you are doing anything wrong. I was able to run into situation like yours, when I was prepping an example for you. Initially I had one authZ server and client_id params, but I changed them to a preview environment. In the same browser I ran into the issue, which you described.

I opened a different browser and it worked for me, so maybe there is some sort of cookie issue.

The example (not Vue though) is sitting at glitch.com. Have a look if you want.

Related