Passage has always been about providing a great authentication experience for developers and users. There is so much more to user identity than just authentication and we are equally passionate about helping to solve those problems in a way that is secure and easy for developers. Today we are launching our Passage Profile Element as a way for teams to quickly add common account and profile management capabilities to their applications without having to implement anything themselves.

Version 1 of the Profile Element provides the following functionality to users:

• View and change their email address (verification required)
• View and change their phone number (verification required)
• View or add devices and biometrics credentials registered to their account
• Revoke a device from accessing their account

The Passage Profile is shipped as a custom element and can be added to your application through NPM or via our CDN in a script tag. In just two lines of code, you can have a profile page that looks like this:

Let's take a look at how it works.

First, we assume you are using a Passage Auth Element for your authentication so that Passage knows about your users.

You can add the Profile Element to your application as follows:

Via NPM

‍

Then import the package in the module where you intend to use the custom element. This import will automatically register the custom elements for use in your HTML.

‍

Via CDN

‍Include the Passage JavaScript library on your website. Add the following line to the same page where you added the custom element above:

‍

To use the Profile Element, you can add the following custom HTML element to wherever you want your profile page functionality to show up.

‍

And that is it! Once users have authenticated to your application using Passage, they can access the profile page to view and edit their account information.

What else can you do?

The Profile Element is customizable so that it can easily match the look and feel of your website. Customization is available using CSS variables and parts and you can find more information in our docs.

Much like our Passage Auth Elements, the profile element is backed by a fully documented API and SDK that can be used for more customized needs. You can find complete API documentation here.

What's next?

We are proud of the first version of the Profile Element, but we know there is a lot more to do. We are hard at work on:

• support for additional user data in a user's profile
• additional authentication options
• and more!

Passage is still in public beta and actively seeking feedback on the product. If you have feedback, bug reports, or feature requests, we would love to hear from you. You can email me at anna@passage.id or fill out this form.

‍