Skip to main content

Create Client Credentials for GitHub Actions

What you'll accomplish

By the end of this tutorial, you will have:

  • Created secure client credentials for the Webshot Archive API
  • Set up authentication for GitHub Actions to upload screenshots
  • Enabled automated screenshot comparison in pull requests
Screenshot comparison in GitHub pull request

Prerequisites

Before starting this tutorial, ensure you have:

  • A Webshot Archive account (freemium available)
  • Access to your GitHub repository settings
  • Admin permissions for the repository (to add secrets and the Webshot Archive Github App)
Account Types
  • Freemium: Limited uploads per day, perfect for testing
  • Paid Plans: Higher limits and additional features

Overview

This guide walks you through creating Webshot Archive client credentials that allow your GitHub Actions to securely authenticate with the Webshot Archive API. These credentials will be used to upload screenshots and retrieve comparison results.

Step-by-Step Instructions

Step 1: Access the Account Management Page

  1. Navigate to the Webshot Archive account page
  2. Look for the Team Members section in the Team tab
  3. You should see your primary user
New Account Users

If you just created your Webshot Archive account, a default service account may already exist. Check the users list before proceeding to Step 2.

Account users page showing Add User button

Step 2: Create a Service Account

  1. Click the Add User button (located in the top right)
  2. Use the "Add Service Account User (GitHub Actions)" tab
  3. Click Add Service Account to create the service account
Add Service Account User tab with GitHub Actions option

Step 3: Access Credentials

  1. Find your newly created service account in the users list
  2. Click the "View / Add Credentials" button next to the service account
Service account with View/Add Credentials button

Step 4: Generate Client Credentials

  1. Click the "Create Credentials" button
  2. The system will generate a unique Client ID and Client Secret pair
Create Credentials button

Step 5: Securely Store Your Credentials

⚠️ Critical Step: Copy and save both the Client ID and Client Secret immediately.

Generated Client ID and Client Secret
Security Warning

The Client Secret cannot be retrieved once you close this dialog. If you lose it, you'll need to create new credentials.

Recommended storage method:

  • Copy both values to a secure note-taking app
  • Store them temporarily until you add them to GitHub
  • Delete the temporary copy after adding to GitHub

Step 6: Add Credentials to GitHub Repository Secrets

  1. Go to your GitHub repository
  2. Navigate to SettingsSecrets and variablesActions
  3. Click "New repository secret"
  4. Add two secrets:
    • Name: WSA_CLIENT_ID | Value: Your Client ID
    • Name: WSA_CLIENT_SECRET | Value: Your Client Secret
GitHub repository secrets page

Verification

To verify your setup is working:

  1. Check that both secrets are listed in your repository's Actions secrets
  2. Ensure the secret names match exactly: WSA_CLIENT_ID and CLIENT_SECRET
  3. Proceed to the next tutorial to set up the GitHub Action workflow

Troubleshooting

Common Issues

Q: I can't see the "Add User" button

  • Ensure you're on the correct account page: https://www.webshotarchive.com/account/team
  • Check that you're logged in with an account that has admin permissions

Q: I lost my Client Secret

  • No worries! Simply create new credentials by following Steps 3-4 again
  • Update your GitHub repository secrets with the new values

Q: The secrets aren't working in my GitHub Action

  • Verify the secret names are exactly: WSA_CLIENT_ID and CLIENT_SECRET
  • Check that the values were copied correctly (no extra spaces)
  • Ensure the secrets are added to the correct repository

Security Best Practices

  • Never commit credentials directly to your repository
  • Use repository secrets for all sensitive values
  • Rotate credentials periodically
  • Limit service account permissions to only what's necessary
  • Monitor API usage through your Webshot Archive dashboard