description: Access a user's accounts and handle changed accounts.

import Tabs from '@theme/Tabs';

import TabItem from '@theme/TabItem';

User accounts are used in a variety of contexts in Ethereum, including as identifiers and for

signing transactions.

To request a signature from a user or have a user approve a transaction, your dapp must

access the user's accounts using the

[`eth_requestAccounts`](../reference/rpc-api.md#ethereum-json-rpc-methods) RPC method.

When accessing a user's accounts:

- **Only** initiate a connection request in response to direct user action, such as

selecting a [connect button](#create-a-connect-button).

- **Always** disable the connect button while the connection request is pending.

- **Never** initiate a connection request on page load.

You can also [use MetaMask SDK](../how-to/use-sdk/index.md) to enable a reliable, secure, and

seamless connection from your dapp to a MetaMask wallet client.

We recommend providing a button to allow users to connect MetaMask to your dapp.

Selecting this button should call `eth_requestAccounts` to access the user's account.

In the [example project code](set-up-dev-environment.md#example), the following JavaScript code

accesses the user's accounts when they select a connect button, and the following HTML code

displays the button and the current account:

<Tabs>

<TabItem value="javascript" label="JavaScript">

```javascript title="index.js"

const ethereumButton = document.querySelector('.enableEthereumButton');

const showAccount = document.querySelector('.showAccount');

ethereumButton.addEventListener('click', () => {

getAccount();

});

async function getAccount() {

const accounts = await window.ethereum.request({ method: 'eth_requestAccounts' })

.catch((err) => {

if (err.code === 4001) {

// EIP-1193 userRejectedRequest error

// If this happens, the user rejected the connection request.

console.log('Please connect to MetaMask.');

} else {

console.error(err);

}

});

const account = accounts[0];

showAccount.innerHTML = account;

}

</TabItem>

<TabItem value="html" label="HTML">

```html title="index.html"

<button class="enableEthereumButton">Enable Ethereum</button>

<h2>Account: <span class="showAccount"></span></h2>

</TabItem>

</Tabs>

Use the [`eth_accounts`](https://metamask.github.io/api-playground/api-documentation/#eth_accounts)

RPC method to handle user accounts.

Subscribe to the [`accountsChanged`](../reference/provider-api.md#accountschanged) provider event to

be notified when the user changes accounts.

In the [example project script](set-up-dev-environment.md#example), the following code handles user

accounts and detects when the user changes accounts:

```javascript title="index.js"

let currentAccount = null;

window.ethereum.request({ method: 'eth_accounts' })

.then(handleAccountsChanged)

.catch((err) => {

// Some unexpected error.

// For backwards compatibility reasons, if no accounts are available,

// eth_accounts returns an empty array.

console.error(err);

});

window.ethereum.on('accountsChanged', handleAccountsChanged);

function handleAccountsChanged(accounts) {

if (accounts.length === 0) {

// MetaMask is locked or the user has not connected any accounts.

console.log('Please connect to MetaMask.');

} else if (accounts[0] !== currentAccount) {

// Reload your interface with accounts[0].

currentAccount = accounts[0];

// Update the account displayed (see the HTML for the connect button)

showAccount.innerHTML = currentAccount;

}

}

In the future, the accounts array may contain more than one account.

This functionality isn't available yet.

The first account in the array will always be considered the user's "selected" account.

description: Detect the MetaMask Ethereum provider object.

The presence of the MetaMask Ethereum provider object, `window.ethereum`, in a user's browser

indicates an Ethereum user.

To demonstrate this, verify if your browser is running MetaMask by copying and pasting the following

code snippet in the developer console of your browser:

To differentiate MetaMask from other Ethereum-compatible browsers, you can detect MetaMask using the

[`ethereum.isMetaMask`](../reference/provider-api.md#ethereumismetamask) property.

We recommend using the [`@metamask/detect-provider`](https://github.com/MetaMask/detect-provider)

module to detect the MetaMask Ethereum provider on any platform or browser.

Use [npm](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm) to install

`@metamask/detect-provider` in your project directory:

npm i @metamask/detect-provider

In the [example project script](set-up-dev-environment.md#example), the following code detects the

provider using `@metamask/detect-provider`:

```javascript title="index.js"

import detectEthereumProvider from '@metamask/detect-provider';

const provider = await detectEthereumProvider();

if (provider) {

// From now on, this should always be true:

// provider === window.ethereum

startApp(provider); // initialize your app

} else {

console.log('Please install MetaMask!');

}

function startApp(provider) {

// If the provider returned by detectEthereumProvider isn't the same as

// window.ethereum, something is overwriting it – perhaps another wallet.

if (provider !== window.ethereum) {

console.error('Do you have multiple wallets installed?');

}

// Access the decentralized web!

}

Use a bundler such as [Webpack](https://github.com/webpack/webpack) to compile the module and create

an output script.

Install Webpack in your project directory:

npm i --save-dev webpack

Install the Webpack CLI:

npm i --save-dev webpack-cli

Compile the module:

npx webpack

When compiling the module, you might need to pass CLI options such as

[`--experiments-top-level-await`](https://webpack.js.org/configuration/experiments/).

You can alternatively specify options in a configuration file as follows:

```javascript title="webpack.config.cjs"

module.exports = {

experiments: {

topLevelAwait: true,

},

};

See [Webpack's Getting Started guide](https://webpack.js.org/guides/getting-started/) for more information.