Zippie DID Platform (React API)

• Zippie DID Platform (React)
• What is DID
• Installing the npm package
• Basic React Example

What is DID

Decentralized Identity (DID) leverages the decentralization of blockchain technology to enhance privacy and transparency and eliminate central authority. With DID, data and assets are stored in the user’s digital identity, placing the sole and full authority squarely in their hands. DID gives them more independence and frees them from invasive authentication and verification. Companies or organizations are also less vulnerable to cyberattacks such as data breaches as they store less user information in their databases.

To know more about Zippie DID, click here.

Installing the npm package

The package can be installed with both yarn and npm

// Using NPM
npm install @zippie/did-react-components

// Using Yarn
yarn add @zippie/did-react-components

Basic React Example

The SignInForm and SignUpForm component, are ready-made form flows, using ReactJS, and provided by us to integrate into your applications. To rapidly build or prototype your rich decentralized applications. Once you are familiar with how these components work, it is possible to implement your own from scratch using the low-level API, though using the ready-made flows should be sufficient for most application developers.

import React, { useState } from 'react'

// import Did modules
import { IAppData, PlatformError } from '@zippie/did-core'
import { PlatformProvider, SignInForm, usePlatform } from '@zippie/did-react-components'

//
// Permissions that this application needs the user to grant.
//
const REQUESTED_PERMISSIONS = [Permission.READ_EMAIL, Permission.READ_FULL_NAME]

//
// Component which handles sign-up, sign-in, recovery, etc.
//
const SignInPage = () => {
  const [showSignUp, setShowSignUp] = useState<boolean>(false)
  const [showRecovery, setShowRecovery] = useState<boolean>(false)

  const onSignInComplete = async (result: IAppData | PlatformError) => {
    console.info('sign-in-result:', result)
    console.info('Received app info:', appinfo)

    // If you need to store user details on the backend, you can use the provided
    // publicKey to track your users.
    enrollUserInYourOwnBackend(appinfo.publicKey)
  }

  const onSignUpComplete = (result: IAppData | PlatformError) => {
    console.info('sign-up-result:', result)
  }

  const onRecoveryComplete = (result: IAppData | PlatformError) => {
    console.info('recovery-result:', result)
  }

  // handle user interaction
  const onForgotPasswordClick = () => setShowRecovery(true)
  const onSignInButtonClick = () => setShowSignUp(false)
  const onSignUpClick = () => setShowSignUp(true)

  //customise the ready made flows views
  if (showRecovery) return <RecoveryForm {...{ onRecoveryComplete }} />
  if (showSignUp)
    return <SignUpForm termsLink="" {...{ onSignInButtonClick, onSignUpComplete, onForgotPasswordClick }} />
  return <SignInForm {...{ onSignInComplete, onForgotPasswordClick, onSignUpClick }} />
}

// The default export of this file wraps this component in a PlatformProvider, which allows
// us to use the "usePlatform()" hook to start interacting with a users identity through the
// platform APIs.

const MyComponent = () => {
  const { isReady, isAppSignedIn, isUserSignedIn, permissions, userinfo } = usePlatform()

  // check if DID is ready
  if (!isReady) return <h3>Loading</h3>
  // check if the User has already signed into MyApplication if not show sign in page
  if (!isAppSignedIn) return <SignInPage />
  // check if the user has approved MyApplication's required permissions
  if (!permissions.includes(PermissionDesc.READ_FULL_NAME)) {
    return <p>User denied request for permissions.</p>
  }
  // Display user information
  return <h2>Hello, {userinfo.firstName}</h2>
}

// Every decentralized application needs an entry point, the PlatformProvider initializes
// and manages an instance of the BrowserPlatformApi, as well as binding it into a nice
// ReactJS interface with dynamic props and everything.

export const MyApplication = () => {
  return (
    <PlatformProvider
      clientId="MyApplicationId"
      permissions={REQUESTED_PERMISSIONS}
      agentUri={PlatformAgentUri.sandbox}
      config={{}}
    >
      <MyComponent />
    </PlatformProvider>
  )
}

Testing React Components

DID react components are tested using playwright. The tests are inside did-tests/frontend folder. Through command line navigate to did-tests/frontend and run tests as below:

// navigate to tests folder
cd did-tests/frontend

// Run test
npx playwright test