rubberburger•3w ago

any of yall had CORS issues when doing

any of yall had CORS issues when doing better auth with convex? in particular i had CORS issues (deployed using coolify), but no issues when using the cloud version would appreciate if anyone can point me to the right direction on how to fix the cors issues

5 Replies

anon28410•3w ago

Are you accessing via a reverse proxy? Make sure you have the required CORS headers appended. It would be helpful if Convex posted exactly what is required, in the mean time, this worked for me on nginx (replace example domain with your frontend fqdn):

add_header 'Access-Control-Allow-Origin' 'https://example.com' always;
add_header 'Access-Control-Allow-Credentials' 'true' always;
add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS' always;
add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type' always;

add_header 'Access-Control-Allow-Origin' 'https://example.com' always;
add_header 'Access-Control-Allow-Credentials' 'true' always;
add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS' always;
add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type' always;

I found that only the site endpoint requires these headers (running on port 3211). The backend (3210) seemed to work fine without. When it comes to better auth specifics, make sure you are using the correct env vars in each config location. It's easy to get them muddled up, took me a couple tried before I understood the requests architecture. auth.config.js uses your convex site url (3211 service) lib/auth.ts uses your frontend site url (same as the CORS allowed origin) ConvexReactClient should be passed your convex backend url (3210 service) If using a fullstack framework like next, then in theory you don't need the optional CORS plugin. Additionally, you also shouldn't need to include/override any urls in other auth config locations such as auth-client.ts.

rubberburgerOP•3w ago

hey, thanks for this, ill get back to self-hosting convex some time but ig ill just use the cloud version for now just for an MVP --- any chance you could help me with this? so i think i was able to set up better auth + convex, except for the part where google redirects me to the redirect uri it redirects me to something like http://localhost:3000/api/auth/callback/google?state=-dasd......., which doesn't exist so i get errors i've tried redirecting that call to the convex site url (i assume this does the HTTP actions thing) something like this:

const nextConfig: NextConfig = {
    transpilePackages: ['@workspace/ui'],
    rewrites: async () => {
        console.log('inside next.config.ts rewrites')
        return {
            beforeFiles: [],
            afterFiles: [
                {
                    source: '/api/auth/callback/google',
                    destination: 'https://strong-animal-123.convex.site/api/auth/callback/google',
                },
            ],
            fallback: [],
        }
    },
}

const nextConfig: NextConfig = {
    transpilePackages: ['@workspace/ui'],
    rewrites: async () => {
        console.log('inside next.config.ts rewrites')
        return {
            beforeFiles: [],
            afterFiles: [
                {
                    source: '/api/auth/callback/google',
                    destination: 'https://strong-animal-123.convex.site/api/auth/callback/google',
                },
            ],
            fallback: [],
        }
    },
}

but then i get cors errors also tried

const siteUrl = ‘http://localhost:3000’

const createOptions = (ctx: GenericCtx) =>
    ({
        baseURL: siteUrl,
        trustedOrigins: [
            siteUrl,
        ],

        database: convexAdapter(ctx, betterAuthComponent),
        socialProviders: {
            google: {
                clientId: process.env.GOOGLE_CLIENT_ID as string,
                clientSecret: process.env.GOOGLE_SECRET as string,
                redirectURI: 'https://strong-animal-123.convex.site/api/auth/callback/google',
            },
        },
    }) satisfies BetterAuthOptions

const siteUrl = ‘http://localhost:3000’

const createOptions = (ctx: GenericCtx) =>
    ({
        baseURL: siteUrl,
        trustedOrigins: [
            siteUrl,
        ],

        database: convexAdapter(ctx, betterAuthComponent),
        socialProviders: {
            google: {
                clientId: process.env.GOOGLE_CLIENT_ID as string,
                clientSecret: process.env.GOOGLE_SECRET as string,
                redirectURI: 'https://strong-animal-123.convex.site/api/auth/callback/google',
            },
        },
    }) satisfies BetterAuthOptions

i.e. actually typing the redirect URI to the convex site, but still to no avail (getting CORS)

anon28410•3w ago

You shouldn't need to configure any internal rewrites. Just make sure you have the catchall route present at @/app/api/auth/[...all]/route.ts

import { nextJsHandler } from "@convex-dev/better-auth/nextjs";
export const { GET, POST } = nextJsHandler();

import { nextJsHandler } from "@convex-dev/better-auth/nextjs";
export const { GET, POST } = nextJsHandler();

I also use a social provider in my setup and never had any issues with redirects. This is my auth config if it helps:

export const createAuth = (ctx: GenericCtx) =>
    betterAuth({
        // All auth requests will be proxied through your next.js server
        baseURL: process.env.NEXT_PUBLIC_SITE_URL as string,
        database: convexAdapter(ctx, betterAuthComponent),

        socialProviders: {
            discord: {
                clientId: process.env.AUTH_DISCORD_ID as string,
                clientSecret: process.env.AUTH_DISCORD_SECRET as string,
            },
        },
        plugins: [
            convex(),
        ],
    });

export const createAuth = (ctx: GenericCtx) =>
    betterAuth({
        // All auth requests will be proxied through your next.js server
        baseURL: process.env.NEXT_PUBLIC_SITE_URL as string,
        database: convexAdapter(ctx, betterAuthComponent),

        socialProviders: {
            discord: {
                clientId: process.env.AUTH_DISCORD_ID as string,
                clientSecret: process.env.AUTH_DISCORD_SECRET as string,
            },
        },
        plugins: [
            convex(),
        ],
    });

I suggest confirming if the auth api is even handing requests, try returning your session object via your frontend fqdn: https://example.com/api/auth/get-session Also, I assume lack of inclusion of the convex plugin in your above code is intentional?

rubberburgerOP•3w ago

yeah i ommitted it when i pasted it here just found the error and apparently it had to do with the auth callback not being able to redirect to http endpoints, so running the next server on https does the trick, i think it works now but i've yet to confirm ( fingers crossed ) i hope that was the problem with my self hosted instance tho 😆 that'd save a ton of headaches found it from here: https://discord.com/channels/1019350475847499849/1400580427026010262

anon28410•3w ago

👌 Hope it works for you. Personally never had an issue with signing in running http locally in dev environments or https public endpoints. But I think some providers do restrict insecure redirects, Apple being one of them from memory, maybe Google is the same.

any of yall had CORS issues when doing

Did you find this page helpful?