Questions about hono-sessions

[FabioDiCeglie]

I've created a simple Hono app, and everything works fine locally — I can access the session from multiple endpoints without any issues. However, after deploying to Cloudflare, accessing the session across different endpoints doesn't work as expected. Any advice?

import { Hono } from 'hono';
import { CookieStore, Session, sessionMiddleware } from 'hono-sessions';
import { createMiddleware } from 'hono/factory'
import { cors } from 'hono/cors';
import authRoutes from './routes/auth';

export type HonoEnv = {
	Variables: {
		session: Session;
	};
	Bindings: Env;
};

const app = new Hono<HonoEnv>();
const store = new CookieStore();


export const cookieSessionMiddleware = createMiddleware(async (c, next) => {
	const store = new CookieStore()

	const m = sessionMiddleware({
		store,
		encryptionKey: c.env.SESSION_ENCRYPTION_KEY || "your-secure-random-string-here",
		expireAfterSeconds: 604800,
		cookieOptions: {
			sameSite: 'Lax',
			path: '/',
			httpOnly: true,
		},
	})

	return m(c, next)
})

app.use(cors({
	origin: ['http://localhost:5173'],
	allowMethods: ['GET', 'POST', 'PUT', 'DELETE', 'OPTIONS'],
	allowHeaders: ['Content-Type', 'Authorization'],
	credentials: true,
}));

app
	.use('*')
	.use(cookieSessionMiddleware)
app.route('/api', authRoutes);

export default app;	

authRoutes.post('/register', async (c) => {
	const username = (await c.req.json()).username;
	try {
		const env = c.env as Env;
		const existingUser = await env.users.get(username);

		if (existingUser) {
			return c.json({ error: 'Username already registered. Please log in or use a different username.' }, 400);
		}

		// Create a new user
		const user = { username, passKeys: [] };
		// Configure WebAuthn registration options
		const opts = {
			rpID,
			rpName,
			userName: username,
			attestation: 'none',
			supportedAlgorithmIDs: [-7, -257],
			authenticatorSelection: {
				residentKey: 'discouraged' as "discouraged",
			},
			// Exclude existing credentials to prevent duplicates
			excludeCredentials: user.passKeys.map((key: { credentialID: string, transports: AuthenticatorTransportFuture[] }) => ({
				id: key.credentialID,
				transports: key.transports,
			})),
		}

		const options = await generateRegistrationOptions(opts);
		// Store challenge and user data in session for verification
		(c.get('session')).set('challenge', JSON.stringify({ user, options }));
		return c.json(options);
	} catch (err) {
		console.error(err);
		return c.json({ error: `Error registering user ${username}: ${err}` }, 500);
	}
});

authRoutes.post('/register/complete', async (c) => {
	const response = await c.req.json();
	// Retrieve the challenge and user data from the session
	const { options, user } = JSON.parse((c.get('session')).get('challenge'));

I get error :
"TypeError: Cannot destructure property 'options' of 'JSON.parse(...)' as it is null.",
More actions

[FabioDiCeglie]

Having the issue now on mobile on desktop fixed with

sameSite: 'None',

[FabioDiCeglie]

Any help?

[FabioDiCeglie]

fixed with :

advanced: {
defaultCookieAttributes: {
sameSite: 'None',
partitioned: true,
secure: true,
},
},