importing private env variable wrapped in if (!browser) from +layout.ts

[smblee]

Hello!

I understand the leak risks of private/secret env vars, but I have a use case of creating an amorphous client that can work like someClient.getSomeResource('sdf') with the implementation detail of someClient being different on SSR vs CSR. (SSR using secret key, CSR using client key).

I have the file implemented like so:

someClient.ts

...
const getClient = () => {

   let client;
   if (!browser) {
			client = (await import('some-library-node')).default.initialize(
				(
					await import('$lib/server/env.secrets')
				).SOME_SECRET_KEY
			);
  } else {
            client =  (await import('some-library-js')).default.initialize(
				(
					await import('$lib/client/env')
				).SOME_PUBLIC_KEY
			);
}

and i consume the file in both +layout.server.ts (works fine here, as it's server render only) and +layout.ts (fails here with the below error).

Cannot import $lib/server/env.secrets.ts into client-side code:

What would be folk's suggestion here to get around this?

Thanks

[eltigerchino]

You could use the public env module https://kit.svelte.dev/docs/modules#$env-dynamic-public
You'll need to prefix it with PUBLIC_ (this is configurable), so you can use it server and client-side.

[smblee]

this obv works but i think it does increase the surface area of accidental use of secret variables, whereas mine will still have the security behind compiler, except when I explicitly wraps around a if (browser) block