WorkOS AuthKit with Expo
Hey all!
I'm trying to setup Convex with Expo and AuthKit with the
@workos-inc/authkit-react but running into issues with the callback route. Has anyone successfully achieved this? I realize now that using the react package was a little naïve because the flow will be very different from web to mobile. I know there isn't any official docs on this but I am just wondering if anyone has figured this out?16 Replies
Thanks for posting in <#1088161997662724167>.
Reminder: If you have a Convex Pro account, use the Convex Dashboard to file support tickets.
- Provide context: What are you trying to achieve, what is the end-user interaction, what are you seeing? (full error message, command output, etc.)
- Use search.convex.dev to search Docs, Stack, and Discord all at once.
- Additionally, you can post your questions in the Convex Community's <#1228095053885476985> channel to receive a response from AI.
- Avoid tagging staff unless specifically instructed.
Thank you!
@Christopher Silvas I'm about to start a new project with WorkOS, Convex and Expo myself and was wondering the same thing. Did you figure this out?
Not yet, I am actively working on it. Would you be interested in collaborating?
Yeah sure
To be clear, I am attempting to solve targeting both web and mobile expo app. I'm currently trying to figure out how to get the auth information from the /callback route to the frontend securly.
From the sounds of it, you're supposed to pass information back in the query parameters of the redirect url.
For web and mobile I am treating the flows differently to avoid needing to work in an https environment.
For mobile I am using the WebBrowser.openAuthSessionAsync API. but for web I decided to just redirect directly to the auth page to avoid the need for HTTPS in development.
I guess I should take a step back and ask what stage you are at in implementation?
I'm doing mobile Expo only. Just starting to setup my auth screens. From my previous experiences I was thinking of
WebBrowser.openAuthSessionAsync.
I assume the authkit package for React is for web mainly? I.e. you'd have to store tokens yourself in secure storage etcYeah, it's primarily react SPA based I think. I am not entierly sure how they exchange the code for a token though...
Are you using RSCs?
Nope only client components
Ahh okay, are you using Expo Router's API routes?
I am asking because I was struggling trying to figure out how to get the code exchanged securely, and I think I figured it out with RSCs.
No, I am doing it fully with Convex
But haven't actually gotten to that stage yet
Just how I am imagining I will do it, hoping the Convex integration with WorkOS has some nice stuff for it
Okay, when you hit a barrier or you find any resources in the convex/workos integration feel free to update me.
Sure
@Jacob I think I got it pretty much figured out.
I'll post a complete breakdown.
Hmmm. @Jacob so I took a step back and looked at the authentication methods and realized that there are two different paths you can take to authenticate: server side and client side. If you want client side authentication then you have to use the PKCE Flow exemplified by the @workos/authkit-js (https://github.com/workos/authkit-js) package. That basically requires the storage of a "code verifier" that allows you to circumvent the need for a secret key on the client side. You're not going to make much progress trying to use the authkit-react library because it's basically a react wrapper around the authkit-js library, and the authkit-js library assumes web primitives for storage. For Expo mobile you're going to need to use the expo-secure-store package to store the session locally.
I ended up going with server side authentication using the @workos/authkit-node (https://github.com/workos/workos-node) package so that I could leverage auth in my convex backend as well as my Expo Router routes.
GitHub
GitHub - workos/authkit-js: Vanilla JS AuthKit SDK
Vanilla JS AuthKit SDK. Contribute to workos/authkit-js development by creating an account on GitHub.
GitHub
GitHub - workos/workos-node: Official Node SDK for interacting with...
Official Node SDK for interacting with the WorkOS API - workos/workos-node
So what’s the actual state of this now? I started an expo project with clerk but realised I don’t like their pricing. I did a silly experiment where I just shoved the workos convex inegration docs into cursor and letting it do it and it wasn’t able to. I want to have both a web and mobile app.
In the workos docs for react native it shows you are supposed to install expo-auth-session and couple more expo packages. But the convex docs are talking about installing authkit.
Not being a web devloper and just learning these things, and the web development I have done being in php. I am now already mildly confused. On laravel you just had the packages laravel provided and used those on the server.
I read the whole thread but not having done things in this ecosystem before it means I don’t instinctively know what to do
I'm going to look at workos w/ Expo soon, I don't know how compatible the convex and works docs are for expo specifically