# Login

The following sample will show you how to make a simple connection handler. First,  we will generate a QR Code that will be the entry point by which users can interact with your dApp. Once this QR Code is scanned and operation authorized, the account details are forwarded to you.

## Prerequisites: <a href="#pre-requisites" id="pre-requisites"></a>

{% content-ref url="/pages/-Mg56\_a4eJ5VygETYHMC" %}
[Getting started](/xact/sdk/javascript/getting-started.md)
{% endcontent-ref %}

## Step 1: Import the following modules

Continue building on the index.js from the previous example ([Environment Set-up](https://app.gitbook.com/@xact/s/xact/sdk/javascript/getting-started#step-1-set-up-your-node-js-environment)) and add the following modules:

```typescript
const { Client, UserAccount } = require("@xact-wallet-sdk/client");
require("dotenv").config();
```

## Step 2: Generate a QR Code

The process of generating a QR Code is straight forward. Within the async function, simply call *generateQRCode* and wait for the image.

{% hint style="info" %}
You can optionally set the scope in the params to fetch the NFT during the login process. it's set by default to`ScopeEnum.PROFILE`
{% endhint %}

```typescript
const qrCode = await client.generateQRCode({
    scope: [ScopeEnum.PROFILE, ScopeEnum.NFT]
});
```

## Step 3: Listen to new Connections

Finally get noticed when a new user accept the connexion to your dApp.

```typescript
/* Subscribe to new Connections */
client.connect().subscribe(user => {
    console.log('new connexion', user);
});
```

⭐ Congratulations! You have successfully completed the process of authentication to our wallet

## Code Check ✅

Your *index.js* file should look like this:

{% code title="index.js" %}

```typescript
const { Client } = require("@xact-wallet-sdk/client");
require("dotenv").config();

async function main() {

    //get your api key from your .env file
    const apiKey = process.env.API_KEY;


    // If we weren't able to find it, we should throw a new error
    if (apiKey == null) {
        throw new Error("Environment variables API_KEY must be present");
    }
    /* Create a new instance of Client */
    const client = new Client({apiKey});
    
    /* Init the connection */
    await client.initConnexion();
    
    /* Generate a QR Code */
    const qrCode = await client.generateQRCode();
    
    /* Subscribe to new Connections */
    client.connect().subscribe(user => {
        console.log('new connexion', user);
    });
}
main();
```

{% endcode %}


---

# 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://xact.gitbook.io/xact/sdk/javascript/login.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.