# Link a Wallet to a Web 2.0 Account

## Link a Wallet to an Existing Account

In addition to enabling you to build new web3 native experiences from scratch, Picket can adapt your existing traditional web applications to the modern web3 world. Picket's authentication flow verifies wallet ownership, which allows you to link a wallet address to a user's profile. Once you've connected a wallet address to a user, you can integrate web3 information, like NFTs, into the user's profile by querying the blockchain all while knowing that the user is the owner of the verified wallet! 

## Steps

1. Setup Picket
2. Verify Wallet Ownership Client-Side with `picket-js` or `picket-react`
3. Make a request to the app's server with the Picket access token
4. Validate the user's access token server-side
5. Link the wallet to the user's account

## 1. Setup Picket  

### Get your API keys

{% hint style="warning" %}
**Join the Waitlist** 

To manage demand, we set up a waitlist for API key access. We're granting developers access as fast as we can. If you haven't already signed up, you can add yourself to the waitlist at [picketapi.com](https://www.picketapi.com/).
{% endhint %}

Picket uses API keys to authorize your requests. Requests without an API key will result in an error. You can get your API key from your account [dashboard.](http://picketapi.com/dashboard)\
\
There are two types of API keys

* *Publishable keys*: These keys are used client-side and are meant for client-side libraries, like [picket-js](https://www.npmjs.com/package/@picketapi/picket-js).  
* *Secret keys*: As the name suggests, these must be kept secret. They are meant for server-side libraries, like [picket-node](https://www.npmjs.com/package/@picketapi/picket-node)

Authorization to the API is performed via [HTTP Basic Auth](http://en.wikipedia.org/wiki/Basic_access_authentication). Provide your API key as the basic auth username value. You do not need to provide a password. API Authorization is handled for you in any of Picket's SDKs.

{% tabs %}
{% tab title="Curl" %}

```shell
curl https://picketapi.com/v1/{any_endpoint}
    -u pk_123_456_your_key 
```

{% endtab %}

{% tab title="Javascript" %}

```typescript
import Picket from "@picketapi/picket-js"
const picket = new Picket('YOUR_PUBLISHABLE_KEY_HERE')
```

{% endtab %}
{% endtabs %}

### Install the Picket SDK

The best way to interact with our API is to use one of our official libraries:

#### Client-side (Browser) Libraries

* [picket-js](https://www.npmjs.com/package/@picketapi/picket-js)
* [picket-react](https://www.npmjs.com/package/@picketapi/picket-react)

#### Server-side Libraries

* [picket-node](https://www.npmjs.com/package/@picketapi/picket-node)

{% tabs %}
{% tab title="Javascript" %}

```bash
# Install via NPM
npm install --save "@picketapi/picket-js"
```

{% endtab %}

{% tab title="React" %}

```shell
# Install via NPM
npm install --save "@picketapi/picket-react" 
```

{% endtab %}

{% tab title="Node" %}

```shell
# Install via NPM
npm install --save "@picketapi/picket-node"
```

{% endtab %}
{% endtabs %}

{% hint style="info" %}
Want to use Picket with other web-frameworks? Let us know at <team@picketapi.com>&#x20;
{% endhint %}

## 2. Verify Wallet Ownership Client-Side with `picket-js` or `picket-react`

Follow the [Wallet Authentication](https://docs.picketapi.com/picket-docs/quick-start-guides/quick-start-guides/wallet-login) guide&#x20;

#### 3. Make a request to the app's server with the Picket access token

Replace `example.com` and the example access token with your app's server route

{% tabs %}
{% tab title="Curl" %}

```bash
curl example.com \
 -H 'Authorization: Bearer x.y.z'
```

{% endtab %}

{% tab title="Javascript/Typescript" %}

```typescript
const accessToken = "x.y.z"

await fetch("example.com", {
    method: "GET",
    headers: {
        Authorization: `Bearer ${accessToken}`
    }
});
```

{% endtab %}
{% endtabs %}

## 4. Validate the user's access token server-side

{% hint style="warning" %}
Server-side libraries, like `picket-node`, require a secret API key and *must only be used in a secure, server-side environment.*
{% endhint %}

{% tabs %}
{% tab title="Node" %}

```typescript
import Picket from "@picketapi/picket-node";

const picket = new Picket("sk_demo123");

// REPLACE code to get access token from client request
const accessToken = "";

try {
    const { walletAddress } = await picket.validate(accessToken);
    // save user's wallet address to the DB
} catch (err) {
    console.error("invalid access token!");
}
```

{% endtab %}

{% tab title="API" %}
If there isn't a Picket server-side SDK for you language of choice, you can still use the Picket API

```python
import requests

# REPLACE code to get access token from client request
access_token = '';

resp = requests.get(
    'https://picketapi.com/api/v1/auth/validate', 
    auth=('YOUR_PROJECT_SECRET_KEY', '')
)

# check for HTPP status code OK 
# extract wallet address
```

{% endtab %}
{% endtabs %}

## 5. Link the wallet to the user's account

```typescript
// Psuedo-code for saving a wallet address to a user's profile
const { walletAddress } = accessToken; 
db.updateUserProfile({ walletAddress });
```