api_keys 0.2.1 → 0.4.0

data/app/views/api_keys/keys/_secret_keys.html.erb

@@ -0,0 +1,39 @@
+<%# Partial for displaying secret keys section %>
+<%# Locals: active_keys (Active secret keys), inactive_keys (Inactive secret keys) %>
+
+<section class="api-keys-section api-keys-secret-section" aria-labelledby="secret-keys-heading">
+  <h2 id="secret-keys-heading">Secret Keys</h2>
+  <p class="api-keys-section-description">
+    Keep these private. Never expose in client-side code or share publicly.
+  </p>
+
+  <div class="api-keys-table-wrapper">
+    <% all_keys = active_keys + inactive_keys %>
+    <% if all_keys.any? %>
+      <table>
+        <thead>
+          <tr>
+            <th>Name</th>
+            <th>API Key</th>
+            <th>Created</th>
+            <th>Expires</th>
+            <th>Last Used</th>
+            <th>Permissions</th>
+            <th>Actions</th>
+          </tr>
+        </thead>
+        <tbody>
+          <% active_keys.each do |key| %>
+            <%= render partial: 'api_keys/keys/key_row', locals: { key: key } %>
+          <% end %>
+
+          <% inactive_keys.each do |key| %>
+            <%= render partial: 'api_keys/keys/key_row', locals: { key: key, inactive: true } %>
+          <% end %>
+        </tbody>
+      </table>
+    <% else %>
+      <%= render partial: 'api_keys/keys/empty_state', locals: { message: "No secret keys yet." } %>
+    <% end %>
+  </div>
+</section>

data/app/views/api_keys/keys/_show_token.html.erb

@@ -3,25 +3,29 @@
 
 <h2>Save your key</h2>
 
-<p>Please save your secret key in a safe place since <strong>you won't be able to view it again</strong>. Keep it secure, as anyone with your API key can make requests on your behalf. If you do lose it, you'll need to generate a new one.</p>
+<% if api_key.public_key_type? %>
+  <p>Here's your <%= api_key.key_type.humanize.downcase %> key. This key is designed to be embedded in client-side applications. You can view it again anytime from your dashboard.</p>
+<% else %>
+  <p>Please save your API key in a safe place since <strong>you won't be able to view it again</strong>. Keep it secure, as anyone with your API key can make requests on your behalf. If you lose it, you'll need to generate a new one.</p>
+<% end %>
 
 <p>
-  <%= link_to api_keys.security_best_practices_path, class: "text-primary api-keys-align-center" do %>
+  <%= link_to security_best_practices_path, class: "text-primary api-keys-align-center" do %>
     Learn more about API key best practices&nbsp;
     <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M15 5a1 1 0 1 1 0-2h5a1 1 0 0 1 1 1v5a1 1 0 1 1-2 0V6.414l-5.293 5.293a1 1 0 0 1-1.414-1.414L17.586 5H15ZM4 7a3 3 0 0 1 3-3h3a1 1 0 1 1 0 2H7a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1v-3a1 1 0 1 1 2 0v3a3 3 0 0 1-3 3H7a3 3 0 0 1-3-3V7Z" clip-rule="evenodd"></path></svg>
   <% end %>
 </p>
 
 
-<div style="padding: 1em; margin: 1em 0; border-radius: 4px;">
+<div class="api-keys-token-panel">
   <div class="card bd-primary">
     <div class="row">
       <div class="col-7 is-vertical-align is-center">
-        <pre id="api-key-token" style="word-wrap: break-word;"><%= plaintext_token %></pre>
+        <pre id="api-key-token" class="api-keys-token-value"><%= plaintext_token %></pre>
       </div>
 
       <div class="col is-vertical-align is-center">
-        <button id="copy-api-key-button" onclick="copyTokenToClipboard()" class="button primary api-keys-align-center">
+        <button id="copy-api-key-button" type="button" class="button primary api-keys-align-center btn-copy-new-token">
           <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M7 5a3 3 0 0 1 3-3h9a3 3 0 0 1 3 3v9a3 3 0 0 1-3 3h-2v2a3 3 0 0 1-3 3H5a3 3 0 0 1-3-3v-9a3 3 0 0 1 3-3h2V5Zm2 2h5a3 3 0 0 1 3 3v5h2a1 1 0 0 0 1-1V5a1 1 0 0 0-1-1h-9a1 1 0 0 0-1 1v2ZM5 9a1 1 0 0 0-1 1v9a1 1 0 0 0 1 1h9a1 1 0 0 0 1-1v-9a1 1 0 0 0-1-1H5Z" clip-rule="evenodd"></path></svg>
           <span class="api-keys-button-text">Copy</span>
         </button>
