DeepWiki

06 - Admin-Panel

Relevant source files

The Admin Panel is a password-protected web interface that enables the system owner to generate GitHub App installation access tokens for accessing customer repositories. This panel serves as the manual intervention point in the repository access workflow, allowing the owner to retrieve customer code after payment and GitHub App installation have been completed.

This document covers the admin panel UI (app/admin/page.tsx

), the token generation API (app/api/admin/generate-token/route.ts

), and the manual workflow for accessing customer repositories. For information about the automated repository cloning scripts that can also use these tokens, see Automation System. For details on how customers connect their GitHub accounts, see OAuth Callback Handler.

The admin panel consists of two primary components: a client-side React interface and a server-side token generation API.

Sources: app/admin/page.tsx L1-L363

app/api/admin/generate-token/route.ts L1-L57

The admin panel maintains authentication and token data in React state without any backend session storage:

State VariableTypePurpose
passwordstringUser-entered admin password
isAuthenticatedbooleanAuthentication status (persisted to localStorage)
installationIdstringGitHub App installation ID input
customerEmailstringOptional customer email for repo naming
loadingbooleanToken generation loading state
tokenDataobjectGenerated token, expiry, repositories, and user details
errorstringError messages from API calls

Sources: app/admin/page.tsx L13-L28

The admin panel uses a simple password-based authentication mechanism without sessions or JWTs.

Sources: app/admin/page.tsx L30-L48

app/admin/actions.ts

The authentication mechanism has the following characteristics:

AspectImplementationSecurity Level
Password StorageADMIN_PASSWORD environment variable✓ Server-side only
Client ExposureNEXT_PUBLIC_ADMIN_PASSWORD NOT used✓ Password not in client bundle
Session PersistencelocalStorage flag admin_authenticated⚠️ Client-side only, no server validation
Password TransmissionSent with each token generation request✓ HTTPS-encrypted
Rate LimitingNone implemented⚠️ Vulnerable to brute force

Note: The NEXT_PUBLIC_ADMIN_PASSWORD environment variable mentioned in the high-level diagrams is not actually used in the codebase. The actual implementation uses server-side-only ADMIN_PASSWORD verification.

Sources: app/api/admin/generate-token/route.ts L8-L15

app/admin/page.tsx L38-L47

The owner must manually locate the installation_id from system logs or GitHub webhooks before using the admin panel. The workflow relies on correlation between Stripe payment data and Vercel logs.

Sources: app/admin/page.tsx L165-L204

CLAUDE.md L36-L42

The token generation process involves three GitHub API calls executed server-side:

Sources: app/api/admin/generate-token/route.ts L4-L57

lib/github-app.ts

Request Body:

{  "installationId": "12345678",  "password": "admin_password_value"}

Successful Response (200):

{  "token": "ghs_xxxxxxxxxxxx",  "expiresAt": "2024-01-15T12:00:00Z",  "repositories": [    {      "id": 123456,      "name": "customer-repo",      "full_name": "customer/customer-repo",      "description": "Repository description",      "private": true,      "html_url": "https://github.com/customer/customer-repo"    }  ],  "user": {    "username": "customer",    "email": "customer@example.com",    "name": "Customer Name"  }}

Error Response (401):

{  "error": "Unauthorized"}

Error Response (400):

{  "error": "Installation ID is required"}

Sources: app/api/admin/generate-token/route.ts L6-L44

When a token is successfully generated, the admin panel displays three main sections:

Sources: app/admin/page.tsx L217-L360

The admin panel implements a repository naming convention for creating private mirrors in the owner's account:

InputProcessingOutput Repository Name
Customer Email: user@example.comReplace @ with _, . with _, lowercaseuser_example_com-repo-name
Customer Email: (empty)Use GitHub username from APIgithubuser-repo-name
Customer Email: (not provided)Use GitHub email from APIemail_domain_com-repo-name

The formatRepoName() function at app/admin/page.tsx L91-L98

implements this logic:

const formatRepoName = (repoName: string) => {  const email = customerEmail || tokenData?.user?.email || tokenData?.user?.username  if (!email) return repoName    const emailPart = email.replace(/@/g, "_").replace(/\./g, "_").toLowerCase()  return `${emailPart}-${repoName}`}

Sources: app/admin/page.tsx L91-L98

app/admin/page.tsx L192-L203

