Better Auth•3w ago

Google Auth Not working in Production

I have my user dashboard at a site, There the Google login works both in Productiona and Development. I also made another app with the 1st one as its base for auth by setting baseURL for better auth client to the auth server url. All this setup was working fine locally. But after deployment the login does not work in 2nd app. The Error is related to CORS as I have verofied that and made sure to set it properly. I have also added Correct Authentications URLS in the google cloud console (Only one redirect URL although, of the 1st auth server). The google login page opens but when it returns us to the page it is without proper cookies set for auth. Hence NO CHANGE !!! Login Code

<script lang="ts">
  import { signIn } from '~/lib/auth-client';
  import Icon from '~/tools/Icon.svelte';
  import { GoogleIcon } from '~/components/icons';
</script>

<div class="mt-4 flex items-center justify-center">
  <button
    onclick={async () => {
      await signIn.social({
        provider: 'google',
        callbackURL: window.location.href
      });
    }}
    class="variant-outline-primary btn flex gap-2 rounded-lg font-semibold"
    ><Icon src={GoogleIcon} class="inline-block text-[1.25rem]" />Signin with Google</button
  >
</div>

<script lang="ts">
  import { signIn } from '~/lib/auth-client';
  import Icon from '~/tools/Icon.svelte';
  import { GoogleIcon } from '~/components/icons';
</script>

<div class="mt-4 flex items-center justify-center">
  <button
    onclick={async () => {
      await signIn.social({
        provider: 'google',
        callbackURL: window.location.href
      });
    }}
    class="variant-outline-primary btn flex gap-2 rounded-lg font-semibold"
    ><Icon src={GoogleIcon} class="inline-block text-[1.25rem]" />Signin with Google</button
  >
</div>

5 Replies

shubhattinOP•3w ago

do we need to set callbackUR to something else instead of window.location.href. / :- works fine for the main user dashboard app but when I used it with the 2nd app it redirected me back to the main app. window.location.href works atleast in dev mode

shubhattinOP•3w ago

When does Auth Work If I have my auth server at for https://users.netlify.app (https://users.xyx.com) App https://app.netlify.app (https://app.xyx.com) So the Auth does work on netlify's domain. It stops working if we set Subdomain Cookie sharing.

Netlify

Start building the best web experiences in record time

shubhattinOP•3w ago

So my simple question is can we use the auth backend for multiple frontend clints

nktnet•2w ago

I use window.location.origin as well for separate frontend and backend. For CORs issues, it's probably related to your trustedOrigin configuration in the auth instance. Are you able to share this? Docs here: - https://www.better-auth.com/docs/concepts/cookies#cross-subdomain-cookies

import { betterAuth } from "better-auth"
 
export const auth = betterAuth({
    advanced: {
        crossSubDomainCookies: {
            enabled: true,
            domain: ".example.com", // Domain with a leading period
        },
        defaultCookieAttributes: {
            secure: true,
            httpOnly: true,
            sameSite: "none",  // Allows CORS-based cookie sharing across subdomains
            partitioned: true, // New browser standards will mandate this for foreign cookies
        },
    },
    trustedOrigins: [
        'https://example.com',
        'https://app1.example.com',
        'https://app2.example.com',
    ],
})

import { betterAuth } from "better-auth"
 
export const auth = betterAuth({
    advanced: {
        crossSubDomainCookies: {
            enabled: true,
            domain: ".example.com", // Domain with a leading period
        },
        defaultCookieAttributes: {
            secure: true,
            httpOnly: true,
            sameSite: "none",  // Allows CORS-based cookie sharing across subdomains
            partitioned: true, // New browser standards will mandate this for foreign cookies
        },
    },
    trustedOrigins: [
        'https://example.com',
        'https://app1.example.com',
        'https://app2.example.com',
    ],
})

The other thing to note is there may be CORs set on the backend server itself, separate from better-auth. For example, in hono, you need to also configure: - https://www.better-auth.com/docs/integrations/hono#cors

import { Hono } from "hono";
import { auth } from "./auth";
import { serve } from "@hono/node-server";
import { cors } from "hono/cors";
 
const app = new Hono();
 
app.use(
    "/api/auth/*", // or replace with "*" to enable cors for all routes
    cors({
        origin: "http://localhost:3001", // replace with your origin
        allowHeaders: ["Content-Type", "Authorization"],
        allowMethods: ["POST", "GET", "OPTIONS"],
        exposeHeaders: ["Content-Length"],
        maxAge: 600,
        credentials: true,
    }),
);

import { Hono } from "hono";
import { auth } from "./auth";
import { serve } from "@hono/node-server";
import { cors } from "hono/cors";
 
const app = new Hono();
 
app.use(
    "/api/auth/*", // or replace with "*" to enable cors for all routes
    cors({
        origin: "http://localhost:3001", // replace with your origin
        allowHeaders: ["Content-Type", "Authorization"],
        allowMethods: ["POST", "GET", "OPTIONS"],
        exposeHeaders: ["Content-Length"],
        maxAge: 600,
        credentials: true,
    }),
);

Finally, if you're using Safari, you may want to check on another browser first (e.g. Chrome/Firefox) to see if the issue can be reproduced. Can't really say much else without more details into your configurations.

shubhattinOP•2w ago

I yeah I was able to setup it up in production. Thank you ✅ I had to set up cors in sveltekit hooks separately. I think it could also have been done in hono. The problem also occurred because of usage of .netlify.app domain. After proper sub domain cookie setup in worked

Gaming

Programming

Google Auth Not working in Production

Did you find this page helpful?