Identity Attributes

This focused React example shows how to request signed identity attributes from Internet Identity and handle the result with IC Reactor’s identity-attribute hooks.

Features Demonstrated

createIdentityAttributeHooks(identityAttributes).useIdentityAttributes()
Internet Identity login state shared through AuthenticationManager
OpenID provider aliases: google, apple, and microsoft
Custom OpenID issuer URLs and scoped identityAttributeKeys()
Handling signedAttributes.data and signedAttributes.signature

Links

Open in StackBlitzEdit and run in your browser

View on GitHubBrowse the source code

Live Preview

Key Code

async function registerWithAttributes() {
  // Pass the nonce as a callback, not an awaited value: awaiting the backend
  // first would end the click's user gesture and the browser would block the
  // Internet Identity window. The callback lets the window open immediately
  // while the nonce is still being fetched.
  const result = await requestOpenIdAttributes({
    nonce: async () => {
      const { nonce } = await api.registerBegin({
        expectedKeys: ["email", "name"],
      })
      return nonce
    },
    openIdProvider: "google",
    keys: ["email", "name"],
  })

  await api.registerFinish({
    principal: result.principal,
    requestedKeys: result.requestedKeys,
    signedAttributes: result.signedAttributes,
  })
}