refresh token method cannot have triggered with using mobx in react with metronic template

Question

I am trying to have login page with using react typescript which i am using state management with Mobx and also make refresh token method as follow, my problem is before token expires out, the refresh token cant be trigerred by token time ends up. my login method is in userstore.tsx like as:

login = async (creds: UserFormValues) => {
    try {
        const user = await agent.Account.login(creds);
        store.commonStore.setToken(user.token);
        this.startRefreshTokenTimer(user);
        runInAction(() => this.user = user);
        window.location.href = '/dashboard'
    } catch (error) {
        throw error;
    }
}

login method works without any hesitation after that refresh token timer works and runs refreshtoken method as follow;

refreshToken = async () => {
        this.stopRefreshTokenTimer();
        try {
            const user = await agent.Account.refreshToken();
            runInAction(() => this.user = user);
            store.commonStore.setToken(user.token);
            this.startRefreshTokenTimer(user);
        } catch (error) {
            console.log(error);
        }
    }

    private startRefreshTokenTimer(user: User) {
        const jwtToken = JSON.parse(atob(user.token.split('.')[1]));
        const expires = new Date(jwtToken.exp * 1000);
        const timeout = expires.getTime() - Date.now();
        alert(expires.getTime() - Date.now())
        this.refreshTokenTimeout = setTimeout(this.refreshToken, timeout);
    }

    private stopRefreshTokenTimer() {
        clearTimeout(this.refreshTokenTimeout);
    }

after time is up, i was waiting, refreshtoken method was trigerred but it wouldnt be possible after i gave even 1 min short token expire time and waited 1 min for triggered itself. my root component App.tsx is also as follow;

import 'devextreme/dist/css/dx.softblue.css';
import { observer } from 'mobx-react-lite';

import { Suspense } from 'react'
import { Outlet } from 'react-router-dom'
import { I18nProvider } from '../_metronic/i18n/i18nProvider'
import { LayoutProvider, LayoutSplashScreen } from '../_metronic/layout/core'
import { MasterInit } from '../_metronic/layout/MasterInit'

const App = observer(() => {
  return (
    <Suspense fallback={<LayoutSplashScreen />}>
      <I18nProvider>
        <LayoutProvider>
          <Outlet />
          <MasterInit />
        </LayoutProvider>
      </I18nProvider>
    </Suspense>
  )
})

export { App }

I think i skipped some thing i have to do, if anybody helps and wants me to be clearer and extra details, i can give more information about the issue which i got stuck.

score 0 · Answer 1 · answered Feb 05 '23 at 21:58

this problem is not related to mobx. i solve this problem in the first code above that i realize i used here window.location.href = '/dashboard' and when the component changes the javascript reloads. the prevent the issues is that it should use history.push('/dashboard'). i use history version 6 and this version is a bit different than the earlier version, to see this usage, click the link here.

i take note this due that this might be helpful context if anybody gets the kind of issue

refresh token method cannot have triggered with using mobx in react with metronic template

1 Answers1