> For the complete documentation index, see [llms.txt](https://backbench.gitbook.io/backbench-docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://backbench.gitbook.io/backbench-docs/3rd-party-integrations/login-using-facebook.md).
# Login using Facebook
## What You'll Need
Backbench account - [Sign Up](https://bench.backbench.io/signup), the personal account will always remain free to use.
Facebook Developer account - Create an App on Facebook [Developer account](https://developers.facebook.com/).
## Demo
{% embed url="" %}
Node.js Sample
{% endembed %}
{% embed url="" %}
BBLANG Sample
{% endembed %}
## Prerequisites for the app
1. **Setting up Facebook Login**: Inside Facebook App click on Setup button below Facebook Login dialog. Now choose Web, for next prompt you'll be needing a Site URL. For that you can copy paste the URL mentioned in endpoint section of backbench.
2. **Customizing Login Settings**: Click on settings on Facebook app page, now it is required to put a valid redirect Oauth for the login. (This is the URI, where you'll be redirecting after successful sign in to Facebook) For the time being, you can put the endpoint that you copied above with `/fb`. Then you can paste it in the field given on Facebook. \
The Oauth redirect URI will look like `https://USERID-BENCHID.backbench.io/fb`
3. **Making Facebook App Live**: To switch from development to production mode, there is a toggle switch on the top of the app, you can switch it to `on`, to allow login from multiple accounts.
4. **Make a note of variables**: Have of a note of following variables from your apps Basic Settings. \
`APP-ID, APP-SECRET AND REDIRECT-URI.`
## Frontend
1. Select +, in the upper right corner of **File manager** to create a html file . For example, say `fb.html` and select CREATE or hit Enter.
2. Copy and paste the code module from below.
3. Replace APP\_ID, REDIRECT\_URI then hit save. (step-4 in prerequisites)
```markup
Login using Facebook
Login with Facebook
```
## Backend
1. Select +, in the upper right corner to create a Module. For example, say "fb.js" and select CREATE or hit Enter.
2. Copy and paste the code module from below.
3. Replace APP\_ID, APP\_SECRET, REDIRECT\_URI then hit save.
4. Now map this saved module, to an endpoint name `/fb.` (in endpoint section)
{% tabs %}
{% tab title="Node.js" %}
```javascript
const request = require("request");
module.exports.endpoint = function(req, cb) {
request("https://graph.facebook.com/v2.12/oauth/access_token?app_id=APP_ID&redirect_uri=REDIRECT_URI&app_secret=APP_SECRET&code="+req.query.code,
function(error, response, body) {
if (error) {
cb({code: error});
} else {
var token = JSON.parse(body).access_token;
request("https://graph.facebook.com/v2.11/me?fields=name&access_token="+token,
function(error, reponse, body) {
if (error) {
cb(error);
} else {
var info = JSON.parse(body);
bb.log(info.name + " logged in!");
cb(undefined, {
access_token: token,
username: info.name
});
}
});
}
});
};
```
{% endtab %}
{% tab title="BBLANG" %}
```javascript
facebook:callback(req)->{
res = bb:http:post("https://graph.facebook.com/v2.10/oauth/access_token?app_id=APP_ID&redirect_uri=REDIRECT_URI&app_secret=APP_SECRET&code="+req.query.code)
access_token = std:parse(res.body).access_token //Token - can be saved for authentication
bb:http:get("https://graph.facebook.com/v2.11/me?fields=name,id,email&access_token="+access_token) //User details
};
```
{% endtab %}
{% endtabs %}
**For Node.js App:**
1. Select +, in the upper right corner to create a Module. For example, say "package.json" and select CREATE or hit Enter.
2. Copy and paste the code module from below.
```javascript
{
"dependencies": {
"request": "^2.88.0"
}
}
```
A **package.json** file lists the packages that your project depends on. allows you to specify the versions of a package that your project can use using semantic versioning rules.
## User Scopes
**scope should be a** comma or space separated list of [Permissions](https://developers.facebook.com/docs/facebook-login/permissions/) to request from the person using your app.
For example to access to a subset of items that are part of a person's public profile. A person's public profile refers to the following properties on the user object by default:
* **id**
* **cover**
* **name**
* **first\_name**
* **last\_name**
* **age\_range**
* **link**
* **gender**
* **locale**
* **picture**
* **timezone**
* **updated\_time**
* **verified**
```javascript
Login with Facebook
```
## Checking Login Status
A Manually Built Login must [create their own way of storing when a person has logged in](https://developers.facebook.com/docs/facebook-login/manually-build-a-login-flow#token), and when that indicator is not there, proceed on the assumption that they are logged out. If someone is logged out, then your app should redirect them to the Login dialog at an appropriate time — for example if they click a login button.
## Logout from Facebook
You can log people out of your app by removing/deleting the stored `access token` from your app.
For a comprehensive guide see, [Official Doc](https://developers.facebook.com/docs/facebook-login/manually-build-a-login-flow).