seesion not saving when running dev server with --host or when running build

Frontend spa in react Backend is a express server Hi, I am tryint to test my webapp from my phone so i am using the --host option with vite (i do bun run dev --host) but now my cookies are not being set and the session is not being stored. Here is my signin code:
const { error } = await authClient.signIn.email({
email,
password: password,
callbackURL: url,
});
if (error) { console.log(error) }
const { error } = await authClient.signIn.email({
email,
password: password,
callbackURL: url,
});
if (error) { console.log(error) }
which does not log the error and i can see my redirect working, the url is set to my app base path while hosting thats 10.0.0.134:5173, and it correctly redirects me but because the session isnt saved it puts me back to my login page (all other routes are protected) I also know its hitting the auth server because i put a test middleware infront of the auth like so:
const test = async (req: Request, res: Response, next: NextFunction) => {
console.log("Hello")
next()
}
app.all("/api/auth/*", test, toNodeHandler(auth));
const test = async (req: Request, res: Response, next: NextFunction) => {
console.log("Hello")
next()
}
app.all("/api/auth/*", test, toNodeHandler(auth));
which does print hello when i press sign in on the client (removing the test middleware does nothing to fix it) I have these cors rules set up:
const allowedOrigins = ['http://localhost:5173', 'http://10.0.0.134:5173'];
app.use(cors({
origin: (origin, callback) => {
// Allow requests with no origin (like mobile apps or curl)
if (!origin) return callback(null, true);
if (allowedOrigins.indexOf(origin) !== -1) {
callback(null, true);
} else {
callback(new Error('Not allowed by CORS'));
}
},
credentials: true,
}));
const allowedOrigins = ['http://localhost:5173', 'http://10.0.0.134:5173'];
app.use(cors({
origin: (origin, callback) => {
// Allow requests with no origin (like mobile apps or curl)
if (!origin) return callback(null, true);
if (allowedOrigins.indexOf(origin) !== -1) {
callback(null, true);
} else {
callback(new Error('Not allowed by CORS'));
}
},
credentials: true,
}));
and my server auth setup is here:
export const auth = betterAuth({
database: dialect,
emailAndPassword: {
enabled: true,
},
trustedOrigins: ["http://10.0.0.134:5173", "http://localhost:5173"],
cookie: {
// Cookie configuration example:
maxAge: 7 * 24 * 60 * 60,
httpOnly: true,
sameSite: "lax",
secure: false,
},
});
export const auth = betterAuth({
database: dialect,
emailAndPassword: {
enabled: true,
},
trustedOrigins: ["http://10.0.0.134:5173", "http://localhost:5173"],
cookie: {
// Cookie configuration example:
maxAge: 7 * 24 * 60 * 60,
httpOnly: true,
sameSite: "lax",
secure: false,
},
});
note i have tried without setting the cookies object and with it.
Solution:
Solution was using bearer plugin and making sure my auth server was actually hosted to the network. for future reference if anyone needs
Jump to solution
6 Replies
KwozyK
KwozyKOP3mo ago
ran out of characters. But wanted to say that any help would be appraciated greatly Adding more context: what happens above is when hosting it but still accessing it from my computer (what the server is running on) using the ip and not local host. When accessing it from my phone it doesnt do anything, that is it does not reach the auth server, does not attempt the redirect but when i display the error all values are undefined (the message, the code, the status text) the status is 0 More context: testing building the app and running the preview locally and it has the same effect as if i were on the phone when its hosted in dev
bekacru
bekacru3mo ago
this is most likely regarding cookies domain configuraiton. If you're SPA and backend are hosted in subdomains, make sure to enable crossSubDomainCookies and if they are hosted in completely differrent domains look into using bearer plugin.
KwozyK
KwozyKOP3mo ago
hi. Thanks for the info. I have set up the bearer plugin and now it is working when i host it and access it from my computer (using the ip, but still the same cimputer the server is running on). When i try my phone (safari or google chrome on IOS) it doesn't work still.
KwozyK
KwozyKOP3mo ago
No description
KwozyK
KwozyKOP3mo ago
the undefined:undefined is the error i get back from the error object on sign in. not too useful. also it doesnt hit the on success method either as i tried to set that div text to the authToken and it just displayed the error
const { error } = await authClient.signIn.email({
email,
password: password,
callbackURL: "/",
}, {
onSuccess(context) {
const authToken = context.response.headers.get("set-auth-token") // get the token from the response headers
// Store the token securely (e.g., in localStorage)
if (authToken) {
setError(authToken);
localStorage.setItem("bearer_token", authToken);
}
},
});
if (error) { setError(error.message! + ":" + error.code! + ":" + error.statusText) }
};
const { error } = await authClient.signIn.email({
email,
password: password,
callbackURL: "/",
}, {
onSuccess(context) {
const authToken = context.response.headers.get("set-auth-token") // get the token from the response headers
// Store the token securely (e.g., in localStorage)
if (authToken) {
setError(authToken);
localStorage.setItem("bearer_token", authToken);
}
},
});
if (error) { setError(error.message! + ":" + error.code! + ":" + error.statusText) }
};
my login logic using the bearer plugin still doesnt work when running the preview either, while accessing from the same computer but hosted get the same undefined:undefined error. it almost seems as if the server is never being hit even though the server IP address never changes? could this be because the server is running on a local host? now that i think about it that does kinda make sense, still weird that i can access it while --host is configured but on the same computer K so im an idiot and that was why. now it is working. . thanks for all the help
Solution
KwozyK
KwozyK3mo ago
Solution was using bearer plugin and making sure my auth server was actually hosted to the network. for future reference if anyone needs

Did you find this page helpful?