What are PropelAuth Frontend APIs?

By default, PropelAuth provides hosted pages for authentication, meaning we provide pages like a Login UI, Signup UI, account pages, organization management pages, and more.

However, if you need deeper customization, you can use our Frontend APIs to help you build your own UIs. You can fully style and customize your own components to fit your brand and design requirements.

Example of a custom login UI with a Three.js background and custom error states.

For a simpler integration, we recommend using our hosted pages instead of building your own components.

How it works

For each type of component you may want to add to your app, we provide you with a set of APIs to interact with PropelAuth. Like this one for enrolling the user in MFA:

Enabling MFA

const response = await enableMfaApi({ code })
await response.handle({
    success: async () => {
        alert('MFA enabled')
    },
    badRequest: (error) => {
        setCodeError(error.user_facing_errors.code)
    },
})

You can call this API from your app to enable MFA for a user. If you visit the MFA component page, you'll notice that we also provide you with a copyable components that you can drop directly into your application.

This will also enable you to modify it however you'd like - you can change the styling, add new features, or even build your own components from scratch using the APIs we provide.

Examples

Account Page Components

Enable / Disable MFA

Create a component that handles enrolling and disabling MFA for your users.

Delete User Account

Build a button and confirmation to allow users to delete their accounts.

Update Email

Build a form to help your users update their own email.

Update User Property

A form to help your users update their information, such as name, username, and custom user properties.

Update User Password

Create a form that assists in the password reset flow for your users.

Organization Management Components

Create Organization

Create a component that helps your users create their own organizations.

Update Organization Membership Settings

Build a form to allow your users to edit their organization's membership settings.

Delete Organization

Build a button and confirmation to delete an organization.

Update Organization Name

Build a form to update an organization's name.

Configure Organization's 2FA Requirement

Build a form to update an organization's 2FA requirements.

Invite User to Organization

Build a form to allow users to invite other users to join their organizations.

Organization Membership Table

Build a table to display users of an organization.

Organization Expired Invites Table

Build a table to display expired invites to an organization.

Organization Pending Invites Table

Build a table to view pending invites for an organization.

API Key Components

Organization API Key Table

Create a table that shows an organization's API keys, allowing users to view and delete them.

Create Organization API Key

Create a form to enable your users to create API Keys for their organizations.

Personal API Key Table

Create a table that shows a user's API keys, allowing them to manage and delete them.

Create Personal API Key

A form to assist your users in creating personal API keys.