LogoLogo
Manifold for Developers
Manifold for Developers
  • Introduction
  • Shopify Merch Bridge
    • Overview
    • Tutorial
      • Step 1: Product Gate Setup
        • 1.1: Configure the Product
        • 1.2: Install Manifold Merch Bridge
        • 1.2: Create a New Product Gate
        • 1.3: Link a Product to the Gate
        • 1.4: Add Rules
      • Step 2: Store Theme Setup
        • 2.1 The Theme Editor
        • 2.2 Product Page Setup
        • 2.3 Cart Page Setup
    • Advanced Configuration
    • FAQ / Error Help
    • Reference
      • Product and Gate Configuration
        • Shopify Products
        • Product Gates
          • Gate Products
          • Rules
      • Custom Themes
      • Updating to the Latest Version
      • UI Configuration Options
      • Advanced Usage
      • Common Issues
  • Guides
    • Getting Started
    • HTML
    • React
    • NextJS
    • Vue
    • Wix
    • Squarespace
      • Simple Squarespace Site
      • Customised Squarespace Template
  • Resources
    • Apps
      • Grant Types
    • Widgets
      • Directory
      • Manifold CSS Variables
        • Scheme Utility Classes
        • List of Manifold CSS Variables
      • Connect Widget
        • Blockchain Interaction
        • Wallet Authentication
        • Data Client
          • NFT Information Retrieval
            • getNFT
            • getNFTsOfOwner
            • ownerHasNFT
            • getCollectors
          • Data Storage and Retrieval
        • Advanced Configuration
        • Customization & Styling
        • Automatic Error Handling
      • Campaign Widget
        • Campaign Creation
          • Questionnaire
        • Campaign Progress
        • Customization & Styling
      • Curation Widget
      • Marketplace Widgets
        • Widgets
          • Data Attributes
          • Layout Widgets
          • Card Widgets
          • Listing Widgets
        • Window Events
        • Troubleshooting
        • Customization & Styling
        • Version Change Notes
          • 3.2.1 - CSS Selector Changes
          • 3.1.1 - CSS Selector Changes
      • Claim Widgets
        • Widgets
          • Data Attributes
          • Complete Claim Widget
          • Buy Button Only Widget
          • Mint Count Widget
        • Troubleshooting
        • Customization & Styling
        • Version Change Notes
          • 1.7.0, 1.7.1 - CSS Selector Changes
      • Restricted Token Widget
        • Customization & Styling
      • Wallet Identity Widget
        • Customization & Styling
      • Subscription Widget
      • 6551 Display Widget
    • Manifold Ethereum Provider
  • Tools and APIs
    • Merkle Tree Tool
    • Snapshot Tool
    • Discord Tools
    • Server-Side Session Authentication
      • Signature Grant
      • Authorization Code Grant
  • Smart Contracts
    • Manifold Creator
      • Contracts
        • Creator Core
          • Common Functions
          • ERC721 Functions
          • ERC1155 Functions
        • Extensions
          • Extensions Functions
          • Extensions Examples
          • Extensions Deployment Guide
            • Dynamic NFT Extension
            • Lazy Mint Extension ERC1155
            • Lazy Mint Extension ERC721
        • Mint Permissions
          • Mint Permissions Functions
      • Prior Versions
        • 1.0.x
          • Creator Core
            • Common Functions
            • ERC721 Functions
            • ERC1155 Functions
          • Extensions
            • Extensions Functions
            • Extensions Examples
            • Extensions Deployment Guide
              • Dynamic NFT Extension
              • Lazy Mint Extension ERC1155
              • Lazy Mint Extension ERC721
          • Mint Permissions
            • Mint Permissions Functions
        • 2.0.x
          • Creator Core
            • Common Functions
            • ERC721 Functions
            • ERC1155 Functions
          • Extensions
            • Extensions Functions
            • Extensions Examples
            • Extensions Deployment Guide
              • Dynamic NFT Extension
              • Lazy Mint Extension ERC1155
              • Lazy Mint Extension ERC721
          • Mint Permissions
            • Mint Permissions Functions
    • Marketplace
      • Identity Verifier
    • Royalty Registry
  • Contact Us
Powered by GitBook
On this page
  • Overview
  • Example Use Cases
  • Getting Started
  • Example Implementation
  • Backend
  • Frontend

Was this helpful?

  1. Tools and APIs
  2. Server-Side Session Authentication

Authorization Code Grant

Last updated 2 years ago

Was this helpful?

Overview

This article describes how to generate access tokens when using an The benefits of this grant type are:

  1. It is more secure. All authentication is routed through your own server, so no session key data is exposed to potential client-side snoopers.

  2. It is more customizable. You can combine data from our APIs and your own and return them together to the user.

  3. This type of authentication can be used to query data about a user without continual user interaction. For example - repeated and cadenced queries of user data.

Example Use Cases

  • An application that periodically checks ownership of an NFT before sending out an email or other notification.

  • An application that combines off-chain data (like health or exercise data from Apple) with on-chain data (like a sports-related NFT the user owns).

  • An application that gives and revokes access to another service based on NFT ownership and periodically re-evaluates ownership.

Getting Started

The first thing you will need to do is create a of type Authorization Code Grant. This will give you a clientId and clientSecret that can be used to generate access tokens on behalf of your users. You will want to store the clientSecret on your backend server.

This is the general flow that a user will go through when authenticating with your app.

  • User connects their wallet to your website, and signs a message verifying that they own the wallet

  • This signature, along with their wallet address is sent to our auth server, which generates a one-time-use code that can be exchanged for an authorization token.

  • Your client sends that code to your server, which makes a call to our auth server to exchange that for an authorization token.

  • Your server can store that authorization token and refresh when necessary, and now make calls on behalf of the user.

With this flow, you can ask users to authenticate once, and continually call APIs on their behalf on the backend.

Example Implementation

Backend

The Manifold OAuth2.0 endpoint is https://oauth2.manifoldxyz.dev

Here is an example in how to implement the authorization token flow in an Express backend server:

app.get('/token', async (req: any, res: any) => {
  const authCode = req.query.authCode
  const clientId = req.query.clientId
  const signature = req.query.signature
  const address = req.query.address
  const clientSecret = process.env.OAUTH_CLIENT_SECRET

  const response = await fetch('https://oauth2.manifoldxyz.dev/token', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'Accept': 'application/json'
    },
    body: JSON.stringify({
      clientId: clientId,
      code: authCode,
      clientSecret: clientSecret,
      signature: signature
    }),
  })
  
  if (response.status !== 200) {
    // Handle error
    throw new Error();
  }

  const resJson = await response.json()
  /**
   *
   * { access_token: 'abcd', expires_in: 2592000 }
   *
   **/
  
  // Save the JSON locally
  userCredentials[address] = resJson

  res.json({
    authenticated: true
  });
})

Frontend

Note: This npm package is not publicly available yet

import ManifoldClient from '@manifoldxyz/manifold-data-client'

app.get('/avatars', async (req: any, res: any) => {
  const address = req.query.address

  const manifoldClient = new ManifoldClient({ token: userCredentials[address].access_token })

  const data = await manifoldClient.getNFTsOfOwner({
    filters: [
      {
        contractAddress: '0x10cdcb5a80e888ec9e9154439e86b911f684da7b'
      }
    ]
  })
  
  res.json(data)
})

Now, let's say that your website wants to display all the that a user holds. You could set up an endpoint like this:

Authorization Code Grant Type.
Developer App
FVCK_AVATAR//