ദ്ദി /ᐠ˵- ⩊ -˵マ•5mo ago

Convex Auth on React Native (expo)

I'm trying to connect my convex backend to a react native app made with expo. This backend is already used by my ReactJS app which is external to this expo project. I simply want the two projects to share the same database. The problem I'm having is with the OAuth connection to Google. My current configuration of Convex *(env variables) * is designed to work with the web version. I can't find a solution allowing me to connect Google OAuth with Convex Auth without getting these errors: 1. “redirect_uri_mismatch” from Google when my configuration seems incomplete because the Google cloud console only gives me a client ID without ‘Client Secret’. 2. This one on my convex endpoint when I try with my web configuration on my localhost:3000. {"code":"[Request ID: 6e40602255f030a2] Server Error: Uncaught Error: Invalid redirectTo exp://192.168.X.XX:3000 for configured SITE_URL: http://localhost:3000","trace":"Uncaught Error: Invalid redirectTo exp://192.168.X.XX:3000 for configured SITE_URL: http://localhost:3000\n [...] 3. This Google Cloud Console error prevents me from “whitelisting” the uri given by expo during development (exp://192.168.X.XX:3000) “Invalid origin: the URI must end with a public top-level domain extension, such as .com or .org.” PS: This error seems totally unreasonable to me, since my localhost:3000 url works without a hitch. I think I've come full circle and I'm left with no ideas. How should I configure this Google OAuth in Expo React Native with Convex Auth?

7 Replies

ദ്ദി /ᐠ˵- ⩊ -˵マOP•5mo ago

Please note that I used this example from the documentation ('React Native' tab) but with Google : https://labs.convex.dev/auth/config/oauth#add-sign-in-button I've just realized that error 2 actually comes from my “SITE_URL” environment variable. If I change it from http://localhost:3000 to exp://localhost:3000, it works on my phone. Is it possible to define a different SITE_URL on my react native project and keep the same one on my reactJS project?

sshader•5mo ago

Can you set the redirectTo param when calling signIn and detect from the client whether it's web or RN? Like the example here https://labs.convex.dev/auth/api_reference/server#callbacksredirect

server - Convex Auth

Authentication library for your Convex backend

sshader•5mo ago

Oh wait just kidding -- looks like from the error message you tried this already I'd be curious if setting SITE_URL to the empty string to get around that error + using redirectTo would work -- trying this out now with two different domains.

sshader•5mo ago

Ok I think what you want is this: https://labs.convex.dev/auth/api_reference/server#callbacksredirect in conjunction with using redirectTo on the client I did something like this:

    redirect: async (params: { redirectTo: string }) => {
      if (params.redirectTo.startsWith(process.env.EXPO_URL!)) {
        return params.redirectTo;
      }
      if (params.redirectTo.startsWith(process.env.SITE_URL!)) {
        return params.redirectTo;
      }
      if (params.redirectTo.startsWith("/")) {
        return `${process.env.SITE_URL}${params.redirectTo}`;
      }

      return process.env.SITE_URL!;
    },

    redirect: async (params: { redirectTo: string }) => {
      if (params.redirectTo.startsWith(process.env.EXPO_URL!)) {
        return params.redirectTo;
      }
      if (params.redirectTo.startsWith(process.env.SITE_URL!)) {
        return params.redirectTo;
      }
      if (params.redirectTo.startsWith("/")) {
        return `${process.env.SITE_URL}${params.redirectTo}`;
      }

      return process.env.SITE_URL!;
    },

server - Convex Auth

Authentication library for your Convex backend

sshader•5mo ago

Re: (1) -- I see both a client ID and client secret in the GCP console. I'd also double check that the redirect URI matches your deployment name (https://happy-animal-123.convex.site/api/auth/callback/google)

sshader•5mo ago

Re: (3) -- I think you might not need to list your expo URL there. I did eventually get this working with an expo app myself (https://labs.convex.dev/auth/config/oauth#add-sign-in-button under the "React Native" tab was key, and should be harder to miss in docs)

OAuth - Convex Auth

Authentication library for your Convex backend

Ari•2mo ago

Hi @sshader , I have a request for you... I'm trying to implement Convex Auth with Google OAuth across multiple apps (web, iOS, android / nextjs + expo react native) in a Monorepo (similar issues to the above example). As you likely know, there's an inherent conflict when attempting to use multiple Google OAuth Client Ids for web vs mobile apps during redirect processes. I just came across a Supabase thread where they posted a homegrown solution to this JUST 3 DAYS AGO (https://github.com/supabase/supabase-swift/issues/221). I love Convex, I've been developing with it for several months now, and I'm keen to stay with Convex and Convex Auth obviously, so I'm wondering if you could help craft a similar solution, help expand the documentation, or otherwise help me get my implementation working for addressing how to deal with multiple app client ids while implementing Google OAuth in the convex/auth.ts and SignInWithGoogle.tsx that you created in your EXPO-CONVEX-AUTH template. Obviously my goal is to have it work both in local and prod. At this stage I'm developing my monorepo as a boilerplate with a web app and two mobile apps, all using a shared single Convex db and shared user and authSessions tables, and I'll be integrating Stripe next before moving on the actual app builds. I'll be using it for a consumer-targeted suite of products/apps, not SASS. I'd be happy to post it as an open source project for the Convex community/customers to use moving forward if you can help me get it working. I wasted several weeks before Convex Auth rolled out configuring a complex custom AWS Cognito-NextAuth/Authjs-ConvexAuthAdapter config with shared user pool, only to have you guys roll out your own official Adapter (is beautiful) and then Convex Auth itself which is even better. Appreciate your consideration...

Convex Auth on React Native (expo)

Did you find this page helpful?