> ## Documentation Index
> Fetch the complete documentation index at: https://docs.dynamic.xyz/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Events Introduction

<Card title="Recommended: JavaScript SDK with React Hooks" icon="react" color="#4779FE">
  For new React apps, we recommend the JavaScript SDK with React Hooks (`@dynamic-labs-sdk/react-hooks`) instead of the legacy React SDK documented here. The JS SDK comes with many benefits such as a much smaller bundle size and other optimizations. Use the [React quickstart (JavaScript SDK)](/javascript/reference/react-quickstart) to get started.
</Card>

Events are a way to listen for SDK events and run your own code at certain points.

### Dynamic Events

An alternative to using event callbacks or [`useDynamicEvents`](/react/reference/hooks/usedynamicevents) react hook is to [use `dynamicEvents` emitter directly.](/react/reference/events/dynamic-events)

```jsx theme={"system"}
dynamicEvents.on(eventName, listener);
```

### Event callbacks

You do not need to import anything extra to make use of event callbacks, instead simply add them using the events field inside the settings prop on [DynamicContextProvider](/react/reference/providers/dynamiccontextprovider).

If you are looking for synchronous actions that will block the user until completion, please look at [**Handlers**](/react/reference/handlers/handlers-introduction)

```jsx theme={"system"}
<DynamicContextProvider
  settings={{
    events: {
      // events callbacks go here
    },
  }}
>
  ...
</DynamicContextProvider>
```

[**onAuthFlowCancel**](/react/reference/events/onauthflowclose): Called when the auth modal is closed before authentication is successful (alongside `onAuthFlowClose`).

[**onAuthFlowClose**](/react/reference/events/onauthflowclose): Called whenever the auth flow modal is closed.

[**onAuthFlowOpen**](/react/reference/events/onauthflowopen): Called after the auth flow modal is opened.

[**onAuthFailure**](/react/reference/events/onauthfailure): Called when authentication fails.

[**onAuthInit**](/react/reference/events/onauthinit): Called when an authentication process begins.

[**onAuthSuccess**](/react/reference/events/onauthsuccess): Called after the user successfully authenticates.

[**onEmbeddedWalletCreated**](/react/reference/events/onembeddedwalletcreated): Called after embedded wallet created for user.

[**onLogout**](/react/reference/events/onlogout): Called after the user logs out.

[**onOtpVerificationResult**](/react/reference/events/onotpverificationresult): Called when an email or SMS OTP verification succeeds or fails.

[**onSignedMessage**](/react/reference/events/onsignedmessage): Called when the user signs a message and it allows you to act on that message.

[**onUserProfileUpdate**](/react/reference/events/onuserprofileupdate): Called when the user successfully updated their profile.

[**onWalletAdded**](/react/reference/events/onwalletadded): Called when a new wallet is added to the user wallets.

[**onWalletRemoved**](/react/reference/events/onwalletremoved): Called when a wallet is removed from the user wallets.

[**onWalletTabSelected**](/react/reference/events/onWalletTabSelected): Called when a wallet tab is selected by the user.

[**onWalletConnectionFailed**](/react/reference/events/onWalletConnectionFailed): Called when a wallet connection fails.