Auth0 Home Blog Docs

Invalid token, state does not match - Safari only

token
auth0
state
safari
#1

I don’t know what to do anymore… on Safari users can’t login and instead just receive an ‘invalid token, state does not match’ error. First I saw you mentioned the cross tracking feature of safari would be the issue and upgrading to your paid plan & adding a custom domain would work… but it doesn’t solve the issue:( The other posts in the community also haven’t been helpful for me… Invalid token - state does not match
Some setup details:
integrated auth0 via pure JavaScript, since getting it to work via your Django implementation didn’t work out at all.

website: https://beta.heyskill.me
custom login domain: https://auth.heyskill.me
login on chrome works fine, but on safari it doesn’t.

The auth0 logs show a successfull login.
Also very weird: once I have clicked on login & received the error message, the page only reloads when I click on login - like I would be already loggedin (but that’s not the case…).

The app.js:

window.addEventListener('load', function() {
        var idToken;
        var accessToken;
        var expiresAt;
        var not_landingpage = window.location.href.split('/')[3] ? true : false

        var slackurl = "xxxxxxxxx" // Webhook URL

        var userProfile;

        var webAuth = new auth0.WebAuth({
            domain: 'auth.heyskill.me',
            clientID: 'xxxxxxxxxx',
            redirectUri: 'https://beta.heyskill.me/login-success',
            responseType: 'token id_token',
            scope: 'openid profile email',
            leeway: 60
        });



        function localLogin(authResult) {
            // console.log('localLogin()')

            // Set isLoggedIn flag in localStorage
            localStorage.setItem('isLoggedIn', 'true');
            // Set the time that the access token will expire at
            expiresAt = JSON.stringify(
                authResult.expiresIn * 1000 + new Date().getTime()
            );
            accessToken = authResult.accessToken;
            idToken = authResult.idToken;

            if (accessToken) {
                getProfile();
            }
        }

        function renewTokens() {
            // console.log('renewTokens()')

            webAuth.checkSession({}, (err, authResult) => {
                if (authResult && authResult.accessToken && authResult.idToken) {
                    localLogin(authResult);
                } else if (err) {
                    console.log(err);
                    alert(
                        'Sorry something went wrong. We just got notified about this error & will work on fixing it ASAP!'
                    );
                    $.ajax({
                        data: 'payload=' + JSON.stringify({
                            "text": err
                        }),
                        dataType: 'json',
                        processData: false,
                        type: 'POST',
                        url: slackurl
                    })
                    logout();

                }
            });
        }

        function logout() {
            // Remove isLoggedIn flag from localStorage
            localStorage.removeItem('isLoggedIn');

            // remove userdata
            let expire_now = '; path=/; expires=Fri, 31 Dec 1999 23:59:59 GMT'
            document.cookie = 'sub=null' + expire_now
            document.cookie = 'loggedin=null' + expire_now
            document.cookie = 'name=null' + expire_now
            document.cookie = 'accounttype=null' + expire_now
            document.cookie = 'location=null' + expire_now
            document.cookie = 'city_now=null' + expire_now
            document.cookie = 'csrftoken=null' + expire_now

            // Remove tokens and expiry time
            accessToken = '';
            idToken = '';
            expiresAt = 0;
            document.location.href = 'https://auth.heyskill.me/v2/logout?returnTo=https%3A%2F%2Fbeta.heyskill.me'
        }

        function getProfile() {
            if (!userProfile) {
                if (!accessToken) {
                    console.log('Access token must exist to fetch profile');
                }

                webAuth.client.userInfo(accessToken, function(err, profile) {
                    if (profile) {
                        userProfile = profile;
                        displayProfile();
                    }
                });
            } else {
                displayProfile();
            }
        }

        function displayProfile() {
            let extra = 'xxxxx'

            // check if sub is correct
            if (document.cookie.includes('sub=') && !(document.cookie.includes('sub=' + userProfile['sub'] + extra))) {
                webAuth.authorize();
            }

            // check if user data cookies cleaned => if so, reload
            if (document.cookie.includes('continue=null')) {
                setTimeout(location.reload(), 500)
            }

            // save user data in cookie, for quicker access via backend
            let path_expire_date = '; path=/; expires=Fri, 31 Dec 2019 23:59:59 GMT'
            document.cookie = 'loggedin_before=true' + path_expire_date
            document.cookie = 'sub=' + userProfile['sub'] + extra + path_expire_date
            document.cookie = 'name=' + userProfile['name'] + path_expire_date
            document.cookie = 'picture=' + userProfile['picture'] + path_expire_date
            document.cookie = 'location=' + userProfile['https://example.com/geoip']['latitude'] + ',' + userProfile['https://example.com/geoip']['longitude'] + path_expire_date
            document.cookie = 'city_now=' + userProfile['https://example.com/geoip']['city_name'] + ',' + userProfile['https://example.com/geoip']['country_code'] + path_expire_date

            if (userProfile['sub'] && !document.cookie.includes('loggedin=')) {
                document.cookie = 'loggedin=True'
                location.reload()
                // setTimeout(location.reload(), 500)
            }

            loadSuggestedFilters()
        }

        function handleAuthentication() {
            // console.log('handleAuthentication()')

            webAuth.parseHash(function(err, authResult) {
                if (err) {
                    console.log(err);
                    alert(
                        'Sorry something went wrong. We just got notified about this error & will work on fixing it ASAP!'
                    );
                    $.ajax({
                        data: 'payload=' + JSON.stringify({
                            "text": err
                        }),
                        dataType: 'json',
                        processData: false,
                        type: 'POST',
                        url: slackurl
                    })

                }

                // console.log('webAuth.parseHash()')
                // console.log('authResult:')
                // console.log(authResult)

                if (authResult && authResult.accessToken && authResult.idToken) {
                    window.location.hash = '';
                    localLogin(authResult);
                } else {
                    // check if sub exist
                    // if (document.cookie.includes('sub=')) {
                    //     webAuth.authorize();
                    // }

                    // if not logged in & no error: show default data

                    console.log('authResult not exist')

                    // buttons and event listeners
                    var login_redirect_true = document.getElementById('login_redirect_true');
                    if (login_redirect_true) {
                        webAuth.authorize();
                    }

                    // replace login button
                    if (login_buttons) {
                        login_buttons.forEach(function(button) {
                            button.addEventListener('click', function(e) {
                                e.preventDefault();
                                webAuth.authorize();
                            });
                        });
                    }

                    if (signup_buttons) {
                        signup_buttons.forEach(function(button) {
                            button.addEventListener('click', function(e) {
                                e.preventDefault();
                                webAuth.authorize();
                            });
                        });
                    }

                    if (window.location.href.includes('/home') ||
                        window.location.href.includes('/tech') ||
                        window.location.href.includes('/search') ||
                        window.location.href.includes('/event') ||
                        window.location.href.includes('/group')) {
                        loadSuggestedFilters()
                    }
                }
            });
        }

        var login_buttons = document.getElementsByName('login');
        var signup_buttons = document.getElementsByName('signup');
        var logout_button = document.getElementsByName('logout');

        if (localStorage.getItem('isLoggedIn') === 'true') {
            renewTokens();

            // replace login & signup buttons on landingpage
            if (not_landingpage == false) {
                login_buttons.forEach(function(button) {
                    button.innerText = 'Home'
                    button.href = '/home'
                    button.style.display = 'block'
                });

                signup_buttons.forEach(function(button) {
                    button.innerText = 'Continue learning'
                    button.href = '/home'
                    button.style.display = 'inline-block'
                });
            }

            if (logout_button) {
                logout_button.forEach(function(button) {
                    button.addEventListener('click', logout);
                });
            }

        } else {
            handleAuthentication();


        }
    });