I created an SPA that uses oauth, it seams to work but there is an issue if I open the app for the first time.

Then local storage seams to be cleared.

My application, is written in vue but it seams to me that this is not a vue issue.

This is my code that does the redirect.

    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...';

This is my code that validates the nonce after the redirect:

    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
        }
}

If I use the localstoreage to compare the nonce I get null, and go to the nonce error page.

If I redo the login process again after that everthing works.

I checked with the alerts that the value is realy set before doing the first redirect.

PS: I always use the private mode of firefox for testing this application (I don't think that this should matter).

Do you have an idea why localstorage returns null to me but the cookie is filled correctly?