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

[tmilewski]

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

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

Packages affected

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

[changeset-bot]

🦋 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]

⚠️ 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

[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]

❓ 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 {

[LekoArts]

LGTM