@@ -32,7 +36,7 @@
 
 
   <% if api_key.scopes.present? %>
-    <div style="margin-top: 2em;">
+    <div class="api-keys-token-scopes">
       <p><strong>Permissions</strong></p>
 
       <% if api_key.scopes.present? %>
@@ -45,44 +49,3 @@
     </div>
   <% end %>
 </div>
-
-<%# Simple JavaScript for copy-to-clipboard functionality %>
-<%# Ensure this script is loaded only once if rendering multiple components %>
-<script>
-function copyTokenToClipboard() {
-  const tokenElement = document.getElementById('api-key-token');
-  const copyButton = document.getElementById('copy-api-key-button');
-  const buttonTextElement = copyButton.querySelector('.api-keys-button-text'); // Target the span containing the text
-  const originalButtonText = buttonTextElement.innerHTML; // Store original HTML
-
-  if (navigator.clipboard && tokenElement && copyButton && buttonTextElement) {
-    navigator.clipboard.writeText(tokenElement.textContent || '').then(() => {
-      buttonTextElement.innerHTML = 'Copied!'; // Update text
-      copyButton.classList.add('success'); // Optional: Add class for styling
-      setTimeout(() => {
-        buttonTextElement.innerHTML = originalButtonText; // Revert text
-        copyButton.classList.remove('success'); // Optional: Remove class
-      }, 2000);
-    }).catch(err => {
-      buttonTextElement.innerHTML = 'Failed'; // Update text on error
-      copyButton.classList.add('error'); // Optional: Add class for styling
-      console.error('Failed to copy text: ', err);
-      setTimeout(() => {
-        buttonTextElement.innerHTML = originalButtonText; // Revert text
-        copyButton.classList.remove('error'); // Optional: Remove class
-      }, 2000);
-    });
-  } else {
-    // Fallback or indicate unavailability more clearly if needed
-    buttonTextElement.innerHTML = 'Cannot Copy';
-    copyButton.classList.add('error'); // Optional: Add class for styling
-    console.warn('Clipboard API not available or element missing.');
-    setTimeout(() => {
-      buttonTextElement.innerHTML = originalButtonText; // Revert text
-      copyButton.classList.remove('error'); // Optional: Remove class
-    }, 2000);
-  }
-}
-// Automatically try to copy when the partial is rendered, if desired?
-// document.addEventListener('DOMContentLoaded', copyTokenToClipboard); // Example
-</script> 

data/app/views/api_keys/keys/_token_display.html.erb

@@ -0,0 +1,11 @@
+<%# Partial for displaying an API key token with optional show/copy functionality %>
+<%# Locals: key (required) - The ApiKey record %>
+
+<% if key.public_key_type? && key.viewable_token.present? %>
+  <span class="token-masked"><code><%= key.masked_token %></code></span>
+  <span class="token-full" hidden><code class="api-keys-token-break"><%= key.viewable_token %></code></span>
+  <button type="button" class="btn-show-token" title="Show full token">Show</button>
+  <button type="button" class="btn-copy-token" title="Copy to clipboard" data-token="<%= key.viewable_token %>" hidden>Copy</button>
+<% else %>
+  <code><%= key.masked_token %></code>
+<% end %>

data/app/views/api_keys/keys/index.html.erb

@@ -7,7 +7,7 @@
     <div class="col api-keys-align-center is-right">
       <%= link_to new_key_path, class: "button primary api-keys-align-center", role: "button" do %>
         <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M12 5a1 1 0 0 1 1 1v5h5a1 1 0 1 1 0 2h-5v5a1 1 0 1 1-2 0v-5H6a1 1 0 1 1 0-2h5V6a1 1 0 0 1 1-1Z" clip-rule="evenodd"></path></svg>
-        <span>&nbsp;Create new secret key</span>
+        <span>&nbsp;Create new API key</span>
       <% end %>
     </div>
 
@@ -15,12 +15,44 @@
 
 <div>
 
