global date event after 50 minutes in react.js

user_1757644 0
Viewed 61

How add global timer and after log in 50 minutes later logout event and redirect to another url?

const App = () => {
  const [isLoggedIn, setIsLoggedIn] = 
   React.useState(localStorage.getItem("isLoggedIn") == "true");
  const [accessTokenId, setAccessTokenId] =
   React.useState(localStorage.getItem("accessTokenId") ?? "");

  function setContextValues() {
    var url = window.location.href.toString();
    if (url.includes("id_token=")) {
      var href = window.location.href.toString().split("id_token=")[1];
      if (typeof href !== "undefined") {
        setIsLoggedIn(true);
        localStorage.setItem("isLoggedIn", "true")
        var accessTokenFromUrl = href.substring(0, href.indexOf("&state="));
        setAccessTokenId(accessTokenFromUrl);
        localStorage.setItem("accessTokenId", accessTokenFromUrl)
      } else {
        setIsLoggedIn(false);
      }
    }
    console.log(url);
  }

  useEffect(() => {
    setContextValues();
  });

  const color = "#312152";
  const theme = createMuiTheme({
    palette: {
      common: { black: color, white: color },
      primary: { main: color, dark: color, light: color },
      text: { primary: color, secondary: color },
    },
    overrides: {
      MuiInput: {
        underline: {
          "&:before": {
            borderBottom: `1px solid ${color}`,
          },
        },
        root: {
          color: color,
        },
      },
    },
  });

  return (
    <div>
      <link
        rel="stylesheet"
        href="/assets/style/material-icon/material-icons.css"
      />
      <link rel="stylesheet" href="/assets/style/dropzone/dropzone.css" />
      <link rel="stylesheet" href="/assets/style/home/style.css" />
      <AuthorizationContext.Provider
        value={{ IsLogedIn: isLoggedIn, AccessTokenId: accessTokenId }}
      >
        <MuiThemeProvider theme={theme}>
          <MDBContainer className="fullPage">
            <MDBContainer className="fullPage">
              <NavBar />
            </MDBContainer>
            <MDBContainer className="page80WithMargin">
              <Route exact path="/" component={Dashboard} />
              <Route
                path="/designsImporter"
                component={DesignsImporterDashboard}
              />
              <Route path="/technicalContact" component={TechnicalContact} />
              <Route
                path="/websiteIntroduction"
                component={WebsiteIntroduction}
              />
            </MDBContainer>
          </MDBContainer>
          <Footer />
        </MuiThemeProvider>
      </AuthorizationContext.Provider>
    </div>
  );
};
export default App;
reactjs
1 Answers

Just store the timestamp in local storage and check if 50 min has passed on every render

const App = () => {
  const [isLoggedIn, setIsLoggedIn] = 
   React.useState(localStorage.getItem("isLoggedIn") == "true");
  const [accessTokenId, setAccessTokenId] =
   React.useState(localStorage.getItem("accessTokenId") ?? "");
  
  const loggedAt = localStorage.getItem('loggedAt');
  // date diff is in milliseconds
  if (loggedAt && (new Date() - (new Date(loggedAt)) / 1000 / 60) > 50) {
    localStorage.removeItem('loggedAt');
    localStorage.removeItem('accessTokenId')
    localStorage.setItem("isLoggedIn", "false")
    // redirect here
  }

  ...
      if (typeof href !== "undefined") {
        ...
        localStorage.setItem("accessTokenId", accessTokenFromUrl)
        localStorage.setItem("loggedAt", new Date())
      } else {
        setIsLoggedIn(false);
      }
   ...
  
};
export default App;
user_18680080
Related