npm package: @passageidentity/passage-auth
Description: ## Getting Started
Latest version: 0.1.0-beta.28
Deprecated: Package no longer supported. Upgrade to @passageidentity/passage-elements

# 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.

<details>
  <summary>Click to view CSS variables</summary>

```css
/* 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;
}
```

</details>

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:

```css
/* Recommended */
:root {
  --passage-button-background-color: #27417e;
  /* ... more variables ... */
}

/* Alternate method */
#passage-auth-container {
  --passage-button-background-color: #27417e;
  /* ... more variables ... */
}
```