Hi,

the optional config parameter refreshSlack provides a number of seconds. This number is added to the expires in timout logic. I'm not sure what time is described by the parameter.

A.) Is it the amount of time in seconds your back-end / server is willing to accept an token that is expired?
B.) is it the amount of time in seconds that this library will use to update the token before it expires?

With the default value of 5 seconds, I face some HTTP 401 requests from time to time. The token is refreshed then and HTTP 401 is gone. It seems to me to discribe option A.) but my back-end / server does not accept expired tokens or does not care about slack.

As a workaround I use a negative refreshSlack to avoid random HTTP 401.

Kind regards,
Tobias

it looks like Cognito logout Api have been changed, and now looking for parameter called redirect_uri instead of post_logout_redirect_uri.

when application redirect to cognito ui form the current messege display: Required String parameter 'redirect_uri' is not present.

Hi, I'm using your package and noticed something weird.
It might be an issue I'm producing somewhere but I've not yet been able to find it and was wondering if I'd pick someone's brain about it.

How I'm using your package is I have a RubyOnRails backend which is setup with omniauth to azure. From my React frontend, I use this package to authenticate with azure through my backend. But I'm getting a weird bug on the first clean login.

If I login when my azure is logged out it will open the azure page and I will go through my login process. When it comes to the part where my server sends a redirect with the code to my frontend I see that happening with the correct code. But when it hits the part of your code where you decode the location to pull the query params, there is a random '#' at the end of the code which causes my login to fail. But if I then click login again and now azure is already logged, no hash tag is generated at the end of the code and it works.

I know the hashtag is meant to navigate the page to a specific part of the page, but not sure at which point this is happening.

I've tried to debug in your code but it seems to be coming directly from window.location. Any ideas?
At the moment I injected a small bit of code change to fix it temporarily, return decodeURIComponent(value.replace('#', '') || '');

Hi,

I've been using react-oauth2-pkce and it works really great. However, I'm using an authentication flow that requires to pass the id_token_hint instead of the public client_id when performing a logout. It looks like there is no mechanism to override the standard behavior of passing client_id, nor is there an option to pass id_token_hint.
Is this something that can be added in the future?

Thanks in advance for your reply.

I accidentally set the wrong clientSecret which caused the authentication to fail. However, isAuthenticated returned true because auth in local storage was not null:

{"error":"unauthorized_client","error_description":"Invalid client or Invalid client credentials","expires_at":null}

it works fine on chrome but doesn't work on firefox and safari
On Firefox, it could work once user clicks the "login" button twice only
Please let me know how to resolve this issue

Since crypto is a built-in node module not meant for the browser:
https://www.npmjs.com/package/crypto

does this project need to import crypto-js instead?
https://www.npmjs.com/package/crypto-js

Hello,

I have recently used react-oauth2-pkce to integrate with an OAuth 2.0 provide called ForgeRock. Everything worked and integrated well. However, in this particular instance of ForgeRock, they had set up multiple login flows and the way to select which flow we wanted to use is to pass in an additional query string parameter to the authorize endpoint (e.g. flow=login2). Looking at the code, there is no way for me the add additional query string parameters to the authorize endpoint as the code adds the query string part and won't account for any query string parameters that may already exist in the authorizeEndpoint prop.

It would be great if the above lines of code in AuthService.ts didn't hardcode the ? character and instead first tried to detect whether the authorizationEndpoint already has a query string at the end of it. If it has a query string, then the parameters like clientId, scopes, code_challenge can simply be appended to the end. Otherwise, if the authorizationEndpoint (or logoutEndpoint) URL doesn't have a query string, then it adds the ? character first before appending the necessary query string parameters.

Would love to hear your thoughts on this or if there is currently already a way for me to add an additional query string parameter.

Thank you.

Via email:

I'm just looking at the UoA token through react-oauth2-pkce, and it doesn't seem like the token is automatically refreshing.

I've tried setting autoRefresh to true.

From what I can see it seems to store auth in localStorage with the expires_in key, this seems to be a fixed amount and the Auth Service doesn't seem to think it ever needs refreshing, as when you refresh the page it still reads that fixed amount of 3600, so it sets the timer again when you refresh the page for 3600, as it isn't aware of when the timestamp was created from.

I might be wrong, but it'd be good to get some insight from you as the token expiration is only an hour and it'd be good to get the token refreshing.

Cheers

I have a React.js application which is part of an oAuth2 architecture and in order to get a token it uses Authorization Code + PKCE flow as explained here.

The issue is that when I try to run the app npm start I get the following error:

I tried with the suggested approach at many places to add the following in my package.json after devDependencies:

"browser": {
    "crypto": false
  }

but I still have the same issue. I am using Node.js 14.0.0

The uri that generates from AuthServiceProps is wrong. It should be scope, note scopes. At least that is what i have found out :)

Please add support for custom token and authorize endpoints. I think someone is already working on this in PR #16

Hello Team,

The code with this repo was working as expected with webpack lower than 5 but when we updated the webpack version, it is throwing error with createPKCECodes() function.

Error:
ncaught (in promise) TypeError: (0 , crypto__WEBPACK_IMPORTED_MODULE_1__.randomBytes) is not a function
at createPKCECodes (pkce.ts:22:1)
at AuthService.authorize (AuthService.ts:176:1)
at _callee$ (authInterceptor.jsx:9:1)
at tryCatch (runtime.js:63:1)
at Generator.invoke [as _invoke] (runtime.js:294:1)
at Generator.next (runtime.js:119:1)
at asyncGeneratorStep (axiosHelper.js:20:1)
at _next (axiosHelper.js:20:1)
at axiosHelper.js:20:1
at new Promise ()

It would be really helpful if someone can suggest some solution.

The example references this:

  const { authService, authTokens } = useAuth();

but authTokens doesn't exist on the object returned by useAuth.

https://dev.to/cotter/localstorage-vs-cookies-all-you-need-to-know-about-storing-jwt-tokens-securely-in-the-front-end-15id

Storing auth token in local storage is an xss vulnerabilty.

hi, am new to this,
can this be used with nextJS?