Marcus finishes facebook autoposter frontend by marcusyi1 · Pull Request #4714 · OneCommunityGlobal/HighestGoodNetworkApp

marcusyi1 · 2026-01-15T02:31:04Z

Description

This PR implements a comprehensive Facebook Pages auto-poster system for HGN, building upon and modernizing the foundational work completed in PR3270/PR1268 (basic posting) and PR3466/PR1359 (scheduling framework) by Snehal Patare.

Key capabilities:

OAuth Authentication Flow: Secure Facebook Page connection via Facebook Login, with automatic token storage and validation
Direct Posting: Post text, links, and images (URL or file upload) to connected Facebook Pages
Post Scheduling: Schedule posts with PST timezone support, managed by cron jobs running every minute
Post History & Management: Track all posts (direct and scheduled) with status monitoring, filtering, and edit/cancel capabilities for pending posts
Image Upload Support: Direct file uploads (JPEG/PNG/GIF/WebP, <10MB) using Facebook's native multipart form-data API

This implementation uses modern OAuth patterns instead of hardcoded tokens, provides comprehensive error handling with user-friendly messaging, and includes permission-based access control using HGN's existing requestor system.

Fixes: High Priority Task - "Create appropriate auto-poster for Facebook + Facebook Groups" (Jae) - Facebook Pages component

Related PRs (if any):

Builds upon (already merged or pending approval):

Frontend PR3270 & Backend PR1268 - Basic Facebook posting foundation (Snehal)
Frontend PR3466 & Backend PR1359 - Scheduling framework (Snehal)

Do git checkout of https://github.com/OneCommunityGlobal/HGNRest/pull/2005/ in order to test this PR

Main changes explained:

New Files:

src/actions/facebookAuthActions.js
src/components/Announcements/FacebookSettings.jsx

Updated Files:

src/components/Announcements/index.jsx
src/components/Announcements/SocialMediaPostDetails.jsx
src/components/Announcements/FacebookHistory.jsx
src/actions/sendSocialMediaPosts.js
src/utils/URL.js
src/components/Announcements/Announcements.css

Environment Variables Added:

REACT_APP_FACEBOOK_APP_ID - Your Facebook App ID (must match backend FACEBOOK_APP_ID)

How to test:

Prerequisites

