This is a sample app built on Next.js that demonstrates basic usage of the Niftory API for an app on the Flow blockchain.
You can see a live demo at sample.niftory.com.
The Niftory Sample app is built on NextJS. You'll need NodeJS and NPM on your device to get started:
- Installers: https://nodejs.org/en/download/
- (Optional) Mac: HomeBrew: https://formulae.brew.sh/formula/node
Next, you'll need Yarn (additional package manager), which is available here:
With these two things ready, you can simply run the following on your terminal or console to install all dependencies.
yarn install
This app uses dotenv for configuration, so you can set your app's environment variables by creating a .env file in this directory.
See .env.example for an example of how to configure these environment variables.
Once your .env file is set up, you can run the app locally with:
yarn dev
This is one potential stack, but this API can be plugged into any framework, frontend app or backend.
- Web framework: Next.js
- Auth framework: NextAuth
- Graph QL Client: graphql-request
- React state management: react-query
- GraphQL codegen: graphql-codeg-generator
This app demonstrates three forms of authentication in the Niftory API.
We use NextAuth to manage user sessions in this app.
Our configuration uses Niftory as the only OAuth provider and saves the user's Niftory token in the session.
The browser's GraphQL client then includes that token in every request to the Niftory API as a bearer token in the Authorization header
If the user isn't signed in, the above client will make requests without an Authorization header. This allows users to view available NFTs without signing in.
Before claiming an NFT, the app will prompt the user to sign in and set up their wallet.
Since transferring NFTs is a privileged operation, this app uses the client credentials OAuth flow to get a token that represents the app itself.
It passes in the client credentials token to the backend GraphQL client. We use an API route to validate that the user hasn't already claimed this NFT, and have the GraphQL client initiate the transfer from the backend.
This app demonstrates how to take the user through the wallet setup steps with the Flow client library.
See the WalletSetup component to explore how this flow works.