We had a nasty surprise this week where customers upgraded their iPhones and iPads to iOS 14. By default, iOS 14 disables 3rd Party Cookies (Settings → Chrome → Allow Cross-Website Tracking is disabled). If turn this setting on our website continues to work great, but when it is off user’s can’t login.
We were using an old version of the @auth0/auth0-spa-js library (v1.2.4). Our desktop systems continue to work perfectly, but out customers that upgraded to iOS14 could not longer sign into our app. A username and password appeared and the proper credentials were entered but when they click the login button Auth0 sent them back to our website where it just sat. Of course, it is a challenge to troubleshoot what is happening on the Chrome (version 86.0.4240.93) on the iPad.
I decided to upgrade our app to @auth0/auth0-angular version 1.2.0. I was thinking being on the latest version would resolve any of the samesite cookie issues in case that was part of the problem. It didn’t fix it. After reading about the new Refresh Token Rotation feature I decided to enable it.
It sounded like I just needed to go to my single page application within the Auth0 dashboard and change from Non-Rotating to Rotating. After doing this I followed one of Auth0’s examples where they set the Refresh Token Lifetime to 5 seconds and the Refresh Token Reuse Interval to 4. I saved these settings, then I made changed the AuthClientConfig to the following with the one key change of adding useRefreshTokens: true.
{
“clientId”:“xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx”,
“domain”:“.auth0.com”,
“scope”:“openid profile email”,
“redirectUri”:“https://.com”,
“cacheLocation”:“localstorage”,
“useRefreshTokens”: true,
“leeway”: 300,
“httpInterceptor”:{
“allowedList”:[
{
“uri”:“https://.com/API/*”,
“tokenOptions”:{
“audience”:“https://.com/api”
}
}
]
}
}
I was hoping this would immediately solve the problem, but it didn’t. I also noticed that the auth0.isauthenticated and _legacy_auth0.is.authenticated cookies still get set. Even though I clear out all of the browser cookies and witness that they are gone until I sign in and then they appear. The only change I notice is that the local storage has information in it where before it didn’t. Chrome on the iPad continues to not work and I suspect it is because it is using the cookies instead of the storage or something. At least with the new version of the Auth0 Angular client the SameSite cookie is set to None whereas in the old version it was just blank.
My question is ---- Even though I have Rotating Refresh Tokens turned on and userRefreshTokens set in the Auth0 Client should I expect to see cookies being set? If not what is wrong with my configuration that causes the cookies to be set? If it is ok for the cookies to be set then there either I still have something wrong with my config — what could it be? or there is a glitch in the Auth0 Angular client that looks to the cookie first instead of to local storage or browser memory. Is that possible?
Do you have ideas on what changes I can make or more information that I can provide? Again, the desktop versions of Chrome work great, it is just Chrome and Safari on iOS 14 that I’m struggling with.
Any tips would be greatly appreciated!