Public Profiles

Every Verida account has a public profile.

Live Editor

VeridaProfileExample = () => { const [status, setStatus] = useState(null) const [veridaContext, setVeridaContext] = useState(undefined) const [publicProfile, setPublicProfile] = 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); } } }, []); dataUpdated = async function () { // and grab the profile data profileData = await this.profileConnection.getMany(null, null) // All public profiles have the fields: name, country, description, avatar.uri // see the schema here: https://common.schemas.verida.io/profile/basicProfile/latest/schema.json setPublicProfile(profileData) } connectPublicProfile = async function () { // we want to get our own public profile // we can get our own DID like this const did = veridaContext.account.accountDid // we want a client object const client = await veridaContext.getClient() // get a connection to the profile this.profileConnection = await client.openPublicProfile( did, "Verida: Vault", "basicProfile" ) // call dataUpdated to grab the data dataUpdated() } this.dataUpdated = this.dataUpdated.bind(this) this.connectPublicProfile = this.connectPublicProfile.bind(this) // if we have a veridaContext we are logged in if (veridaContext) { // user is logged in profileDisplay = ( <button onClick={this.connectPublicProfile}> Get the Public Profile </button> ) if (publicProfile) { profileDisplay = ( <div> <div>Name: {publicProfile.name}</div> <div>Description: {publicProfile.description}</div> <div>Country: {publicProfile.country}</div> {publicProfile.avatar && <img width="150px" src={publicProfile.avatar.uri} /> } </div> ) } return ( <div> <h3>Logged in as DID: {veridaContext.account.accountDid}</h3> {profileDisplay} </div> ) } else { return ( <div className="admonition admonition-danger alert alert--danger"> <h2> Please login <a href="/docs/tutorial/SSO#runcode">here</a> </h2> </div> ) } }

VeridaProfileExample = () => {
  const [status, setStatus] = useState(null)
  const [veridaContext, setVeridaContext] = useState(undefined)
  const [publicProfile, setPublicProfile] = 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);
      }
    }
  }, []);

  dataUpdated = async function () {
    // and grab the profile data
    profileData = await this.profileConnection.getMany(null, null)

    // All public profiles have the fields: name, country, description, avatar.uri
    // see the schema here: https://common.schemas.verida.io/profile/basicProfile/latest/schema.json
    setPublicProfile(profileData)
  }

  connectPublicProfile = async function () {
    // we want to get our own public profile

    // we can get our own DID like this
    const did = veridaContext.account.accountDid

    // we want a client object
    const client = await veridaContext.getClient()

    // get a connection to the profile
    this.profileConnection = await client.openPublicProfile(
      did,
      "Verida: Vault",
      "basicProfile"
    )

    // call dataUpdated to grab the data
    dataUpdated()
  }

  this.dataUpdated = this.dataUpdated.bind(this)
  this.connectPublicProfile = this.connectPublicProfile.bind(this)

  // if we have a veridaContext we are logged in
  if (veridaContext) {
    // user is logged in
    profileDisplay = (
      <button onClick={this.connectPublicProfile}>
        Get the Public Profile
      </button>
    )
    if (publicProfile) {
      profileDisplay = (
        <div>
          <div>Name: {publicProfile.name}</div>
          <div>Description: {publicProfile.description}</div>
          <div>Country: {publicProfile.country}</div>
          {publicProfile.avatar && 
            <img width="150px" src={publicProfile.avatar.uri} />
          }
        </div>
      )
    }

    return (
      <div>
        <h3>Logged in as DID: {veridaContext.account.accountDid}</h3>
        {profileDisplay}
      </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...

 

See more examples in the client-sdk docs