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
shubhattin
shubhattinOP3w 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
shubhattin
shubhattinOP3w 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
shubhattin
shubhattinOP3w ago
So my simple question is can we use the auth backend for multiple frontend clints
nktnet
nktnet2w 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.
shubhattin
shubhattinOP2w 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

Did you find this page helpful?