Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

docs(expo): Add guide for accessing Clerk outside components in Expo #2102

Merged
merged 11 commits into from
Mar 17, 2025

Conversation

wobsoriano
Copy link
Member

@wobsoriano wobsoriano commented Mar 14, 2025

🔎 Previews:

clerk-demo-pr.mov

Demo repo: https://github.com/wobsoriano/clerk-docs-2102

What does this solve?

  • We have a massive discussion on how to access the Clerk instance outside of React components in Expo applications. We have the getClerkInstance() available since last year, but it's not documented and is hard for customers to find.

What changed?

  • This PR adds a dedicated Expo guide with some practical examples on how to access Clerk instance outside of components.

Checklist

  • I have clicked on "Files changed" and performed a thorough self-review
  • I have added the "deploy-preview" label and added the preview link(s) to this PR description
  • All existing checks pass

Copy link

Hey, here’s your docs preview: https://clerk.com/docs/pr/2102

@wobsoriano wobsoriano marked this pull request as ready for review March 14, 2025 16:43
@wobsoriano wobsoriano requested a review from a team as a code owner March 14, 2025 16:43
Comment on lines 40 to 68
import axios from 'axios'
import { getClerkInstance } from '@clerk/clerk-expo'

export async function fetchFoo() {
try {
const data = await axios.get('/api/foo')
return data
} catch (error) {
if (axios.isAxiosError(error) && error.response) {
throw new Error(`API Error: ${error.response.status} ${error.response.statusText}`)
}

throw new Error('Unknown error')
}
}

// Intercept requests and modify them to include the current session token
axios.interceptors.request.use(async (config) => {
const clerkInstance = getClerkInstance()
// Use `getToken()` to get the current session token
const token = await clerkInstance.session?.getToken()

if (token) {
// Include the session token as a Bearer token in the Authorization header
config.headers.Authorization = `Bearer ${token}`
}

return config
})
Copy link
Member Author

@wobsoriano wobsoriano Mar 14, 2025

Choose a reason for hiding this comment

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

Axios interceptors is a very common pattern among axios devs for handling auth tokens

See https://github.com/orgs/clerk/discussions/1751#discussioncomment-8907251

@wobsoriano wobsoriano requested a review from panteliselef March 14, 2025 16:57
Copy link
Member

@panteliselef panteliselef left a comment

Choose a reason for hiding this comment

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

From a sdk standpoint this is correct, but let's wait for the docs team to review as well.

alexisintech

This comment was marked as outdated.

@alexisintech alexisintech dismissed their stale review March 17, 2025 20:18

updating copy

Copy link
Member

@alexisintech alexisintech left a comment

Choose a reason for hiding this comment

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

  • updated the name to remove gerund ('-ing')
  • slightly updated the copy

the rest lgtm 😸💖

@wobsoriano
Copy link
Member Author

Thanks @alexisintech! ❤️❤️

@wobsoriano wobsoriano merged commit ae2b5a3 into main Mar 17, 2025
6 checks passed
@wobsoriano wobsoriano deleted the rob/eco-493-expo-clerk-instance-access branch March 17, 2025 20:47
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants