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

cengizhanhakan commented 1 year ago

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

Package + Version

[x] @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 commented 1 year ago

Code example

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

jescalan commented 1 year ago

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

cengizhanhakan commented 1 year ago

Hi @jescalan

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

cengizhanhakan commented 1 year ago

hi @jescalan, any updates?

jescalan commented 1 year ago

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 commented 1 year ago

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

dimkl commented 1 year ago

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: Screenshot 2023-08-29 at 08 53 22 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 commented 1 year ago

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 commented 12 months ago

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

octoper commented 11 months ago

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 commented 11 months ago

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

octoper commented 9 months ago

Hello! 👋 Please let me know if the issue still exists after testing on real devices. Additionally, to keep our GitHub issues organized, if there's no response within the next 7 days, I will consider the issue resolved and close it. Feel free to reopen it or reach out for further assistance. Thanks! 🚀

pakaplace commented 9 months ago

Hi @octoper, the issue stopped happening for us on ios devices about a month ago.

However, I was hoping you could suggest a better pattern on fetching user data from our external backend. We have a user table in our database that stores subscription data. In our next.js frontend, after waiting for isLoadedto be true, we call our API to fetch user subscription data.

Once user data is loaded, then we render the page the user is trying to navigate to. You can see our parent component where we do the fetching in this reproduction: https://github.com/cengizhanhakan/clerk-repro/blob/main/src/pages/layout.tsx

I'd like to fetch this user data before the page loads so it doesn't slow down our app or affect our SEO. Could this be done from the middelware or should it be done from getServerSideProps? I also thought about using the webhooks. We would have to update the clerk webhooks every time there's an update to a user's info or stripe subscription, I imagine, which seems like a lot of work.

jescalan commented 9 months ago

Closing this issue out as it appears to be resolved, but please feel free to keep the discussion going! I am sure that @octoper will respond here soon ✨

octoper commented 9 months ago

Hello @pakaplace , I'm glad to hear that your issue has been fixed.

Answering your other question, the most preferred and optimal way to sync data on your end is by using Webhooks. We have a straightforward guide on how to do it, which you can find here: Sync Clerk data to your backend with webhooks. This solution is the most optimal as you will only update the user on your end when the user is actually updated. Other solutions, like the one you currently have or the getServerSideProps solution, could result in additional queries in your database as you would always update the user on every request, even if the data didn't change at all.

clerk / javascript