Welcome to your step-by-step guide on utilizing PageCrypt—an elegant solution designed to add client-side password protection to your Single Page Applications (SPAs) and HTML files. With the power of the native Web Crypto API, PageCrypt enhances both user experience and security, allowing you to secure your digital content effortlessly. Let’s dive in!

Getting Started

Before you embark on your encryption journey, ensure you’re using Node.js version 16 or newer. Ready? Let’s install PageCrypt:

npm i -D pagecrypt

Four Ways to Use PageCrypt

PageCrypt offers various methods for implementation. Here’s how you can get started:

1. Encrypt HTML in Modern Browsers

The encryptHTML() and generatePassword() functions allow you to encrypt HTML strings in any ESM compatible environment that supports the Web Crypto API:

import encryptHTML from 'pagecryptcore';

const inputHTML = `


  


  Secret

`;

const encryptedHTML = await encryptHTML(inputHTML, password);

Think of this process as a magical vault. You place your HTML string inside the vault (encryptHTML) and lock it with a key (password). Only the right key can unlock and access the content within, ensuring that your secrets stay safe!

2. Node.js API

If you’re working in a Node.js environment, you can use the PageCrypt Node.js build to read and write directly from and to the file system:

import encrypt from 'pagecrypt';

await encrypt('index.html', 'encrypted.html', password);

This method is like hiring a secure courier to deliver your sensitive packages (HTML files) directly to the destination (encrypted files), ensuring safe transportation without any risk of interception.

3. Command-Line Interface (CLI)

Encrypt your files swiftly with the following CLI command:

npx pagecrypt src dest [password] [options]

Imagine it as shouting an order at a delivery service: Simply give them the source (src), destination (dest), and your password—voilà, your file is encrypted!

4. Automate PageCrypt in Your Build Process

You can seamlessly integrate PageCrypt into your build process using the Node.js API or the CLI to automatically secure your SPAs:

npm i -D pagecrypt

// package.json
{
  "devDependencies": {
    "pagecrypt": "^5.0.0"
  },
  "scripts": {
    "build": "...",
    "postbuild": "pagecrypt index.html encrypted.html password"
  }
}

Deploying an Encrypted SPA or Website

PageCrypt allows you to host a single encrypted HTML file anywhere—bypassing the necessity for server access to utilize password protection. Share your private apps and websites on any static hosting platform, often at zero cost!

Creating a Magic Link for Enhanced UX

To facilitate user access to protected pages, create a magic link by appending # followed by your password to the deployment URL:

Example: https://link-to-your-page#password

This magic link operates like a secret handshake, allowing your users immediate access while maintaining a level of security!

Security Considerations

• Be cautious about what you publish to the open internet, even when encrypted.
• Magic link passwords may remain in browser history—consider using secure sharing methods.
• Session storage retains encryption keys until the browser is restarted.
• Only share magic links through secure channels, such as E2E-encrypted chats and emails.

Troubleshooting Your PageCrypt Experience

If you experience issues, here are some ideas to resolve them:

• Double-check your Node.js version—make sure it’s 16 or newer.
• Ensure that your input HTML is well-formed and contains the proper structure.
• Verify your password strength by adjusting the character set if needed.
• If any errors arise during encryption, recheck your command syntax in the CLI.

For more insights, updates, or to collaborate on AI development projects, stay connected with fxis.ai.

Final Remarks

At fxis.ai, we believe that such advancements are crucial for the future of AI, as they enable more comprehensive and effective solutions. Our team is continually exploring new methodologies to push the envelope in artificial intelligence, ensuring that our clients benefit from the latest technological innovations.