# nft-login

> A react HOC to allow users to log in and authenticate with an ethereum NFT.

Latest version **0.1.10** (published 2022-06-19) · MIT license · 0 weekly downloads

## Install

```sh
npm install nft-login
pnpm add nft-login
yarn add nft-login
bun add nft-login
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.10 |
| Published | 2022-06-19 |
| First published | 2022-06-09 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 2 |
| Unpacked size | 48.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Andrew Pierno |
| Maintainers | wrannaman |
| Keywords | web3, nft, ethereum, web5, alchemy |

## Links

- npm: https://www.npmjs.com/package/nft-login
- Homepage: https://saasdeals.io
- npm.io page: https://npm.io/package/nft-login

## Dependencies (2)

- [web3](https://npm.io/package/web3.md) ^1.7.3
- [react](https://npm.io/package/react.md) ^18.1.0

## Recent versions

- 0.1.10 (latest) — 2022-06-19
- 0.1.9 — 2022-06-19
- 0.1.8 — 2022-06-19
- 0.1.7 — 2022-06-19
- 0.1.6 — 2022-06-19
- 0.1.5 — 2022-06-18
- 0.1.4 — 2022-06-18
- 0.1.3 — 2022-06-18
- 0.1.2 — 2022-06-14
- 0.1.1 — 2022-06-14
- 0.1.0 — 2022-06-10
- 0.0.17 — 2022-06-09
- 0.0.16 — 2022-06-09
- 0.0.15 — 2022-06-09
- 0.0.14 — 2022-06-09
- … 13 more at https://npm.io/package/nft-login/versions

## README

# NFT Login from [SaaS Deals](https://saasdeals.io)

This is a react HOC that allows users to authenticate and log in to an application using NFTs they own. It's a higher order component that wraps some web3 calls to make NFT login simpler.

![Metamask Transaction Example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pj1afaiv3wcii9gblbil.jpg)

## About [SaaS Deals](https://saasdeals.io)

SaaS Deals is a a marketplace for new SaaS companies to launch. Users can buy an NFT representing lifetime access to the product. The NFT can be traded on the marketplace and the founders get royalties when the NFT is traded.

## Props

| Prop      | Description                                                                  |
| --------- | ---------------------------------------------------------------------------- |
| key       | API Key from https://saasdeals.io                                            |
| url       | API Endpoint from https://saasdeals.io                                       |
| contracts | An Array of contract addresses you want to check                             |
| message   | The message you want to display to the user when they sign the login message |

## How It Works

This is a higher order component. Simply wrap your react component in the NFTLogin HOC with the key and your contract addresses and you're all set. You'll need an account on SaaS Deals for this to work.

In the future (if there's demand) we may pull this out into a separate, stand alone service. let me know on [Twitter](https://twitter.com/andrewpierno).

# Functions

| Function      | Description                                                                                                                                                                                    | Returns                                                 |
| ------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------- |
| login         | Passed to your component as a `prop` called `login`. It takes an optional array of contracts or no arguments example: `this.props.login({ contracts: ['0x123'], message: "My Message" })`      | `{ success: true, matches: res.matches }`               |
| connectWallet | Passed to your component as a `prop` called `connectWallet`. It takes no arguments. Calling `login` automatically calls `connectWallet` so you should not need to call this function directly. | `{ wallet: String, chain: String, connected: Boolean }` |

```javascript
{
  /*... your component */
}

export default NFTLogin(NFTLoginImplementation, {
  key: 'xxx-xx-xx-xx-xx',
  contracts: ['0x...'],
})
```

## Example Usage

```javascript
import React, { Component } from 'react'
import NFTLogin from 'nft-login'

class NFTLoginImplementation extends Component {
  constructor(props) {
    super(props)
    this.state = { matches: [] }
  }

  login = async () => {
    const matches = await this.props.login()
    // or
    // const matches = await this.props.login({ contracts: ['0x...'], message: "Login with my nft!!!" })

    console.log('~ matches', matches)
    this.setState({ matches })
  }

  render() {
    const { matches } = this.state
    return (
      <div>
        <button type="button" onClick={this.login}>
          Login with nft
        </button>
        <div>{matches.length} matches</div>
      </div>
    )
  }
}

export default NFTLogin(NFTLoginImplementation, {
  key: 'xxx-xx-xx-xx-xx',
  contracts: ['0x...'],
})
```

---
_Source: https://npm.io/package/nft-login · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._