Login View

The login-view is a Single Page Application (SPA) built with React and Vite. It serves as the user interface for the OAuth 2.0 Authorization Code flow within the LightAPI ecosystem.

Overview

This application acts as the front-end for the Authorization Server. When a user attempts to access a protected resource on a client application (the “Portal”), they are redirected to this application to authenticate and grant consent.

It handles:

• User Authentication (Username/Password).
• Social Login (Google, Facebook, GitHub).
• OAuth 2.0 Consent Granting.
• Password Management (Forgot Password, Reset Password).

Technology Stack

• Framework: React 18
• Build Tool: Vite
• UI Library: Material UI (MUI) v6
• Routing: React Router DOM v6
• Social Login:
  • Google: @react-oauth/google
  • Facebook: @greatsumini/react-facebook-login
  • GitHub: Manual OAuth 2.0 flow with react-social-login-buttons

Key Flows

1. OAuth 2.0 Authorization

The application expects to be opened with standard OAuth 2.0 query parameters:

• client_id: The ID of the client application requesting access.
• response_type: Typically code.
• redirect_uri: Where to redirect after success.
• state: A random string generated by the client to prevent CSRF.
• scope: Requested permissions.

Process:

1. The Login component extracts these parameters from the URL.
2. User submits credentials or uses social login.
3. On success, the application receives an authorization code from the backend.
4. To grant consent (if configured), the user is shown the Consent screen.
5. Finally, the browser is redirected to the redirect_uri with the code and state.

2. Social Login Configuration

The application supports multiple identity providers.

• Google: Uses the modern Google Identity Services. Configured in src/main.jsx via GoogleOAuthProvider.
• Facebook: Uses the Facebook SDK wrapper. Configured in src/components/FbLogin.jsx.
• GitHub: Uses a manual popup flow. The client ID is configured in src/components/GithubLogin.jsx. The redirect URI /github/callback handles the code extraction.

3. Backend Integration

The application proxies API requests to the backend (Light Gateway/OAuth Provider) using vite.config.js proxy settings during development.

• /oauth2/*: For token and code endpoints.
• /portal/*: For user management commands (login query).
• /google, /facebook, /github: Endpoints to exchange social tokens/codes for LightAPI authorization codes.

Development

Setup

yarn install

Run Locally

yarn dev

Runs on https://localhost:5173 by default.

Build

yarn build

Generates production assets in the dist folder.

Project Structure

• src/components/: Reusable UI components (Login forms, Social buttons).
• src/theme.js: MUI theme configuration.
• src/main.jsx: Application entry point and providers.
• vite.config.js: Vite configuration including proxy rules.