# Authenticating with MetaMask

Somnia empowers developers to build applications for mass adoption. Developers who deploy their Smart Contracts on Somnia, will require a User Interface to Connect to the Smart Contract. To enable users connect via the User Interface, it is necessary to set up an authentication process where only authorized users can access the functionality on the deployed Smart Contracts, for example, to carry out WRITE operations.\
\
[MetaMask](https://docs.metamask.io) is a wallet library that developers can use to build login functionality for applications on the Somnia Network.

{% hint style="success" %}
Somnia Mainnet is LIVE. To deploy on Somnia Mainnet, you will need SOMI Tokens. Please refer to the [guide](/get-started/getting-started-for-mainnet.md) on Moving from Testnet to Mainnet.
{% endhint %}

In this guide, you will learn how to use the MetaMask Library to set up authentication for your User Interface App and connect to the Somnia Network. We will build a simple NextJS application to walk through the process.

## Start a NextJS Project

Run the command below to start a NextJS project:

```bash
npx create-next-app metamask-example
```

Select Typescript, TailWind CSS, and Page Router in the build options.

<br>

Change the directory into the project folder. Delete the code inside of the `<main>` tags and replace them with the following:

```html
 <p>Hello, World!</p>
```

## Install Viem

```bash
npm i viem
```

[Viem](https://viem.sh) is a TypeScript interface for Ethereum that provides low-level stateless primitives for interacting with Ethereum.\
\
Viem sets up a “`transport`” infrastructure to connect with a node in the EVM Network and the deployed Smart Contracts.\
\
We will use some ViemJS methods to connect to your Smart Contract deployed on the Somnia Network. ViemJS has a \`createPublicClient\` and a \`createWalletClient\` method. The PublicClient is used to perform READ operations, while the WalletClient is used to perform WRITE operations.

## Import Methods

The next step is to set up the React State methods and the ViemJS methods that we will require:

```typescript
import { useState } from "react";
import {
  createPublicClient,
  http,
  createWalletClient,
} from "viem";
```

The `http` is the transport protocol for interacting with the Node of the Somnia Blockchain via RPC. It uses the default Somnia RPC URL: [`https://dream-rpc.somnia.network`](https://dream-rpc.somnia.network). In the future developers can use RPC providers to avoid rate limiting.

## Import Somnia

Import Somnia Testnet

```typescript
import { somniaTestnet } from "viem/chains";
```

## Declare React States

State allows us to manage changing data in the User Interface. For this example application, we are going to manage two states:

* When we can read the User's Address
* When a User is connected (Authorization)

Add the states inside the export statement:

```typescript
const [address, setAddress] = useState<string>("");
const [connected, setConnected] = useState(false);
```

Now that the States are declared, we can declare a function to handle the MetaMask authentication process on Somnia Network.

## Connect MetaMask Function

Add the function below inside the export statement:

```typescript
const connectToMetaMask = async () => {
    if (typeof window !== "undefined" && window.ethereum !== undefined) {
      try {
        await window.ethereum.request({ method: "eth_requestAccounts" });
        const walletClient = createWalletClient({
          chain: SOMNIA,
          transport: custom(window.ethereum),
        });
        const [userAddress] = await walletClient.getAddresses();
        setClient(walletClient);
        setAddress(userAddress);
        setConnected(true);
        console.log("Connected account:", userAddress);
      } catch (error) {
        console.error("User denied account access:", error);
      }
    } else {
      console.log(
        "MetaMask is not installed or not running in a browser environment!"
      );
    }
  };
```

## Update the UI

MetaMask connection is set up, and the final step is to test the connection via the User Interface. Update the `<p>Hello, World!</p>` in the return statement to the following:

```typescript
{!connected ? (
        <button
          onClick={connectToMetaMask}
          className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
        >
          Connect Wallet
        </button>
      ) : (
        <div>
          <p>Connected as: {address}</p>
         </div>
      )}
```

Open your terminal and run the following command to start the app:

```bash
npm run dev
```

Go to `localhost:3000` in your Web Browser to interact with the app and connect to Somnia Network via MetaMask.\
\
You can read more about using Viem to interact with the deployed Smart Contract methods on Somnia Network [here](/developer/development-frameworks/using-the-viem-library.md).\
\
Congratulations, you have successfully connected from MetaMask to Somnia Network. 🎉

<br>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.somnia.network/developer/building-dapps/wallet-integration-and-auth/authenticating-with-metamask.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.