Creé un SPA que usa oauth, parece funcionar, pero hay un problema si abro la aplicación por primera vez.

A continuación, las costuras de almacenamiento local para ser despejadas.

Mi solicitud está escrita en vue, pero me parece que esto no es un problema de vue.

Este es mi código que hace la redirección.

 let nonce = ''; const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'; for (let i = 0; i < 32; i++) { nonce += characters.charAt(Math.floor(Math.random() * characters.length)); } document.cookie = nonce; localStorage.setItem('nonce', nonce); windows.location.href = 'my-oauth-url...';

Este es mi código que valida el nonce después de la redirección:

 if (to.path.includes('/callback')) { const urlSearch = new URLSearchParams(to.hash); const nonce = extractResponseNonce(urlSearch); alert('stored nonce ' + localStorage.getItem('nonce')); alert('cookie ' + document.cookie) console.log('stored nonce ' + localStorage.getItem('nonce')) console.log('state ' + store.state.nonce) console.log('extracted nonce ' + nonce) // using document.cookie works if (localStorage.getItem('nonce') != nonce) { next('/error/nonceError') return } }

Si uso el almacenamiento local para comparar el nonce, obtengo un valor nulo y voy a la página de error del nonce.

Si vuelvo a hacer el proceso de inicio de sesión después de eso, todo funciona.

Verifiqué con las alertas que el valor está realmente establecido antes de hacer la primera redirección.

PD: siempre uso el modo privado de firefox para probar esta aplicación (no creo que esto deba importar).

¿Tiene alguna idea de por qué localstorage me devuelve un valor nulo pero la cookie se llena correctamente?