feat(app,iam): replace external login component with our own login bu…

…tton

- replace react-facebook-login component with basic facebook SDK
- add `luxon` datetime library
- add new environment variable FACEBOOK_APP_ID to app and iam

[#27]

app/.env-example.env

@@ -1,6 +1,8 @@
 # .env
 NEXT_PUBLIC_DPOPP_GOOGLE_CLIENT_ID=MY-APP-ID.apps.googleusercontent.com
+NEXT_PUBLIC_DPOPP_TWITTER_CLIENT_ID=ABC123456789
 NEXT_PUBLIC_DPOPP_TWITTER_CALLBACK=http://localhost:3000/
+NEXT_PUBLIC_DPOPP_FACEBOOK_APP_ID=123456789
 
 NEXT_PUBLIC_DPOPP_IAM_URL=http://localhost:80/api/
 NEXT_PUBLIC_DPOPP_PROCEDURE_URL=http://localhost:80/procedure/

app/__tests__/pages/Dashboard.test.tsx

@@ -41,6 +41,10 @@ const mockUserContext: UserContextState = {
       providerSpec: STAMP_PROVIDERS.POAP,
       stamp: undefined,
     },
+    Facebook: {
+      providerSpec: STAMP_PROVIDERS.Facebook,
+      stamp: undefined,
+    },
   },
   handleAddStamp: handleAddStamp,
   handleCreatePassport: mockCreatePassport,

app/__tests__/pages/Home.test.tsx

@@ -40,6 +40,10 @@ const mockUserContext: UserContextState = {
       providerSpec: STAMP_PROVIDERS.POAP,
       stamp: undefined,
     },
+    Facebook: {
+      providerSpec: STAMP_PROVIDERS.Facebook,
+      stamp: undefined,
+    },
   },
   handleAddStamp: handleAddStamp,
   handleCreatePassport: mockCreatePassport,

app/__tests__/pages/index.test.tsx

@@ -37,6 +37,10 @@ const mockUserContext: UserContextState = {
       providerSpec: STAMP_PROVIDERS.POAP,
       stamp: undefined,
     },
+    Facebook: {
+      providerSpec: STAMP_PROVIDERS.Facebook,
+      stamp: undefined,
+    },
   },
   handleAddStamp: handleAddStamp,
   handleCreatePassport: mockCreatePassport,

app/components/ProviderCards/FacebookCard.tsx

@@ -4,10 +4,6 @@ import React, { useContext } from "react";
 // --- Identity tools
 import { fetchVerifiableCredential } from "@dpopp/identity/dist/commonjs";
 
-// --- Facebook OAuth toolkit
-// import FacebookLogin from "react-facebook-login";
-import FacebookLogin from "react-facebook-login/dist/facebook-login-render-props";
-
 // --- UserContext
 import { UserContext } from "../../context/userContext";
 
