Skip to content
SaltyKeys.js

Quick Start

The two-phase workflow

Section titled “The two-phase workflow”

Using SaltyKeys involves two separate steps:

  1. Offline (key generation) — Run generateSaltedKey() once in the console to produce your salted key
  2. Online (key retrieval) — Embed the salted key in your pen and call getApiKey() at runtime to decode it

The original API key never sits in your pen’s code in plain text.

Step-by-step

Section titled “Step-by-step”

  1. Open your pen on CodePen and add SaltyKeys.js (see Installation).

  2. Generate your salted key — open the browser console while viewing your pen and run:

    const saltedKey = SaltyKeys.generateSaltedKey('YOUR_ACTUAL_API_KEY');
    console.log('Salted key:', saltedKey);

    Copy the logged value. This is your salted key — it encodes the pen ID, a timestamp, and a nonce.

  3. Store the salted key in your pen — replace the call above with:

    const saltedKey = 'PASTE_YOUR_SALTED_KEY_HERE';
    const apiKey = SaltyKeys.getApiKey(saltedKey);
    

    if (apiKey) {
      // Use apiKey with your API service
      initMyService(apiKey);
    } else {
      console.warn('Could not retrieve API key — wrong pen or invalid key.');
    }

  4. Test it — save the pen and reload. getApiKey() should return your original key. If you copy the salted key into a different pen, getApiKey() will return null because the pen ID won’t match.

Complete example

Section titled “Complete example”
// Paste SaltyKeys.js here, or load it as a script


// Replace with your salted key (generated in the console of this exact pen)
const SALTED_KEY = 'your-generated-salted-key';


const apiKey = SaltyKeys.getApiKey(SALTED_KEY);


if (apiKey) {
  fetch(`https://api.example.com/data?key=${encodeURIComponent(apiKey)}`)
    .then(res => res.json())
    .then(data => console.log(data));
} else {
  console.error('SaltyKeys: unable to retrieve API key.');
}

Try it live:

What’s next?

Section titled “What’s next?”