Fix server side verification example

Author: yashovardhan

other/server-side-verification-example/app/App.tsx

@@ -9,7 +9,7 @@ import { SwitchChain } from "../components/switchNetwork";
 import { useEffect } from "react";
 
 function App() {
-  const { connect, isConnected, loading: connectLoading, error: connectError } = useWeb3AuthConnect();
+  const { connect, isConnected, loading: connectLoading, error: connectError, connectorName } = useWeb3AuthConnect();
   const { disconnect, loading: disconnectLoading, error: disconnectError } = useWeb3AuthDisconnect();
   const { userInfo } = useWeb3AuthUser();
   const { token, getIdentityToken, loading: idTokenLoading, error: idTokenError } = useIdentityToken();
@@ -25,26 +25,43 @@ function App() {
   }
 
   const validateIdToken = async () => {
-    await getIdentityToken();
-    const pubKey = await web3Auth?.provider?.request({ method: "public_key" });
+    const idToken = await getIdentityToken();
+    
+    let res;
+    if (connectorName === "auth") {
+      // Social login: send public key
+      const pubKey = await web3Auth?.provider?.request({ method: "public_key" });
+      console.log("pubKey:", pubKey);
+      res = await fetch("/api/login", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+          Authorization: `Bearer ${idToken}`,
+        },
+        body: JSON.stringify({ appPubKey: pubKey }),
+      });
+    } else {
+      // External wallet: send address
+      const address = await web3Auth?.provider?.request({ method: "eth_accounts" });
+      res = await fetch("/api/login-external", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+          Authorization: `Bearer ${idToken}`,
+        },
+        body: JSON.stringify({ address }),
+      });
+    }
 
-    // Validate idToken with server
-    const res = await fetch("/api/login", {
-      method: "POST",
-      headers: {
-        "Content-Type": "application/json",
-        Authorization: `Bearer ${token}`,
-      },
-      body: JSON.stringify({ appPubKey: pubKey }),
-    });
+    // Handle response
     if (res.status === 200) {
       toast.success("JWT Verification Successful");
       uiConsole(`Logged in Successfully!`, userInfo);
     } else {
       toast.error("JWT Verification Failed");
-      console.log("JWT Verification Failed");
       await disconnect();
     }
+    
     return res.status;
   };
 
@@ -60,7 +77,7 @@ function App() {
     };
 
     init();
