IDKit

    import { IDKitWidget } from '@worldcoin/idkit'

    <IDKitWidget
      app_id="app_GBkZ1KlVUdFTjeMXKlVUdFT" // obtained from the Developer Portal
      action="vote_1" // this is your action name from the Developer Portal
      signal="user_value" // any arbitrary value the user is committing to, e.g. a vote
      onSuccess={onSuccess}
      credential_types={['orb', 'phone']} // the credentials you want to accept
      enableTelemetry
    >
      {({ open }) => <button onClick={open}>Verify with World ID</button>}
    </IDKitWidget>
    ```
{/*
### `SignInWithWorldID`

The `SignInWithWorldID` component is a wrapper around the `IDKitWidget` component that renders the World ID widget with some parameters preset for Sign in with Worldcoin. Please see the [Sign In Widget page](/advanced/sign-in-widget) for usage details.

### `SignInButton`

The `SignInButton` component is a styled and animated button, used as the default for the [`SignInWithWorldID` component](/advanced/sign-in-widget). It is also exported separately for use with custom components. */}

## Parameters

The following parameters can be passed as props to the `IDKitWidget` component:

### Required

<Properties>
	<Property name="app_id" type="string">
		Unique identifier for the app verifying the action. This should be the App ID obtained from the [Developer
		Portal](https://developer.worldcoin.org).
	</Property>
	<Property name="action" type="string">
        Identifier for the action the user is performing. This should be the action name set in the Developer Portal.
	</Property>
	<Property name="onSuccess" type="function">
		Function to trigger when verification is successful and the modal is closed. Should receive a single parameter of type `ISuccessResult`
		which contains [the proof details.](#response)
	</Property>
</Properties>

### Optional

<Properties>
	<Property name="handleVerify" type="function">
		Called after the proof is returned from the World App, but before showing the success screen. Throwing an error in this
		screen will show the user a custom error. Used to perform additional validation when needed.
	</Property>
	<Property name="enableTelemetry" type="boolean">
		Whether opt-in telemetry is enabled, defaults to `false`. Very few events are sent, with no PII to help improve the project. [Read more here.](/reference/idkit/telemetry)
	</Property>
	<Property name="theme" type='"light" | "dark"'>
		The theme to apply to the widget's UI. Defaults to `light`.
	</Property>
	<Property name="signal" type="string">
		For use when validating proofs on-chain. Read more on [the On-chain section](/advanced/on-chain).
	</Property>
	<Property name="action_description" type="string">
		The description of the specific action (shown to users in World App). **Only used for Dynamic Actions.**
	</Property>
	<Property name="credential_types" type="string[]">
		An array of credential types to allow for verification. Will accept any combination of `orb` & `phone`. Defaults
		to `orb`. **TypeScript apps can use the `CredentialType` enum.**
	</Property>
	<Property name="autoClose" type="boolean">
		Whether to automatically close the widget after completion. Defaults to `true`.
	</Property>
</Properties>

## Hooks

### `useIDKit`

The `useIDKit` hook allows you to programmatically open the IDKit widget without mounting any buttons on screen. Note that you still need to mount the component for this to work.

```jsx focus=1,3,6,11
import { useIDKit } from '@worldcoin/idkit'

const { open, setOpen } = useIDKit()

useEffect(() => {
	setOpen(true)
}, [])

return (
	<div>
		<IDKitWidget app_id="..." action="..." />
	</div>
)

idkit.init({
	action: 'my_action',
	app_id: 'app_lshSNnaJfdt6Sohu6YAA',
})

idkit.open()

{
	"code": "already_signed",
	"detail": "User has previously signed and submitted proof for this action."
}