https://github.com/phryneas/ssr-only-secrets
This package provides a way to pass secrets from Server Components into the SSR-run of Client Components, without them being accessible in the browser.
https://github.com/phryneas/ssr-only-secrets
library
Last synced: about 1 year ago
JSON representation
This package provides a way to pass secrets from Server Components into the SSR-run of Client Components, without them being accessible in the browser.
- Host: GitHub
- URL: https://github.com/phryneas/ssr-only-secrets
- Owner: phryneas
- License: mit
- Created: 2024-01-04T11:01:36.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2025-02-15T16:46:47.000Z (over 1 year ago)
- Last Synced: 2025-04-09T20:03:54.372Z (about 1 year ago)
- Topics: library
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/ssr-only-secrets
- Size: 108 KB
- Stars: 26
- Watchers: 2
- Forks: 3
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# ssr-only-secrets
This package provides a way to pass secrets from Server Components into the SSR-run of Client Components without them being accessible in the browser.
This technique was inspired by [this comment](https://github.com/apollographql/apollo-client-nextjs/issues/85#issuecomment-1753442277) by [@Stevemoretz](https://github.com/Stevemoretz).
Usage:
Install the package
```sh
npm i ssr-only-secrets
```
Generate a jwk-formatted AES-CBC key, e.g. by running
```js
crypto.subtle
.generateKey(
{
name: "AES-CBC",
length: 256,
},
true,
["encrypt", "decrypt"]
)
.then((key) => crypto.subtle.exportKey("jwk", key))
.then(JSON.stringify)
.then(console.log);
```
and store the result in an environment variable, e.g. `SECRET_KEY_VAR`, e.g. by writing it into your `.env.local`.
```env
SECRET_KEY_VAR={"alg":"A256CBC","ext":true,"k":"...","key_ops":["encrypt","decrypt"],"kty":"oct"}
```
Now, you can pass "cloaked secrets" from your Server Components into the SSR-run of your Client Components, without them being accessible in your Client Components in the browser.
## Example
In a Server Component:
```jsx
import { cloakSSROnlySecret } from "ssr-only-secrets";
const MyServerComponent = () => {
const secretValue = "my secret value"
return
}
```
And in a Client Component
```jsx
import { useSSROnlySecret } from "ssr-only-secrets";
const ClientComponent = ({ssrOnlySecret}, "SECRET_KEY_VAR") => {
const value = useSSROnlySecret(ssrOnlySecret);
console.log(value); // during SSR, this logs "my secret value", but in the browser, it logs "undefined"
}
```
Alternatively, you can decrypt the secret in your code by calling `readSSROnlySecret`, e.g. in an Apollo Link:
```jsx
const value = await readSSROnlySecret(ssrOnlySecret)
```
## Functions
| Function | Description |
| --- | --- |
| [cloakSSROnlySecret(secret, encryptionEnvVarName)](https://github.com/phryneas/ssr-only-secrets/blob/main/docs/ssr-only-secrets.cloakssronlysecret.md) |
Encrypts a secret so that it can be passed from Server Components into the SSR-run of Client Components without them being accessible in the browser.
Use useSSROnlySecret or readSSROnlySecret to decrypt the secret in your Client Component.
Only available in Server Components.
|
| [readSSROnlySecret(cloakedSecret, encryptionEnvVarName)](https://github.com/phryneas/ssr-only-secrets/blob/main/docs/ssr-only-secrets.readssronlysecret.md) | Decrypts a secret that was created in a Server Component using cloakSSROnlySecret.
Calling this in a Browser environment will always return undefined.
Only available in Client Components.
|
| [useSSROnlySecret(cloakedSecret, encryptionEnvVarName)](https://github.com/phryneas/ssr-only-secrets/blob/main/docs/ssr-only-secrets.usessronlysecret.md) | Decrypts a secret that was created in a Server Component using cloakSSROnlySecret. If called during SSR, this hook will briefly suspend your component and then return the decrypted secret.
Calling this in a Browser environment will always return undefined.
Only available in Client Components.
|