chore(clerk-js,clerk-react,shared): Add hook to assert the presence of ClerkProvider [SDK-1043] by tmilewski · Pull Request #2299 · clerk/javascript

tmilewski · 2023-12-08T20:36:22Z

Description

Adds and implements useAssertWrappedByClerkProvider in order to assert that ClerkProvider is present. The goal of this being that we'd like to provide end-users a better development experience.

This applies to all public-facing components and hooks.

The intention behind introducing a new context was to limit the amount of refactoring needed to support what we were looking to achieve.

Current error messaging:

AuthContext not found

New error messaging:

@clerk/clerk-react: useAuth must be used within the <ClerkProvider> component. Please see: https://clerk. com/docs/components/clerk-provider

SDK-1043

Checklist

npm test runs as expected.
npm run build runs as expected.
(If applicable) JSDoc comments have been added or updated for any package exports
(If applicable) Documentation has been updated

Type of change

Packages affected

changeset-bot · 2023-12-08T20:36:25Z

🦋 Changeset detected

Latest commit: 06115b2

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

This PR includes changesets to release 11 packages

Name	Type
@clerk/clerk-js	Patch
@clerk/shared	Patch
@clerk/clerk-react	Patch
@clerk/chrome-extension	Patch
@clerk/clerk-expo	Patch
@clerk/backend	Patch
@clerk/fastify	Patch
@clerk/nextjs	Patch
@clerk/remix	Patch
@clerk/clerk-sdk-node	Patch
gatsby-plugin-clerk	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

github-actions · 2023-12-08T20:36:35Z

⚠️ Changes detected under the ClerkJS `ui` directory!

