Atlas integration for authentication, user settings, email confirmation, uploads

web/.env.devnet-neo.public

@@ -5,6 +5,7 @@ export REACT_APP_DRT_ARBSEPOLIA_SUBGRAPH=https://api.studio.thegraph.com/query/6
 export REACT_APP_STATUS_URL=https://kleros-v2-devnet.betteruptime.com/badge
 export REACT_APP_GENESIS_BLOCK_ARBSEPOLIA=3084598
 export REACT_APP_ARBITRATOR_TYPE=neo
+export REACT_APP_ATLAS_URI=http://localhost:3000/graphql
 export WALLETCONNECT_PROJECT_ID=
 export ALCHEMY_API_KEY=
 export NODE_OPTIONS='--max-old-space-size=7680'

web/.env.devnet-university.public

@@ -5,6 +5,7 @@ export REACT_APP_DRT_ARBSEPOLIA_SUBGRAPH=https://api.studio.thegraph.com/query/6
 export REACT_APP_STATUS_URL=https://kleros-v2-devnet.betteruptime.com/badge
 export REACT_APP_GENESIS_BLOCK_ARBSEPOLIA=3084598
 export REACT_APP_ARBITRATOR_TYPE=university
+export REACT_APP_ATLAS_URI=http://localhost:3000/graphql
 export WALLETCONNECT_PROJECT_ID=
 export ALCHEMY_API_KEY=
 export NODE_OPTIONS='--max-old-space-size=7680'

web/.env.devnet.public

@@ -4,6 +4,7 @@ export REACT_APP_CORE_SUBGRAPH=https://api.studio.thegraph.com/query/61738/klero
 export REACT_APP_DRT_ARBSEPOLIA_SUBGRAPH=https://api.studio.thegraph.com/query/61738/kleros-v2-drt-arbisep-devnet/version/latest
 export REACT_APP_STATUS_URL=https://kleros-v2-devnet.betteruptime.com/badge
 export REACT_APP_GENESIS_BLOCK_ARBSEPOLIA=3084598
+export REACT_APP_ATLAS_URI=http://localhost:3000/graphql
 export WALLETCONNECT_PROJECT_ID=
 export ALCHEMY_API_KEY=
 export NODE_OPTIONS='--max-old-space-size=7680'

web/.env.local.public

@@ -2,6 +2,7 @@
 export REACT_APP_DEPLOYMENT=devnet
 export REACT_APP_CORE_SUBGRAPH=http://localhost:8000/subgraphs/name/kleros/kleros-v2-core-local
 export REACT_APP_DRT_ARBSEPOLIA_SUBGRAPH=https://api.thegraph.com/subgraphs/name/alcercu/templateregistrydevnet
+export REACT_APP_ATLAS_URI=http://localhost:3000/graphql
 export WALLETCONNECT_PROJECT_ID=
 export ALCHEMY_API_KEY=
 export NODE_OPTIONS='--max-old-space-size=7680'

web/.env.mainnet-neo.public

@@ -5,6 +5,7 @@ export REACT_APP_DRT_ARBMAINNET_SUBGRAPH=https://api.studio.thegraph.com/query/6
 export REACT_APP_STATUS_URL=https://kleros-v2-devnet.betteruptime.com/badge
 export REACT_APP_GENESIS_BLOCK_ARBMAINNET=190274403
 export REACT_APP_ARBITRATOR_TYPE=neo
+export REACT_APP_ATLAS_URI=http://localhost:3000/graphql
 export WALLETCONNECT_PROJECT_ID=
 export ALCHEMY_API_KEY=
 export NODE_OPTIONS='--max-old-space-size=7680'

web/.env.testnet.public

@@ -3,6 +3,7 @@ export REACT_APP_DEPLOYMENT=testnet
 export REACT_APP_CORE_SUBGRAPH=https://api.studio.thegraph.com/query/61738/kleros-v2-core-testnet/version/latest
 export REACT_APP_DRT_ARBSEPOLIA_SUBGRAPH=https://api.studio.thegraph.com/query/61738/kleros-v2-drt-arbisep-devnet/version/latest
 export REACT_APP_STATUS_URL=https://kleros-v2.betteruptime.com/badge
