aiden-kwak/github-integration

GitHub Integration for Django + Next.js Applications

Overview

Complete GitHub integration including OAuth authentication, repository management, and automatic code commits. Built with Django (backend) and Next.js (frontend).

Tech Stack

• Backend: Django, django-allauth, PyGithub, cryptography
• Frontend: Next.js, TypeScript, React
• Authentication: GitHub OAuth 2.0
• API: GitHub REST API v3

Quick Reference

| Task | Approach | |------|----------| | OAuth Setup | django-allauth + GitHub OAuth App | | Repository Creation | PyGithub client wrapper | | File Commits | GitHub API with base64 encoding | | Token Security | Fernet encryption | | Frontend Auth | OAuth callback handling |

---

Backend Implementation

1. Dependencies

# requirements.txt
Django>=4.2.0
djangorestframework>=3.14.0
django-allauth>=0.57.0
PyGithub>=2.1.1
cryptography>=41.0.0
django-cors-headers>=4.3.0
python-dotenv>=1.0.0

2. Django Settings Configuration

# config/settings.py
from pathlib import Path
import os
from dotenv import load_dotenv

BASE_DIR = Path(__file__).resolve().parent.parent
load_dotenv(BASE_DIR / '.env')

INSTALLED_APPS = [
    "django.contrib.admin",
    "django.contrib.auth",
    "django.contrib.contenttypes",
    "django.contrib.sessions",
    "django.contrib.messages",
    "django.contrib.staticfiles",
    # Third party apps
    "rest_framework",
    "corsheaders",
    "django.contrib.sites",  # Required for allauth
    "allauth",
    "allauth.account",
    "allauth.socialaccount",
    "allauth.socialaccount.providers.github",  # GitHub provider
    # Local apps
    "projects",
    "agents",
    "tasks",
    "github_integration",
]

SITE_ID = 1

MIDDLEWARE = [
    "django.middleware.security.SecurityMiddleware",
    "corsheaders.middleware.CorsMiddleware",  # Must be before CommonMiddleware
    "django.contrib.sessions.middleware.SessionMiddleware",
    "django.middleware.common.CommonMiddleware",
    "django.middleware.csrf.CsrfViewMiddleware",
    "django.contrib.auth.middleware.AuthenticationMiddleware",
    "django.contrib.messages.middleware.MessageMiddleware",
    "django.middleware.clickjacking.XFrameOptionsMiddleware",
    "allauth.account.middleware.AccountMiddleware",  # Required for allauth
]

# CORS Settings
CORS_ALLOWED_ORIGINS = [
    "http://localhost:3000",
    "http://127.0.0.1:3000",
]
CORS_ALLOW_CREDENTIALS = True

# CSRF Settings
CSRF_TRUSTED_ORIGINS = [
    "http://localhost:3000",
    "http://127.0.0.1:3000",
]

# Session Settings
SESSION_COOKIE_SAMESITE = None  # Allow cross-origin
SESSION_COOKIE_SECURE = False  # Set to True in production with HTTPS
SESSION_COOKIE_HTTPONLY = True
CSRF_COOKIE_SAMESITE = None
CSRF_COOKIE_SECURE = False  # Set to True in production with HTTPS
CSRF_COOKIE_HTTPONLY = False  # Allow JavaScript to read CSRF cookie

# REST Framework Settings
REST_FRAMEWORK = {
    'DEFAULT_PERMISSION_CLASSES': [
        'rest_framework.permissions.AllowAny',
    ],
    'DEFAULT_RENDERER_CLASSES': [
        'rest_framework.renderers.JSONRenderer',
    ],
}

# Django Allauth Settings
AUTHENTICATION_BACKENDS = [
    'django.contrib.auth.backends.ModelBackend',
    'allauth.account.auth_backends.AuthenticationBackend',
]

# Redirect to frontend after login
LOGIN_REDIRECT_URL = 'http://localhost:3000/auth/callback'
ACCOUNT_LOGOUT_REDIRECT_URL = 'http://localhost:3000'