Don't forget to apply the same changes under the /ui.retheme directory:
packages/clerk-js/src/ui/** ➡️ packages/clerk-js/src/ui.retheme/**

Also, you may need to update the following files:

packages/localizations/src/en-US.retheme.ts
packages/localizations/src/index.retheme.ts
packages/types/src/appearance.retheme.ts
packages/types/src/clerk.retheme.ts
packages/types/src/index.retheme.ts
packages/types/src/localization.retheme.ts

.changeset/slow-bugs-exist.md

packages/shared/src/error.ts

packages/shared/src/react/contexts.tsx

dimkl

❓ Instead of adding another Context eg ClerkProviderAssertionContext why not use useIsomorphicClerkContext or useClientContext and apply the same pattern as other hooks?

  const ctx = useClientContext();
  assertContextExists(ctx, ClientContext);

The assertContextExists already exists in the shared package.

tmilewski · 2023-12-11T15:06:29Z

❓ Instead of adding another Context eg ClerkProviderAssertionContext why not use useIsomorphicClerkContext or useClientContext and apply the same pattern as other hooks?
  const ctx = useClientContext();
  assertContextExists(ctx, ClientContext);
The assertContextExists already exists in the shared package.

@dimkl So, the interesting thing about that example is that, if ClientContext doesn't exist, it'll never get to assertContextExists as it throws, by default, in useClientContext.

That should probably be fixed up, TBD. 👍

Happy to use ClerkInstanceContext/useIsomorphicClerkContext, but we'll have to use the useCtxWithoutGuarantee version of the createContextAndHook so as to not throw by default within the useCtx the created hook, allowing us to throw an appropriate error.

I'll fix up the existing usage mentioned above with this updated approach.

dimkl

As part of another PR, I think we also need to consolidate those:

javascript/packages/clerk-js/src/ui/contexts/utils.ts

Line 11 in 3abb91f

export function assertContextExists(contextVal: unknown, providerName: string): asserts contextVal {
javascript/packages/clerk-js/src/ui.retheme/contexts/utils.ts

Line 11 in 3abb91f

export function assertContextExists(contextVal: unknown, providerName: string): asserts contextVal {

packages/shared/src/react/contexts.tsx

packages/shared/src/error.ts

.changeset/slow-bugs-exist.md

LekoArts

LGTM

…f ClerkProvider [SDK-1043] (#2299) * chore(clerk-js,shared): Add hook to assert the presence of ClerkProvider * chore(clerk-js,clerk-react,shared): Add changeset * chore(shared): Update messaging * chore(clerk-js,shared): Re-used existing context * chore(shared): Require useAssertWrappedByClerkProvider param * Update .changeset/slow-bugs-exist.md * chore(shared): Update error messaging --------- Co-authored-by: Lennart <[email protected]>

tmilewski requested a review from brkalow December 8, 2023 20:36

tmilewski self-assigned this Dec 8, 2023

clerk-cookie added clerk-js react retheme labels Dec 8, 2023

tmilewski changed the title ~~chore(clerk-js,shared): Add hook to assert the presence of ClerkProvider [SDK-1043]~~ chore(clerk-js,clerk-react,shared): Add hook to assert the presence of ClerkProvider [SDK-1043] Dec 8, 2023

LekoArts suggested changes Dec 11, 2023

View reviewed changes

.changeset/slow-bugs-exist.md Outdated Show resolved Hide resolved

packages/shared/src/error.ts Outdated Show resolved Hide resolved

packages/shared/src/react/contexts.tsx Outdated Show resolved Hide resolved

dimkl reviewed Dec 11, 2023

View reviewed changes

tmilewski force-pushed the sdk-1043-assert-clerk-provider branch from a6c9785 to d4267a5 Compare December 11, 2023 15:26

clerk-cookie removed clerk-js retheme labels Dec 11, 2023

tmilewski requested review from LekoArts and dimkl December 11, 2023 15:27

dimkl approved these changes Dec 11, 2023

View reviewed changes

packages/shared/src/react/contexts.tsx Outdated Show resolved Hide resolved

packages/shared/src/react/contexts.tsx Show resolved Hide resolved

clerk-cookie added types localizations sdk-node labels Dec 11, 2023

tmilewski force-pushed the sdk-1043-assert-clerk-provider branch from c9302ae to d4267a5 Compare December 11, 2023 23:58

clerk-cookie removed types localizations sdk-node labels Dec 11, 2023

tmilewski added 5 commits December 11, 2023 19:07

chore(clerk-js,shared): Add hook to assert the presence of ClerkProvider

88f0aae

chore(clerk-js,clerk-react,shared): Add changeset

355500a

chore(shared): Update messaging

110ac9c

chore(clerk-js,shared): Re-used existing context

dba9081

chore(shared): Require useAssertWrappedByClerkProvider param

49e6d01

tmilewski force-pushed the sdk-1043-assert-clerk-provider branch from d4267a5 to 49e6d01 Compare December 12, 2023 00:09

brkalow reviewed Dec 12, 2023

View reviewed changes

packages/shared/src/react/contexts.tsx Outdated Show resolved Hide resolved

packages/shared/src/error.ts Outdated Show resolved Hide resolved

LekoArts reviewed Dec 12, 2023

View reviewed changes

.changeset/slow-bugs-exist.md Outdated Show resolved Hide resolved

Update .changeset/slow-bugs-exist.md

df51086

LekoArts approved these changes Dec 12, 2023

View reviewed changes

chore(shared): Update error messaging

06115b2

tmilewski enabled auto-merge December 12, 2023 14:49

tmilewski added this pull request to the merge queue Dec 12, 2023

Merged via the queue into main with commit 75ea300 Dec 12, 2023

tmilewski deleted the sdk-1043-assert-clerk-provider branch December 12, 2023 15:04

clerk-cookie mentioned this pull request Dec 12, 2023

Version Packages (alpha-v5) #2308

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

chore(clerk-js,clerk-react,shared): Add hook to assert the presence of ClerkProvider [SDK-1043]#2299

chore(clerk-js,clerk-react,shared): Add hook to assert the presence of ClerkProvider [SDK-1043]#2299
tmilewski merged 7 commits intomainfrom
sdk-1043-assert-clerk-provider

tmilewski commented Dec 8, 2023

Uh oh!

changeset-bot bot commented Dec 8, 2023 •

edited

Loading

Uh oh!

github-actions bot commented Dec 8, 2023

Uh oh!

Uh oh!

Uh oh!

Uh oh!

dimkl left a comment

Uh oh!

tmilewski commented Dec 11, 2023

Uh oh!

dimkl left a comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

LekoArts left a comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

Conversation

tmilewski commented Dec 8, 2023

Description

Current error messaging:

New error messaging:

Checklist

Type of change

Packages affected

Uh oh!

changeset-bot bot commented Dec 8, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

github-actions bot commented Dec 8, 2023

⚠️ Changes detected under the ClerkJS ui directory!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

dimkl left a comment

Choose a reason for hiding this comment

Uh oh!

tmilewski commented Dec 11, 2023

Uh oh!

dimkl left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

LekoArts left a comment

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

changeset-bot bot commented Dec 8, 2023 •

edited

Loading

⚠️ Changes detected under the ClerkJS `ui` directory!