#React + Expo + Convex Better auth setup, crossDomain being an obstance

4 messages · Page 1 of 1 (latest)

brazen lily
#

Working on a PNPM monorepo containing three workspaces: web, mobile and server (convex server)
Server contains the following better auth configuration:

const siteUrl = "http://mattam.local:5174";
export const createAuth = (ctx: GenericCtx) =>
  betterAuth({
    trustedOrigins: ["mattam://", siteUrl],
    database: convexAdapter(ctx, betterAuthComponent),
    emailAndPassword: {enabled: true, requireEmailVerification: false,},
    plugins: [ convex(), expo(),
      // Apparently, this crossDomain plugin redirects me to siteUrl to accomplish something.
      // Much unwanted behavior on mobile, since I'm not using social login.
      crossDomain({
        siteUrl,
      }),
    ],
  });

Since mobile doesn't require CORS protection, I omit the crossDomain plugin when creating the client:

import { createAuthClient } from "better-auth/react";
import { convexClient } from "@convex-dev/better-auth/client/plugins";
import * as SecureStore from "expo-secure-store";
import { expoClient } from "@better-auth/expo/client";

export const authClient = createAuthClient({
        baseURL: process.env.EXPO_PUBLIC_CONVEX_SITE_URL,
        plugins: [
                expoClient({ scheme: "mattam", storagePrefix: "mattam", storage: SecureStore }),
                convexClient(),
        ],
});

Web (react) still uses it normally:

import { createAuthClient } from "better-auth/react";
import { convexClient, crossDomainClient, } from "@convex-dev/better-auth/client/plugins";

export const authClient = createAuthClient({
    baseURL: import.meta.env.VITE_CONVEX_SITE_URL,
    plugins: [ convexClient(), crossDomainClient() ],
});

Problem arises: crossDomain causees redirection when request is initiated from mobile (with faulty redirection since cookies are in the app!)

Is there a way to disable this crossDomain behaviour if request is from mobile app?

jaunty sorrelBOT
#

Hi @brazen lily. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

#

You are correct in your understanding: the crossDomain plugin is required for web (React) to handle CORS and cross-origin authentication, but it is not needed—and can cause issues—on mobile (Expo/React Native), especially when you are not using social login and do not need browser-based redirects.

Key points from the knowledge sources:

  • The crossDomain plugin is required for client-side web frameworks, but not for native mobile apps. For Expo/native, you should omit it to avoid unwanted redirection behavior, as you have done in your mobile client setup.
  • The server-side Better Auth configuration, however, currently always includes the crossDomain plugin, which is what triggers the redirection even for mobile requests.

How to resolve:

  • You should conditionally include the crossDomain plugin in your server-side Better Auth configuration, depending on the type of client making the request. However, the knowledge sources do not provide a built-in way to dynamically detect the client type at runtime within the server config.
  • The recommended approach is to run separate Convex deployments (or at least separate Better Auth configurations) for web and mobile, each with the appropriate plugins. This is implied by the need to set different siteUrl and plugin options for different platforms, as seen in the documentation and Discord threads.
  • Alternatively, you can try to structure your monorepo so that the server can be started with different environment variables or config files for web and mobile, each including or omitting the crossDomain plugin as needed.
#

Summary:
There is no built-in way in Better Auth or Convex to automatically disable the crossDomain plugin based on the client type at runtime. The best practice is to have separate configurations for web and mobile, each with the correct plugins. For mobile, omit the crossDomain plugin entirely in both the server and client configs. For web, include it in both.

For React Native, omit the crossDomain plugin and use the expo plugin instead. For web, include crossDomain. If you need both at the same time, you must run separate deployments or configurations, as the plugin cannot be conditionally applied at runtime based on the request source.
Convex Better Auth Installation
Discord: SITE_URL can't be set for both web and mobile

If you need to support both platforms simultaneously from a single server, this is currently a limitation, and you may want to open a feature request or discuss further on the Better Auth GitHub or Convex Discord.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: