<passage-auth>

Handles authentication of new and existing users for your application on the same page.

Overview

The <passage-auth> custom element renders a UI element for users to register and login to your website. The Auth Element currently supports register and login with biometrics (e.g. FaceID, Windows Hello) and magic links via email or SMS.

You should use the <passage-auth> element if your website allows users to self-register and you want to have a single page for your login and register screens. The Auth Element is the easiest way to add login and registration functionality to your website since it handles authentication of new and existing users for your application on the same page.

Example Usage

Make sure you've created an application in the Passage Console with your domain and redirect URL configured. Once you've done that, the Login Element should work out of the box.

Install Passage using NPM

npm install --save @passageidentity/passage-elements

or from our CDN.

<script src="https://psg.so/web.js"></script>

Using the App ID provided in the Passage Console, add the Auth Element to your application as follows. To see a full example, please see the our guides and examples for different frontend frameworks.

React

import '@passageidentity/passage-elements/passage-auth';

function Login() {
  return (
      <div>
        <passage-auth app-id="<YOUR APP_ID HERE>"></passage-auth>
      </div>
  );
}
export default Login;

Javascript + HTML

<passage-auth app-id="YOUR APP_ID HERE"></passage-auth>
<script src="https://psg.so/web.js"></script>

Vue.js

<template>
    <div>
      <passage-auth :app-id="appId"></passage-auth>
    </div>
</template>
<script>

import { defineComponent } from 'vue'
import '@passageidentity/passage-elements/passage-auth'

export default defineComponent({
  name: 'Login',
  setup() {
    const appId = "YOUR APP_ID HERE"
    return {
      appId,
    }
  },
})
</script>

Customization

The Auth Element can be highly customized using CSS variables or parts. See our in-depth guide on UI customization here.

You can also add custom logic around your authentication using JavaScript callbacks. Passage elements support a beforeAuth and onSuccess callback. See how to customize your workflow here.