logicspike/docs

Learning

Step-by-Step Guide: Setting Up Facebook/Instagram OAuth Credentials

To allow LogicSpike users to connect their Instagram and Facebook accounts, we need to create our "Master App" on the Facebook Developer portal. Follow these exact steps to get your FACEBOOK_CLIENT_ID and FACEBOOK_CLIENT_SECRET.

Step 1: Create the Facebook App

  1. Go to the Facebook Developers Portal.
  2. Log in with your Facebook account.
  3. In the top right corner, click My Apps.
  4. Click the green Create App button.
  5. What do you want your app to do?: Select Business and click Next.
  6. Add an app name: Type LogicSpike Content Engine.
  7. App contact email: Provide your email address.
  8. Business Account: Select your Business Manager account (or leave as "No Business Manager selected" if you don't have one).
  9. Click Create app and enter your Facebook password if prompted.

Step 2: Add Necessary Products

You are now on the App Dashboard. We need to add products for login and Instagram.

  1. Scroll down to the Add products to your app section.
  2. Find Facebook Login for Business and click Set up.
  3. On the left sidebar, under "Use cases", ensure Authentication and account creation is configured.

Step 3: Configure the OAuth Redirect URL (Crucial Step)

Facebook needs to know that http://localhost:3000 is a safe place to send the secret code back to.

  1. In the left sidebar, click Facebook Login for Business > Settings.
  2. Look for the field called Valid OAuth Redirect URIs.
  3. Paste exactly this URL into the box: http://localhost:3000/dashboard/settings
  4. Make sure:
    • Client OAuth Login is Yes
    • Web OAuth Login is Yes
    • Enforce HTTPS is Yes (Facebook forces HTTPS but usually makes exceptions for localhost).
  5. Click Save Changes at the bottom right.

Step 4: Add Necessary Permissions (Scopes)

We need permission to post content on behalf of the user. Facebook requires you to request these permissions in the app settings, but we will also ask for them in our code.

  1. On the left sidebar, click App Review > Permissions and Features.
  2. Search for and Request advanced access for the following permissions (this may require business verification or app review if you want to take it out of Development mode later, but is fine for local testing):
    • pages_show_list
    • pages_read_engagement
    • pages_manage_posts
    • instagram_basic
    • instagram_content_publish

Step 5: Get Your Keys

  1. In the left sidebar, go to App Settings > Basic.
  2. Look at the top. You will see two fields:
    • App ID: (This is a long number)
    • App Secret: (Click 'Show' and enter your Facebook password to reveal it).

Step 6: Update Environment Variables

  1. Copy the App ID.
  2. Open your apps/content-engine/.dev.vars file.
  3. Paste the App ID into the FACEBOOK_CLIENT_ID variable.
  4. Copy the App Secret.
  5. Paste the App Secret into the FACEBOOK_CLIENT_SECRET variable.

It should look something like this:

FACEBOOK_CLIENT_ID="1234567890123456"
FACEBOOK_CLIENT_SECRET="abc123def456ghi789jkl012mno345pqr"

Step 7: Restart and Test

  1. Go to your terminal running turbo run dev.
  2. Press Ctrl + C (or Cmd + C) to stop it.
  3. Run npm run dev or turbo run dev again to load the new .dev.vars.
  4. Go to http://localhost:3000/dashboard/settings and click the "Connect Instagram" button!
Learning