<passage-register>

Overview

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

You should use the <passage-register> 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 or you may want to collect some additional user data (e.g. name, company, etc) when users register. The Register Element should be used in conjunction with the Login Element. 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 Register 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 Register 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-register';
 
function Register() {
    return (
        <div>
            <passage-register app-id='<YOUR APP_ID HERE>'></passage-register>
        </div>
    );
}
export default Register;

Javascript & HTML

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

Vue

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

Customization

The Register element can be highly customized using CSS variables or parts. 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.