# Allauth settings
ACCOUNT_EMAIL_VERIFICATION = 'none'
ACCOUNT_AUTHENTICATION_METHOD = 'username'
ACCOUNT_EMAIL_REQUIRED = False
SOCIALACCOUNT_AUTO_SIGNUP = True
SOCIALACCOUNT_STORE_TOKENS = True  # CRITICAL: Store OAuth tokens

# GitHub provider specific settings
SOCIALACCOUNT_PROVIDERS = {
    'github': {
        'SCOPE': [
            'user',
            'repo',
            'read:org',
        ],
    }
}

3. GitHub Client Implementation

# github_integration/client.py
from github import Github as GithubAPI, GithubException
from cryptography.fernet import Fernet
import os

class GitHubClient:
    """GitHub API client for managing repositories and commits"""
    
    def __init__(self, access_token=None):
        """
        Initialize GitHub client with access token
        
        Args:
            access_token: GitHub personal access token or OAuth token
        """
        self.access_token = access_token
        self.client = GithubAPI(access_token) if access_token else None
        
    def get_user(self):
        """Get authenticated user information"""
        if not self.client:
            raise ValueError("GitHub client not authenticated")
        return self.client.get_user()
    
    def create_repository(self, name, description="", private=True, auto_init=True):
        """
        Create a new GitHub repository
        
        Args:
            name: Repository name
            description: Repository description
            private: Whether the repository should be private
            auto_init: Initialize with README
            
        Returns:
            Repository object
        """
        try:
            user = self.get_user()
            repo = user.create_repo(
                name=name,
                description=description,
                private=private,
                auto_init=auto_init
            )
            return {
                'id': repo.id,
                'name': repo.name,
                'full_name': repo.full_name,
                'html_url': repo.html_url,
                'clone_url': repo.clone_url,
                'default_branch': repo.default_branch,
                'private': repo.private
            }
        except GithubException as e:
            raise Exception(f"Failed to create repository: {e.data.get('message', str(e))}")
    
    def get_repository(self, repo_name):
        """Get repository by name (format: "owner/repo")"""
        try:
            return self.client.get_repo(repo_name)
        except GithubException as e:
            raise Exception(f"Failed to get repository: {e.data.get('message', str(e))}")
    
    def create_or_update_file(self, repo_name, file_path, content, commit_message, branch="main"):
        """
        Create or update a file (checks if exists first)
        
        Args:
            repo_name: Repository name (format: "owner/repo")
            file_path: Path to file in repository
            content: File content
            commit_message: Commit message
            branch: Branch name
            
        Returns:
            Commit information
        """
        try:
            repo = self.get_repository(repo_name)
            try:
                # Try to get the file (will raise exception if doesn't exist)
                file = repo.get_contents(file_path, ref=branch)
                # File exists, update it
                result = repo.update_file(
                    path=file_path,
                    message=commit_message,
                    content=content,
                    sha=file.sha,
                    branch=branch
                )
            except GithubException:
                # File doesn't exist, create it
                result = repo.create_file(
                    path=file_path,
                    message=commit_message,
                    content=content,
                    branch=branch
                )
            return {
                'commit': result['commit'].sha,
                'content': result['content'].path
            }
        except Exception as e:
            raise Exception(f"Failed to create/update file: {str(e)}")
    
    def list_repositories(self):
        """List all repositories for authenticated user"""
        try:
            user = self.get_user()
            repos = user.get_repos()
            return [{
                'id': repo.id,
                'name': repo.name,
                'full_name': repo.full_name,
                'html_url': repo.html_url,
                'private': repo.private,
                'description': repo.description
            } for repo in repos]
        except GithubException as e:
            raise Exception(f"Failed to list repositories: {e.data.get('message', str(e))}")


class TokenEncryption:
    """Utility class for encrypting/decrypting GitHub tokens"""
    
    @staticmethod
    def get_encryption_key():
        """Get or generate encryption key"""
        key = os.environ.get('GITHUB_TOKEN_ENCRYPTION_KEY')
        if not key:
            key = Fernet.generate_key().decode()
            print(f"Add to .env: GITHUB_TOKEN_ENCRYPTION_KEY={key}")
        return key.encode() if isinstance(key, str) else key
    
    @staticmethod
    def encrypt_token(token):
        """Encrypt GitHub access token"""
        key = TokenEncryption.get_encryption_key()
        f = Fernet(key)
        return f.encrypt(token.encode()).decode()
    
    @staticmethod
    def decrypt_token(encrypted_token):
        """Decrypt GitHub access token"""
        key = TokenEncryption.get_encryption_key()
        f = Fernet(key)
        return f.decrypt(encrypted_token.encode()).decode()

