Simplify boilerplate

README.md

@@ -1,6 +1,6 @@
-# Sismo Connect - Offchain Boilerplate Repository
+# Sismo Connect Starter - Offchain example
 
-This repository aims at providing simple boilerplate showing how to integrate Sismo Connect offchain while allowing you to test the integration locally as easily as possible.
+This repository aims at providing simple starter showing how to integrate Sismo Connect offchain while allowing you to test the integration locally as easily as possible.
 
 ## Usage
 
@@ -31,4 +31,4 @@ yarn dev
 
 After this command, you will have your local application running on http://localhost:3000.
 
-As you will see, the app showcase simple examples on how to register user in a database while maintaining privacy.
+As you will see, the app showcase simple examples on how to register user in a database while maintaining privacy.

next.config.js

@@ -1,4 +1,14 @@
 /** @type {import('next').NextConfig} */
-const nextConfig = {}
 
-module.exports = nextConfig
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  webpack: (config) => {
+    config.resolve.fallback = { "utf-8-validate": false, bufferutil: false };
+    config.experiments = {
+      ...config.experiments,
+    };
+    return config;
+  },
+};
+
+module.exports = nextConfig;

package.json

@@ -1,24 +1,26 @@
 {
-  "name": "front",
+  "name": "sismo-connect-app",
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "dev": "NODE_OPTIONS='--max-http-header-size=24576' next dev",
+    "dev": "next dev",
     "build": "next build",
-    "start": "NODE_OPTIONS='--max-http-header-size=24576' next start",
+    "start": "next start",
     "lint": "next lint"
   },
   "dependencies": {
-    "@sismo-core/sismo-connect-react": "0.0.16",
-    "@sismo-core/sismo-connect-server": "0.0.16",
-    "@types/node": "20.2.3",
-    "@types/react": "18.2.7",
-    "@types/react-dom": "18.2.4",
-    "eslint": "8.41.0",
-    "eslint-config-next": "13.4.3",
-    "next": "13.4.3",
-    "react": "18.2.0",
-    "react-dom": "18.2.0",
-    "typescript": "5.0.4"
+    "@sismo-core/sismo-connect-react": "0.0.17-beta.9",
+    "@sismo-core/sismo-connect-server": "0.0.17-beta.7",
+    "next": "^13.4.9",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@types/node": "^20.4.2",
+    "@types/react": "^18.2.14",
+    "@types/react-dom": "^18.2.7",
+    "eslint": "^8.44.0",
+    "eslint-config-next": "^13.4.9",
+    "typescript": "^5.1.6"
   }
 }

sismo-connect-config.ts

