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: 6 days 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 (10 months ago)
• Default Branch: main
• Last Pushed: 2024-05-02T09:15:39.000Z (6 months ago)
• Last Synced: 2024-10-04T13:31:22.822Z (about 1 month ago)
• Topics: library
• Language: TypeScript
• Homepage: https://www.npmjs.com/package/ssr-only-secrets
• Size: 104 KB
• Stars: 20
• Watchers: 2
• Forks: 1
• Open Issues: 1
• 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.
 |