4. Models

# github_integration/models.py
from django.db import models
from django.contrib.auth.models import User
from projects.models import Project
from .client import TokenEncryption


class GitHubAccount(models.Model):
    """Store GitHub account information for users"""
    
    user = models.OneToOneField(User, on_delete=models.CASCADE, related_name='github_account')
    github_id = models.BigIntegerField(unique=True)  # Use BigIntegerField for GitHub IDs
    username = models.CharField(max_length=255)
    email = models.EmailField(blank=True, null=True)  # Allow null for privacy
    avatar_url = models.URLField(blank=True)
    access_token_encrypted = models.TextField()  # Store encrypted token
    created_at = models.DateTimeField(auto_now_add=True)
    updated_at = models.DateTimeField(auto_now=True)
    
    class Meta:
        db_table = 'github_accounts'
    
    def __str__(self):
        return f"{self.username} (GitHub)"
    
    def set_access_token(self, token):
        """Encrypt and store access token"""
        self.access_token_encrypted = TokenEncryption.encrypt_token(token)
    
    def get_access_token(self):
        """Decrypt and return access token"""
        return TokenEncryption.decrypt_token(self.access_token_encrypted)


class GitHubRepository(models.Model):
    """Store GitHub repository information linked to projects"""
    
    project = models.OneToOneField(Project, on_delete=models.CASCADE, related_name='github_repository')
    github_account = models.ForeignKey(GitHubAccount, on_delete=models.CASCADE, related_name='repositories')
    repo_id = models.BigIntegerField()  # Use BigIntegerField for GitHub repo IDs
    name = models.CharField(max_length=255)
    full_name = models.CharField(max_length=255)  # owner/repo format
    html_url = models.URLField()
    clone_url = models.URLField()
    default_branch = models.CharField(max_length=100, default='main')
    is_private = models.BooleanField(default=True)
    created_at = models.DateTimeField(auto_now_add=True)
    updated_at = models.DateTimeField(auto_now=True)
    
    class Meta:
        db_table = 'github_repositories'
        unique_together = ['github_account', 'repo_id']
    
    def __str__(self):
        return self.full_name


class GitHubCommit(models.Model):
    """Track commits made to GitHub repositories"""
    
    repository = models.ForeignKey(GitHubRepository, on_delete=models.CASCADE, related_name='commits')
    sha = models.CharField(max_length=40)
    message = models.TextField()
    author = models.CharField(max_length=255)
    branch = models.CharField(max_length=100, default='main')
    file_path = models.CharField(max_length=500, blank=True)
    created_at = models.DateTimeField(auto_now_add=True)
    
    class Meta:
        db_table = 'github_commits'
        ordering = ['-created_at']
    
    def __str__(self):
        return f"{self.sha[:7]} - {self.message[:50]}"

5. Signals for Auto-Token Storage

# github_integration/signals.py
from django.dispatch import receiver
from allauth.socialaccount.signals import social_account_added
from .models import GitHubAccount

@receiver(social_account_added)
def save_github_account(sender, request, sociallogin, **kwargs):
    """Automatically save GitHub account info when user connects"""
    if sociallogin.account.provider == 'github':
        user = sociallogin.user
        extra_data = sociallogin.account.extra_data
        
        github_account, created = GitHubAccount.objects.get_or_create(
            user=user,
            defaults={
                'github_id': extra_data.get('id'),
                'username': extra_data.get('login'),
                'email': extra_data.get('email', ''),
                'avatar_url': extra_data.get('avatar_url', ''),
            }
        )
        
        # Store encrypted access token
        token = sociallogin.token.token
        github_account.set_access_token(token)
        github_account.save()

6. Apps Configuration

# github_integration/apps.py
from django.apps import AppConfig

class GithubIntegrationConfig(AppConfig):
    default_auto_field = 'django.db.models.BigAutoField'
    name = 'github_integration'
    
    def ready(self):
        import github_integration.signals  # Import signals