-  <p>Do not share your API key with others or expose it in the browser or other client-side code. <%= link_to api_keys.security_best_practices_path, class: "text-primary api-keys-align-center" do %>
-    Learn more&nbsp;
-    <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M15 5a1 1 0 1 1 0-2h5a1 1 0 0 1 1 1v5a1 1 0 1 1-2 0V6.414l-5.293 5.293a1 1 0 0 1-1.414-1.414L17.586 5H15ZM4 7a3 3 0 0 1 3-3h3a1 1 0 1 1 0 2H7a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1v-3a1 1 0 1 1 2 0v3a3 3 0 0 1-3 3H7a3 3 0 0 1-3-3V7Z" clip-rule="evenodd"></path></svg>
-  <% end %>
+  <% if key_types_feature_enabled? %>
+    <% has_publishable_keys = @publishable_keys.any? || @inactive_publishable_keys.any? %>
+
+    <p class="api-keys-info-text">
+      <% if has_publishable_keys %>
+        <strong>Secret keys</strong> should never be shared or exposed publicly.
+        <strong>Publishable keys</strong> can be safely embedded in client applications.
+      <% else %>
+        Do not share your API key with others or expose it in the browser or other client-side code.
+      <% end %>
+      <%= link_to security_best_practices_path, class: "text-primary api-keys-align-center" do %>
+        Learn more&nbsp;
+        <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M15 5a1 1 0 1 1 0-2h5a1 1 0 0 1 1 1v5a1 1 0 1 1-2 0V6.414l-5.293 5.293a1 1 0 0 1-1.414-1.414L17.586 5H15ZM4 7a3 3 0 0 1 3-3h3a1 1 0 1 1 0 2H7a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1v-3a1 1 0 1 1 2 0v3a3 3 0 0 1-3 3H7a3 3 0 0 1-3-3V7Z" clip-rule="evenodd"></path></svg>
+      <% end %>
+    </p>
 
-  <%# Render the reusable table partial %>
-  <%= render partial: 'keys_table', locals: { active_keys: @api_keys, inactive_keys: @inactive_api_keys } %>
+    <%# Render secret keys section first (primary use case) %>
+    <%= render partial: 'secret_keys', locals: {
+      active_keys: @secret_keys,
+      inactive_keys: @inactive_secret_keys
+    } %>
+
+    <%# Only render publishable keys section if there are any %>
+    <% if has_publishable_keys %>
+      <%= render partial: 'publishable_keys', locals: {
+        active_keys: @publishable_keys,
+        inactive_keys: @inactive_publishable_keys
+      } %>
+    <% end %>
+
+  <% else %>
+    <p>Do not share your API key with others or expose it in the browser or other client-side code. <%= link_to security_best_practices_path, class: "text-primary api-keys-align-center" do %>
+      Learn more&nbsp;
+      <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M15 5a1 1 0 1 1 0-2h5a1 1 0 0 1 1 1v5a1 1 0 1 1-2 0V6.414l-5.293 5.293a1 1 0 0 1-1.414-1.414L17.586 5H15ZM4 7a3 3 0 0 1 3-3h3a1 1 0 1 1 0 2H7a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1v-3a1 1 0 1 1 2 0v3a3 3 0 0 1-3 3H7a3 3 0 0 1-3-3V7Z" clip-rule="evenodd"></path></svg>
+    <% end %>
+
+    <%# Render the reusable table partial (legacy mode - single table) %>
+    <%= render partial: 'keys_table', locals: { active_keys: @api_keys, inactive_keys: @inactive_api_keys } %>
+  <% end %>
 
-</div>
+</div>

data/app/views/api_keys/keys/show.html.erb

@@ -4,9 +4,9 @@
   <%= render partial: 'show_token', locals: { api_key: @api_key, plaintext_token: @plaintext_token } %>
 
   <%# Add navigation links %>
-  <p style="margin-top: 2em;">
+  <p class="api-keys-show-footer">
     <%= link_to ApiKeys.configuration.return_text, ApiKeys.configuration.return_url, class: "button outline" %>
     <%= link_to "All API Keys", keys_path, class: "button" %>
   </p>
 
-</div>
+</div>

data/app/views/api_keys/security/best_practices.html.erb

@@ -1,70 +1,96 @@
 <header>
-  <h1>API Key Security Best Practices</h1>
-  <p>Protecting your API keys is crucial for maintaining the security and integrity of your account and data.</p>
+  <h1>API Key Security</h1>
+  <p>Protecting your API keys is crucial for maintaining the security of your account and data.</p>
 </header>
 
-<article class="col-5">
+<article class="col-8">
 
