Facebook stamp wip

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/__test-fixtures__/databaseStorageFixtures.ts

@@ -49,6 +49,11 @@ export const twitterStampFixture: Stamp = {
  credential,
 };
 
+export const facebookStampFixture: Stamp = {
+ provider: "Facebook",
+ credential,
+};
+
 export const passportFixture: Passport = {
  issuanceDate: new Date("2022-01-01"),
  expiryDate: new Date("2022-01-02"),

app/__tests__/components/ProviderCards/FacebookCard.test.tsx

@@ -0,0 +1,72 @@
+import React from "react";
+import { render, screen } from "@testing-library/react";
+import { FacebookCard } from "../../../components/ProviderCards";
+
+import { UserContext, UserContextState } from "../../../context/userContext";
+import { mockAddress, mockWallet } from "../../../__test-fixtures__/onboardHookValues";
+import { STAMP_PROVIDERS } from "../../../config/providers";
+import { facebookStampFixture } from "../../../__test-fixtures__/databaseStorageFixtures";
+
+jest.mock("../../../utils/onboard.ts");
+
+const mockHandleConnection = jest.fn();
+const mockCreatePassport = jest.fn();
+const handleAddStamp = jest.fn();
+const mockUserContext: UserContextState = {
+ loggedIn: true,
+ passport: undefined,
+ isLoadingPassport: false,
+ allProvidersState: {
+ Facebook: {
+ providerSpec: STAMP_PROVIDERS.Facebook,
+ stamp: undefined,
+ },
+ },
+ handleAddStamp: handleAddStamp,
+ handleCreatePassport: mockCreatePassport,
+ handleConnection: mockHandleConnection,
+ address: mockAddress,
+ wallet: mockWallet,
+ signer: undefined,
+ walletLabel: mockWallet.label,
+};
+
+describe("when user has not verfied with FacebookProvider", () => {
+ it("should display a facebook verification button", () => {
+ render(
+ <UserContext.Provider value={mockUserContext}>
+ <FacebookCard />
+ </UserContext.Provider>
+ );
+
+ const verifyFacebookButton = screen.queryByRole("button", {
+ name: /Verify/,
+ });
+
+ expect(verifyFacebookButton).toBeInTheDocument();
+ });
+});
+
+describe("when user has verified with FacebookProvider", () => {
+ it("should display that facebook is verified", () => {
+ render(
+ <UserContext.Provider
+ value={{
+ ...mockUserContext,
+ allProvidersState: {
+ Facebook: {
+ providerSpec: STAMP_PROVIDERS.Facebook,
+ stamp: facebookStampFixture,
+ },
+ },
+ }}
+ >
+ <FacebookCard />
+ </UserContext.Provider>
+ );
+
+ const facebookVerified = screen.queryByText(/Verified/);
+
+ expect(facebookVerified).toBeInTheDocument();
+ });
+});

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/CardList.tsx

@@ -2,7 +2,7 @@
 import React from "react";
 
 // --- Identity Providers
-import { GoogleCard, SimpleCard, EnsCard, PohCard, TwitterCard, PoapCard } from "./ProviderCards";
+import { GoogleCard, SimpleCard, EnsCard, PohCard, TwitterCard, PoapCard, FacebookCard } from "./ProviderCards";
 
 export const CardList = (): JSX.Element => {
  return (
@@ -15,6 +15,7 @@ export const CardList = (): JSX.Element => {
  <TwitterCard />
  <PohCard />
  <PoapCard />
+ <FacebookCard />
  </div>
  </div>
  </section>

app/components/ProviderCards/EnsCard.tsx

@@ -92,8 +92,8 @@ export default function EnsCard(): JSX.Element {
 
  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={issueCredentialWidget}
  />
  );

app/components/ProviderCards/FacebookCard.tsx

@@ -0,0 +1,87 @@
+// --- React Methods
+import React, { useContext } from "react";
+
+// --- Identity tools
+import { fetchVerifiableCredential } from "@dpopp/identity/dist/commonjs";
+
+// --- UserContext
+import { UserContext } from "../../context/userContext";
+
+// --- Style Components
+import { Card } from "../Card";
+
+import { PROVIDER_ID } from "@dpopp/types";
+import { ProviderSpec } from "../../config/providers";
+
+export interface ReactFacebookLoginInfo {
+ id: string;
+ userID: string;
+ accessToken: string;
+ name?: string | undefined;
+ email?: string | undefined;
+ picture?:
+ | {
+ data: {
+ height?: number | undefined;
+ is_silhouette?: boolean | undefined;
+ url?: string | undefined;
+ width?: number | undefined;
+ };
+ }
+ | undefined;
+}
+
+// import from .env
+const iamUrl = process.env.NEXT_PUBLIC_DPOPP_IAM_URL || "";
+
+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(
+ iamUrl,
+ {
+ type: "Facebook",
+ version: "0.0.0",
+ address: address || "",
+ proofs: {
+ accessToken: response.accessToken,
+ },
+ },
+ signer as { signMessage: (message: string) => Promise<string> }
+ )
+ .then((verified): void => {
+ handleAddStamp({
+ provider: "Facebook",
+ credential: verified.credential,
+ });
+ })
+ .catch((e): void => {
+ throw e;
+ });
+ };
+
+ return (
+ <Card
+ providerSpec={allProvidersState[providerId]!.providerSpec as ProviderSpec}
+ verifiableCredential={allProvidersState[providerId]!.stamp?.credential}
+ issueCredentialWidget={
+ <button className="verify-btn" onClick={onClick}>
+ Verify
+ </button>
+ }
+ />
+ );
+}

app/components/ProviderCards/GoogleCard.tsx

@@ -51,8 +51,8 @@ export default function GoogleCard(): JSX.Element {
 
  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={
  <GoogleLogin
  clientId={googleClientId}

app/components/ProviderCards/PohCard.tsx

@@ -85,8 +85,8 @@ export default function PohCard(): JSX.Element {
 
  return (
  <Card
- providerSpec={allProvidersState[providerId].providerSpec}
- verifiableCredential={allProvidersState[providerId].stamp?.credential}
+ providerSpec={allProvidersState[providerId]!.providerSpec}
+ verifiableCredential={allProvidersState[providerId]!.stamp?.credential}
  issueCredentialWidget={issueCredentialWidget}
  />
  );

app/components/ProviderCards/SimpleCard.tsx

@@ -51,8 +51,8 @@ export default function SimpleCard(): JSX.Element {
 
  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={issueCredentialWidget}
  />
  );

app/components/ProviderCards/TwitterCard.tsx

@@ -112,8 +112,8 @@ export default function TwitterCard(): JSX.Element {
 
  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={issueCredentialWidget}
  />
  );

app/components/ProviderCards/index.tsx

@@ -4,3 +4,4 @@ export { default as EnsCard } from "./EnsCard";
 export { default as PohCard } from "./PohCard";
 export { default as TwitterCard } from "./TwitterCard";
 export { default as PoapCard } from "./PoapCard";
+export { default as FacebookCard } from "./FacebookCard";

app/config/providers.ts

@@ -35,4 +35,8 @@ export const STAMP_PROVIDERS: Readonly<Providers> = {
  name: "POAP",
  description: "POAP Verification",
  },
+ Facebook: {
+ name: "Facebook",
+ description: "Facebook name",
+ },
 };

app/context/userContext.tsx

@@ -19,7 +19,7 @@ import { EthereumAuthProvider } from "@self.id/web";
 import { useViewerConnection } from "@self.id/framework";
 
 export type AllProvidersState = {
- [provider in PROVIDER_ID]: {
+ [provider in PROVIDER_ID]?: {
  providerSpec: ProviderSpec;
  stamp?: Stamp;
  };
@@ -50,6 +50,10 @@ const startingAllProvidersState: AllProvidersState = {
  providerSpec: STAMP_PROVIDERS.POAP,
  stamp: undefined,
  },
+ Facebook: {
+ providerSpec: STAMP_PROVIDERS.Facebook,
+ stamp: undefined,
+ },
 };
 
 export interface UserContextState {
@@ -208,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]);