Facebook Login
First, create a Facebook developer account and enable “Facebook Login”.
Follow following steps to create developer account
Click on link 'Register now' or button 'Register as a Developer'.
It has four steps to complete registration process.
Accept the terms. - Click on checkbox to accept terms
Verify your account. - It will ask to enter your mobile number. You have to verify your mobile number.
Tell us about you - You have to tell about yourself, ie. your role (coder, tester, etc.), experience level (1 year, 2 years, etc), programming languages used (PHP, Web, etc), etc.
Build your integration - It will give message that regarding confirmation of developer account.
Now your registration process gets completed and you can create any facebook application now.
How to create a Facebook App
Step 1: Firstly you will need to login to your Facebook account and tap on My Apps > click on Create New APP.
Step 2: Choose Build Connected Experiences and tap to continue.
Fill in the fields(App Display Name, Email etc) provide in the form and tap/click on Create App
Step 3: Tap on the Setup button from the Facebook login section as displayed in the below screenshot.
Step 4: Select Web from the options as displayed in the below screenshot.
Then enter your website/backend url in the provided section below:
Step 5: Navigate to Settings and explore the basic section.
Add the App domain and contact email in the appropriate field.
Scroll down and click on Add platform and select Website. Add your website URL here if you haven't added it before.
Site URL: Add your site URL here and click on Save Changes
Step 6: Go to Facebook login and click on the Settings option.
Enable the Enforce HTTPS option and click on save changes. Add appropriate OAuth Redirect URLs.
OAuth Redirect URLs:
OAuth Redirect URLs from the firebase console on the authentication section. Url looks something like this (https://foodie-289cf.firebaseapp.com/__/auth/handler)
Facebook success redirect url: https://www.facebook.com/connect/login_success.html
NB: If facebook is flagging and error about using a facebook url. Create a short url from the facebook url using service like bitly.com
Click on the Save Changes tab.
Going Live (Development to Live)
You can toggle the facebook app from in development to live. There is a switch at the top to all the page, that allows you to switch a facebook app status from in development to live.
NB: While the app is in development you can only login using the facebook account used for creating the Facebook App. You need to enable the facebook app to Live for other facebook account to be able to login.
How to enable facebook on Firebase console
Navigate to authentication on firebase console, then click facebook to add facebook login credentials.
Firebase will need your app ID & your app secret (don’t share it, it’s secret).
Then click on save.
Changing Facebook client_id in flutter project
This is the last thing to do in the flutter project, navigate to Foodie > lib > bloc > login.bloc.dart, inside the signinWithFacebook function/method, replace client_id with the client_id from your facebook app.
That's all
Last updated