-  <section>
-    <h3>1. Treat API Keys Like Passwords</h3>
-    <p>Your API keys grant access to your account and potentially sensitive operations. Handle them with the same level of security you would apply to your account password or other critical credentials.</p>
-  </section>
+  <% if key_types_feature_enabled? %>
+    <section class="api-keys-section">
+      <h2>Understanding Key Types</h2>
 
-  <section>
-    <h3>2. Use Unique Keys for Different Applications & Environments</h3>
-    <p>Generate distinct API keys for different applications, services, or integrations that need access. If a key for one application is compromised, you can revoke it without disrupting others. Use separate keys for development, staging, and production environments.</p>
-    <p><em>Tip:</em> Use the "Name" field when creating keys to easily identify their purpose (e.g., "Production Zapier Integration", "Staging iOS App").</p>
-  </section>
+      <h3>Secret Keys</h3>
+      <p>Secret keys may grant sensitive or broad access, depending on their configured permissions, and must be treated like passwords.</p>
+      <ul>
+        <li><strong>Never expose</strong> in client-side code (browsers, mobile apps, desktop apps)</li>
+        <li><strong>Never commit</strong> to version control (Git, etc.)</li>
+        <li><strong>Store securely</strong> using environment variables or secrets management</li>
+        <li><strong>Can be revoked</strong> immediately if compromised</li>
+      </ul>
 
-  <section>
-    <h3>3. Never Expose Keys in Client-Side Code</h3>
-    <p><strong>Never</strong> embed API keys directly in mobile apps (iOS, Android), browser-side JavaScript, desktop applications, or any code that resides on a user's device. Exposed keys can be easily extracted by malicious actors.</p>
-    <p><strong>Solution:</strong> Route API requests through your own backend server. Your server can securely store and use the API key to communicate with the target API on behalf of the client.</p>
-  </section>
+      <h3>Publishable Keys</h3>
+      <p>Publishable keys are intentionally exposed identifiers. They are suitable for client-side use <strong>only when every configured permission is safe for an untrusted public client</strong>.</p>
+      <ul>
+        <li><strong>Assume anyone can copy and abuse them</strong> from browser JavaScript, mobile apps, or public code</li>
+        <li><strong>Grant only public-safe operations</strong> and enforce authorization server-side for every permission</li>
+        <li><strong>Always visible</strong> &mdash; you can view the full key anytime in your dashboard</li>
+        <li><strong>Cannot be revoked individually</strong> &mdash; maintain an application-level disable/replacement procedure</li>
+      </ul>
+    </section>
+  <% end %>
 
   <section>
-    <h3>4. Never Commit Keys to Version Control (e.g., Git)</h3>
-    <p>Committing keys to your source code repository (like Git, Mercurial, etc.) is a common and dangerous mistake. Even in private repositories, accidental pushes or repository breaches can leak your keys.</p>
-    <p><strong>Solution:</strong> Store keys in environment variables or use a dedicated secrets management system. Access the key in your code via these secure methods.</p>
-  </section>
+    <h2>Essential Practices</h2>
 
-  <section>
-    <h3>5. Securely Store Keys on Your Backend</h3>
-    <ul>
-      <li><strong>Environment Variables:</strong> The simplest secure method for many applications. Set an environment variable (e.g., `YOUR_SERVICE_API_KEY`) on your server and access it in your code (e.g., `ENV['YOUR_SERVICE_API_KEY']` in Ruby/Rails).</li>
-      <li><strong>Secrets Management Services:</strong> For more robust needs, especially in production or team environments, use dedicated services like HashiCorp Vault, AWS Secrets Manager, Google Secret Manager, Doppler, etc. These provide encrypted storage, access control, auditing, and often automated rotation capabilities.</li>
-      <li><strong>Encrypted Configuration Files:</strong> If using configuration files, ensure they are encrypted (e.g., Rails encrypted credentials `config/credentials.yml.enc` and `Rails.application.credentials`). <%= link_to "More info here", "https://guides.rubyonrails.org/security.html#custom-credentials", target: "_blank", rel: "noopener noreferrer", class: "text-primary" %>.</li>
-    </ul>
+    <h3>Treat Secret Keys Like Passwords</h3>
+    <p>Your API keys grant access to your account. Handle them with the same care you would apply to your account password.</p>
+
+    <h3>Use Separate Keys for Different Purposes</h3>
+    <p>Create distinct keys for different applications and environments. If one key is compromised, you can revoke it without disrupting others.</p>
+    <p><em>Tip:</em> Use descriptive names like "Production Backend" or "Staging iOS App" to easily identify each key's purpose.</p>
+
+    <% unless key_types_feature_enabled? %>
+      <h3>Never Expose Keys in Client-Side Code</h3>
+      <p><strong>Never</strong> embed API keys in mobile apps, browser JavaScript, or desktop applications. Exposed keys can be easily extracted by malicious actors.</p>
+      <p><strong>Solution:</strong> Route API requests through your own backend server, which can securely store and use the API key.</p>
+    <% end %>
   </section>
 
   <section>
