3 min read

Authentication Flow and API Design for Github Login

Overview

The optimal solution involves a combination of frontend and backend logic to handle the GitHub OAuth flow and secure your API endpoints. Here’s a step-by-step breakdown of the process:

  1. Frontend Initiates Login: The frontend will have a “Login with GitHub” button that, when clicked, redirects the user to the GitHub OAuth authorization page.
  2. GitHub OAuth Flow: After the user authorizes your application, GitHub will redirect back to your specified callback URL with a temporary code.
  3. Backend Handles OAuth Callback: Your backend (Cloudflare Worker) will exchange this code for an access token and verify the user’s identity.
  4. Session Management: Upon successful authentication, your backend will create a session and send a session cookie to the frontend.
  5. Frontend Uses Session Cookie: For subsequent API requests, the frontend will include this session cookie, which the backend will validate.
  6. API Authorization: Your existing authMiddleware will check the session cookie for API requests.

Detailed Flow

Replaced by Image Uploader

  1. Frontend Login Initiation: When the user clicks “Login with GitHub”, redirect them to:

    https://github.com/login/oauth/authorize?client_id=YOUR_CLIENT_ID&redirect_uri=https://s.haomin.tech/auth/callback

  2. Backend OAuth Callback: GitHub redirects to /auth/callback with a code parameter. Your backend exchanges this code for an access token. It then verifies the user’s identity and creates a session.

  3. Session Creation and Cookie Setting: After successful authentication, set a secure, HTTP-only cookie with the session ID. Redirect the user back to the frontend application.

  4. Frontend After Login: The frontend should detect the successful login (e.g., by checking a specific route or query parameter). It can then update the UI to show the user as logged in.

  5. API Requests: For all API requests, the frontend doesn’t need to do anything special. The browser will automatically include the session cookie. Your authMiddleware will validate this cookie for each request.

API Design

  1. Authentication Endpoints:

    • /auth/login: Redirects to GitHub (frontend uses this)
    • /auth/callback: Handles OAuth callback (backend only)
    • /auth/check: Returns current authentication status

  2. URL Shortener API Endpoints:

    • POST /api/shorten: Create a new short URL
    • GET /api/links: List all shortened links
    • PUT /api/links/:id: Update a link
    • DELETE /api/links/:id: Delete a link

  3. Redirect Endpoint:

    • GET /:shortCode: Redirects to the original URL (no auth required)

Frontend Considerations

  • Implement a login button that redirects to /auth/login.
  • After redirect back from GitHub, check authentication status using /auth/check.
  • If authenticated, show the URL management interface.
  • If not authenticated, show the login button.

Security Considerations

  • Use HTTPS for all communications.
  • Set cookies with Secure and HttpOnly flags.
  • Implement CSRF protection if necessary.
  • Regularly rotate session IDs to prevent session fixation attacks.

By following this design, you maintain a clear separation between frontend and backend concerns while leveraging your existing authentication middleware. The frontend handles the user interface and initiates the login process, while the backend manages the secure parts of the authentication flow and API authorization.