-  }, [isConnected, validateIdToken]);
+  }, [isConnected]);
 
   const loggedInView = (
     <div className="grid">

other/server-side-verification-example/app/api/login-external/route.ts

@@ -0,0 +1,45 @@
+import * as jose from "jose";
+import { NextRequest, NextResponse } from "next/server";
+
+export async function POST(req: NextRequest) {
+  try {
+    // Extract JWT token from Authorization header
+    const authHeader = req.headers.get("authorization");
+    const idToken = authHeader?.split(" ")[1];
+    
+    if (!idToken) {
+      return NextResponse.json({ error: "No token provided" }, { status: 401 });
+    }
+
+    // Get address from request body
+    const { address } = await req.json();
+    
+    if (!address) {
+      return NextResponse.json({ error: "No address provided" }, { status: 400 });
+    }
+
+    // Verify JWT using AuthJS JWKS
+    const jwks = jose.createRemoteJWKSet(new URL("https://authjs.web3auth.io/jwks"));
+    const { payload } = await jose.jwtVerify(idToken, jwks, { algorithms: ["ES256"] });
+
+    // Find matching wallet in JWT
+    const wallets = (payload as any).wallets || [];
+    const addressToCheck = Array.isArray(address) ? address[0] : address;
+    const normalizedAddress = addressToCheck.toLowerCase();
+    
+    const isValid = wallets.some((wallet: any) => {
+      return wallet.type === "ethereum" && 
+             wallet.address && 
+             wallet.address.toLowerCase() === normalizedAddress;
+    });
+
+    if (isValid) {
+      return NextResponse.json({ name: "Verification Successful" }, { status: 200 });
+    } else {
+      return NextResponse.json({ name: "Verification Failed" }, { status: 400 });
+    }
+  } catch (error) {
+    console.error("External wallet verification error:", error);
+    return NextResponse.json({ error: "Verification error" }, { status: 500 });
+  }
+} 

other/server-side-verification-example/app/api/login/route.ts

@@ -1,29 +1,55 @@
 import * as jose from "jose";
-import { NextResponse } from "next/server";
+import { NextRequest, NextResponse } from "next/server";
 
-export async function POST(request: Request) {
+export async function POST(req: NextRequest) {
   try {
-    const authHeader = request.headers.get("authorization");
-    const idToken = authHeader?.split(" ")[1] || "";
+    // Extract JWT token from Authorization header
+    const authHeader = req.headers.get("authorization");
+    const idToken = authHeader?.split(" ")[1];
 
-    const body = await request.json();
-    const app_pub_key = body.appPubKey;
+    if (!idToken) {
+      return NextResponse.json({ error: "No token provided" }, { status: 401 });
+    }
 
-    const jwks = jose.createRemoteJWKSet(new URL("https://api.openlogin.com/jwks"));
-    const jwtDecoded = await jose.jwtVerify(idToken, jwks, {
-      algorithms: ["ES256"],
-    });
+    // Get public key from request body
+    const { appPubKey } = await req.json();
+    
+    if (!appPubKey) {
+      return NextResponse.json({ error: "No appPubKey provided" }, { status: 400 });
+    }
+
+    // Verify JWT using Web3Auth JWKS
+    const jwks = jose.createRemoteJWKSet(new URL("https://api-auth.web3auth.io/jwks"));
+    const { payload } = await jose.jwtVerify(idToken, jwks, { algorithms: ["ES256"] });
+
+    // Find matching wallet in JWT
+    const wallets = (payload as any).wallets || [];
+    const normalizedAppKey = appPubKey.toLowerCase().replace(/^0x/, '');
 
-    if (
-      (jwtDecoded.payload as any).wallets.find((x: { type: string }) => x.type === "web3auth_app_key").public_key.toLowerCase() ===
-      app_pub_key.toLowerCase()
-    ) {
-      // Verified
-      return NextResponse.json({ name: "Validation Success" }, { status: 200 });
+    const isValid = wallets.some((wallet: any) => {
+      if (wallet.type !== "web3auth_app_key") return false;
+      
+      const walletKey = wallet.public_key.toLowerCase();
+      
+      // Direct key comparison for ed25519 keys
+      if (walletKey === normalizedAppKey) return true;
+      
+      // Handle compressed secp256k1 keys
+      if (wallet.curve === "secp256k1" && walletKey.length === 66 && normalizedAppKey.length === 128) {
+        const compressedWithoutPrefix = walletKey.substring(2);
+        return normalizedAppKey.startsWith(compressedWithoutPrefix);
+      }
+      
+      return false;
+    });
+
+    if (isValid) {
+      return NextResponse.json({ name: "Verification Successful" }, { status: 200 });
     } else {
-      return NextResponse.json({ name: "Failed" }, { status: 400 });
+      return NextResponse.json({ name: "Verification Failed" }, { status: 400 });
     }
   } catch (error) {
-    return NextResponse.json({ error }, { status: 500 });
+    console.error("Social login verification error:", error);
+    return NextResponse.json({ error: "Verification error" }, { status: 500 });
   }
 } 

other/server-side-verification-example/app/web3authContext.tsx

@@ -1,5 +1,5 @@
 // IMP START - Quick Start
-import { WEB3AUTH_NETWORK, type Web3AuthOptions } from "@web3auth/modal";
+import { authConnector, WEB3AUTH_NETWORK, type Web3AuthOptions } from "@web3auth/modal";
 // IMP END - Quick Start
 
 // IMP START - Dashboard Registration
@@ -10,7 +10,6 @@ const clientId = "BPi5PB_UiIZ-cPz1GtV5i1I2iOSOHuimiXBI0e-Oe_u6X3oVAbCiAZOTEBtTXw
 const web3AuthOptions: Web3AuthOptions = {
   clientId,
   web3AuthNetwork: WEB3AUTH_NETWORK.SAPPHIRE_MAINNET,
-  
 };
 // IMP END - Instantiate SDK
 

other/server-side-verification-example/next.config.js

@@ -2,6 +2,24 @@
 const nextConfig = {
     reactStrictMode: true,
     // swcMinify: true,
+    webpack: (config) => {
+      // Handle @react-native-async-storage/async-storage
+      config.resolve.alias = {
+        ...config.resolve.alias,
+        '@react-native-async-storage/async-storage': false,
+      };
+      
+      // Handle other potential React Native modules
+      config.resolve.fallback = {
+        ...config.resolve.fallback,
+        fs: false,
+        net: false,
+        tls: false,
+        crypto: false,
+      };
+      
+      return config;
+    },
   }
 
   module.exports = nextConfig