passage-auth
Getting Started
Install this package using npm.
npm i --save @passageidentity/passage-auth
This package includes three custom elements: passage-auth, passage-login, and passage-register.
passage-auth is a single element that handles both login and registration of users. passage-login and passage-register split out the login and register operations into separate elements.
These elements should be used when your login and registration functionality are on different pages.
Using a Passage Custom Element
Import the custom elements in your JavaScript/TypeScript module:
import '@passageidentity/passage-auth'
This import will register the three custom elements which can then be used as HTML tags like:
<passage-auth app-id="<PASSAGE_APP_ID"></passage-auth>
<passage-login app-id="<PASSAGE_APP_ID"></passage-login>
<passage-register app-id="<PASSAGE_APP_ID"></passage-register>
UI Customization with CSS Variables
The passage-auth, passage-login, and passage-register UI can be customized by utilizing CSS variables on the host webpage. All available variables, along with their default values, are shown below.
Click to view CSS variables
/* Default values shown */
:root {
/* Passage Container Styles */
--passage-container-background: transparent;
--passage-container-max-width: 220px;
--passage-container-margin: auto;
--passage-container-padding: 30px 30px 20px;
--passage-error-color: #ff0000;
/* Body Font Styles */
--passage-body-font-family: 'DM Sans', BlinkMacSystemFont, -apple-system, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell',
'Fira Sans', 'Droid Sans', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
--passage-body-font-size: 14px;
--passage-body-font-weight: 400;
--passage-body-text-color: #000;
/* Header Font Styles */
--passage-header-font-family: 'DM Sans', BlinkMacSystemFont, -apple-system, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell',
'Fira Sans', 'Droid Sans', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
--passage-header-font-weight: 700;
--passage-header-text-color: #000;
--passage-header-font-size: 24px;
/* Button Styles */
--passage-button-font-size: 16px;
--passage-button-font-weight: 400;
--passage-button-width: 50%;
--passage-button-border-radius: 75px;
/* Button & Link Colors */
--passage-button-color: #fff; /* button text color */
--passage-button-background-color: #000; /* button background and link color */
--passage-button-border-color: #000;
--passage-button-active-color: #fff;
--passage-button-active-background-color: #6b6b6b;
--passage-button-active-border-color: #6b6b6b;
--passage-button-hover-color: #fff;
--passage-button-hover-background-color: #4d4d4d;
--passage-button-hover-border-color: #4d4d4d;
/* Email and Phone Input Box Styles */
--passage-control-height: 40px;
--passage-control-border-radius: 5px;
--passage-control-border-width: 1px; /* input box and button border widths */
--passage-control-background-color: #fff;
--passage-control-text-color: #000;
--passage-control-border-color: #dbdbdb;
}To utilize one or more CSS variables, the user only needs to add the variable declarations inside of a style block that will be loaded onto the page. The user may choose to scope the CSS variables in one of two ways:
/* Recommended */
:root {
--passage-button-background-color: #27417e;
/* ... more variables ... */
}
/* Alternate method */
#passage-auth-container {
--passage-button-background-color: #27417e;
/* ... more variables ... */
}