feat(clerk-expo): Introduce getClerkInstance to access/create a Clerk instance

[panteliselef]

Description

Introduce getClerkInstance to avoid importing the Clerk class from clerk-js manually.

This enables developers to create and access a Clerk instance in their application outside of React.

import { ClerkProvider, getClerkInstance } from "@clerk/expo"

const clerkInstance = getClerkInstance({ publishableKey: 'xxxx' })

// Be sure to pass the new instance to ClerkProvider to avoid running multiple instances of Clerk in your application
<ClerkProvider publishableKey={'xxxx'}>
    ...
</ClerkProvider>

// Somewhere in your code, outside of React you can do
const token = await clerkInstance.session?.getToken();
fetch('http://example.com/', {headers: {Authorization: token })

import { ClerkProvider, getClerkInstance } from "@clerk/expo"

// Always pass the `publishableKey` to `ClerkProvider`
<ClerkProvider publishableKey={'xxxx'}>
    ...
</ClerkProvider>

// If you sure that this code will run after the ClerkProvider has rendered then you can use `getClerkIntance` without options
const token = await getClerkInstance().session?.getToken();
fetch('http://example.com/', {headers: {Authorization: token })

⚠Note:

• Keep in mind that calling getClerkInstance() with different publishable keys will create a new Clerk instance.
• If getClerkInstance is called without a publishable key, and ClerkProvider has not rendered yet, an error will be thrown

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:

[changeset-bot]

🦋 Changeset detected

Latest commit: 8eb1154

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

This PR includes changesets to release 1 package

Name	Type
@clerk/clerk-expo	Minor

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

[octoper]

🔥

[domitriusclark]

so going forward in Expo apps, every developer should create this new Clerk instance and pass it in if they want to be able to access it outside of React right?

[octoper]

Yeah that's right they should create the new instance with createClerkClient

[BRKalow]

Is this preferable over exporting the singleton? Seems like we're introducing a footgun if someone forgets to pass their Clerk instance to ClerkProvider.

[panteliselef]

@BRKalow the exported Clerk variable will be undefined until the ClerkProvider renders. I find that weird, because the types don't indicate it. The createClerkClient is a pattern that we already have and expect developers to follow. We do something similar in clerk-react

[BRKalow]

Revisit naming to not conflict with clerk/backend naming, and make sure we don't make it possible to create two clerk instances.

[royanger]

This request comes up with React/Next/Remix apps when using tools like Tanstack Query or even just Axios/Fetch. We see this request with even Chrome Extensions. We can use window.Clerk.session.getToken() but that's not a great experience. Can we provide this for all SDKs to use use outside of hooks?

[dimkl]

❓ Should we add the getClerkInstance in the rest of our frontend-only packages (eg chrome-extension) to support the same use case?
Also, should we add it to the server-related packages (eg nextjs, remix) as a way to retrieve the default backend clerkClient instead of using the exported clerkClient?

[dimkl]

🙃 typo, clerk should be with lower case to match the actual export.

[panteliselef]

So i looked at this again, turns out the exported variable from the package is Clerk so the initial comment is correct