feat: phone credential type

example-react/src/App.tsx

@@ -1,4 +1,4 @@
-import { IDKitWidget, ISuccessResult } from "@worldcoin/idkit";
+import { CredentialType, IDKitWidget, ISuccessResult } from "@worldcoin/idkit";
 
 function App() {
 	const handleProof = (result: ISuccessResult) => {
@@ -12,6 +12,12 @@ function App() {
 		console.log(result);
 	};
 
+	const urlParams = new URLSearchParams(window.location.search);
+	const credential_types = (urlParams.get("credential_types")?.split(",") as CredentialType[]) ?? [
+		CredentialType.Orb,
+		CredentialType.Phone,
+	];
+
 	return (
 		<div
 			className="App"
@@ -23,6 +29,7 @@ function App() {
 				onSuccess={onSuccess}
 				handleVerify={handleProof}
 				app_id="wid_staging_1234"
+				credential_types={credential_types}
 				// walletConnectProjectId="get_this_from_walletconnect_portal"
 			>
 				{({ open }) => <button onClick={open}>Click me</button>}

idkit/src/components/IDKitWidget/BaseWidget.tsx

@@ -58,6 +58,7 @@ const IDKitWidget: FC<WidgetProps> = ({
 	onSuccess,
 	autoClose,
 	copy,
+	credential_types,
 }) => {
 	const {
 		isOpen,
@@ -85,6 +86,7 @@ const IDKitWidget: FC<WidgetProps> = ({
 				autoClose,
 				copy,
 				theme,
+				credential_types,
 			},
 			ConfigSource.PROPS
 		)
@@ -100,6 +102,7 @@ const IDKitWidget: FC<WidgetProps> = ({
 		handleVerify,
 		action_description,
 		walletConnectProjectId,
+		credential_types,
 	])
 
 	const StageContent = useMemo(() => {

idkit/src/components/IDKitWidget/States/WorldIDState.tsx

@@ -16,6 +16,7 @@ const getOptions = (store: IDKitStore) => ({
 	copy: store.copy,
 	app_id: store.app_id,
 	action: store.action,
+	credential_types: store.credential_types,
 	action_description: store.action_description,
 	walletConnectProjectId: store.walletConnectProjectId,
 	handleVerify: store.handleVerify,
@@ -25,13 +26,23 @@ const getOptions = (store: IDKitStore) => ({
 const WorldIDState = () => {
 	const media = useMedia()
 	const [showQR, setShowQR] = useState<boolean>(false)
-	const { copy, app_id, action, signal, setStage, handleVerify, action_description, walletConnectProjectId } =
-		useIDKitStore(getOptions, shallow)
+	const {
+		copy,
+		app_id,
+		action,
+		signal,
+		setStage,
+		handleVerify,
+		action_description,
+		walletConnectProjectId,
+		credential_types,
+	} = useIDKitStore(getOptions, shallow)
 
 	const { result, qrData, verificationState, reset } = useAppConnection(
 		app_id,
 		action,
 		signal,
+		credential_types,
 		action_description,
 		walletConnectProjectId
 	)

idkit/src/index.html

@@ -46,6 +46,7 @@ <h1 id="heading">idkit-js</h1>
 				action_description: 'Test action description',
 				enableTelemetry: true,
 				copy: {},
+				credential_types: ['phone', 'orb'],
 				handleVerify: response => {
 					// verify the IDKIt proof, throw an error to show the error screen
 				},

idkit/src/index.ts

@@ -1,10 +1,11 @@
 import useIDKit from './hooks/useIDKit'
+import { CredentialType } from '@/types'
 import QRCode from './components/QRCode'
+import type { ISuccessResult } from '@/types'
 import { solidityEncode } from './lib/hashing'
 import IDKitWidget from '@/components/IDKitWidget'
 import useAppConnection from '@/services/walletconnect'
 import type { WidgetProps, Config } from '@/types/config'
-import type { ISuccessResult, CredentialType } from '@/types'
 import { VerificationState, AppErrorCodes } from './types/app'
 import SignInWithWorldID from './components/SignInWithWorldID'
 import { hashToField, validateABILikeEncoding, generateExternalNullifier } from './lib/hashing'
@@ -20,5 +21,5 @@ const internal = {
 	AppErrorCodes,
 }
 
-export { IDKitWidget, useIDKit, solidityEncode, internal, SignInWithWorldID }
-export type { ISuccessResult, Config, WidgetProps, CredentialType }
+export { IDKitWidget, useIDKit, solidityEncode, internal, SignInWithWorldID, CredentialType }
+export type { ISuccessResult, Config, WidgetProps }

idkit/src/services/walletconnect.ts

@@ -1,6 +1,7 @@
 import { create } from 'zustand'
 import { useEffect } from 'react'
 import { buildQRData } from '@/lib/qr'
+import { CredentialType } from '@/types'
 import { randomNumber } from '@/lib/utils'
 import { WC_PROJECT_ID } from '@/lib/consts'
 import Client from '@walletconnect/sign-client'
@@ -31,6 +32,7 @@ type WalletConnectStore = {
 		app_id: IDKitConfig['app_id'],
 		action: IDKitConfig['action'],
 		signal: IDKitConfig['signal'],
+		credential_types?: IDKitConfig['credential_types'],
 		action_description?: IDKitConfig['action_description'],
 		walletConnectProjectId?: IDKitConfig['walletConnectProjectId']
 	) => Promise<void>
@@ -60,18 +62,19 @@ const useWalletConnectStore = create<WalletConnectStore>()((set, get) => ({
 		app_id: IDKitConfig['app_id'],
 		action: IDKitConfig['action'],
 		signal?: IDKitConfig['signal'],
+		credential_types?: IDKitConfig['credential_types'],
 		action_description?: IDKitConfig['action_description'],
 		walletConnectProjectId = WC_PROJECT_ID
 	) => {
-		set({ config: { app_id, action, signal, action_description, walletConnectProjectId } })
+		set({ config: { app_id, action, signal, action_description, walletConnectProjectId, credential_types } })
 
 		try {
 			const client = await Client.init({
 				projectId: walletConnectProjectId,
 				metadata: {
 					name: 'IDKit',
 					description: 'Verify with World ID',
-					url: '#',
+					url: 'https://worldcoin.org',
 					icons: ['https://worldcoin.org/icons/logo-small.svg'],
 				},
 			})
@@ -173,6 +176,7 @@ const buildVerificationRequest = (config: IDKitConfig) => ({
 			signal: generateSignal(config.signal).digest,
 			action_description: config.action_description,
 			external_nullifier: generateExternalNullifier(config.app_id, config.action).digest,
+			credential_types: config.credential_types?.length ? config.credential_types : [CredentialType.Orb],
 		},
 	],
 })
@@ -218,6 +222,7 @@ const useAppConnection = (
 	app_id: IDKitConfig['app_id'],
 	action: IDKitConfig['action'],
 	signal?: IDKitConfig['signal'],
+	credential_types?: IDKitConfig['credential_types'],
 	action_description?: IDKitConfig['action_description'],
 	walletConnectProjectId?: IDKitConfig['walletConnectProjectId']
 ): UseAppConnectionResponse => {
@@ -227,9 +232,19 @@ const useAppConnection = (
 	useEffect(() => {
 		if (!app_id) return
 		if (!client) {
-			void createClient(app_id, action, signal, action_description, walletConnectProjectId)
+			void createClient(app_id, action, signal, credential_types, action_description, walletConnectProjectId)
 		}
-	}, [app_id, action, signal, walletConnectProjectId, action_description, client, createClient, verificationState])
+	}, [
+		app_id,
+		action,
+		signal,
+		walletConnectProjectId,
+		action_description,
+		credential_types,
+		client,
+		createClient,
+		verificationState,
+	])
 
 	return { result, reset, verificationState, errorCode, qrData }
 }

idkit/src/store/idkit.ts

@@ -1,6 +1,6 @@
 import { create } from 'zustand'
-import { ErrorCodes, IDKITStage } from '@/types'
 import { telemetryModalOpened } from '@/lib/telemetry'
+import { CredentialType, ErrorCodes, IDKITStage } from '@/types'
 import type { CallbackFn, IErrorState, ISuccessResult } from '@/types'
 import type { Config, ConfigSource, IDKitConfig } from '@/types/config'
 
@@ -10,6 +10,7 @@ export type IDKitStore = {
 	signal: IDKitConfig['signal']
 	action_description?: IDKitConfig['action_description']
 	walletConnectProjectId?: IDKitConfig['walletConnectProjectId']
+	credential_types?: IDKitConfig['credential_types']
 
 	code: string
 	open: boolean
@@ -45,6 +46,7 @@ const useIDKitStore = create<IDKitStore>()((set, get) => ({
 	action: '',
 	action_description: '',
 	walletConnectProjectId: '',
+	credential_types: [],
 
 	open: false,
 	code: '',
@@ -57,8 +59,6 @@ const useIDKitStore = create<IDKitStore>()((set, get) => ({
 	processing: false,
 	verifyCallbacks: {},
 	successCallbacks: {},
-	stringifiedActionId: '',
-	methods: ['orb'],
 	stage: IDKITStage.WORLD_ID,
 	copy: {},
 
@@ -101,6 +101,7 @@ const useIDKitStore = create<IDKitStore>()((set, get) => ({
 			signal,
 			action,
 			app_id,
+			credential_types,
 			action_description,
 			walletConnectProjectId,
 			autoClose,
@@ -109,11 +110,20 @@ const useIDKitStore = create<IDKitStore>()((set, get) => ({
 		}: Config,
 		source: ConfigSource
 	) => {
+		const sanitized_credential_types = credential_types?.filter(type => {
+			const isValid = Object.values(CredentialType).includes(type)
+			if (!isValid) {
+				console.warn(`Ignoring invalid credential type received: \`${type}\`.`)
+			}
+			return isValid
+		})
+
 		set(store => ({
 			theme,
 			signal,
 			action,
 			app_id,
+			credential_types: sanitized_credential_types,
 			autoClose,
 			action_description,
 			walletConnectProjectId,

idkit/src/types/config.ts

@@ -1,4 +1,4 @@
-import type { CallbackFn, AbiEncodedValue } from '.'
+import type { CallbackFn, AbiEncodedValue, CredentialType } from '.'
 
 export enum ConfigSource {
 	HOOK = 'hook',
@@ -12,6 +12,7 @@ export type IDKitConfig = {
 	walletConnectProjectId?: string
 	signal?: AbiEncodedValue | string
 	action?: AbiEncodedValue | string
+	credential_types?: CredentialType[] // Accepted credentials for verification by the host app
 }
 
 export type WidgetConfig = {
@@ -37,6 +38,6 @@ export type WidgetProps = Config & {
 export const DEFAULT_COPY = {
 	title: 'World ID',
 	heading: 'Verify your identity',
-	subheading: "Unlock additional benefits by verifying you're a unique human doing this action once.",
-	success: 'Your phone number has been verified',
+	subheading: "Unlock additional benefits by verifying you're doing this only once.",
+	success: 'You have been verified!',
 } as const

idkit/src/types/index.ts

@@ -14,6 +14,7 @@ export enum IDKITStage {
 
 export enum CredentialType {
 	Orb = 'orb',
+	Phone = 'phone',
 }
 
 export interface ISuccessResult {