@@ -37,13 +33,21 @@ export interface ReactFacebookLoginInfo {
 
 // import from .env
 const iamUrl = process.env.NEXT_PUBLIC_DPOPP_IAM_URL || "";
-const FacbookAppId = process.env.NEXT_PUBLIC_DPOPP_FACEBOOK_APP_ID || "";
 
 const providerId: PROVIDER_ID = "Facebook";
 
 export default function FacebookCard(): JSX.Element {
   const { address, signer, handleAddStamp, allProvidersState } = useContext(UserContext);
 
+  const onClick = () => {
+    //@ts-ignore assuming FB.init was already called; see facebookSdkScript in pages/index.tsx
+    FB.login(function (response) {
+      if (response.status === "connected") {
+        onFacebookSignIn(response.authResponse);
+      }
+    });
+  };
+
   const onFacebookSignIn = (response: ReactFacebookLoginInfo): void => {
     // fetch the verifiable credential
     fetchVerifiableCredential(
@@ -69,61 +73,15 @@ export default function FacebookCard(): JSX.Element {
       });
   };
 
-  /*
-  Sample Response Attributes Returned From FacebookLogin Component
-  {
-    accessToken,
-    data_access_expiration_time,
-    expiresIn,
-    graphDomain,
-    id,
-    name,
-    picture,
-    signedRequest,
-    userID,
-  }
-  */
-
-  /* 
-accessToken: "EAAQyt60slUEBAMNXarhBqPYP6FOE91ZBAwFRzXCeZCNPH8ZA2ZAIwNpYYij7uMaXzBHwbBddrHyIGYcK17T7VRJUj9DAVf59ZCyov1xEPfDH9SsgZB8YKghWh2k6g38J8SmbZBzBUmZBSZC9hp3fyW9UPad64lxN1gCiC1kEoHUo4yfaUyQqpZBWDNQ64VAyWzNxozemVEBLzO009nFR0r5S07PRyIULVxcdUZD"
-data_access_expiration_time: 1660677180
-expiresIn: 6420
-graphDomain: "facebook"
-id: "105091968877919"
-name: "Dpopp Dev"
-picture: {data: {…}}
-signedRequest: "vAISNDhLhfVqshjkAfMpfW9SFxMZNxI_b-z5ZwDLz68.eyJ1c2VyX2lkIjoiMTA1MDkxOTY4ODc3OTE5IiwiY29kZSI6IkFRQ29FSU93S2h2NWxRc0d1emFxa2V5dnBaY1hPS2NNVF9zR0ZNcGdDclRrNGlTZDhGUjFHQkVNZ1IwdURkU3NQZU43U2Y0bzAtSk5HeTVpZnBpQ3RtTlMtZnVLQm52Z19keTh2c1NBNlp6ZjhRUnpBLWlfYTA5bEZLN1hsUmRnd3ZEb2xXb2tlNjdoY1NieUlLeXVkQjdETmtJck0wZ01OR0d4bmlxMXZfd2xIMDRMN2NTSDRzRm80TGpJa0ZLSHlOeFV3OFdtWGJaeG1CRjkzLWhFR29ubFNxVzJTS3FaaHpWb1UxQXY4REpuYUdvelNlWkNEX003RlZXcks5cTZpcWxBeklYTHhmVzdMOGVtQ2J3ZzRqT0dTbU1Ld3dBS1RKQ3BWcU55VExtRF9XTXJ6Y1k4X1BQREJxYVJZTzlNS05kUWNHY0RLN1NNZ0RjeVNfNWJURk1iQl9QV2prd2FuSmV1UzJWV1hMN1lxNTM2aS1TVk5nOEVLb0tYUGdjMjFNUSIsImFsZ29yaXRobSI6IkhNQUMtU0hBMjU2IiwiaXNzdWVkX2F0IjoxNjUyOTAxMTgwfQ"
-userID: "105091968877919"
-  */
-
   return (
     <Card
-      providerSpec={allProvidersState[providerId].providerSpec as ProviderSpec}
-      verifiableCredential={allProvidersState[providerId].stamp?.credential}
+      providerSpec={allProvidersState[providerId]!.providerSpec as ProviderSpec}
+      verifiableCredential={allProvidersState[providerId]!.stamp?.credential}
       issueCredentialWidget={
-        <FacebookLogin
-          appId={FacbookAppId}
-          autoLoad={true}
-          fields="name,email,picture"
-          scope="public_profile"
-          callback={(response: ReactFacebookLoginInfo) => {
-            console.log("facebook response ", response);
-            if (response) {
-              onFacebookSignIn(response as ReactFacebookLoginInfo);
-            }
-          }}
-          onFailure={(response: ReactFacebookLoginInfo): void => {
-            console.log("ERROR: ", response);
-          }}
-          render={(renderProps: { onClick: React.MouseEventHandler<HTMLButtonElement> | undefined }): JSX.Element => (
-            <button className="verify-btn" onClick={renderProps.onClick}>
-              Verify
-            </button>
-          )}
-        />
+        <button className="verify-btn" onClick={onClick}>
+          Verify
+        </button>
       }
     />
   );
 }
-
-// curl -i -X GET "https://graph.facebook.com/debug_token?input_token=EAAQyt60slUEBAMNXarhBqPYP6FOE91ZBAwFRzXCeZCNPH8ZA2ZAIwNpYYij7uMaXzBHwbBddrHyIGYcK17T7VRJUj9DAVf59ZCyov1xEPfDH9SsgZB8YKghWh2k6g38J8SmbZBzBUmZBSZC9hp3fyW9UPad64lxN1gCiC1kEoHUo4yfaUyQqpZBWDNQ64VAyWzNxozemVEBLzO009nFR0r5S07PRyIULVxcdUZD&access_token=EAAQyt60slUEBAMNXarhBqPYP6FOE91ZBAwFRzXCeZCNPH8ZA2ZAIwNpYYij7uMaXzBHwbBddrHyIGYcK17T7VRJUj9DAVf59ZCyov1xEPfDH9SsgZB8YKghWh2k6g38J8SmbZBzBUmZBSZC9hp3fyW9UPad64lxN1gCiC1kEoHUo4yfaUyQqpZBWDNQ64VAyWzNxozemVEBLzO009nFR0r5S07PRyIULVxcdUZD"

app/context/userContext.tsx

@@ -212,14 +212,16 @@ export const UserContextProvider = ({ children }: { children: any }) => {
     passport?.stamps.forEach((stamp: Stamp) => {
       const { provider } = stamp;
       const providerState = allProvidersState[provider];
-      const newProviderState = {
-        providerSpec: providerState.providerSpec,
-        stamp,
-      };
-      setAllProviderState((prevState) => ({
-        ...prevState,
-        [provider]: newProviderState,
-      }));
+      if (providerState) {
+        const newProviderState = {
+          providerSpec: providerState.providerSpec,
+          stamp,
+        };
+        setAllProviderState((prevState) => ({
+          ...prevState,
+          [provider]: newProviderState,
+        }));
+      }
     });
     // TODO remove providerstate on stamp removal
   }, [passport]);

