Skip to content

feat(clerk-expo): Support swapping publishableKey at runtime#1655

Merged
brkalow merged 3 commits intomainfrom
brk.feat/clerk-expo-swap-instance
Sep 1, 2023
Merged

feat(clerk-expo): Support swapping publishableKey at runtime#1655
brkalow merged 3 commits intomainfrom
brk.feat/clerk-expo-swap-instance

Conversation

@brkalow
Copy link
Copy Markdown
Member

@brkalow brkalow commented Aug 29, 2023

Type of change

  • 🐛 Bug fix
  • 🌟 New feature
  • 🔨 Breaking change
  • 📖 Refactoring / dependency upgrade / documentation
  • other:

Packages affected

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

Description

  • npm test runs as expected.
  • npm run build runs as expected.

Support swapping the publishableKey at runtime, and by extension the Clerk instance. This allows use cases such as a runtime environment switcher to allow native app developers to toggle their runtime Clerk instance without force quitting an app or having two separate builds. See JS-598 or #1508 for additional details.

fixes JS-598, fixes #1508

@changeset-bot
Copy link
Copy Markdown

changeset-bot Bot commented Aug 29, 2023

🦋 Changeset detected

Latest commit: 5150098

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 7 packages
Name Type
@clerk/clerk-js Patch
@clerk/clerk-react Patch
@clerk/clerk-expo Minor
@clerk/chrome-extension Patch
gatsby-plugin-clerk Patch
@clerk/nextjs Patch
@clerk/remix Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@brkalow
Copy link
Copy Markdown
Member Author

brkalow commented Aug 29, 2023

!snapshot

Copy link
Copy Markdown

@jit-ci jit-ci Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

✅ Great news! Jit hasn't found any security issues in your PR. Good Job! 🏆

@clerk-cookie
Copy link
Copy Markdown
Collaborator

Hey @brkalow - the snapshot version command generated the following package versions:

Package Version
@clerk/backend 0.28.0
@clerk/chrome-extension 0.3.29-snapshot.46d14e7
@clerk/clerk-js 4.56.2-snapshot.46d14e7
eslint-config-custom 0.3.0
@clerk/clerk-expo 0.18.20-snapshot.46d14e7
@clerk/fastify 0.6.4
gatsby-plugin-clerk 4.4.6-snapshot.46d14e7
@clerk/localizations 1.25.0
@clerk/nextjs 4.23.4-snapshot.46d14e7
@clerk/clerk-react 4.24.1-snapshot.46d14e7
@clerk/remix 2.10.1-snapshot.46d14e7
@clerk/clerk-sdk-node 4.12.3
@clerk/shared 0.22.0
@clerk/themes 1.7.5
@clerk/types 3.50.0

Tip: use the snippet copy button below to quickly install the required packages.

# @clerk/backend
npm i @clerk/backend@0.28.0
# @clerk/chrome-extension
npm i @clerk/chrome-extension@0.3.29-snapshot.46d14e7
# @clerk/clerk-js
npm i @clerk/clerk-js@4.56.2-snapshot.46d14e7
# eslint-config-custom
npm i eslint-config-custom@0.3.0
# @clerk/clerk-expo
npm i @clerk/clerk-expo@0.18.20-snapshot.46d14e7
# @clerk/fastify
npm i @clerk/fastify@0.6.4
# gatsby-plugin-clerk
npm i gatsby-plugin-clerk@4.4.6-snapshot.46d14e7
# @clerk/localizations
npm i @clerk/localizations@1.25.0
# @clerk/nextjs
npm i @clerk/nextjs@4.23.4-snapshot.46d14e7
# @clerk/clerk-react
npm i @clerk/clerk-react@4.24.1-snapshot.46d14e7
# @clerk/remix
npm i @clerk/remix@2.10.1-snapshot.46d14e7
# @clerk/clerk-sdk-node
npm i @clerk/clerk-sdk-node@4.12.3
# @clerk/shared
npm i @clerk/shared@0.22.0
# @clerk/themes
npm i @clerk/themes@1.7.5
# @clerk/types
npm i @clerk/types@3.50.0

Comment thread .changeset/hot-pans-grow.md Outdated

const { frontendApi, instanceType } = publishableKey as PublishableKey;

this.publishableKey = key;
Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is specified as a public readonly property, but we weren't setting it anywhere.

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm almost sure this is not used anywhere - @panteliselef , any chance this is needed by the multidomains feature?

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm using it in another spot in this PR to check for a new key, but let me know if we don't want to set this for some reason!

// Also will recreate the instance if the provided Clerk instance changes
// This method should be idempotent in both scenarios
if (!inClientSide() || !this.#instance) {
if (!inClientSide() || !this.#instance || (options.Clerk && this.#instance.Clerk !== options.Clerk)) {
Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Without this change, there was no way to forcibly reset the created IsomorphicClerk instance. Given that we have not considered the possibility of changing the instance of Clerk at runtime, adding this additional check seems reasonable given the new requirement.

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This makes sense 👍🏻

@brkalow brkalow requested a review from a team August 30, 2023 13:59
Comment thread packages/expo/src/singleton.ts
//@ts-expect-error
<ClerkReactProvider
// Force reset the state when the provided key changes, this ensures that the provider does not retain stale state. See JS-598 for additional context.
key={key}
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

❓I think that there is publishableKey and not key prop in ClerkReactProvider. Could we double check this?

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The use of key here is intentional to force react to remount the component and wipe away any stale state from the previous instance. As far as I can tell, by passing the clerk instance below we remove the need to pass the publishableKey as a prop

Comment thread packages/expo/src/singleton.ts
@brkalow brkalow marked this pull request as ready for review August 31, 2023 14:32
Comment thread packages/expo/src/singleton.ts
@brkalow brkalow merged commit a102c21 into main Sep 1, 2023
@brkalow brkalow deleted the brk.feat/clerk-expo-swap-instance branch September 1, 2023 13:45
@clerk-cookie clerk-cookie mentioned this pull request Sep 1, 2023
@clerk-cookie
Copy link
Copy Markdown
Collaborator

This PR 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 clerk locked as resolved and limited conversation to collaborators Sep 1, 2024
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

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

4 participants