7. Serializers

# github_integration/serializers.py
from rest_framework import serializers
from .models import GitHubAccount, GitHubRepository, GitHubCommit


class GitHubAccountSerializer(serializers.ModelSerializer):
    class Meta:
        model = GitHubAccount
        fields = ['id', 'github_id', 'username', 'email', 'avatar_url', 'created_at']
        read_only_fields = ['id', 'github_id', 'created_at']


class GitHubRepositorySerializer(serializers.ModelSerializer):
    github_account_username = serializers.CharField(source='github_account.username', read_only=True)
    project_name = serializers.CharField(source='project.name', read_only=True)
    
    class Meta:
        model = GitHubRepository
        fields = [
            'id', 'project', 'github_account', 'github_account_username',
            'project_name', 'repo_id', 'name', 'full_name', 'html_url',
            'clone_url', 'default_branch', 'is_private', 'created_at'
        ]
        read_only_fields = ['id', 'repo_id', 'created_at']


class GitHubCommitSerializer(serializers.ModelSerializer):
    repository_name = serializers.CharField(source='repository.full_name', read_only=True)
    sha_short = serializers.SerializerMethodField()
    
    class Meta:
        model = GitHubCommit
        fields = [
            'id', 'repository', 'repository_name', 'sha', 'sha_short',
            'message', 'author', 'branch', 'file_path', 'created_at'
        ]
        read_only_fields = ['id', 'created_at']
    
    def get_sha_short(self, obj):
        return obj.sha[:7]


class RepositoryCreateSerializer(serializers.Serializer):
    """Serializer for creating a new GitHub repository"""
    project_id = serializers.IntegerField()
    name = serializers.CharField(max_length=255)
    description = serializers.CharField(required=False, allow_blank=True)
    private = serializers.BooleanField(default=True)
    auto_init = serializers.BooleanField(default=True)


class CommitFileSerializer(serializers.Serializer):
    """Serializer for committing a file to GitHub"""
    file_path = serializers.CharField(max_length=500)
    content = serializers.CharField()
    commit_message = serializers.CharField()
    branch = serializers.CharField(default='main')

8. API Views

# github_integration/views.py
from rest_framework import viewsets, status
from rest_framework.decorators import action
from rest_framework.response import Response
from rest_framework.permissions import IsAuthenticated
from django.shortcuts import get_object_or_404
from django.conf import settings
import logging

logger = logging.getLogger(__name__)

from .models import GitHubAccount, GitHubRepository, GitHubCommit
from .serializers import (
    GitHubAccountSerializer,
    GitHubRepositorySerializer,
    GitHubCommitSerializer,
    RepositoryCreateSerializer,
    CommitFileSerializer
)
from .client import GitHubClient
from projects.models import Project


class GitHubAccountViewSet(viewsets.ReadOnlyModelViewSet):
    """ViewSet for GitHub accounts"""
    serializer_class = GitHubAccountSerializer
    permission_classes = [IsAuthenticated]
    
    def get_queryset(self):
        return GitHubAccount.objects.filter(user=self.request.user)


