docs(readme): enhance OAuth app setup and environment config instructions

- Add detailed step-by-step guides for Microsoft Azure and Google Cloud OAuth app registration
- Specify required API permissions and redirect URIs for both providers
- Include security note emphasizing client secrets stored only on backend
- Update environment variable configuration for frontend and backend with examples
- Enhance UI badges to conditionally display connection direction and status
- Revise Azure and Google setup instructions in the app interface for clarity and completeness
- Improve alert sections to clearly separate frontend and backend environment file instructions

README.md

@@ -39,31 +39,75 @@ npm install
 cd ..
 ```
 
-### 3. Configure Environment Variables
+### 3. Configure OAuth Applications
 
-**Frontend (`.env`):**
-Create a `.env` file in the root directory:
+#### Step A: Microsoft Azure (OneDrive)
+
+1. Go to **[Azure Portal](https://portal.azure.com)** → **Azure Active Directory** → **App registrations**
+2. Click **"New registration"**
+3. Fill in:
+   - **Name**: `CloudStream Transfer` (or any name)
+   - **Supported account types**: "Accounts in any organizational directory and personal Microsoft accounts"
+   - **Redirect URI**: Select "Single-page application (SPA)" and enter:
+     - Development: `http://localhost:5173/auth/callback`
+     - Production: `https://yourdomain.com/auth/callback`
+4. Click **Register**
+5. Copy the **Application (client) ID** → This is your `VITE_MS_CLIENT_ID`
+6. Go to **Certificates & secrets** → **New client secret**
+   - Add a description and expiry
+   - Copy the **Value** immediately (shown only once) → This is your `MS_CLIENT_SECRET`
+7. Go to **API permissions** → **Add a permission** → **Microsoft Graph** → **Delegated permissions**
+   - Add: `Files.Read`, `Files.Read.All`, `Files.ReadWrite`, `Files.ReadWrite.All`, `User.Read`
+   - Click **Grant admin consent** (if you're an admin)
+
+#### Step B: Google Cloud (Google Drive)
+
+1. Go to **[Google Cloud Console](https://console.cloud.google.com)**
+2. Create a new project or select existing one
+3. Go to **APIs & Services** → **Enabled APIs & Services**
+   - Click **+ ENABLE APIS AND SERVICES**
+   - Search for **"Google Drive API"** and **Enable** it
+4. Go to **APIs & Services** → **Credentials**
+5. Click **+ CREATE CREDENTIALS** → **OAuth client ID**
+   - If prompted, configure the **OAuth consent screen** first:
+     - User Type: External
+     - App name, support email, developer email (required fields)
+     - Scopes: Add `https://www.googleapis.com/auth/drive`
+6. Back to Credentials → **OAuth client ID**:
+   - Application type: **Web application**
+   - Name: `CloudStream Transfer`
+   - Authorized redirect URIs:
+     - `http://localhost:5173/auth/callback` (development)
+     - `https://yourdomain.com/auth/callback` (production)
+7. Click **Create**
+8. Copy **Client ID** → This is your `VITE_GOOGLE_CLIENT_ID`
+9. Copy **Client Secret** → This is your `GOOGLE_CLIENT_SECRET`
+
+#### Step C: Create Environment Files
+
+**Frontend (`.env` in root directory):**
 ```env
 VITE_MS_CLIENT_ID=your_microsoft_client_id
 VITE_GOOGLE_CLIENT_ID=your_google_client_id
 ```
 
 **Backend (`server/.env`):**
-Create a `.env` file in the `server` directory:
 ```env
-PORT=3001
-# Microsoft Graph Credentials
+PORT=9173
+
+# Microsoft (same Client ID as frontend + secret)
 VITE_MS_CLIENT_ID=your_microsoft_client_id
 MS_CLIENT_SECRET=your_microsoft_client_secret
 
-# Google Drive Credentials
+# Google (same Client ID as frontend + secret)
 VITE_GOOGLE_CLIENT_ID=your_google_client_id
 GOOGLE_CLIENT_SECRET=your_google_client_secret
+
+# Must match your OAuth app redirect URI
 REDIRECT_URI=http://localhost:5173/auth/callback
 ```
 
-> **Note:** You must register applications in both Azure Portal and Google Cloud Console. 
-> Ensure the Redirect URI is set to `http://localhost:5173/auth/callback`.
+> **🔐 Security Note**: Client IDs are public (like your app's name). Client Secrets are private and ONLY stored on the backend - never exposed to browsers. Your files are safe!
 
 ### 4. Run the Application