Tengo este flujo de autenticación en nextjs en un componente de diseño que envuelve todas las rutas de mi aplicación. Este es mi código:

Tengo toda la lógica dentro de un useEffect y el retorno de este <Layout/> es cualquier {children}

 useEffect(() => { setLoading(true) const checkToken = async () => { const token = localStorage.getItem('FBIdToken') //si hay un token en el localstorage if (token) { const decodedToken = jwtDecode(token); const res = await getNewToken(); //Si el token expira if (decodedToken.exp * 1000 < Date.now()) { if (res.access_token) { localStorage.setItem('FBIdToken', res.access_token) } else { localStorage.clear('FBIdToken'); } } else { if (router.pathname == '/login' || router.pathname == '/register') { router.push('/'); } if (!userFromDB) { let user = await getUser(decodedToken.user_id); user.id = decodedToken.user_id //si encontro un usuario, lo asignamos al context api if (user) { // obtenemos el objecto con los datos del usuario y seteamos en el context si es vendedor o no if (typeof user.isVender !== undefined) { user.isVender ? setIsVender(true) : setIsVender(false); } else { router.pathname !== '/suscripcion-request' ? router.push('/') : '' } setUserFromDB(user); } setAuthenticated(true) } } } else { if (allowedRoutesForEveryone.indexOf(router.pathname) < 0) { router.replace('/login') } } setLoading(false); } //comprobamos que haya un token y redirigimos al usuario en base a el checkToken(); }, [router.pathname])

Esto es lento porque el componente devuelve a los niños y luego verifica si los usuarios han iniciado sesión. Esto hace que la redirección de páginas privadas sea lenta y me permite interactuar con el contenido durante medio segundo antes de la redirección, lo cual no es muy seguro. .

Sé que hay muchas bibliotecas para este enfoque, como NextAuth u oauth2, pero no sé si hay una que me permita decodificar un token. ¿Debo poner esta lógica en un middleware? ¿Algo más?

Espero que puedas ayudarme. ¡Gracias por adelantado!