A personal Facebook account
A Facebook Page you have admin access to (create one at [facebook.com/pages/create](https://www.facebook.com/pages/create) if needed)

Step 1: Create a Facebook Developer Account

Go to [developers.facebook.com](https://developers.facebook.com)
Click Get Started or Log In with your Facebook account
Complete the registration if prompted

Step 2: Create a New App

⚠️ Important: Do NOT select "Facebook Login for Business" or try to make your app Live. This will trigger verification requirements that are unnecessary for testing.

Click My Apps (top right) → Create App
Use case: Select "Other" → Click Next
App type: Select "Consumer" → Click Next
App details:
- App name: HGN Facebook Test - [YourName]
- Contact email: Your email
- Business portfolio: Skip/None
Click Create App

Step 3: Add Facebook Login Product

From your app's dashboard, scroll to "Add products to your app"
Find "Facebook Login" (the standard one, NOT "Facebook Login for Business")
Click Set Up → Select Web
Enter https://localhost:3000 as the Site URL → Click Save → Continue
Skip the remaining quickstart steps

Step 4: Configure OAuth Settings

In the left sidebar, go to Facebook Login → Settings
Configure:

Setting	Value
Client OAuth Login	Yes
Web OAuth Login	Yes
Enforce HTTPS	Yes
Valid OAuth Redirect URIs	`https://localhost:3000`

Under "Allowed Domains for the JavaScript SDK" add: localhost
Click Save Changes

Step 5: Get Your App Credentials

Go to App Settings → Basic
Copy your App ID and App Secret (click Show)

Step 6: Configure Environment Variables

Frontend (.env):

REACT_APP_FACEBOOK_APP_ID=your_app_id_here

Backend (.env):

FACEBOOK_APP_ID=your_app_id_here
FACEBOOK_APP_SECRET=your_app_secret_here
FACEBOOK_GRAPH_URL=https://graph.facebook.com/v19.0

Step 7: Enable HTTPS for Local Development

Facebook OAuth requires HTTPS. If using Vite:

Install: npm install -D @vitejs/plugin-basic-ssl
Update vite.config.js:

import basicSsl from '@vitejs/plugin-basic-ssl';

export default defineConfig({
  plugins: [react(), basicSsl()],
  // ... rest of config
});

Step 8: Run and Test

Check out this branch
Run npm install and npm run start:local
Clear site data/cache
Log in as a user with send email permissions (Owner or Administrator)
Navigate to Dashboard → Other Links → Send Email → Facebook

Verification Checklist

Troubleshooting

"Facebook Login for Business requires advanced access"

You selected the wrong product. Remove "Facebook Login for Business" and add regular "Facebook Login" instead.

"App must be Live to use this feature"

Stay in Development Mode. You don't need to make the app Live for testing. The app creator can test all features in dev mode.

"No Facebook Pages found"

Make sure you have admin access to at least one Facebook Page. Create a test page at [facebook.com/pages/create](https://www.facebook.com/pages/create).

OAuth popup blocked

Allow popups for localhost in your browser settings.

"Invalid redirect URI"

Ensure https://localhost:3000 is listed in Facebook Login → Settings → Valid OAuth Redirect URIs.

Graph API Error Code 10 (Post History)

This occurs when reading posts from Facebook's API in development mode. This is expected - posting still works, but reading the feed is restricted. Post history will show posts from MongoDB successfully; the Facebook API source may show an error.

Screenshots or videos of changes:

netlify · 2026-01-15T02:31:17Z

✅ Deploy Preview for highestgoodnetwork-dev ready!

Name	Link
🔨 Latest commit	`669ef9f`
🔍 Latest deploy log	https://app.netlify.com/projects/highestgoodnetwork-dev/deploys/6987afdd34a2ca00086546e5
😎 Deploy Preview	https://deploy-preview-4714--highestgoodnetwork-dev.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

Anusha-Gali

Hi Marcus,

I tried to review your PR but am unable to do so since i could not figure out few things required for the setup. If you could provide a video of setup it would be helpful.

Coming to where i am stuck, i did create a developer login and an app and did select the "Facebook login for business" but it says the below:
Facebook Login for Business requires advanced access
Your app has standard access to public_profile. To use Facebook Login for Business, switch public_profile to advanced access.

Now i did try to get advance access but it says "Verification required" and i am unable to understand what exactly am i to fill in that page, even upon adding details i could think of and saving, no luck. Also i then tried to make the app live but it stops saying i should provide a privacy policy but i am not confident as to what it is i am supposed to enter.

This reverts commit d235fd6.

maithili20 · 2026-01-29T22:31:11Z

Hi @marcusyi1
I am reviewing your PR, and I am unable to connect to facebook. I followed entire process as mentioned in PR. I am getting error messages as seen in the screenshot below.

Anusha-Gali

Hi Marcus,

I tried to review and setup following the steps you mentioned and have tried to do a facebook post. bUt i am unable to view it anywhere. Below are the screenshots showing my console log, and graph link: https://graph.facebook.com/v19.0/944703262049095/feed , and the history as well as setting at my end. Let me know if i am going wrong anywhere.

maithili20 · 2026-01-31T05:19:55Z

Hi @marcusyi1
I tested the PR—thanks a lot for helping with the setup, and kudos for getting so many pieces working. Overall, it looks good, but I noticed a few issues:

Once I disconnnect I am not able to re-connect. I get the below error.

Do you think history shown should be particular to me ?

Even though I am connected, I see facebook not connected message on top

The scheduled post did not work. This may be because the I disconnected the app before. But cannot test again since app is not reconnecting.

Also, could we remove the following statement from the PR description?(Step2) - ⚠️ Important: Do NOT select "Facebook Login for Business" or try to make your app Live. This will trigger verification requirements that are unnecessary for testing.

Sakshitapkir03 · 2026-02-02T19:38:11Z

src/components/Announcements/SocialMediaComposer.jsx

@@ -1,55 +1,494 @@
-import React, { useState } from 'react';


React is imported twice with overlapping bindings (React/useState) which would cause a compile error.

Sakshitapkir03 · 2026-02-02T19:38:59Z

src/components/Announcements/SocialMediaComposer.jsx


  const tabOrder = [
    { id: 'composer', label: '📝 Make Post' },
-    { id: 'scheduled', label: '⏰ Scheduled Post' },


duplicate ids will cause weird ui and state bugs

sonarqubecloud · 2026-02-07T21:35:35Z

Quality Gate passed

Issues
52 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.9% Duplication on New Code

See analysis details on SonarQube Cloud

marcusyi1 added 7 commits December 11, 2025 15:59

Facebook direct posting works

f4cc465

build: facebook page schedule posting functionality

a42f5d8

build: database post history viewer

7bc9170

build: Facebook direct authentication

825edc6

build: scheduled photo

700665f

fix: commit to help with push

8e31b17

build: dark mode compatibility

9cab43f

marcusyi1 mentioned this pull request Jan 15, 2026

Marcus finishes facebook autoposter backend OneCommunityGlobal/HGNRest#2005

Open

marcusyi1 and others added 5 commits January 14, 2026 21:38

Merge branch 'development' into Marcus-finishes-facebook-autoposter-fe

a26dc4a

chore: standardize on npm, remove yarn.lock

90c520a

chore: sync yarn.lock

6ec267c

chore: remove package-lock.json, standardize on yarn

b1c3761

Resolve package-lock.json merge conflict

4dc3a7e

one-community added the High Priority - Please Review First This is an important PR we'd like to get merged as soon as possible label Jan 15, 2026

Anusha-Gali reviewed Jan 16, 2026

View reviewed changes

marcusyi1 added 2 commits January 23, 2026 18:27

fix: connecting facebook page to wireframe

d235fd6

Revert "fix: connecting facebook page to wireframe"

06d571a

This reverts commit d235fd6.

marcusyi1 requested a review from Anusha-Gali January 24, 2026 23:51

Anusha-Gali reviewed Jan 30, 2026

View reviewed changes

Sakshitapkir03 reviewed Feb 2, 2026

View reviewed changes

marcusyi1 added 2 commits February 5, 2026 20:46

fix: facebook connection troubleshoot

bca806b

fix: routing issue

669ef9f

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Comments

Marcus finishes facebook autoposter frontend#4714

Marcus finishes facebook autoposter frontend#4714
marcusyi1 wants to merge 16 commits intodevelopmentfrom
Marcus-finishes-facebook-autoposter-fe

marcusyi1 commented Jan 15, 2026 •

edited

Loading

Uh oh!

netlify bot commented Jan 15, 2026 •

edited

Loading

Uh oh!

Anusha-Gali left a comment

Uh oh!

maithili20 commented Jan 29, 2026 •

edited

Loading

Uh oh!

Anusha-Gali left a comment

Uh oh!

maithili20 commented Jan 31, 2026

Uh oh!

Sakshitapkir03 Feb 2, 2026

Uh oh!

Sakshitapkir03 Feb 2, 2026

Uh oh!

sonarqubecloud bot commented Feb 7, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

Uh oh!

Comments

Conversation

marcusyi1 commented Jan 15, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Related PRs (if any):

Main changes explained:

How to test:

Prerequisites

Step 1: Create a Facebook Developer Account

Step 2: Create a New App

Step 3: Add Facebook Login Product

Step 4: Configure OAuth Settings

Step 5: Get Your App Credentials

Step 6: Configure Environment Variables

Step 7: Enable HTTPS for Local Development

Step 8: Run and Test

Verification Checklist

Troubleshooting

Screenshots or videos of changes:

Uh oh!

netlify bot commented Jan 15, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for highestgoodnetwork-dev ready!

Uh oh!

Anusha-Gali left a comment

Choose a reason for hiding this comment

Uh oh!

maithili20 commented Jan 29, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Anusha-Gali left a comment

Choose a reason for hiding this comment

Uh oh!

maithili20 commented Jan 31, 2026

Uh oh!

Sakshitapkir03 Feb 2, 2026

Choose a reason for hiding this comment

Uh oh!

Sakshitapkir03 Feb 2, 2026

Choose a reason for hiding this comment

Uh oh!

sonarqubecloud bot commented Feb 7, 2026

Quality Gate passed

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

marcusyi1 commented Jan 15, 2026 •

edited

Loading

netlify bot commented Jan 15, 2026 •

edited

Loading

maithili20 commented Jan 29, 2026 •

edited

Loading