Facebook Social Login with Magic

​

Usage

​

Prerequisites

• You will need a Facebook Developer account
• You will need to have the Magic SDK installed into your web application
• You will need to have the Magic SDK - OAuth Extension installed into your web application

​

Facebook Setup (v1 extension)

1. Follow Facebook’s instructions to register a Facebook application
2. When creating your Facebook application, select Authenticate and request data from users with Facebook Login, click Next and follow the prompts to add app information

3. On the next screen, you’ll be presented with steps to customize your Facebook application. Click Customize adding a Facebook Login button.

4. Go to your Magic Dashboard
5. Select the Magic app for which you’d like to enable Facebook Login, or create a new application
6. Navigate to Authentication -> Social Logins from the sidebar
7. Click the toggle for Facebook
8. Copy the Redirect URI field from your Magic Dashboard
9. Back in your Facebook Login Settings, paste the Redirect URI in the Valid OAuth Redirect URIs input and save the changes

10. From the main Facebook dashboard, click on App Settings -> Basic
11. Copy the App Id and App Secret

12. From the Magic Dashboard, add your App Id and App Secret to your Facebook Login configuration
13. Click Save
14. Click Test Connection to give your new Facebook OAuth flow a try!

​

Facebook Setup (v2 extension)

• Follow above steps, but disregard Magic’s Redirect URI in step 8
• In step 9, paste the Redirect URI you are passing in as the redirectURI argument to the loginWithRedirect method

await magic.oauth2.loginWithRedirect({
  provider: 'facebook',
  redirectURI: 'https://your-app.com/your/oauth/callback', // <== whitelist this with Facebook
});

​

Resources

• Facebook Social Login Demo