Authentication with Facebook API is necessary to access certain features like user data, posts, etc. Facebook provides an OAuth 2.0 authentication protocol to authenticate users and obtain an access token. In order to use this protocol with React, we need to follow a few steps. Let's dive in.

Step 1: Create a Facebook App and Get App ID and App Secret

To use Facebook authentication with your React app, you first need to create a Facebook app on the Facebook Developer Portal. After creating the app, you can find your App ID and App Secret in the app's dashboard.

Step 2: Install the Facebook SDK and React Facebook Login package

To use the Facebook API with React, we need to install the Facebook SDK and the `react-facebook-login` package using the npm package manager. Run the following command in your terminal:

```
npm install facebook-sdk react-facebook-login
```

Step 3: Initialize the Facebook SDK

In order to use the Facebook SDK, we need to initialize it with our App ID. We can do this by adding the following code to our React component:

```typescript
import React, { useEffect } from 'react';
import FacebookLogin from 'react-facebook-login';

const App = () => {
  useEffect(() => {
    window.fbAsyncInit = function() {
      window.FB.init({
        appId            : 'YOUR_APP_ID',
        autoLogAppEvents : true,
        xfbml            : true,
        version          : 'v10.0'
      });
    };
 
    (function(d, s, id) {
      let js, fjs = d.getElementsByTagName(s)[0];
      if (d.getElementById(id)) return;
      js = d.createElement(s); js.id = id;
      js.src = "https://connect.facebook.net/en_US/sdk.js";
      fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));
  }, []);

  return (
    <div>
      {/* your component code here */}
    </div>
  );
};

export default App;
```

I﻿n the above if you are using Typescript and the compiler complains that `window.FB` does not exist, simply change this line to `(window as any).FB`.

In the `window.fbAsyncInit` function, we initialize the Facebook SDK with our App ID and set the version to use. In the `useEffect` hook, we load the Facebook SDK asynchronously and set the SDK to auto-log app events.

Step 4: Add Facebook Login Button

To allow users to authenticate with Facebook, we need to add a Facebook Login button to our React component. We can use the `react-facebook-login` package to add this button. Add the following code to your component:

```typescript
import React, { useEffect } from 'react';
import FacebookLogin from 'react-facebook-login';

const App = () => {
  useEffect(() => {
    // Initialize Facebook SDK here from above
  }, []);

  const responseFacebook = (response) => {
    console.log(response);
  };

  return (
    <div>
      <FacebookLogin
        appId="YOUR_APP_ID"
        autoLoad={false}
        fields="name,email,picture"
        callback={responseFacebook}
        scope="ads_read,ads_management"
      />
    </div>
  );
};

export default App;
```

In the `FacebookLogin` component, we set the `appId` to our App ID and specify the `fields` we want to retrieve from the user's Facebook profile. We also provide a `callback` function.

T﻿he additional `scope` requests access to the Facebook user's Ads data which is available if they have been running ads on the Facebook platform.

T﻿he callback function will receive the user's authentication token which can be added to subsequent requests to other Facebook API endpoints to authenticate and return data in the context of that user.

This post will be discussing how to authenticate with the Facebook API using OAuth2, React and requesting the required scopes to access the Facebook Ads/Marketing API.

How to Authenticate with Facebook using OAuth2 and React

![React-Stock-Image](/assets/react-face-code.jpg "React Code")

### Create a React App

The first thing we'll need to add HTTP interceptors to is an app...

Using the instruction on the Create-React-App site, [create a React app with Typescript](https://create-react-app.dev/docs/getting-started#creating-a-typescript-app).

### Add Axios to the App

For those unfamiliar with [Axios](https://github.com/axios/axios), it is an npm package for making HTTP requests.

After the app has finished setting up, in a terminal add Axios to the app:

`npm i axios`

### Configure the HTTP Interceptors

It is trivial to actually configure the interceptors in your React app.

In the index.tsx file of your React app add the following:

```typescript
import axios from "axios";

// Configure outbound request interceptor logic
axios.interceptors.request.use(request => {
  return request;
}, error => Promise.reject(error));

// Configure incoming response interceptor logic
axios.interceptors.response.use(response => {
  return response;
}, error => Promise.reject(error));
```

These two use() calls on the request and response objects in the Axios interceptors does the magic to modify the outgoing request and the incoming response data. 

In the anonymous arrow function, it is possible to configure any custom logic required for your app.

Commonly, this will be adding auth token headers along with setting/retrieving other headers or local storage values.

A how-to for adding HTTP interceptors to a Create-React-App app with the Axios npm library to check and modify request and response headers for all HTTP requests

HTTP Interceptors in a Create-React-App with Axios

T﻿he trick to this is knowing that under the hood, Azure web apps that are running on Linux use the PM2 process manager to keep the web app online.

O﻿nce this is understood, the solution becomes relatively simple as the [PM2 documentation](https://pm2.keymetrics.io/docs/usage/pm2-doc-single-page/#serving-spa-redirect-all-to-indexhtml) itself makes mention of how to handle SPA applications. This will then make sure that all URL requests are redirected to the index.htrml file, which in our case is the React index.

F﻿or our Azure web app, all we need to do is update the start-up command to let PM2 know we are running a SPA application:

```textile
// Start up command needs to be:
pm2 serve /home/site/wwwroot/build --no-daemon --spa
```

T﻿o do this for your Azure web app, open the app in the portal, navigate to configuration, then general settings then Startup Command.

![Azure-portal-app-config-settings](/assets/screenshot-2024-02-19-at-7.01.43 pm.png "Azure Portal App Config Settings")

A﻿fter saving this setting, restart the web app and you will be able to navigate tothe routes configured in your React App.

Publishing a react app to Azure web apps is fairly trivial. However, when the web app is running Linux and the React app is using the React Router for a SPA application, the default configuration does not work.

How to Authenticate with Facebook using OAuth2 and React

HTTP Interceptors in a Create-React-App with Axios

Publishing a React App with Routing to a Linux Azure Web App