<passage-profile>

Add a profile page to your website with two lines of code.

Overview

The <passage-profile> custom element renders a UI element for users to view and manage their profile data in your website. The Profile Element currently support the following functionality:

• View and edit login identifiers (email address or phone number)
• Add, edit, and revoke devices used for biometric login on an account

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 Profile Element should work out of the box.

Install Passage using NPM

npm install --save @passageidentity/passage-elements

or from our CDN.

<script src="https://cdn.passage.id/passage-elements/v2.x/passage-elements.js"></script>

Using the App ID provided in the Passage Console, add the Profile 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-profile';
 
function Profile() {
    return (
        <div>
            <passage-profile app-id='<YOUR APP_ID HERE>'></passage-profile>
        </div>
    );
}
export default Profile;

Javascript & HTML

<passage-profile app-id="YOUR APP_ID HERE"></passage-profile>
<script src="https://cdn.passage.id/passage-elements/v2.x/passage-elements.js"></script>

Vue

<template>
    <div>
        <passage-profile :app-id="appId"></passage-profile>
    </div>
</template>
<script>
import { defineComponent } from 'vue';
import '@passageidentity/passage-elements/passage-profile';
 
export default defineComponent({
    name: 'Profile',
    setup() {
        const appId = 'YOUR APP_ID HERE';
        return {
            appId,
        };
    },
});
</script>

Customization

The Profile Element can be highly customized using CSS variables or parts. Learn more about UI customization.