class GitHubRepositoryViewSet(viewsets.ModelViewSet):
    """ViewSet for GitHub repositories"""
    serializer_class = GitHubRepositorySerializer
    permission_classes = [IsAuthenticated]
    
    def get_queryset(self):
        user = self.request.user
        return GitHubRepository.objects.filter(github_account__user=user)
    
    @action(detail=False, methods=['post'], url_path='create-repository')
    def create_repository(self, request):
        """Create a new GitHub repository for a project"""
        serializer = RepositoryCreateSerializer(data=request.data)
        serializer.is_valid(raise_exception=True)
        
        # Get project and GitHub account
        project = get_object_or_404(Project, id=serializer.validated_data['project_id'])
        github_account = get_object_or_404(GitHubAccount, user=request.user)
        
        # Check if repository already exists for this project
        if GitHubRepository.objects.filter(project=project).exists():
            return Response(
                {'error': 'Repository already exists for this project'},
                status=status.HTTP_400_BAD_REQUEST
            )
        
        try:
            # Create repository using GitHub API
            client = GitHubClient(github_account.get_access_token())
            repo_data = client.create_repository(
                name=serializer.validated_data['name'],
                description=serializer.validated_data.get('description', ''),
                private=serializer.validated_data.get('private', True),
                auto_init=serializer.validated_data.get('auto_init', True)
            )
            
            # Save repository information
            repository = GitHubRepository.objects.create(
                project=project,
                github_account=github_account,
                repo_id=repo_data['id'],
                name=repo_data['name'],
                full_name=repo_data['full_name'],
                html_url=repo_data['html_url'],
                clone_url=repo_data['clone_url'],
                default_branch=repo_data['default_branch'],
                is_private=repo_data['private']
            )
            
            return Response(
                GitHubRepositorySerializer(repository).data,
                status=status.HTTP_201_CREATED
            )
        except Exception as e:
            import traceback
            error_msg = str(e) if str(e) else repr(e)
            error_trace = traceback.format_exc()
            logger.error(f"Error creating GitHub repository: {error_msg}\n{error_trace}")
            return Response(
                {'error': error_msg, 'detail': error_trace if settings.DEBUG else 'Internal server error'},
                status=status.HTTP_500_INTERNAL_SERVER_ERROR
            )
    
    @action(detail=True, methods=['post'])
    def commit_file(self, request, pk=None):
        """Commit a file to the repository"""
        repository = self.get_object()
        serializer = CommitFileSerializer(data=request.data)
        serializer.is_valid(raise_exception=True)
        
        try:
            # Get GitHub client
            github_account = repository.github_account
            client = GitHubClient(github_account.get_access_token())
            
            # Commit file
            commit_data = client.create_or_update_file(
                repo_name=repository.full_name,
                file_path=serializer.validated_data['file_path'],
                content=serializer.validated_data['content'],
                commit_message=serializer.validated_data['commit_message'],
                branch=serializer.validated_data.get('branch', 'main')
            )
            
            # Save commit information
            commit = GitHubCommit.objects.create(
                repository=repository,
                sha=commit_data['commit'],
                message=serializer.validated_data['commit_message'],
                author=github_account.username,
                branch=serializer.validated_data.get('branch', 'main'),
                file_path=serializer.validated_data['file_path']
            )
            
            return Response(
                GitHubCommitSerializer(commit).data,
                status=status.HTTP_201_CREATED
            )
        except Exception as e:
            return Response(
                {'error': str(e)},
                status=status.HTTP_500_INTERNAL_SERVER_ERROR
            )
    
    @action(detail=True, methods=['get'])
    def commits(self, request, pk=None):
        """Get all commits for a repository"""
        repository = self.get_object()
        commits = GitHubCommit.objects.filter(repository=repository)
        serializer = GitHubCommitSerializer(commits, many=True)
        return Response(serializer.data)


class GitHubCommitViewSet(viewsets.ReadOnlyModelViewSet):
    """ViewSet for GitHub commits"""
    serializer_class = GitHubCommitSerializer
    permission_classes = [IsAuthenticated]
    
    def get_queryset(self):
        user = self.request.user
        return GitHubCommit.objects.filter(
            repository__github_account__user=user
        )

9. URL Configuration

# github_integration/urls.py
from django.urls import path, include
from rest_framework.routers import DefaultRouter
from .views import GitHubAccountViewSet, GitHubRepositoryViewSet, GitHubCommitViewSet

router = DefaultRouter()
router.register(r'accounts', GitHubAccountViewSet, basename='github-account')
router.register(r'repositories', GitHubRepositoryViewSet, basename='github-repository')
router.register(r'commits', GitHubCommitViewSet, basename='github-commit')

urlpatterns = [
    path('', include(router.urls)),
]

# config/urls.py
from django.contrib import admin
from django.urls import path, include

urlpatterns = [
    path('admin/', admin.site.urls),
    path('accounts/', include('allauth.urls')),  # GitHub OAuth
    path('api/github/', include('github_integration.urls')),
    # ... other urls
]

---

Frontend Implementation

1. API Client

// lib/api.ts
const API_BASE_URL = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:8000/api';

class ApiClient {
  private baseUrl: string;

  constructor(baseUrl: string = API_BASE_URL) {
    this.baseUrl = baseUrl;
  }

