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

api stands for your own backend client, which issues the registration nonce and verifies the signed attributes; the demo has no such module and shows this code as a text sample in its page.

import { useIdentityAttributes } from "./reactor"
// Your own backend client: it issues the nonce and verifies the signed payload
import { api } from "./api"

function RegisterButton() {
  const { requestOpenIdAttributes } = useIdentityAttributes()

  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,
    })
  }

  return <button onClick={registerWithAttributes}>Register with Google</button>
}