-    <h3>6. Implement the Principle of Least Privilege (Scopes)</h3>
-    <p>If the API service supports it (and this `api_keys` gem allows for scopes), create keys with only the minimum permissions (scopes) required for their specific task. Avoid using a key with full access if only read access is needed.</p>
-    <p><em>Note:</em> Scope availability and enforcement depend on how the host application integrates and utilizes the `scopes` attribute provided by this gem.</p>
+    <h2>Secure Storage</h2>
+
+    <h3>Environment Variables</h3>
+    <p>The simplest secure method. Set an environment variable on your server:</p>
+    <pre><code># In your shell or deployment config
+export YOUR_SERVICE_API_KEY="sk_..."
+
+# Access in Ruby
+ENV['YOUR_SERVICE_API_KEY']</code></pre>
+
+    <h3>Rails Encrypted Credentials</h3>
+    <p>For Rails applications, use encrypted credentials:</p>
+    <pre><code># Edit credentials
+bin/rails credentials:edit
+
+# Access in code
+Rails.application.credentials.your_service_api_key</code></pre>
+    <p><%= link_to "Rails Security Guide", "https://guides.rubyonrails.org/security.html#custom-credentials", target: "_blank", rel: "noopener noreferrer", class: "text-primary" %></p>
+
+    <h3>Secrets Management Services</h3>
+    <p>For production environments, consider dedicated services like HashiCorp Vault, AWS Secrets Manager, or Google Secret Manager.</p>
   </section>
 
   <section>
-    <h3>7. Monitor Usage and Rotate Keys Regularly</h3>
-    <ul>
-      <li><strong>Monitor Usage:</strong> Regularly check API usage logs or dashboards (if provided by the service or your monitoring tools). Look for unexpected spikes in activity or requests from unusual locations, which could indicate a compromised key.</li>
-      <li><strong>Rotate Keys:</strong> Periodically generate new keys and revoke old ones (key rotation). This limits the window of opportunity for attackers if a key is ever leaked undetected. How often you rotate depends on your security requirements (e.g., every 90 days, annually).
-        <br><em>Tip:</em> This dashboard allows creating multiple keys, facilitating rotation. Create a new key, update your application(s), verify they work, and then revoke the old key.</li>
-      <li><strong>Revoke Immediately if Compromised:</strong> If you suspect a key has been leaked or compromised, revoke it immediately using the "Revoke" button on your keys dashboard.</li>
-    </ul>
+    <h2>Monitoring &amp; Rotation</h2>
+
+    <h3>Monitor Usage</h3>
+    <p>Regularly check for unexpected activity spikes or requests from unusual locations, which could indicate a compromised key.</p>
+
+    <h3>Rotate Secret Keys Periodically</h3>
+    <p>Generate new keys and revoke old ones on a regular schedule (e.g., every 90 days). This limits exposure if a key is leaked undetected.</p>
+    <p><em>Tip:</em> Create a new key first, update your application, verify it works, then revoke the old key.</p>
+
+    <h3>Revoke Immediately if Compromised</h3>
+    <p>If you suspect a key has been leaked, revoke it immediately from your dashboard.</p>
   </section>
 
   <section>
-    <h3>8. Use HTTPS Exclusively</h3>
-    <p>Ensure all API requests are made over HTTPS to encrypt the connection and prevent eavesdropping. Transmitting keys over unencrypted HTTP is highly insecure.</p>
+    <h2>Always Use HTTPS</h2>
+    <p>Ensure all API requests are made over HTTPS. Transmitting keys over unencrypted HTTP exposes them to eavesdropping.</p>
   </section>
 
   <hr>
 
-  <p>By following these best practices, you significantly reduce the risk associated with API key management.</p>
-
-  <%# Link back to the keys index if appropriate %>
-  <% if defined?(api_keys.keys_path) %>
-    <p><%= link_to "Back to API Keys", api_keys.keys_path, class: "text-primary" %></p>
-  <% end %>
+  <p><%= link_to "Back to API Keys", keys_path, class: "text-primary" %></p>
 
-</article>
+</article>