This project demonstrates how to integrate Facebook Login into a Next.js application, enabling users to authenticate with their Facebook credentials. This solution is ideal for businesses looking to offer a streamlined login process for their users.
- User session management
- Environment variable configuration for secure storage of Facebook App credentials
- Node.js 12.0 or later
- A Facebook Developer account
- A Facebook App with Facebook Login enabled
Start by cloning this repository to your local machine:
git clone https://github.com/yourusername/nextjs-facebook-login.git
cd nextjs-facebook-loginInstall the project dependencies by running:
npm installCreate a .env.local file in the root directory of your project, and add your Facebook App ID and Secret:
FACEBOOK_CLIENT_ID=YourFacebookAppId
FACEBOOK_CLIENT_SECRET=YourFacebookAppSecret
Start the development server with:
npm run devhttps://developers.facebook.com/docs/facebook-login/facebook-login-for-business
| Permission | User Access Tokens | Business Integration System User Access Tokens |
|---|---|---|
| ads_management | ✓ | ✓ |
| ads_read | ✓ | ✓ |
| business_management | ✓ | ✓ |
| catalog_management | ✓ | ✓ |
| email * | ✓ | N/A |
| instagram_basic | ✓ | ✓ |
| instagram_content_publish | ✓ | ✓ |
| instagram_manage_comments | ✓ | ✓ |
| instagram_manage_insights | ✓ | ✓ |
| instagram_manage_messages | ✓ | ✓ |
| instagram_shopping_tag_products | ✓ | ✓ |
| leads_retrieval | ✓ | ✓ |
| manage_fundraisers | ✓ | ✓ |
| pages_manage_cta | ✓ | ✓ |
| page_events | ✓ | ✓ |
| pages_manage_ads | ✓ | ✓ |
| pages_manage_engagement | ✓ | ✓ |
| pages_manage_instant_articles | ✓ | ✓ |
| pages_manage_metadata | ✓ | ✓ |
| pages_manage_posts | ✓ | ✓ |
| pages_messaging | ✓ | ✓ |
| pages_read_engagement | ✓ | ✓ |
| pages_read_user_content | ✓ | ✓ |
| pages_show_list | ✓ | ✓ |
| private_computation_access | ✓ | ✓ |
| public_profile * | ✓ | N/A |
| publish_video | ✓ | ✓ |
| read_insights | ✓ | ✓ |
| read_audience_network_insights | ✓ | ✓ |
| whatsapp_business_management | ✓ | ✓ |
| whatsapp_business_messaging | ✓ | ✓ |
- Ads Management Standard Access
- Business Asset User Profile Access
- Groups API
- Instagram Public Content Access
- Live Video API
- Page Mentions
- Page Public Content Access
- Page Public Metadata Access
- Human Agent
- App Ads
- App Events
- App Links
- Audience Network
- Commerce
- Conversions API for Business Messaging
- Facebook Pixel
- Facebook Extensions SDK
- Fundraiser API
- Groups API
- Instagram Graph API (excludes Instagram Basic Display API)
- Jobs
- Pages API
- Marketing API
- Messenger
- Meta Business Extension
- Sharing
- ThreatExchange
- Web Payments
- Webhooks
- WhatsApp Business Platform
Visit http://localhost:3000 in your browser to see the application in action.
For deployment, ensure you update the Facebook App's valid OAuth redirect URIs to match your production domain. Also, set your environment variables in your production environment accordingly.
Contributions are welcome! Please feel free to submit a pull request or open an issue for any improvements or bug fixes.
This project is licensed under the MIT License - see the LICENSE file for details.