The admin panel provides one-click copying for multiple use cases:

Button LabelCopied ContentPurpose
Copy (token field)Raw installation access tokenManual git operations
Clonegit clone https://x-access-token:{token}@github.com/{full_name}.gitClone customer repository
Clone to PersonalMulti-line bash scriptClone, re-init, push to klaudioz/{email-reponame}
URLhttps://github.com/{full_name}Open in browser

The "Clone to Personal" command generates a complete bash pipeline:

git clone https://x-access-token:{token}@github.com/{customer/repo}.git temp-repo && \cd temp-repo && \rm -rf .git && \git init && \git add . && \git commit -m "Initial commit" && \gh repo create klaudioz/{customer_email_com-repo} --private --source=. --push

Sources: app/admin/page.tsx L87-L89

app/admin/page.tsx L268-L289

app/admin/page.tsx L319-L342

The owner's manual process for accessing customer repositories follows these steps:

Sources: CLAUDE.md L180-L184

app/admin/page.tsx L1-L363

Installation access tokens generated by the admin panel have specific security constraints:

PropertyValueEnforced By
Maximum Lifespan1 hourGitHub API
PermissionsRead-only: Contents, MetadataGitHub App configuration
ScopeOnly repositories selected during installationCustomer choice during OAuth
RevocationAutomatic after expiryGitHub
RegenerationOwner must use admin panel againNo refresh token mechanism

The short lifespan minimizes security exposure if a token is leaked. The owner must generate a new token for each access session.

Sources: app/admin/page.tsx L229

lib/github-app.ts

The admin panel handles several error conditions:

Error ConditionHTTP StatusError MessageUser Action
Invalid password401"Unauthorized"Re-enter password
Missing installation_id400"Installation ID is required"Enter installation_id
Invalid installation_id500GitHub API error messageVerify installation_id in logs
Token generation failure500"Failed to generate token"Check GitHub App credentials
Network failureN/ACaught in try/catchRetry request

Sources: app/api/admin/generate-token/route.ts L45-L56

app/admin/page.tsx L80-L84

While the admin panel provides a manual interface for token generation, the same /api/admin/generate-token endpoint is also used by automated scripts:

The automation scripts extract the installation_id from ntfy notifications and call the same API endpoint with the ADMIN_PASSWORD to generate tokens programmatically. For details on the automation pipeline, see Repository Cloning Automation.

Sources: app/api/admin/generate-token/route.ts L1-L57

CLAUDE.md L153-L167

The admin panel uses browser localStorage for session persistence:

// On successful authenticationlocalStorage.setItem("admin_authenticated", "true")// On page loaduseEffect(() => {  const authState = localStorage.getItem("admin_authenticated")  if (authState === "true") {    setIsAuthenticated(true)  }}, [])// On logoutlocalStorage.removeItem("admin_authenticated")

Characteristics:

  • No server-side session validation
  • Persists across browser tabs
  • Cleared on logout or browser data clear
  • No automatic expiry mechanism

Sources: app/admin/page.tsx L30-L36

app/admin/page.tsx L50-L55

The logout handler at app/admin/page.tsx L50-L55

performs four actions:

  1. Sets isAuthenticated to false (hides admin UI)
  2. Removes admin_authenticated from localStorage
  3. Clears tokenData state (removes sensitive token data)
  4. Clears installationId input field

This ensures that sensitive data is not left in memory or browser storage after the owner finishes their session.

Sources: app/admin/page.tsx L50-L55

The admin panel relies on the following external components:

ComponentPurposeLocation
shadcn/ui componentsUI primitives (Button, Input, Card, Alert)components/ui/*
Lucide React iconsVisual icons (Copy, Key, Lock, GitBranch, LogOut)lucide-react package
verifyPassword actionServer-side password verificationapp/admin/actions.ts
lib/github-app.ts functionsGitHub App JWT and token generationlib/github-app.ts
Environment variablesADMIN_PASSWORD, GITHUB_APP_ID, GITHUB_PRIVATE_KEYVercel environment

Sources: app/admin/page.tsx L1-L10

app/api/admin/generate-token/route.ts L2

Refresh this wiki

Last indexed: 23 November 2025 (922b35)

On this page

Ask Devin about godeep.wiki-jb

Syntax error in text

mermaid version 11.4.1

06 - Admin-Panel | DeepWiki | godeep.wiki