app/package.json

@@ -32,7 +32,6 @@
     "next": "latest",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "react-facebook-login": "^4.1.1",
     "react-google-login": "^5.2.2",
     "react-router-dom": "^6.3.0",
     "ts-debounce": "^4.0.0"

app/pages/index.tsx

@@ -6,11 +6,14 @@ import { HashRouter as Router, Routes, Route } from "react-router-dom";
 
 // -- Next Methods
 import type { NextPage } from "next";
+import Head from "next/head";
 
 // -- Pages
 import Home from "./Home";
 import Dashboard from "./Dashboard";
 
+const FacebookAppId = process.env.NEXT_PUBLIC_DPOPP_FACEBOOK_APP_ID || "";
+
 const App: NextPage = () => {
   // pull any search params
   const queryString = new URLSearchParams(window?.location?.search);
@@ -29,13 +32,41 @@ const App: NextPage = () => {
     return <div></div>;
   }
 
+  const facebookSdkScript = (
+    <script
+      dangerouslySetInnerHTML={{
+        __html: `
+          window.fbAsyncInit = function() {
+            FB.init({
+              appId      : '${FacebookAppId}',
+              cookie     : true,
+              xfbml      : true,
+              version    : 'v13.0'
+            });
+            FB.AppEvents.logPageView();   
+          };
+        
+          (function(d, s, id){
+            var 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 (
-    <Router>
-      <Routes>
-        <Route path="/" element={<Home />} />
-        <Route path="/dashboard" element={<Dashboard />} />
-      </Routes>
-    </Router>
+    <div>
+      <Head>{facebookSdkScript}</Head>
+      <Router>
+        <Routes>
+          <Route path="/" element={<Home />} />
+          <Route path="/dashboard" element={<Dashboard />} />
+        </Routes>
+      </Router>
+    </div>
   );
 };
 

iam/.env-example.env

@@ -3,6 +3,7 @@ GOOGLE_CLIENT_ID=MY-APP-ID.apps.googleusercontent.com
 GOOGLE_CLIENT_SECRET=MY_APP_SECRET
 TWITTER_CLIENT_ID=MY-APP-ID-TWITTER
 TWITTER_CLIENT_SECRET=MY_APP_SECRET
+FACEBOOK_APP_ID=MY_APP_ID
 
 IAM_JWK='{"kty":"OKP","crv":"Ed25519","x":"yourIamKeyValues","d":"yourIamKeyValues"}'
 RPC_URL=https://eth-mainnet.alchemyapi.io/v2/<API_KEY>