  private getCSRFToken(): string | null {
    // Get CSRF token from cookie
    const name = 'csrftoken';
    let cookieValue: string | null = null;
    if (typeof document !== 'undefined' && document.cookie) {
      const cookies = document.cookie.split(';');
      for (let i = 0; i < cookies.length; i++) {
        const cookie = cookies[i].trim();
        if (cookie.substring(0, name.length + 1) === (name + '=')) {
          cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
          break;
        }
      }
    }
    return cookieValue;
  }

  private async request<T>(
    endpoint: string,
    options: RequestInit = {}
  ): Promise<T> {
    const url = `${this.baseUrl}${endpoint}`;
    
    const headers: Record<string, string> = {
      'Content-Type': 'application/json',
      ...(options.headers as Record<string, string>),
    };

    // Add CSRF token for non-GET requests
    const csrfToken = this.getCSRFToken();
    if (csrfToken && options.method && options.method !== 'GET') {
      headers['X-CSRFToken'] = csrfToken;
    }
    
    const config: RequestInit = {
      ...options,
      credentials: 'include', // Include cookies for session authentication
      headers,
    };

    const response = await fetch(url, config);
    
    if (!response.ok) {
      const errorData = await response.json().catch(() => ({}));
      const error: any = new Error(errorData.message || `HTTP error! status: ${response.status}`);
      error.response = { status: response.status, data: errorData };
      throw error;
    }

    return await response.json();
  }

  // GitHub endpoints
  async getGitHubAccounts(): Promise<any[]> {
    return this.request<any[]>('/github/accounts/');
  }

  async getGitHubRepositories(): Promise<any[]> {
    return this.request<any[]>('/github/repositories/');
  }

  async createGitHubRepository(data: {
    project_id: number;
    name: string;
    description?: string;
    private?: boolean;
    auto_init?: boolean;
  }): Promise<any> {
    return this.request<any>('/github/repositories/create-repository/', {
      method: 'POST',
      body: JSON.stringify(data),
    });
  }

  async commitFileToGitHub(repositoryId: string, data: {
    file_path: string;
    content: string;
    commit_message: string;
    branch?: string;
  }): Promise<any> {
    return this.request<any>(`/github/repositories/${repositoryId}/commit_file/`, {
      method: 'POST',
      body: JSON.stringify(data),
    });
  }

  async getRepositoryCommits(repositoryId: string): Promise<any[]> {
    return this.request<any[]>(`/github/repositories/${repositoryId}/commits/`);
  }
}

// Export singleton instance
export const api = new ApiClient();

2. GitHub Connect Modal Component

// components/github/GitHubConnectModal.tsx
'use client';

import { useState } from 'react';
import { api } from '@/lib/api';
import { GitHubRepository } from '@/lib/types';

interface GitHubConnectModalProps {
  isOpen: boolean;
  onClose: () => void;
  projectId: string;
  onSuccess: (repository: GitHubRepository) => void;
}

