Comment on page
<passage-profile>
Add a profile page to your website with two lines of code.
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
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://psg.so/web.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
Javascript + HTML
Vue.js
import '@passageidentity/passage-elements/passage-profile';
function Profile() {
return (
<div>
<passage-profile app-id="<YOUR APP_ID HERE>"></passage-profile>
</div>
);
}
export default Profile;
<passage-profile app-id="YOUR APP_ID HERE"></passage-profile>
<script src="https://psg.so/web.js"></script>
<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>
The Profile Element can be highly customized using CSS variables or parts. See our in-depth guide on UI customization here.
Last modified 2mo ago