GitHub Authentication

VibeMap Landing Page with GitHub Sign In Button
VibeMap landing page showing the Sign in with GitHub button

GitHub Sign Up Process

Sign Up Steps

  1. Navigate to the landing page

  2. Click "Sign in with GitHub" button

  3. Authorize VibeMap in GitHub popup

  4. Grant repository access permissions

  5. Account is automatically created and logged in

GitHub OAuth Flow

  1. Initial Click: Click "Sign in with GitHub" button

  2. GitHub Popup: GitHub authorization popup appears

  3. Account Selection: Choose your GitHub account

  4. Permission Grant: Allow VibeMap to access your profile and repositories

  5. Account Creation: VibeMap creates account using GitHub profile data

  6. Auto Login: You're automatically logged in

  7. Dashboard Redirect: Redirected to dashboard

GitHub OAuth Authorization Screen
GitHub OAuth popup showing authorization screen with repository access permissions

Required Permissions

  • Profile Information: Name, email, and username

  • Repository Access: Read access to public repositories

  • Organization Access: Access to organization repositories (if applicable)

  • Email Address: For account identification

Account Data Imported

  • Username: GitHub username

  • Name: Full name from GitHub profile

  • Email: Primary email address

  • Profile Picture: Avatar image from GitHub

  • Public Repositories: List of public repositories

  • Account Status: Automatically verified

GitHub Login Process

Login Steps

  1. Click "Sign in with GitHub" button

  2. Complete OAuth flow

  3. Redirected to dashboard

Login Flow

  1. Click Button: Click "Sign in with GitHub"

  2. GitHub Auth: GitHub authorization popup

  3. Account Selection: Select your GitHub account

  4. Permission Check: Verify existing permissions

  5. Login Success: Redirected to dashboard

Account Linking

  • Existing Account: Links to existing VibeMap account

  • New Account: Creates new account if none exists

  • Multiple Accounts: Supports multiple GitHub accounts

Dashboard Overview

Upon successful GitHub authentication, you'll see:

  • Header: Navigation menu with user profile dropdown

  • Main Area: Empty state with "Create New Project" button

  • Sidebar: Quick access to projects (initially empty)

VibeMap Dashboard After GitHub Authentication
Dashboard view after successful GitHub authentication showing empty state and Create New Project button

User Profile Dropdown

  • Profile Settings: Edit account information

  • Account Settings: Manage GitHub account connection

  • Billing: View subscription and usage

  • Sign Out: Logout from account

Account Management

GitHub Account Connection

  • View Connection: See connected GitHub account

  • Disconnect: Remove GitHub account connection

  • Reconnect: Re-establish GitHub account connection

  • Account Sync: Sync profile changes from GitHub

Repository Integration

  • Repository List: View connected repositories

  • Access Level: See repository access permissions

  • Organization Access: Manage organization repository access

  • Private Repositories: Access to private repositories (if granted)

Profile Management

  • Username: Read-only (managed by GitHub)

  • Name: Editable name field

  • Email: Read-only (managed by GitHub)

  • Profile Picture: Syncs with GitHub profile

  • Account Settings: Manage account preferences

Repository Access

Repository Permissions

  • Public Repositories: Full read access

  • Private Repositories: Access based on GitHub permissions

  • Organization Repositories: Access based on organization membership

  • Fork Access: Access to forked repositories

Integration Features

  • Code Import: Import code from connected repositories

  • Project Sync: Sync projects with GitHub repositories

  • Documentation Export: Export documentation to connected repositories

  • Version Control: Integration with GitHub's version control system

Last updated

Was this helpful?