export default function GitHubConnectModal({
  isOpen,
  onClose,
  projectId,
  onSuccess,
}: GitHubConnectModalProps) {
  const [step, setStep] = useState<'connect' | 'create'>('connect');
  const [repoName, setRepoName] = useState('');
  const [description, setDescription] = useState('');
  const [isPrivate, setIsPrivate] = useState(true);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState('');

  if (!isOpen) return null;

  const handleCreateRepository = async () => {
    if (!repoName.trim()) {
      setError('Repository name is required');
      return;
    }

    setLoading(true);
    setError('');

    try {
      const repository = await api.createGitHubRepository({
        project_id: parseInt(projectId),
        name: repoName,
        description: description || undefined,
        private: isPrivate,
        auto_init: true,
      });

      onSuccess(repository);
      onClose();
    } catch (err: any) {
      setError(err.message || 'Failed to create repository');
    } finally {
      setLoading(false);
    }
  };

  const handleGitHubConnect = () => {
    // For now, show the create repository form
    // OAuth flow is handled by django-allauth
    setStep('create');
  };

  return (
    <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
      <div className="bg-white rounded-lg shadow-xl max-w-md w-full pixel-border">
        {/* Header */}
        <div className="px-6 py-4 border-b border-gray-200">
          <div className="flex items-center justify-between">
            <h2 className="text-xl font-bold text-gray-900 pixel-font">
              🔗 Connect GitHub
            </h2>
            <button
              onClick={onClose}
              className="text-gray-400 hover:text-gray-600 text-2xl leading-none"
            >
              ×
            </button>
          </div>
        </div>

        {/* Content */}
        <div className="px-6 py-4">
          {step === 'connect' ? (
            <div className="space-y-4">
              <p className="text-gray-600">
                Connect your GitHub account to automatically create and manage repositories for your project.
              </p>

              <div className="bg-blue-50 border border-blue-200 rounded-lg p-4">
                <h3 className="font-semibold text-blue-900 mb-2">✨ Features</h3>
                <ul className="text-sm text-blue-800 space-y-1">
                  <li>• Auto-create project repository</li>
                  <li>• Commit code changes automatically</li>
                  <li>• Track development progress</li>
                  <li>• Manage branches and PRs</li>
                </ul>
              </div>

              {error && (
                <div className="bg-red-50 border border-red-200 rounded-lg p-3">
                  <p className="text-sm text-red-800">{error}</p>
                </div>
              )}

              <button
                onClick={handleGitHubConnect}
                disabled={loading}
                className="w-full bg-gray-900 text-white py-3 rounded-lg hover:bg-gray-800 
                         transition-colors font-semibold flex items-center justify-center gap-2
                         disabled:opacity-50 disabled:cursor-not-allowed"
              >
                <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
                  <path fillRule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z" clipRule="evenodd" />
                </svg>
                {loading ? 'Connecting...' : 'Connect with GitHub'}
              </button>
            </div>
          ) : (
            <div className="space-y-4">
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-2">
                  Repository Name *
                </label>
                <input
                  type="text"
                  value={repoName}
                  onChange={(e) => setRepoName(e.target.value)}
                  placeholder="my-awesome-project"
                  className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 
                           focus:ring-blue-500 focus:border-transparent"
                />
              </div>

              <div>
                <label className="block text-sm font-medium text-gray-700 mb-2">
                  Description
                </label>
                <textarea
                  value={description}
                  onChange={(e) => setDescription(e.target.value)}
                  placeholder="A brief description of your project..."
                  rows={3}
                  className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 
                           focus:ring-blue-500 focus:border-transparent resize-none"
                />
              </div>

              <div className="flex items-center gap-2">
                <input
                  type="checkbox"
                  id="private"
                  checked={isPrivate}
                  onChange={(e) => setIsPrivate(e.target.checked)}
                  className="w-4 h-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500"
                />
                <label htmlFor="private" className="text-sm text-gray-700">
                  Make repository private
                </label>
              </div>

              {error && (
                <div className="bg-red-50 border border-red-200 rounded-lg p-3">
                  <p className="text-sm text-red-800">{error}</p>
                </div>
              )}

              <div className="flex gap-3">
                <button
                  onClick={() => setStep('connect')}
                  disabled={loading}
                  className="flex-1 px-4 py-2 border border-gray-300 rounded-lg hover:bg-gray-50 
                           transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
                >
                  Back
                </button>
                <button
                  onClick={handleCreateRepository}
                  disabled={loading || !repoName.trim()}
                  className="flex-1 bg-blue-600 text-white py-2 rounded-lg hover:bg-blue-700 
                           transition-colors font-semibold disabled:opacity-50 disabled:cursor-not-allowed"
                >
                  {loading ? 'Creating...' : 'Create Repository'}
                </button>
              </div>
            </div>
          )}
        </div>
      </div>
    </div>
  );
}

3. OAuth Callback Handler

// app/auth/callback/page.tsx
'use client';

import { useEffect } from 'react';
import { useRouter } from 'next/navigation';

export default function AuthCallback() {
  const router = useRouter();

  useEffect(() => {
    // OAuth callback is handled by django-allauth
    // After successful authentication, redirect to dashboard
    const timer = setTimeout(() => {
      router.push('/');
    }, 1000);

    return () => clearTimeout(timer);
  }, [router]);

  return (
    <div className="min-h-screen flex items-center justify-center">
      <div className="text-center">
        <h1 className="text-2xl font-bold mb-4">Authenticating...</h1>
        <p className="text-gray-600">Please wait while we connect your GitHub account.</p>
      </div>
    </div>
  );
}

