Clerk-Expo - If the publishable key is changed, the Clerk singleton still uses the original key

statico commented 1 year ago

Package + Version

[ ] @clerk/clerk-js
[ ] @clerk/clerk-react
[ ] @clerk/nextjs
[ ] @clerk/remix
[X] @clerk/types
[ ] @clerk/themes
[ ] @clerk/localizations
[X] @clerk/clerk-expo
[ ] @clerk/backend
[ ] @clerk/clerk-sdk-node
[ ] @clerk/shared
[ ] @clerk/fastify
[ ] @clerk/chrome-extension
[ ] gatsby-plugin-clerk
[ ] build/tooling/chore
[ ] other:

Dependencies + versions

{
  "dependencies": {
    "@babel/plugin-proposal-export-namespace-from": "^7.18.9",
    "@bugsnag/expo": "^48.0.0",
    "@clerk/clerk-expo": "^0.18.9",
    "@expo-google-fonts/lexend": "^0.2.3",
    "@expo/webpack-config": "^18.1.0",
    "@fortawesome/fontawesome-svg-core": "^6.3.0",
    "@fortawesome/free-brands-svg-icons": "^6.3.0",
    "@fortawesome/pro-light-svg-icons": "^6.3.0",
    "@fortawesome/pro-regular-svg-icons": "^6.3.0",
    "@fortawesome/pro-solid-svg-icons": "^6.3.0",
    "@fortawesome/react-native-fontawesome": "^0.3.0",
    "@pickleheads/common": "*",
    "@react-native-anywhere/polyfill-base64": "^0.0.1-alpha.0",
    "@react-native-async-storage/async-storage": "1.17.11",
    "@react-native-community/netinfo": "9.3.7",
    "@react-native-picker/picker": "2.4.8",
    "@shopify/flash-list": "1.4.0",
    "@tanstack/react-query": "^4.29.19",
    "@trpc/client": "^10.34.0",
    "@trpc/react-query": "^10.34.0",
    "change-case": "^4.1.2",
    "dotenv": "^16.0.3",
    "expo": "^48.0.19",
    "expo-application": "~5.1.1",
    "expo-auth-session": "^4.0.3",
    "expo-av": "~13.2.1",
    "expo-camera": "~13.2.1",
    "expo-clipboard": "~4.1.2",
    "expo-constants": "~14.2.1",
    "expo-contacts": "~12.0.1",
    "expo-crypto": "~12.2.1",
    "expo-dev-client": "~2.2.1",
    "expo-device": "~5.2.1",
    "expo-document-picker": "~11.2.2",
    "expo-file-system": "~15.2.2",
    "expo-font": "~11.1.1",
    "expo-haptics": "~12.2.1",
    "expo-image": "~1.0.1",
    "expo-image-manipulator": "~11.1.1",
    "expo-image-picker": "~14.1.1",
    "expo-linking": "~4.0.1",
    "expo-location": "~15.1.1",
    "expo-media-library": "~15.2.3",
    "expo-notifications": "~0.18.1",
    "expo-router": "^1.5.3",
    "expo-secure-store": "^12.1.1",
    "expo-sharing": "~11.2.2",
    "expo-splash-screen": "^0.18.2",
    "expo-status-bar": "~1.4.4",
    "expo-updates": "~0.16.4",
    "formik": "^2.4.1",
    "metro": "^0.76.6",
    "metro-resolver": "^0.76.6",
    "ms": "^2.1.3",
    "p-retry": "^5.1.2",
    "pluralize": "^8.0.0",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-error-boundary": "^4.0.10",
    "react-native": "0.71.8",
    "react-native-date-picker": "^4.2.13",
    "react-native-dialog": "^9.3.0",
    "react-native-flex-layout": "^0.1.5",
    "react-native-gesture-handler": "~2.9.0",
    "react-native-ios": "^1.1.0",
    "react-native-keyboard-aware-scroll-view": "^0.9.5",
    "react-native-maps": "1.3.2",
    "react-native-reanimated": "~2.14.4",
    "react-native-restart": "^0.0.27",
    "react-native-safe-area-context": "4.5.0",
    "react-native-screens": "~3.20.0",
    "react-native-svg": "13.4.0",
    "react-native-web": "~0.18.10",
    "react-native-web-swiper": "^2.2.4",
    "react-native-webview": "11.26.0",
    "recoil": "^0.7.7",
    "rn-range-slider": "^2.2.2",
    "stream-chat-expo": "^5.15.1",
    "swr": "^2.1.5",
    "uuid": "3.4.0",
    "zod": "^3.21.4"
  },
  "devDependencies": {
    "@babel/core": "^7.20.0",
    "@clerk/types": "^3.39.0",
    "@types/change-case": "^2.3.1",
    "@types/react": "~18.0.27",
    "@types/react-native": "^0.71.6",
    "@types/webpack-env": "^1.18.1",
    "@typescript-eslint/eslint-plugin": "^5.57.0",
    "@typescript-eslint/parser": "^5.57.0",
    "eslint": "^8.36.0",
    "eslint-config-prettier": "^8.8.0",
    "eslint-plugin-import": "^2.27.5",
    "eslint-plugin-react": "^7.32.2",
    "eslint-plugin-simple-import-sort": "^10.0.0",
    "typescript": "^5.1.6"
  },
  "resolutions": {
    "metro": "0.76.0",
    "metro-resolver": "0.76.0"
  }
}

Browser/OS

Simulator.app with an iPhone Pro 14 on MacOS 13.4.1 (22F82)

Description

I am trying to configure our React Native app to be able to switch between our production and staging environments so we only need to build and publish one app.

Part of switching involves changing the Clerk publishable key. Our main app/_layout.tsx looks like this:

const App = () => {
  const { config } = useOurAppConfig()
  return (
    <ClerkProvider
      tokenCache={ClerkTokenCache}
      publishableKey={config.clerkPublishableKey}
    >
      <ClerkLoading>
        <Spinner />
      </ClerkLoading>
      <ClerkLoaded>
        ...

The value of config.clerkPublishableKey may change depending on the environment chosen. However, Clerk continues to use the first key initialized at load time, and will only switch if the app is force quit and restarted (which is an acceptable workaround for now).

It would be great if singleton.ts here checked to see if the key was still the same as the key in the singleton Clerk client, like:

if (!clerk || key !== clerk.publicKey) {

dimkl commented 1 year ago

cross-posting for visibility: https://github.com/clerkinc/javascript/pull/1510#issuecomment-1651854918

BRKalow commented 1 year ago

Hey @statico, if you get a chance could you test out this prerelease and let us know if you're seeing the expected behavior?

@clerk/clerk-expo@0.18.20-snapshot.46d14e7

clerk-cookie commented 5 days ago

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.

clerk / javascript