Bug: It is not calling Token end point. about react-oauth2-pkce HOT 13 CLOSED

Okey, so it's not what I suggested.
I don't know those <QueryClientprovider> or <PersistGate> components, but they seem to do something with fetches.
Could it be that they intercept/block etc. the token request? Since it's cross-origin.

Could you try moving the <AuthProvider> to be the outermost provider?

from react-oauth2-pkce.

Hi, thank you for reporting this.
I will have a look at replicating this as soon as I can 🙂

from react-oauth2-pkce.

@sebastianvitterso this is how my config looks like

const authConfig: TAuthConfig = {
  clientId: '9tVbRm5vKNGmaiVT4mMCJ_3aMWsa',
  authorizationEndpoint: 'https://wso2-idp.local/t/din.global/oauth2/authorize',
  tokenEndpoint: 'https://wso2-idp.local/t/din.global/oauth2/token',
  redirectUri: window.location.origin,
  onRefreshTokenExpire: (event) => window.confirm('Tokens have expired. Refresh page to continue using the site?') && event.login(),
  scope: 'email internal_login openid profile',
  autoLogin: false
};

we are using WSO2 identity server, the urls are not exact but if you want to try i wil create new url for it.

from react-oauth2-pkce.

I don't have access to your code, but was able to recreate this with bad provider usage.

So you will get that problem with something like this:

const router = createBrowserRouter([
  {
    path: "/login",
    element: <LoginWrapper/>,
  },
  {
    path: "/",
    element: <>This is the root</>
  },
]);

function LoginWrapper(): JSX.Element {

  return <AuthProvider authConfig={authConfig}>
    <LoginInfo/>
  </AuthProvider>
}

function LoginInfo(): JSX.Element {
  const {tokenData, token, logOut, idToken, error, login}: IAuthContext = useContext(AuthContext)

  return (
    <>
      This is my login page...
    </>
  )
}

ReactDOM.render(
  <div>
    <RouterProvider router={router}/>
  </div>,
  document.getElementById('root')
)

So if you want the AuthProvider to do it's thing on other paths than /login, the provider needs to wrap all routes.
Like so:

const router = createBrowserRouter([
  {
    path: "/login",
    element: <LoginInfo/>,
  },
  {
    path: "/",
    element: <>This is the root</>
  },
]);


function LoginInfo(): JSX.Element {
  const {tokenData, token, logOut, idToken, error, login}: IAuthContext = useContext(AuthContext)

  return (
    <>
      This is my login page...
    </>
  )
}

ReactDOM.render(
  <div>
    <AuthProvider authConfig={authConfig}>
      <RouterProvider router={router}/>
    </AuthProvider>
  </div>,
  document.getElementById('root')
)

from react-oauth2-pkce.

I won't respond to your entire comment, I'll leave most of it up to @soofstad. But: I'd like to explain how onRefreshTokenExpire works:

The README says the following about onRefreshTokenExpire:

Optional callback function for the 'refreshTokenExpired' event. You likely want to display a message saying the user need to login again. A page refresh is enough.

This function/callback is only called if the session somehow expires while the web page is open. This can happen e.g. if the client loses its web-connection until the refresh-token expires, or in a couple of other cases.

The onRefreshTokenExpire-callback is not called in these cases:

