Zippie DID Platform API Reference Creating a Basic React TypeScript App

Prerequisites - Install Node.js and Yarn:

Node.js is a JavaScript runtime that allows us to run JavaScript code outside of a web browser.
Yarn is a package manager that can be used as an alternative to npm.
To install them, go to their official websites and download the latest versions that are compatible with your operating system. Follow the installation instructions provided by the installers.

Create a new React app - Using Create React App:

Open up your terminal or command prompt and type the following command to create a new React app using TypeScript:
```
npx create-react-app my-did-app --template typescript
```
This command will create a new directory called "my-did-app" and generate a basic React app structure inside it with TypeScript set up.

Install the "@zippie/did-react-components" package:

The "@zippie/did-react-components" package provides pre-built UI components for working with decentralized identities (DID) in React app.

Navigate to the newly created directory by running the following command:
```
cd my-did-app
```
To install this package, run the following command in your terminal or command prompt:
```
yarn add @zippie/did-react-components
```

Start the development server:

Then, start the development server by running the following command:
```
yarn start
```
This command will start the development server and open up a new browser window displaying the React app. If the browser window does not automatically open, you can navigate to http://localhost:3000 in your web browser.

Explore the basic app structure:

Once the development server is running, take a moment to explore the basic app structure that was generated by Create React App.
The main files and directories that you should be aware of are:
- public/index.html: This file contains the HTML code that is used to render the React app.
- src/index.tsx: This is the main entry point for the React app.
- src/App.tsx: This is the main component for the React app.
You can modify these files to create your own React app.

Integrate the PlatformProvider Component

Import the necessary components from the @zippie/did-react-components package:

Open the src/App.tsx file in your code editor.
Add the following import statements at the top of the file:

import { PlatformAgentUri, PlatformProvider } from '@zippie/did-react-components';

The PlatformProvider component is used to wrap the entire React app and provide the necessary context for working with decentralized identities (DID).

Wrap the App component with the PlatformProvider component:
Replace the contents of the return statement in the App component with the following code:

return (
   <PlatformProvider
      clientId="DidExampleApp"
      agentUri={PlatformAgentUri.sandbox}
   >
    <AppComponent />
  </PlatformProvider>
);

Implement the AppComponent

To use the PlatformProvider we need to create the referenced AppComponent component in the App.tsx file. This component provides the logic to check to see if the user is currently logged in to the app or not. If the user is logged in, then the component displays the DID provided users' profile details. If the user is not logged in then the component displays the SignIn/SignUp page.

Implement the AppComponent by placing the below code above the App component export.

const AppComponent: React.FC = () => {
   const { isReady } = usePlatform()
   const [info, setInfo] = useState('')

   // Variable to decide whether to show the sign-in flow
   const [showAuthPage, setShowAuthPage] = useState<boolean>(true)

   if (!isReady) return <h4>Loading...</h4>
   if (showAuthPage) return <SignInPage {...{ setShowAuthPage, setInfo }} />

   return (
      <div style={{ fontFamily: 'monospace', whiteSpace: 'pre' }}>
         {info ? 'signed-in as: ' + info : 'Loading'}
      </div>
   );
}

Finally we create the user sign-in and sign-up logic. The purpose of this component is to handle the enrollment of new users and the authentication of existing users', it also allows users' to access their recovery flow incase they have forgotten their password, etc.

Add imports for the required '@zippie/did-core' types used.

import { IAppData, PlatformError } from '@zippie/did-core';

Modify the import statement to include the required RecoveryForm, SignInForm and SignUpForm components.

import {
   PlatformAgentUri,
   PlatformProvider,
   RecoveryForm
   SignInForm,
   SignUpForm,
} from '@zippie/did-react-components';

Above the previously defined AppComponent, implement the new SignInPage component below:

const SignInPage: React.FC<any> = ({ setShowAuthPage, setInfo }) => {
   const [showSignUp, setShowSignUp] = useState<boolean>(false)
   const [showRecovery, setShowRecovery] = useState<boolean>(false)

   const onSignInComplete = async (result: IAppData | PlatformError) => {
      setInfo((result as IAppData).userDetails.username)
      setShowAuthPage(false)
   }

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

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

   const onForgotPasswordClick = () => setShowRecovery(true)
   const onSignInButtonClick = () => setShowSignUp(false)
   const onSignUpClick = () => setShowSignUp(true)

   if (showRecovery) return <RecoveryForm {...{ onRecoveryComplete }} />
   if (showSignUp)
      return <SignUpForm termsLink="" {...{ onSignInButtonClick, onSignUpComplete, onForgotPasswordClick }} />

   return <SignInForm {...{ onSignInComplete, onForgotPasswordClick, onSignUpClick }} />
}

Next Steps

Now you have created your first DID enabled application, where do you go from here? The DID provides useful cryptographic functions for application developers to use, like the ability to request that a user signs data using the users' private keys. To explore the DID Platform API further visit DID Platform API Reference

DID Platform API Documentation