Package Exports

@passageidentity/passage-elements
@passageidentity/passage-elements/dist/package/PassageUser/index.d.ts
@passageidentity/passage-elements/dist/package/PassageUser/index.js
@passageidentity/passage-elements/dist/package/PassageUser/index.mjs
@passageidentity/passage-elements/dist/package/RouterView.js
@passageidentity/passage-elements/dist/package/customElements.es.js
@passageidentity/passage-elements/dist/package/customElements.es2.js
@passageidentity/passage-elements/dist/package/customElements.js
@passageidentity/passage-elements/dist/package/favicon.ico
@passageidentity/passage-elements/dist/package/index.d.ts
@passageidentity/passage-elements/dist/package/index.html
@passageidentity/passage-elements/dist/package/passage-auth/index.cjs.js
@passageidentity/passage-elements/dist/package/passage-auth/index.es.js
@passageidentity/passage-elements/dist/package/passage-login/index.cjs.js
@passageidentity/passage-elements/dist/package/passage-login/index.es.js
@passageidentity/passage-elements/dist/package/passage-profile/index.cjs.js
@passageidentity/passage-elements/dist/package/passage-profile/index.es.js
@passageidentity/passage-elements/dist/package/passage-register/index.cjs.js
@passageidentity/passage-elements/dist/package/passage-register/index.es.js
@passageidentity/passage-elements/dist/package/style.css
@passageidentity/passage-elements/package.json
@passageidentity/passage-elements/passage-auth
@passageidentity/passage-elements/passage-login
@passageidentity/passage-elements/passage-profile
@passageidentity/passage-elements/passage-register
@passageidentity/passage-elements/passage-user

Readme

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 ... */
}