• You're opening the page without having an active refresh token.
• You've refreshed the page when the refresh token is expired.
• The access token has expired, but the refresh token has not. In this case, the library simply calls the api to get a new access token (and possibly renews the refresh token, depending on the auth server's configuration.

from react-oauth2-pkce.

Thanks, think I understand your issue now.
So the handling of failed refresh requests are not that robust, and might cause this issue in some scenarios.
It's not always known if the request failed because of an expired refresh_token, or something else, as there is no standard error response for authentication servers if you tried to refresh token with an expired_refresh token.
What you will get tho, is an updated error state. You could check that if it corresponds to a known error, and handle login/logout/refresh/whatever yourself.

Just for reference, could you post the error response you get from wso-2?

If this answers you question, feel free to close this issue

from react-oauth2-pkce.

Retrying with the same expired token will only return the same 400 response.

But I think we can improve upon how these failed refresh requests are handled.
I will create a new issue for that.

Thank you for your feedback and involvement. You can see I updated the README with a "Knows issues" section, and will try and improve the handling for cases like this.
closing the issue 🙂

from react-oauth2-pkce.

While @soofstad is attempting to replicate, would you mind sharing your AuthConfig object, @farhanmalhi-dbank?
And maybe some details like whether you change the AuthConfig when changing the login-location from / to /login etc.

Any details might be helpful. Thanks!

from react-oauth2-pkce.

@soofstad So this is how my file app.tsx and router file looks like and my routes are wrapped with AuthProvider

import React from 'react';
import { Provider } from 'react-redux';
import { PersistGate } from 'redux-persist/integration/react';
import Store, { PersistedStore } from './store/store';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { AuthProvider, TAuthConfig } from 'react-oauth2-code-pkce';

import { Router } from './router';
const queryClient = new QueryClient();

const authConfig: TAuthConfig = {
  clientId: '9tVbRm5vKNGmaiVT4mMCJ_3aMWsa',
  authorizationEndpoint: 'https://wso2-idp.local/t/din.global/oauth2/authorize',
  tokenEndpoint: 'https://wso2-idp.local/t/din.global/oauth2/token',
  redirectUri: window.location.origin,
  onRefreshTokenExpire: (event) => window.confirm('Tokens have expired. Refresh page to continue using the site?') && event.login(),
  scope: 'email internal_login openid profile',
  autoLogin: false
};

function App() {
  return (
    <div className="App">
      <QueryClientProvider client={queryClient}>
        <Provider store={Store}>
          <PersistGate loading={null} persistor={PersistedStore}>
            <AuthProvider authConfig={authConfig}>
              <Router />
            </AuthProvider>
          </PersistGate>
        </Provider>
      </QueryClientProvider>
    </div>
  );
}

export default App;

this is how my Router file looks Like

export function Router() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<PrivateRoute />}>
          <Route path="/" element={<LayoutComponent />}>
            <Route
              path="/"
              element={
                <ErrorBoundary FallbackComponent={FallBackComponent}>
                  <Dashboard />
                </ErrorBoundary>
              }
            />
      
          </Route>
        </Route>
        <Route
          element={
            <ErrorBoundary FallbackComponent={FallBackComponent}>
              <Login />
            </ErrorBoundary>
          }
          path="/login"
        />
      </Routes>
    </BrowserRouter>
  );
}

from react-oauth2-pkce.

@soofstad
Thanks for the help and prompt response, i was able to fix it by making it the outer most component.
Please mention it in your docs as well.

Just one more thing,

So if the refresh token call fails, it should either re-login via sending token call with "authorization key" or should send me to login page.

and i also enabled
onRefreshTokenExpire: (event) => window.confirm('Tokens have expired. Refresh page to continue using the site?') && event.login(),
butt it didn't prompted me before sending refresh token call.

just to test (what happen if refresh token call fails) what i did was

access token expiry is 20sec
refresh token expiry is 5 sec

from react-oauth2-pkce.

@soofstad Atleast it should show the prompt saying "Your refresh token is expired please refresh you page or you will be logged out" or it should redirect to login page.

from react-oauth2-pkce.

Just explaining the exact issue, you can see my token call got error 400, while i was just sitting idle, neither i got any
nor i was sent to login page to re-login.

from react-oauth2-pkce.

@soofstad it is like this
error: "invalid_grant", error_description: "Expired or Revoked authorization code received from token request"
I got your point, I was just hoping a solution that if package could just retry twice(the refresh token call), and if still it does not get status code 200. It should clear local storage and navigate user to login page.

from react-oauth2-pkce.