Facebook Login Configuration

Overview

This guide walks you through creating and configuring a Facebook App to enable Facebook Login. You'll configure settings in Meta's Developer Portal and gather the credentials needed for Median App Studio.

Before you begin

Make sure you have:

• A Facebook Developer account (create one here)
• Your app's iOS Bundle ID (example: co.median.ios.soclogin)
• Your app's Android Package Name (example: co.median.android.soclogin)
• our app's Android Key Hash (get from the Median.co team if we're signing your app)
• An Admin or Developer role in your Facebook account

Step 1: Create your Facebook app

1.1 Start a new app

1. Log in to Facebook Developers.
2. Click My Apps → Create App.

3. Select Authenticate and request data from users with Facebook Login.
4. Click Next.

1.2 Add app details

1. App Name: Enter a user-friendly name (shown to users during login)
2. App Contact Email: Enter a valid contact email
3. Click Create App.

Save your App ID and Display Name: After creation, you'll see your App ID and Display Name in the top-left corner. Copy these values, you'll need them later for Median App Studio configuration.

Step 2: Configure basic settings

2.1 Configure OAuth settings

1. In the left sidebar: Facebook Login → Settings.
2. Enable "Login with the JavaScript SDK" (toggle on)
3. Add your Valid OAuth Redirect URIs:
   • Example: https://yourdomain.com/auth/callback
4. Add your Allowed Domains for the JavaScript SDK:
   • Example: yourdomain.com
5. Click Save Changes.

2.2 Configure permissions

1. In the left sidebar: App Review → Permissions and Features.
2. Request Advanced Access for:
   • email (required for user identification)
   • public_profile (required for basic user info)
3. Click Request Advanced Access

⚠️

App Review Required
Some permissions require Facebook's approval before going live. Learn about Facebook App Review

2.3 Get your client token

1. In the left sidebar: Settings → Advanced.
2. Scroll to the Security section.
3. Click Show next to Client Token.
4. Copy and save this token, you'll need it for Median App Studio configuration.

Step 3: Add platform configurations

You need to configure both iOS and Android platforms (these are separate, parallel steps).

1. In left sidebar: Settings → Basic.
2. Scroll to bottom → Click "+ Add Platform".

3. Select iOS.
4. Fill in:
   • Bundle ID: Your iOS Bundle ID (example: co.median.ios.soclogin)
   • Add any test/development Bundle IDs if applicable.
5. Click Save Changes.

Testing Tip If you have multiple development builds, add each Bundle ID variant (e.g., com.yourapp.debug)

Website Configuration:

1. Same screen: Click "+ Add Platform" again
2. Select Website
3. Site URL: Enter your website URL (example: https://yourdomain.com)
4. Click Save Changes

⚠️

Meta Portal Instability
If you encounter saving issues, try: different browser, incognito mode, or VPN connection. You can skip the "iPhone Store ID" field during initial setup.

Step 4: Add credentials to the Median App Studio

Now that your Facebook App is configured, add these credentials to the Median App Studio:

1. Log in to the Median App Studio.
2. Navigate to: Native Plugins → Social Login → Settings.
3. Enter your Facebook Configuration:

4. Click Confirm and Save.
5. Rebuild your app for changes to take effect.

Step 5: Test your configuration

Before going live:

• Test login in your development app
• Verify token exchange works
• Test with multiple Facebook accounts
• Test on both iOS and Android devices
• Verify that the user profile data is returned correctly

Important notes

Facebook Limited Login (iOS)

On iOS, if users decline App Tracking Transparency (ATT) permission, Facebook automatically uses a "Limited Login" method.

Key differences with Limited Login:

• Returns a JWT token instead of an access token
• Graph API endpoints are unavailable
• Requires different token validation

App Tracking Transparency

App Tracking Transparency permission is required to use standard Facebook Login on iOS. If users decline ATT, Limited Login is used automatically.

Implementation:

1. Request ATT permission in your app.
2. If the user allows, the standard Facebook login opens.
3. If the user declines, the limited login version opens automatically

You can also force limited login by setting the forceLimitedLogin: true in your JavaScript Bridge call.