Implement Password-Protected Content for Static Pages (like Next.js)

// In getStaticProps
const post = await getPost(slug);
let content = JSON.stringify(post.content);
let passwordInfo: PasswordInfo = {};

// Is this post for my eyes only?
if (post.protected) {
  // Get the password from Notion
  const password = await getPassword(post.passwordId);

  // Encrypt the content with CryptoJS
  content = CryptoJS.AES.encrypt(content, password.value).toString();

  // Save hint and password length (but not the actual password!)
  passwordInfo = {
    hint: password.hint,
    length: password.value.length
  };
}

return { props: { content, passwordInfo } };

// A super simple store for our password state
const usePasswordStore = create((set) => ({
  password: '',
  content: null,
  error: null,
  setPassword: (pwd) => set({ password: pwd }),
  setContent: (content) => set({ content, error: null }),
  setError: (error) => set({ error })
}));

function PasswordProtect({ encrypted, passwordInfo }) {
  const { password, setPassword, setContent, error, setError } = usePasswordStore();

  // When password reaches the right length, try to decrypt
  useEffect(() => {
    if (password.length === passwordInfo.length) {
      try {
        // The moment of truth! 🔥
        const bytes = CryptoJS.AES.decrypt(encrypted, password);
        const decrypted = bytes.toString(CryptoJS.enc.Utf8);

        // If we get here, the password worked!
        setContent(JSON.parse(decrypted));

        // Track it for analytics (I'm curious who's trying to see my weird posts)
        trackEvent({
          event: "password_success",
          page: window.location.pathname
        });
      } catch {
        // Wrong password, better luck next time
        setError('INCORRECT_PASSWORD');

        // Also track failed attempts (for science, of course)
        trackEvent({
          event: "password_fail",
          page: window.location.pathname
        });
      }
    }
  }, [password]);

  return (
    <div className="password-container">
      <h3>This content is password-protected</h3>
      <p>Hint: {passwordInfo.hint || "No hint for you! 😜"}</p>

      <PasswordField
        value={password}
        onChange={(e) => setPassword(e.target.value)}
        maxLength={passwordInfo.length}
        error={error}
      />
    </div>
  );
}

function PasswordField({ value, onChange, maxLength, error }) {
  // Track focus state for visual feedback
  const [focused, setFocused] = useState(false);
  // Track selection for highlighting
  const [selection, setSelection] = useState({ start: 0, end: 0 });

  return (
    <div className={`field ${focused ? 'focused' : ''}`}>
      {/* The pretty visual layer */}
      <div className="visual-container">
        {/* Show characters that have been typed */}
        {value.split('').map((char, i) => (
          <span key={i} className="char">*</span>
        ))}

        {/* Show the blinking cursor when focused */}
        {focused && <span className="cursor" />}

        {/* Show placeholders for remaining characters */}
        {Array.from({ length: maxLength - value.length }).map((_, i) => (
          <span key={i} className="placeholder"></span>
        ))}
      </div>

      {/* The real input that captures keystrokes (but is invisible) */}
      <input
        type="text"
        value={value}
        onChange={onChange}
        onFocus={() => setFocused(true)}
        onBlur={() => setFocused(false)}
        onSelect={(e) => {
          // Update selection highlight when text is selected
          setSelection({
            start: e.currentTarget.selectionStart || 0,
            end: e.currentTarget.selectionEnd || 0
          });
        }}
        maxLength={maxLength}
        className="hidden-input"
      />

      {/* Show error message if needed */}
      {error && <p className="error">Nice try, but that's not right! 😉</p>}
    </div>
  );
}

function BlogPost({ content, passwordInfo }) {
  const { content: decrypted } = usePasswordStore();

  // Show decrypted content if available
  if (decrypted) {
    return <BlogContent content={decrypted} />;
  }

  // Show password form if protection is enabled
  if (passwordInfo.length > 0) {
    return <PasswordProtect encrypted={content} passwordInfo={passwordInfo} />;
  }

  // Show regular content if no protection
  return <BlogContent content={JSON.parse(content)} />;
}