Social Login Page

File Information

• Path: pages/social-login.vue
• Route: /social-login
• Middleware: guestCheck
• Layout: outerLayout

Purpose

The Social Login page handles OAuth authentication callbacks from social providers (primarily Google OAuth). This page processes the OAuth response, exchanges the authorization code for an access token, and completes the user authentication flow.

Key Features

1. OAuth Callback Processing

   • Handles OAuth redirect from social provider
   • Extracts access token from URL query parameters
   • Validates OAuth response

2. Automatic Authentication

   • Automatically processes OAuth token
   • Authenticates user with backend
   • Redirects to appropriate page after login

3. Loading State

   • Shows loading indicator during authentication
   • Displays "We are logging you in..." message
   • Uses progress circular component

4. Error Handling

   • Handles OAuth errors
   • Redirects to login on failure
   • Shows error messages when needed

Components Used

• GoogleIcon - Google sign-in icon (~/components/svg/CollageGoogleIcon.vue)
• v-progress-circular - Loading progress indicator
• v-form - Form wrapper
• v-btn - Button component (styled as Google button)

Data Properties

{
  contentLoading: boolean,      // Initial content loading state
  myData: null,                 // User data placeholder
  access_token: string,         // OAuth access token from URL query
  error: string                 // Error message if authentication fails
}

Route Query Parameters

The page expects the following query parameters from OAuth redirect:

• access_token - OAuth access token from provider
• error - Error code if OAuth failed (optional)
• error_description - Error description if OAuth failed (optional)

Methods

mounted()

Lifecycle hook that runs when component is mounted:

• Extracts access_token from route query parameters
• Validates token presence
• Calls authentication method with token
• Handles errors if token is missing or invalid

authenticateWithToken(token)

Authenticates user with OAuth token:

• Sends token to backend authentication endpoint
• Receives user session data
• Sets authentication state
• Stores user information
• Redirects to dashboard or intended destination
• Handles authentication errors

handleOAuthError(error)

Handles OAuth errors:

• Parses error from query parameters
• Shows user-friendly error message
• Redirects to login page
• Logs error for debugging

API Endpoints

• POST /auth/social/callback - Process OAuth callback
  • Request Body:

    {
      "access_token": "oauth_access_token",
      "provider": "google"
    }

  • Response:

    {
      "user": {
        "id": 1,
        "email": "[email protected]",
        "name": "User Name"
      },
      "token": "jwt_auth_token",
      "workspaces": []
    }

User Flow

1. User clicks "Sign in with Google" on login page
2. User is redirected to Google OAuth consent screen
3. User grants permissions
4. Google redirects to /social-login?access_token=xxx
5. Page automatically:
   • Extracts access token from URL
   • Sends token to backend
   • Backend validates token with Google
   • Backend creates/updates user account
   • Backend returns JWT token
6. Frontend:
   • Stores authentication token
   • Sets user session
   • Redirects to dashboard or intended page
7. On error:
   • Shows error message
   • Redirects back to login page

OAuth Flow

Login Page → Google OAuth → User Consent → 
Google Redirect → /social-login → 
Backend Validation → User Authenticated → 
Redirect to Dashboard

Error Handling

• Missing Token: Redirects to login with error message
• Invalid Token: Shows error and redirects to login
• OAuth Error: Parses OAuth error and shows user-friendly message
• Network Error: Shows error message with retry option
• Server Error: Shows error message and redirects to login
• Account Not Found: May create new account or show error

Styling

• Uses custom CSS classes:
  • signin-screen-body - Main container
  • signin-screen-with - Social login container
  • btn-google - Google button styling
  • Progress circular for loading state

Security Considerations

• OAuth tokens are single-use and short-lived
• Tokens are validated server-side with provider
• CSRF protection via state parameter (if implemented)
• Secure token storage in HTTP-only cookies
• Token exchange happens server-side for security

Environment Variables

• GOOGLE_CLIENT_ID - Google OAuth client ID
• GOOGLE_REDIRECT_URI - OAuth redirect URI
• API_BASE_URL - Backend API base URL
• OAUTH_STATE_SECRET - Secret for OAuth state validation (if used)

Notes for Development

• The page automatically processes OAuth callback
• No user interaction required after OAuth redirect
• Loading state provides user feedback during authentication
• Error handling ensures users aren't stuck on error page
• The page is typically only visible briefly during OAuth flow
• Supports multiple OAuth providers (currently Google)

Supported OAuth Providers

• Google - Primary OAuth provider
• Additional providers can be added following the same pattern

Related Documentation

• Login Page - Main login page with OAuth initiation
• Middleware Documentation - Route protection
• Common Functions Mixin - Common utilities
• Store Overview - Authentication state management