# 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 StackBlitz](https://stackblitz.com/github/b3pay/ic-reactor/tree/main/examples/identity-attributes-demo?embed=1&theme=dark&file=src/App.tsx)
  [View on GitHub](https://github.com/b3pay/ic-reactor/tree/main/examples/identity-attributes-demo)
## Live Preview

<iframe
  src="https://stackblitz.com/github/b3pay/ic-reactor/tree/main/examples/identity-attributes-demo?embed=1&theme=dark&file=src/App.tsx&view=preview"
  style="width: 100%; height: 600px; border: 0; border-radius: 8px; overflow: hidden;"
  title="IC Reactor Identity Attributes Demo"
  allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
  sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
/>

## Key Code

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

**Caution:** A production backend or canister must verify the signed payload, nonce,
  origin, timestamp, principal, and requested keys before trusting decoded
  profile values.