@@ -0,0 +1,64 @@
+import {
+  ClaimType,
+  AuthType,
+  SignatureRequest,
+  AuthRequest,
+  ClaimRequest,
+  VaultConfig,
+} from "@sismo-core/sismo-connect-client";
+
+// you can create a new Sismo Connect app at https://factory.sismo.io
+export const appId: `0x${string}` = "0xf4977993e52606cfd67b7a1cde717069";
+
+// indicate to the Vault that you want to use the impersonation mode
+// this should be used only in development
+export const vaultConfig: VaultConfig = {
+  impersonate: [
+    "twitter:dhadrien_:2390703980",
+    "github:dhadrien",
+    "twitter:dhadrien_",
+    "dhadrien.sismo.eth",
+    "github:leosayous21",
+    "leo21.sismo.eth",
+  ],
+};
+
+export const gitcoinGroupId = "0x1cde61966decb8600dfd0749bd371f12";
+export const sismoContributorGroupId = "0xe9ed316946d3d98dfcd829a53ec9822e";
+export const sismoLensFollowerGroupId = "0xabf3ea8c23ff96893ac5caf4d2fa7c1f";
+
+export const claims: ClaimRequest[] = [
+  // we ask the user to prove that he has a gitcoin passport with a score above 15
+  // https://factory.sismo.io/groups-explorer?search=0x1cde61966decb8600dfd0749bd371f12
+  {
+    groupId: gitcoinGroupId,
+    claimType: ClaimType.GTE,
+    value: 15,
+    isSelectableByUser: true,
+  },
+  // we ask the user to prove that he is part of the Sismo Contributors group and selectively prove its level
+  // https://factory.sismo.io/groups-explorer?search=0xe9ed316946d3d98dfcd829a53ec9822e
+  {
+    groupId: sismoContributorGroupId,
+    isSelectableByUser: true,
+  },
+  // we optionally ask the user to prove that he is following Sismo on Lens
+  // https://factory.sismo.io/groups-explorer?search=0xabf3ea8c23ff96893ac5caf4d2fa7c1f
+  {
+    groupId: sismoLensFollowerGroupId,
+    isOptional: true,
+  },
+];
+
+export const auths: AuthRequest[] = [
+  { authType: AuthType.VAULT },
+  { authType: AuthType.EVM_ACCOUNT, isOptional: true },
+  { authType: AuthType.GITHUB, isOptional: true },
+  { authType: AuthType.TELEGRAM, isOptional: true },
+  { authType: AuthType.TWITTER, isOptional: true },
+];
+
+export const signature: SignatureRequest = {
+  message: "This is a customizable signature message",
+  isSelectableByUser: true,
+};

src/app/api/sign-in/route.ts

@@ -0,0 +1,78 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+
+import { NextResponse } from "next/server";
+import { User } from "@/types";
+import {
+  appId,
+  auths,
+  claims,
+  gitcoinGroupId,
+  signature,
+  sismoContributorGroupId,
+  sismoLensFollowerGroupId,
+  vaultConfig,
+} from "../../../../sismo-connect-config";
+import {
+  SismoConnect,
+  AuthType,
+  SismoConnectVerifiedResult,
+  SismoConnectConfig,
+} from "@sismo-core/sismo-connect-server";
+
+const config: SismoConnectConfig = {
+  appId: appId,
+  vault: vaultConfig,
+};
+
+const sismoConnect = SismoConnect({ config });
+
+export async function POST(req: Request) {
+  const { response } = await req.json();
+
+  try {
+    // verify the validity of the response sent by the frontend
+    // and retrieve data shared by your user from their Vault
+    const result: SismoConnectVerifiedResult = await sismoConnect.verify(
+      response,
+      {
+        auths: auths,
+        claims: claims,
+        signature: signature,
+      }
+    );
+
+    // the userId is an app-specific, anonymous identifier of a vault
+    // userId = hash(userVaultSecret, appId).
+    const userId = result.getUserId(AuthType.VAULT);
+
+    const [twitterId] = result.getUserIds(AuthType.TWITTER);
+    const [telegramId] = result.getUserIds(AuthType.TELEGRAM);
+    const [githubId] = result.getUserIds(AuthType.GITHUB);
+    const [address] = result.getUserIds(AuthType.EVM_ACCOUNT);
+
+    const [gitcoinClaim] = result.getClaims(gitcoinGroupId);
+    const gitcoinScore = gitcoinClaim.value;
+    const [sismoContributorClaim] = result.getClaims(sismoContributorGroupId);
+    const sismoContributorLevel = sismoContributorClaim.value;
+    const [sismoLensFollowerClaim] = result.getClaims(sismoLensFollowerGroupId);
+    const isSismoLensFollower = sismoLensFollowerClaim.value;
+
+    const user = {
+      id: userId,
+      isSismoLensFollower,
+      gitcoinScore,
+      sismoContributorLevel,
+      twitterId,
+      telegramId,
+      githubId,
+      address,
+    } as User;
+
+    // save the user in your database and connect it
+
+    return NextResponse.json(user);
+  } catch (e: any) {
+    console.error(e);
+    return NextResponse.json(e.message, { status: 500 });
+  }
+}