InfoThis documentation is just for PropelAuth Components, an optional library for those who want deeper design control over their UIs.Click here to view our standard documentation

LogoUI Beta

What are PropelAuth Frontend APIs?

Installation GuideExamples

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

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

Enable / Disable MFA

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

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

Delete User Account

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

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

Update Email

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

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

Update User Property

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

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

Update User Password

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

Organization Management Components

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

Create Organization

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

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

Update Organization Membership Settings

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

Build a button and confirmation to delete an organization.

Delete Organization

Build a button and confirmation to delete an organization.

Build a form to update an organization's name.

Update Organization Name

Build a form to update an organization's name.

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

Configure Organization's 2FA Requirement

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

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

Invite User to Organization

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

Build a table to display users of an organization.

Organization Membership Table

Build a table to display users of an organization.

Build a table to display expired invites to an organization.

Organization Expired Invites Table

Build a table to display expired invites to an organization.

Build a table to view pending invites for an organization.

Organization Pending Invites Table

Build a table to view pending invites for an organization.

API Key Components

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

Organization API Key Table

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

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

Create Organization API Key

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

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

Personal API Key Table

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

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

Create Personal API Key

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