adds validation and metadata in the id token

Author: arch1995

examples/react-app/src/components/Account.tsx

@@ -8,7 +8,7 @@ import Divider from "./Divider";
 
 function Account() {
   const [addressToShow, setAddressToShow] = useState<string>("");
-  const { address, userInfo, getUserInfo } = usePlayground();
+  const { address, userInfo, getUserInfo, getExternalIdToken } = usePlayground();
 
   useEffect(() => {
     setAddressToShow(address || "");
@@ -27,9 +27,12 @@ function Account() {
       <div>
         <h3 className="font-bold text-app-gray-800 mb-2">{userInfo?.name || ""}</h3>
         <p className="text-xs text-app-gray-400 mb-1">{userInfo?.email ? userInfo?.email : userInfo?.name}</p>
-        <button type="button" className="leading-none text-xs text-app-primary-600 hover:underline" onClick={getUserInfo}>
+        <p><button type="button" className="leading-none text-xs text-app-primary-600 hover:underline" onClick={getUserInfo}>
           View User Info
-        </button>
+        </button></p>
+        <p><button type="button" className="leading-none text-xs text-app-primary-600 hover:underline" onClick={getExternalIdToken}>
+          Get External Id Token
+        </button></p>
       </div>
       <Divider />
       <Button

examples/react-app/src/services/playground.tsx

@@ -4,7 +4,7 @@ import { CHAIN_NAMESPACES, IProvider, log, WEB3AUTH_NETWORK, IPlugin } from "@we
 import { EthereumPrivateKeyProvider } from "@web3auth/ethereum-provider";
 import { PasskeysPlugin } from "@web3auth/passkeys-sfa-plugin";
 // Import Single Factor Auth SDK for no redirect flow
-import { ADAPTER_EVENTS, decodeToken, Web3Auth } from "@web3auth/single-factor-auth";
+import { ADAPTER_EVENTS, decodeToken, UserAuthInfo, Web3Auth } from "@web3auth/single-factor-auth";
 import { WalletServicesPlugin } from "@web3auth/wallet-services-plugin";
 import { createContext, ReactNode, useCallback, useContext, useEffect, useMemo, useState } from "react";
 
@@ -62,6 +62,7 @@ export interface IPlaygroundContext {
   unlinkPasskey: (id: number) => void;
   logout: () => void;
   getUserInfo: () => Promise<AuthUserInfo | null>;
+  getExternalIdToken: () => Promise<UserAuthInfo | null>;
   showCheckout: () => void;
   showWalletUI: () => void;
   showWalletScanner: () => void;
@@ -94,6 +95,7 @@ export const PlaygroundContext = createContext<IPlaygroundContext>({
   unlinkPasskey: async () => null,
   logout: async () => null,
   getUserInfo: async () => null,
+  getExternalIdToken: async () => null,
   showCheckout: async () => null,
   showWalletUI: async () => null,
   showWalletScanner: async () => null,
@@ -326,6 +328,17 @@ export function Playground({ children }: IPlaygroundProps) {
     return null;
   }, [web3authSFAuth]);
 
+  const getExternalIdToken = useCallback(async (): Promise<UserAuthInfo | null> => {
+    if (web3authSFAuth && web3authSFAuth?.connected) {
+      const data = await web3authSFAuth?.authenticateUser();
+      setPlaygroundConsoleTitle("Id Token");
+      setPlaygroundConsoleData(JSON.stringify(data, null, 2));
+      uiConsole(data);
+      return data;
+    }
+    return null;
+  }, [web3authSFAuth]);
+
   const showCheckout = useCallback(async () => {
     if (!wsPlugin) {
       uiConsole("wallet services plugin not initialized yet");
@@ -523,6 +536,7 @@ export function Playground({ children }: IPlaygroundProps) {
       unlinkPasskey,
       logout,
       getUserInfo,
+      getExternalIdToken,
       showCheckout,
       showWalletUI,
       showWalletScanner,
@@ -554,6 +568,7 @@ export function Playground({ children }: IPlaygroundProps) {
       unlinkPasskey,
       logout,
       getUserInfo,
+      getExternalIdToken,
       showCheckout,
       showWalletUI,
       showWalletScanner,

src/Web3Auth.ts

@@ -209,6 +209,9 @@ export class Web3Auth extends SafeEventEmitter<Web3AuthSfaEvents> implements IWe
         version: "1",
         nonce: Math.random().toString(36).slice(2),
         issuedAt: new Date().toISOString(),
+      };
+
+      const additionalMetadata = {
         email: userInfo.email,
         name: userInfo.name,
         profileImage: userInfo.profileImage,
@@ -219,17 +222,18 @@ export class Web3Auth extends SafeEventEmitter<Web3AuthSfaEvents> implements IWe
         oAuthIdToken: userInfo.oAuthIdToken,
         oAuthAccessToken: userInfo.oAuthAccessToken,
         wallets: [] as unknown[],
-        signatures: [] as unknown[],
+        signatures: this.state.signatures,
+        network: this.coreOptions.web3AuthNetwork,
       };
 
       if (this.coreOptions.usePnPKey) {
-        payload.wallets.push({
+        additionalMetadata.wallets.push({
           public_key: publicKey,
           type: "web3auth_app_key",
           curve: chainNamespace === CHAIN_NAMESPACES.EIP155 ? KEY_TYPE.SECP256K1 : KEY_TYPE.ED25519,
         });
       } else {
-        payload.wallets.push({
+        additionalMetadata.wallets.push({
           public_key: publicKey,
           type: "web3auth_threshold_key",
           curve: chainNamespace === CHAIN_NAMESPACES.EIP155 ? KEY_TYPE.SECP256K1 : KEY_TYPE.ED25519,
@@ -245,7 +249,9 @@ export class Web3Auth extends SafeEventEmitter<Web3AuthSfaEvents> implements IWe
         this.SFA_ISSUER,
         this.coreOptions.sessionTime,
         this.coreOptions.clientId,
-        this.coreOptions.web3AuthNetwork as WEB3AUTH_NETWORK_TYPE
+        this.coreOptions.web3AuthNetwork as WEB3AUTH_NETWORK_TYPE,
+        undefined,
+        additionalMetadata
       );
       saveToken(accounts[0] as string, "SFA", idToken);
       return {