We expose 3 types of ready made forms : SignUpForm, SignInForm and RecoveryForm.

Example:

SignUpForm / SignInForm

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.

Example:

import React, { useState } from 'react'

// import Did modules
import { IAppData, PlatformError } from '@zippie/did-core'
import { PlatformProvider, SignInForm, SignUpForm, 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>
  )
}

RecoveryForm

This component is used for recovering an existing account

Example:

import { DidApi, environments, SignInForm, IAppData } from '@zippie/did-api'

 const MyApp = () => {
 const [platform, setPlatform] = useState<DidApi>()


  const onStart = async () => {
    const didApi = new DidApi({
      iframeRoot: document.body,
      env: environments.test,
    })
    await didApi.setup()
    setPlatform(didApi)
  }
  const onUserLoggedIn = (response: IAppData) => {
    setDidData(response)
    localStorage.setItem('didData', JSON.stringify(response))
  }
  const onForgotPasswordClick = () => {
    console.log('Callback when user clicks on forgot password')
  }

 const onSignUpClick= () => {
   console.log('Callback when user clicks on signup button')
 }
  return   <SignInForm
            platform={platform}
            onSignInComplete={onUserLoggedIn}
            onForgotPasswordClick={onForgotPasswordClick}
            onSignUpClick={onSignUpClick}
          />

 }

See the component properties here.