0

My website is logging a user out after a period of inactivity for security reasons. Right now I have a pop up that shows up after a certain amount of time, but I'd like to modify the tab in some way to alert the user if they are in another tab. Ideally I'd like to change the tab color, but right now I'm just trying to change the tab title.

In pages/_app.tsx, I have

const TopComponent: NextPage<AppProps> = props => {
  const { state } = useContext(AppContext);
  const { sessionExpired } = state;

  return (
      <React.Fragment>
        <Head>
          <title>{sessionExpired ? 'true' : 'false'}</title>
          <meta name="viewport" content="minimum-scale=1, initial-scale=1, width=device-width" />
        </Head>
        ...
      <React.Fragment>
  )

sessionExpired is a state variable from another file. It is false and changes to true after the timer runs out. I would expect the title to change from false to true, but it always remains false. Is there a way to change the title?

mts0040
  • 11
  • 2
  • you might want to look at [this question](https://stackoverflow.com/questions/4371016/make-browser-tab-flash-a-notification), it seems similar to what you want to do – Julien Ripet Mar 18 '21 at 15:56
  • @JulienRipet That's kinda what I modeled it after, but I figured I'd have to change the title where the NextJS Head component is used. – mts0040 Mar 18 '21 at 16:12
  • Turns out this component is reading the state variable when it first loads, but when the state variable updates this component doesn't change. This component always treats the state variable as false even when it changes for some reason – mts0040 Mar 18 '21 at 17:18
  • So the update function gets called? Have you logged the change out in the `TopComponent`? – Gh05d Mar 18 '21 at 19:53

0 Answers0