Nuxt/firebase Middleware redirect not working

Question

Hi I'm using Nuxt SSR as frontend and firebase as backend and the persistence was set to local.

I have a middleware that needs to check if the user is already login. if the user tries to access the sign in route while already logged, the user will be redirected to business info page. also if the user tries to access other pages first before logging the user will be redirected to the sign in page.

Problem: If I try to access sign in page while already logged, I still access to sign in page and not redirected to business info page

this is my middleware code

export default function ({ store, route, redirect }) {
  if (route.path === '/') {
    if (store.getters.isLoggedIn) {
      return redirect('/businessInfo')
    }
  } else if (route.path !== '/') {
    if (!store.getters.isLoggedIn) {
      return redirect('/')
    }
  }
}

I already setup other things like NuxtserverInit. I think the problem is that my middleware execute before I could get my credentials, but because I am new I think I'm missing something here please help thank you

Answer 1

You should use useEffect in order to listen for state changes. see: https://reactjs.org/docs/hooks-effect.html

Also, don't forget to import: import { useEffect } from 'react';

const Test = () => {

  const [Picture, setPicture] = useState(pictures[0])
  const [newPicture, setNewPicture] = useState(0)

  useEffect(() => {
    setPicture(pictures[newPicture])
  }, [newPicture]);

  return (

      <WholePage> 

      <TestContainer>
          <TestBoks key={Picture[0]} onMouseEnter={() => setNewPicture(0)}/>
          <TestBoks key={Picture[1]} onMouseEnter={() => setNewPicture(1)}/>
      </TestContainer>  

      <img src={Picture} alt="ononon" />
         
      </WholePage>
  );
};