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();
}
});