<passage-login>

Overview

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

You should use the <passage-login> element if your website allows users to self-register and you want different UI/UX for login and registration. For example, you might have some marketing material on the registration page but want a clean, simple login page for returning users. You can use the Login and Register Elements to achieve this. These elements can be styled differently and can have different callbacks for authentication logic customization.

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://cdn.passage.id/passage-elements/v2.x/passage-elements.js"></script>

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

React

import '@passageidentity/passage-elements/passage-login';
 
function Login() {
    return (
        <div>
            <passage-login app-id='<YOUR APP_ID HERE>'></passage-login>
        </div>
    );
}
export default Login;

Javascript & HTML

<passage-login app-id="YOUR APP_ID HERE"></passage-login>
<script src="https://cdn.passage.id/passage-elements/v2.x/passage-elements.js"></script>

Vue

<template>
    <div>
        <passage-login :app-id="appId"></passage-login>
    </div>
</template>
<script>
import { defineComponent } from 'vue';
import '@passageidentity/passage-elements/passage-login';
 
export default defineComponent({
    name: 'Login',
    setup() {
        const appId = 'YOUR APP_ID HERE';
        return {
            appId,
        };
    },
});
</script>

Customization

The Login element can be highly customized using CSS variables or parts. See our in-depth guide on Learn more about UI customization.

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