Estoy escribiendo una aplicación web basada en la API de Spotify. Una vez que el usuario inicia sesión con NextAuth, quiero que la aplicación cargue automáticamente las listas de reproducción del usuario.
Actualmente lo tengo configurado para que haya un botón para cargar listas de reproducción y el botón no aparece a menos que el usuario haya iniciado sesión; esto funciona y es simple. Sin embargo, el botón es innecesario. No hay ningún caso de uso para la aplicación que no comience con la carga de las listas de reproducción del usuario.
Actualmente tengo una acción thunk escrita que fue enviada por el botón "Cargar listas de reproducción" para obtener las listas de reproducción de forma asincrónica y agregar las listas de reproducción al estado redux.
Puedo pensar en varias opciones posibles para que la carga automática funcione bien, pero imagino que tiene que haber una forma limpia. NextAuth tiene la [devolución de llamada de evento de inicio de sesión] https://next-auth.js.org/configuration/events#signin que parece ser el lugar correcto para comenzar. Pero dado que esto se ejecutaría en el lado del servidor, necesitaría alguna forma de contactar al cliente.
Solo observe el estado en un useEffect y una vez que el estado esté autenticado, llame a la acción de carga de la lista de reproducción.
import { useSession } from "next-auth/react" export default function Component() { const { data: session, status } = useSession() useEffect(() => { if (status === "authenticated") { Load_Playlists() } }, [status]) return <Main> }lo que suelo hacer es guardar el Jwt en el almacenamiento local y luego usar un efecto de uso para obtenerlo si no existe y luego obtenerlo del servidor usando la acción thunk. también, consulte ¿Cómo esperar a que se complete la acción antes de redirigir en reaccionar redux? como definir el thunk