---

Setup Instructions

1. GitHub OAuth App Setup

1. Go to https://github.com/settings/developers
2. Click "New OAuth App"
3. Fill in:
   • Application name: Your App Name
   • Homepage URL: http://localhost:3000
   • Authorization callback URL: http://localhost:8000/accounts/github/login/callback/
4. Copy Client ID and Client Secret

2. Django Admin Configuration

# Create superuser
python manage.py createsuperuser

# Run migrations
python manage.py makemigrations
python manage.py migrate

# Access admin at http://localhost:8000/admin/

In Django Admin:

1. Go to Sites → Edit site (ID=1) → Set domain to localhost:8000 (NO http://)
2. Go to Social applications → Add social application:
   • Provider: GitHub
   • Name: GitHub OAuth
   • Client id: [Your Client ID]
   • Secret key: [Your Client Secret]
   • Sites: Select localhost:8000 and move to "Chosen sites"

3. Environment Variables

# backend/.env
GITHUB_TOKEN_ENCRYPTION_KEY=<generate with: python -c "from cryptography.fernet import Fernet; print(Fernet.generate_key().decode())">
SECRET_KEY=your-django-secret-key
DEBUG=True

# frontend/.env.local
NEXT_PUBLIC_API_URL=http://localhost:8000/api

---

Common Issues & Solutions

Issue: "SocialApp.DoesNotExist"

Solution: Ensure Site domain is localhost:8000 (NO http://) and Social App is linked to correct site.

# Quick fix command
python manage.py shell -c "from django.contrib.sites.models import Site; site = Site.objects.get(id=1); site.domain = 'localhost:8000'; site.save(); print('Fixed!')"

Issue: "Redirect URI mismatch"

Solution: Verify GitHub OAuth App callback URL is exactly: http://localhost:8000/accounts/github/login/callback/

Issue: Token encryption errors

Solution: Generate and set GITHUB_TOKEN_ENCRYPTION_KEY in .env

python -c "from cryptography.fernet import Fernet; print(Fernet.generate_key().decode())"

---

Production Deployment

1. Create production GitHub OAuth App with production URLs
2. Update Django settings:
   • Set DEBUG = False
   • Update ALLOWED_HOSTS
   • Set SESSION_COOKIE_SECURE = True
   • Set CSRF_COOKIE_SECURE = True
3. Update Site domain in Django Admin to production domain (e.g., yourdomain.com)
4. Use HTTPS for all URLs

---

Key Features Implemented

✅ GitHub OAuth authentication with django-allauth
✅ Automatic token encryption and storage via signals
✅ Repository creation via PyGithub API
✅ File commit functionality
✅ Commit history tracking
✅ Frontend modal for repository creation
✅ Secure token management with Fernet encryption
✅ Error handling and validation
✅ CSRF protection for API requests

---

Critical Implementation Details

1. Use BigIntegerField for GitHub IDs - GitHub IDs can exceed 32-bit integer limits
2. Field name is access_token_encrypted - Not encrypted_access_token
3. Email field allows null - Some users may not have public email
4. Signal must be imported in apps.py - Add def ready() method
5. SOCIALACCOUNT_STORE_TOKENS = True - Required to store OAuth tokens
6. Site domain has NO protocol - Use localhost:8000, not http://localhost:8000
7. CSRF token required for POST requests - Frontend must include X-CSRFToken header
8. Credentials: 'include' - Required for session cookies in fetch requests

---

Testing

# Backend tests
python manage.py test github_integration

# Test OAuth flow
1. Visit http://localhost:3000
2. Click "Login with GitHub"
3. Authorize application
4. Verify redirect to callback page
5. Check Django Admin for GitHubAccount entry

# Test repository creation
1. Create a project
2. Click "Connect GitHub"
3. Enter repository details
4. Verify repository created on GitHub
5. Check GitHubRepository model in admin

---

References

• django-allauth Documentation
• PyGithub Documentation
• GitHub OAuth Documentation
• GitHub REST API

---

Made with ❤️ by Bob