<passage-passkey-table>

View, edit, and add passkeys for a user

Overview

The <passage-passkey-table> is a custom element that renders a table of passkeys associated with the current user. This table is used within the <passage-profile> element and is often used standalone in situations where you want users to have passkey management but not identifier management capabilities.

The main functionality of the element allows the user to:

• View all passkeys they have associated with your domain

• Edit the friendly name of a passkey

• Remove a passkey

• Add a new passkey

Example Usage

Make sure you've created an application in the Passage Console with your domain and redirect URL configured. Once you've done that, the Passkey Table Element should work out of the box.

Install Passage using NPM

npm install --save @passageidentity/passage-elements

or from our CDN.

<script src="https://psg.so/web.js"></script>

Using the App ID provided in the Passage Console, add the Passkey Table Element to your application as follows. To see a full example, please see the our guides and examples for different frontend frameworks.

React

import '@passageidentity/passage-elements/passage-passkey-table';

function PasskeyTable() {
  return (
      <div>
        <passage-passkey-table app-id="<YOUR APP_ID HERE>"></passage-passkey-table>
      </div>
  );
}
export default PasskeyTable;

Javascript + HTML

<passage-passkey-table app-id="YOUR APP_ID HERE"></passage-passkey-table>
<script src="https://psg.so/web.js"></script>

Vue.js

<template>
    <div>
      <passage-passkey-table :app-id="appId"></passage-passkey-table>
    </div>
</template>
<script>
import '@passageidentity/passage-elements/passage-passkey-table'

export default defineComponent({
  name: 'Passkey Table',
  setup() {
    const appId = "YOUR APP_ID HERE"
    return {
      appId,
    }
  },
})
</script>

Customization

The Passkey Table Element can be highly customized using CSS variables or parts. See our in-depth guide on UI customization here.