This is a demo next.js app with logto, to demo the sign in bug on Safari 17.
Most of the code comes from next-sample package from logto official.
The issue is, the app cannot work when user sign in on Safari 17, however, it
works on Chrome, Edge, Firefox and lower version of Safari 15 (I am not sure
whether Safari 16 works).
Tested on iOS 16 (simulator), it can sign in successfully, so the bug only happens on Safari 17, evidence:
![image](https://private-user-images.githubusercontent.com/1164623/343614583-7c942949-0df0-47a4-bfeb-5f257c74e611.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjEzOTEyNDIsIm5iZiI6MTcyMTM5MDk0MiwicGF0aCI6Ii8xMTY0NjIzLzM0MzYxNDU4My03Yzk0Mjk0OS0wZGYwLTQ3YTQtYmZlYi01ZjI1N2M3NGU2MTEucG5nP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI0MDcxOSUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNDA3MTlUMTIwOTAyWiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9MGYzZjY4MjZmYTczMjIzYTQzNWVhYTMyNTQ0ZDRiZjUzNzE2YWFjNTViMTdmNTY4YmY2NjJlZTk1OThhOWNkMSZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QmYWN0b3JfaWQ9MCZrZXlfaWQ9MCZyZXBvX2lkPTAifQ.n4PY3Y4MvQ8Oc-LH3Q78RWrNIxLHK8KHnC_MKYP_gZA)
It raise exceptions for both npm run dev
and npm run start
.
Demo:
Run npm run start
and open the app on both Edge and Safari 17. The app works
on Edge, but crash on Safari 17.
Safari 17 crash on npm run start
Run npm run dev
and open the app on both Edge and Safari 17. The app works
on Edge, but crash on Safari 17.
Safari 17 crash on npm run dev
-
OS: macOS Sonoma 14.5
-
Safari: 17.5 (19618.2.12.11.6)
-
Node: v20.10.0
-
Logto: svhd/logto:1.16, self hosted
-
Next.js
.env
:
APP_ID=phsxl232h2tsl7qf9obws
APP_SECRET=obYbCsrXHOZId6qlfn1jblvhPimrrpiS
BASE_URL=http://localhost:3000
COOKIE_SECRET=aDNnrV5ENys3d2xBQMHNO4KbyNQeIGkD
ENDPOINT=http://localhost:3001/
- This stackoverflow answer give
us a valuable lead. During my debug I found that Safari 17 do not actually
respect the
Set-Cookie:
header and thuslogto:<app_id>
cookie is not saved by Safari 17 when user initially sign in, which lead to a crash with errorsign_in_session.not_found
(fornpm run start
) - Sometimes the error is
callback_uri_verification.state_mismatched
, this often happens when we run next.js in dev mode (npm run dev
), my guess here is,Set-Cookie:
is called twice (reason unknown) which lead to two different value ofstate
, thus lead to a mismatch.
Besides local development, I also deploy the same app to vercel and netlify, with the following URLs:
The app deployed on vercel and netlify was paired with logto cloud, instead of the self hosted logto server.
For my test, both vercel and netlify deployments works on Safari 17. Hence, I doubt that the issue is related to some internal quirks of Safari 17 when dealing with same original cookies? (i.e, setting different domain for cookies may work?)
- Safari cookie is not being set – Here’s a fix
- Bug 255524 - REGRESSION (Safari 16.4): Safari sometimes doesn't send cookies for assets requests and javascript fetch requests
- Bug 198181 - Cookies with SameSite=None or SameSite=invalid treated as Strict
- Set-cookie header works on Google Chrome and FF but no Safari
- Cookies are not getting stored on localhost subdomains in Safari
This bug was discovered by PPResume, and here is a list of user agents that crashes. It works on Safari 15 but crashes on Safari 17.
Demo:
Safari 15 works and 17 crashes
This is a sample project for Logto's Next.js SDK.
You can configure the sample project by modifying the libraries/config.js
file, or by setting the following environment variables:
key | description | example |
---|---|---|
APP_ID | The app ID of your application | my-app |
APP_SECRET | The app secret of your application | my-secret |
ENDPOINT | The endpoint of your Logto server | http://localhost:3001 |
BASE_URL | The base URL of this application | http://localhost:3000 |
COOKIE_SECRET | The secret for cookie encryption | my-cookie-secret |
RESOURCES | Optional, the API resource identifier, split with comma | http://localhost:3003/,http://localhost:3004/] |
SCOPES | Optional, the scopes to grant, split with comma | read:users,write:users |
Learn more about resource and scopes in the Logto RBAC Documentation.