+export REACT_APP_ATLAS_URI=http://localhost:3000/graphql
 export REACT_APP_GENESIS_BLOCK_ARBSEPOLIA=3842783
 export WALLETCONNECT_PROJECT_ID=
 export ALCHEMY_API_KEY=

web/netlify/middleware/authMiddleware.ts

@@ -14,17 +14,17 @@ export const authMiddleware = () => {
       }
 
       try {
-        const issuer = process.env.JWT_ISSUER ?? "Kleros"; // ex :- Kleros
-        const audience = process.env.JWT_AUDIENCE ?? "Court"; // ex :- Court, Curate, Escrow
-        const secret = process.env.JWT_SECRET;
+        // const secret = process.env.JWT_SECRET;
+        // TODO testing purpose
+        const secret = "u03tzA7Un9w+fetret343t6U2YaOlINle1E4avjc=";
 
         if (!secret) {
           throw new Error("Secret not set in environment");
         }
 
         const encodedSecret = new TextEncoder().encode(secret);
 
-        const { payload } = await jwt.jwtVerify(authToken, encodedSecret, { issuer, audience });
+        const { payload } = await jwt.jwtVerify(authToken, encodedSecret);
 
         // add auth details to event
         request.event.auth = payload;

web/package.json

@@ -118,7 +118,7 @@
     "siwe": "^2.3.1",
     "styled-components": "^5.3.11",
     "vanilla-jsoneditor": "^0.21.4",
-    "viem": "^2.1.0",
+    "viem": "^2.17.3",
     "vite": "^5.2.10",
     "wagmi": "^2.11.3"
   }

web/src/components/EnsureAuth.tsx

@@ -1,7 +1,7 @@
 import React, { useMemo, useState } from "react";
 
 import * as jwt from "jose";
-import { SiweMessage } from "siwe";
+import { createSiweMessage } from "viem/siwe";
 import { useAccount, useChainId, useSignMessage } from "wagmi";
 
 import { Button } from "@kleros/ui-components-library";
@@ -30,7 +30,7 @@ export const EnsureAuth: React.FC<IEnsureAuth> = ({ children, className }) => {
 
     const payload = jwt.decodeJwt(authToken);
 
-    if ((payload?.id as string).toLowerCase() !== address.toLowerCase()) return false;
+    if ((payload?.sub as string)?.toLowerCase() !== address.toLowerCase()) return false;
     if (payload.exp && payload.exp < Date.now() / 1000) return false;
 
     return true;
@@ -41,7 +41,7 @@ export const EnsureAuth: React.FC<IEnsureAuth> = ({ children, className }) => {
       setIsLoading(true);
       if (!address) return;
 
-      const message = await createSiweMessage(address, "Sign In to Kleros with Ethereum.", chainId);
+      const message = await createMessage(address, "Sign In to Kleros with Ethereum.", chainId);
 
       const signature = await signMessageAsync({ message });
 
@@ -52,9 +52,8 @@ export const EnsureAuth: React.FC<IEnsureAuth> = ({ children, className }) => {
         signature,
         message,
       })
-        .then(async (res) => {
-          const response = await res.json();
-          setAuthToken(response["token"]);
+        .then(async (token) => {
+          setAuthToken(token);
         })
         .catch((err) => console.log({ err }))
         .finally(() => setIsLoading(false));
@@ -77,16 +76,15 @@ export const EnsureAuth: React.FC<IEnsureAuth> = ({ children, className }) => {
   );
 };
 
-async function createSiweMessage(address: `0x${string}`, statement: string, chainId: number = DEFAULT_CHAIN) {
+async function createMessage(address: `0x${string}`, statement: string, chainId: number = DEFAULT_CHAIN) {
   const domain = window.location.host;
   const origin = window.location.origin;
-  const response = await getNonce(address);
-  const nonce = (await response.json()).nonce;
+  const nonce = await getNonce(address);
 
   // signature is valid only for 10 mins
-  const expirationTime = new Date(Date.now() + 10 * 60 * 1000).toISOString();
+  const expirationTime = new Date(Date.now() + 10 * 60 * 1000);
 
-  const message = new SiweMessage({
+  const message = createSiweMessage({
     domain,
     address,
     statement,
@@ -96,5 +94,5 @@ async function createSiweMessage(address: `0x${string}`, statement: string, chai
     nonce,
     expirationTime,
   });
-  return message.prepareMessage();
+  return message;
 }