Verifiable Credentials

caution

The Verida implementation of Verifiable Credentials is incomplete and subject to change.

This tutorial assumes you have read the documentation on Verifiable Credentials within the Verida Network.

Live Editor

VeridaVCExample = () => { const [status, setStatus] = useState(null) const [veridaContext, setVeridaContext] = useState(undefined) this.CONTEXT_NAME = "Verida Tutorial" React.useEffect(async () => { // See the login example for an explaination of this if (!veridaContext) { if (hasSession(this.CONTEXT_NAME)) { // we know we have a session already // globalLoginFunction is a globally defined version of the login function // See https://developers.verida.io/docs/tutorial/SSO let ctx = await globalLoginFunction(this.CONTEXT_NAME); setVeridaContext(ctx); } } }, []); issueVC = async function () { setStatus("Initalizing Credentials... please wait.") const credentialSDK = new Credentials() setStatus("Creating Credential") // The Verida DID that is the subject of this credential // In this case you are both issuing and the subject of the VC. // Usually this isn't the case! const subjectDid = veridaContext.account.accountDid // Data for the credential that matches the // Verida COVID19 Test Result Schema const credentialData = { fullName: "Jane Doe", // you can edit this right here! dateOfBirth: "1992-07-03", patientId: "ABC123", testTimestamp: new Date().toISOString(), result: "Negative", name: "Covid-19 Test Credential", summary: "Credential issued at " + new Date().toDateString() }; // create the credential const credential = await credentialSDK.createVerifiableCredentialRecord({ subjectId: subjectDid, data:credentialData, schema: "https://common.schemas.verida.io/health/pathology/tests/covid19/pcr/v0.1.0/schema.json", context: veridaContext }, `${credentialData.name} (${credentialData.fullName})`, credentialData.summary); setStatus("Initalizing messaging... please wait."); const messaging = await veridaContext.getMessaging(); setStatus("Sending Credential"); // now we will send the credential to yourself // give is a subject that makes sense const subject = "Test COVID19 Test Result" // we need to set the message type to the correct message type const messageType = "inbox/type/dataSend" // we want to send it to the Vault context const config = { recipientContextName: "Verida: Vault" } // Now send the message // note that veridaContext.account.accountDid is your own DID. await messaging.send( veridaContext.account.accountDid, messageType, { data: [credential] }, subject, config ) setStatus("Credential Sent! Check your Verida Wallet.") } let statusMessage = <div></div> if (status !== null) { statusMessage = ( <div className="admonition admonition-info alert alert--info"> {status} </div> ) } // if we have a veridaContext we are logged in if (veridaContext) { // user is logged in return ( <div> <button onClick={this.issueVC}>Issue a Verifiable Credential</button> {statusMessage} </div> ) } else { return ( <div className="admonition admonition-danger alert alert--danger"> <h2> Please login <a href="/docs/tutorial/SSO#runcode">here</a> </h2> </div> ) } }

VeridaVCExample = () => {
  const [status, setStatus] = useState(null)
  const [veridaContext, setVeridaContext] = useState(undefined)
  this.CONTEXT_NAME = "Verida Tutorial"

  React.useEffect(async () => {
    // See the login example for an explaination of this
    if (!veridaContext) {
      if (hasSession(this.CONTEXT_NAME)) {
        // we know we have a session already
        // globalLoginFunction is a globally defined version of the login function 
        // See https://developers.verida.io/docs/tutorial/SSO
        let ctx = await globalLoginFunction(this.CONTEXT_NAME);
        setVeridaContext(ctx);
      }
    }
  }, []);

  issueVC = async function () {
    setStatus("Initalizing Credentials... please wait.")
    const credentialSDK = new Credentials()

    setStatus("Creating Credential")

    // The Verida DID that is the subject of this credential
    // In this case you are both issuing and the subject of the VC.
    // Usually this isn't the case!
    const subjectDid = veridaContext.account.accountDid

    // Data for the credential that matches the
    // Verida COVID19 Test Result Schema
    const credentialData = {
      fullName: "Jane Doe", // you can edit this right here!
      dateOfBirth: "1992-07-03",
      patientId: "ABC123",
      testTimestamp: new Date().toISOString(),
      result: "Negative",
      name: "Covid-19 Test Credential",
      summary: "Credential issued at " + new Date().toDateString()
    };


    // create the credential
    const credential = await credentialSDK.createVerifiableCredentialRecord({
      subjectId: subjectDid,
      data:credentialData,
      schema: "https://common.schemas.verida.io/health/pathology/tests/covid19/pcr/v0.1.0/schema.json",
      context: veridaContext
    }, `${credentialData.name} (${credentialData.fullName})`, credentialData.summary);

    setStatus("Initalizing messaging... please wait.");
    const messaging = await veridaContext.getMessaging();
    setStatus("Sending Credential");

    // now we will send the credential to yourself

    // give is a subject that makes sense
    const subject = "Test COVID19 Test Result"
    // we need to set the message type to the correct message type
    const messageType = "inbox/type/dataSend"

    // we want to send it to the Vault context
    const config = { recipientContextName: "Verida: Vault" }

    // Now send the message
    // note that veridaContext.account.accountDid is your own DID. 
    await messaging.send(
      veridaContext.account.accountDid,
      messageType,
      {
        data: [credential]
      },
      subject,
      config
    )

    setStatus("Credential Sent! Check your Verida Wallet.")
  }

  let statusMessage = <div></div>
  if (status !== null) {
    statusMessage = (
      <div className="admonition admonition-info alert alert--info">
        {status}
      </div>
    )
  }


  // if we have a veridaContext we are logged in
  if (veridaContext) {
    // user is logged in
    return (
      <div>
        <button onClick={this.issueVC}>Issue a Verifiable Credential</button>

        {statusMessage}
      </div>
    )
  } else {
    return (
      <div className="admonition admonition-danger alert alert--danger">
        <h2>
          Please login <a href="/docs/tutorial/SSO#runcode">here</a>
        </h2>
      </div>
    )
  }
}

Result

Loading...