Search…
Passage Elements
Instantly add authentication to any website with Passage custom elements
The Passage Elements are the easiest way to use Passage in your web application. An Element is a modular component that provides a complete UI/UX for modern authentication, embedded directly into your website.

What's Included?

πŸ™† User login and registration.
🎨 Complete UI/UX for all device types and auth flows – in other words, it just works.
πŸ”’ Device-native biometric authentication (e.g. Apple Face ID, Windows Hello, etc.).
✨ Magic Link authentication for a seamless non-biometric fallback.

Setup

Via NPM

Install the Passage-Auth package through NPM:
1
npm i --save @passageidentity/passage-auth
Copied!
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.
1
import '@passageidentity/passage-auth'
Copied!

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:
1
<script src="https://psg.so/web.js" defer></script>
Copied!

Using a Passage Element

To use the Passage Auth Element, begin by adding the following custom HTML element wherever you want a login and registration prompt to live on your website:
1
<passage-auth app-id="<PASSAGE_APP_ID>"></passage-auth>
Copied!
Your <PASSAGE_APP_ID>can be located in the Passage Console. If you don't have an App ID, you can create one in 60 seconds. Create an App →​
For example, your login page might have the following structure:
1
<html>
2
<head>
3
<title>Login to My Website</title>
4
​
5
...
6
​
7
<script src="https://psg.so/web.js" defer></script>
8
</head>
9
<body>
10
...
11
​
12
<passage-auth app-id="<PASSAGE_APP_ID>"></passage-auth>
13
​
14
...
15
</body>
16
</html>
Copied!

Styling the Passage Elements

The Passage Elements can be customized using CSS variables. You can modify the default configuration of the Passage Elements to match your site's look and feel. You can find detailed instructions and examples with the link below.
​
​
Last modified 1mo ago