isLoaded stays in false and never changes until page is refreshed [iOS]

[cengizhanhakan]

• Review the documentation: https://clerk.com/docs
• Search for existing issues: https://github.com/clerkinc/javascript/issues
• Go through package changelog files.
• [] Provide the Frontend API key from your application dashboard.

Package + Version

• @clerk/nextjs = 4.23.2

Dependencies + versions

Provide a json with the dependencies used in your project (copy paste from yarn.lock / package-lock.json) or a github project / template that reproduces the issue.

Include the @clerk/ packages and their versions!*

Example:

{
 "name": "cengo",
 "version": "0.1.0",
 "private": true,
 "author": "cengo",
 "scripts": {
 "dev": "next dev",
 "build": "node -v & next build",
 "postbuild": "next-sitemap",
 "start": "next start",
 "lint": "next lint",
 "lint:fix": "eslint src --fix && yarn format",
 "type-check": "tsc --noEmit",
 "format": "prettier --write src",
 "up": "yarn upgrade-interactive",
 "up-latest": "yarn up --latest",
 "release": "standard-version",
 "push-release": "git push --follow-tags origin main",
 "prepare": "husky install"
 },
 "dependencies": {
 "@auth0/nextjs-auth0": "^1.7.0",
 "@chakra-ui/react": "2.4.2",
 "@choc-ui/chakra-autocomplete": "^5.1.4",
 "@clerk/nextjs": "^4.23.2",
 "@emotion/react": "^11.7.1",
 "@emotion/styled": "^11.6.0",
 "@fontsource/inter": "^4.5.7",
 "@fontsource/rubik": "^4.5.6",
 "@formulajs/formulajs": "^3.1.1",
 "@hookform/resolvers": "^3.1.1",
 "@mapbox/search-js-core": "^1.0.0-beta.14",
 "@react-google-maps/api": "^2.18.1",
 "@sentry/nextjs": "^7.50.0",
 "@testing-library/jest-dom": "^5.11.4",
 "@testing-library/react": "^11.1.0",
 "@testing-library/user-event": "^12.1.10",
 "@types/react-icons": "^3.0.0",
 "@types/js-cookie": "^3.0.3",
 "airtable": "^0.11.6",
 "aos": "^3.0.0-beta.6",
 "auth0-lock": "^11.33.0",
 "autoprefixer": "10.4.5",
 "axios": "^1.3.6",
 "chakra-react-select": "^4.6.0",
 "chart.js": "^4.3.0",
 "chartjs-plugin-datalabels": "^2.2.0",
 "crisp-sdk-web": "^1.0.19",
 "cruip-js-toolkit": "^1.0.2",
 "date-fns": "^2.30.0",
 "disable-scroll": "^0.6.0",
 "focus-visible": "^5.2.0",
 "form-data": "^4.0.0",
 "framer-motion": "^7.6.0",
 "fuse.js": "^6.6.2",
 "gray-matter": "^4.0.3",
 "highcharts": "^10.0.0",
 "highcharts-react-official": "^3.1.0",
 "js-cookie": "^3.0.5",
 "lodash": "^4.17.21",
 "mailgun.js": "^8.0.6",
 "markdown-it": "^13.0.1",
 "next": "^13.3.1",
 "next-pwa": "^5.6.0",
 "next-seo": "^6.0.0",
 "next-sitemap": "^4.1.3",
 "node-sass": "7.0.1",
 "numeral": "^2.0.6",
 "postcss": "^8.3.0",
 "prop-types": "^15.8.1",
 "rc-tooltip": "^5.2.2",
 "react": "^18.2.0",
 "react-chartjs-2": "^5.2.0",
 "react-collapse": "^5.1.1",
 "react-dom": "^18.2.0",
 "react-facebook-pixel": "^1.0.4",
 "react-ga4": "^2.1.0",
 "react-google-autocomplete": "^2.7.0",
 "react-google-streetview": "0.0.9",
 "react-hook-form": "^7.45.0",
 "react-hotjar": "^5.0.0",
 "react-icons": "^4.9.0",
 "react-table": "^7.8.0",
 "react-toastify": "^9.0.1",
 "react-transition-group": "^4.4.1",
 "sass": "^1.54.9",
 "stripe": "^9.0.0",
 "tailwindcss": "^2.1.4",
 "use-debounce": "^7.0.1",
 "web-vitals": "^0.2.4",
 "yup": "^1.2.0",
 "zustand": "^4.3.7"
 },
 "devDependencies": {
 "@commitlint/config-conventional": "^16.2.1",
 "@tailwindcss/typography": "^0.4.0",
 "@types/auth0-lock": "^11.27.4",
 "@types/google.maps": "^3.48.5",
 "@types/react": "^18.0.0",
 "@types/react-dom": "^18.0.0",
 "commitlint": "^16.2.1",
 "eslint": "^8.9.0",
 "eslint-config-next": "^13.0.6",
 "eslint-config-sznm": "^0.2.1",
 "eslint-plugin-react-hooks": "^4.6.0",
 "husky": "^7.0.4",
 "lint-staged": "^12.3.4",
 "prettier": "^2.5.1",
 "standard-version": "^9.3.2",
 "typescript": "^4.5.5"
 }
}

Browser/OS

iOS 16.3.1 / Safari / Chrome

Description

Describe your issue in detail, a demo repository or a sandbox would be great.

After logging in with Clerk, isLoaded variable from the useUser hook doesn't change and isn't able to trigger the useEffect we have.

[cengizhanhakan]

Code example

useEffect(() => { if (isLoaded) sendUserData() // eslint-disable-next-line react-hooks/exhaustive-deps }, [isLoaded]);

[jescalan]

Hi @cengizhanhakan - could you provide a minimal reproduction for us to look into?

[cengizhanhakan]

Hi @jescalan

You can check the website: https://strcalc.vercel.app

[cengizhanhakan]

hi @jescalan, any updates?

[jescalan]

Hi! Sorry for the delayed response. A link to your production website is not a minimal reproduction. We have a guide here on how to create a minimal reproduction, hopefully this is helpful! Sorry for not linking it before.

[cengizhanhakan]

hi @jescalan, I hope this is good enough.
https://github.com/cengizhanhakan/clerk-repro
https://clerk-repro-1l2n9zzwf-recipecart.vercel.app/

[dimkl]

hello @cengizhanhakan
visiting your https://clerk-repro-1l2n9zzwf-recipecart.vercel.app/ and executing a sign-in I can see that isLoaded is updated based on the logs:
What is the expected the behavior you are trying to achieve using the isLoaded? If your issue is the stale no user message on the page you should either depend on the <SignedIn/>, <SignedOut/> Clerk controls to render authenticated / un-authenticated parts of the page or use the const {user} = useUser() effect on your current example instead of the const {user} = useClerk().

[cengizhanhakan]

hi @dimkl
Thank you for the comment. The problem only occurs on iOS. Steps to reproduce:

• Connect your iPhone device to a mac.
• then go into the website and try to log in
• in logs isLoaded wont get updated
• therefore page wont be loaded

[pakaplace]

Hi team, we're still waiting on a response here.

[octoper]

Hello @cengizhanhakan @pakaplace, I've tried to reproduce the issue in multiple versions of iOS using both Chrome and Safari. However, based on the logs on https://clerk-repro-1l2n9zzwf-recipecart.vercel.app/, everything seems to be working as expected. Can you please confirm if you are still encountering that issue?

[cengizhanhakan]

Hello @octoper After doing some testing on real devices. I will update here.