<UserProfile /> component

The <UserProfile /> component is used to render a beautiful, full-featured account management UI that allows users to manage their profile and security settings.

Properties

All props are optional.

---

appearance Appearance | undefined

Optional object to style your components. Will only affect OneAuxilia components and not Account Portal pages.

---

routing 'hash' | 'path' | 'virtual'

The routing strategy for your pages. Defaults to 'path' in Next.js and Remix applications. Defaults to hash for all other SDK's.

---

path string

The path where the component is mounted on when routing is set to path. It is ignored in hash- and virtual-based routing. For example: /user-profile.

---

additionalOAuthScopes object

Specify additional scopes per OAuth provider that your users would like to provide if not already approved. For example: {google: ['foo', 'bar'], github: ['qux']}.

---

customPages CustomPage[]

An array of custom pages to add to the user profile. Only available for the JavaScript SDK. To add custom pages with React-based SDK's, see the dedicated guide.

Usage with frameworks

Next.js

You can embed the <UserProfile /> component using the Next.js optional catch-all route. This allows you to redirect the user inside your application.

App Router

/app/user-profile/[[...user-profile]]/page.tsx

import { UserProfile } from '@oneauxilia/nextjs'

const UserProfilePage = () => <UserProfile path="/user-profile" />

export default UserProfilePage

Pages Router

/pages/user-profile/[[...index]].tsx

import { UserProfile } from '@oneauxilia/nextjs'

const UserProfilePage = () => <UserProfile path="/user-profile" />

export default UserProfilePage

React

/user-profile.tsx

import { UserProfile } from '@oneauxilia/oneauxilia-react'

const UserProfilePage = () => <UserProfile path="/user-profile" />

export default UserProfilePage

Remix

routes/user/$.tsx

import { UserProfile } from '@oneauxilia/remix'

export default function UserProfilePage() {
  return <UserProfile path="/user" />
}

Astro

pages/user.astro

---
import { UserProfile } from '@oneauxilia/astro/components'
---

<UserProfile path="/user" />

Usage with JavaScript

The following methods available on an instance of the OneAuxilia class are used to render and control the <UserProfile /> component:

• mountUserProfile()

• unmountUserProfile()

• openUserProfile()

• closeUserProfile()

The following examples assume that you have followed the quickstart in order to add OneAuxilia to your JavaScript application.

mountUserProfile()

Render the <UserProfile /> component to an HTML <div> element.

function mountUserProfile(node: HTMLDivElement, props?: UserProfileProps): void

mountUserProfile() params

---

node HTMLDivElement

The <div> element used to render in the component

---

props? UserProfileProps The properties to pass to the <UserProfile /> component

mountUserProfile() usage

NPM module

main.js

import { OneAuxilia } from '@oneauxilia/oneauxilia-js'

// Initialize OneAuxilia with your OneAuxilia publishable key
const oneauxilia = new OneAuxilia('YOUR_PUBLISHABLE_KEY')
await oneauxilia.load()

document.getElementById('app').innerHTML = `
  <div id="user-profile"></div>
`

const userProfileDiv = document.getElementById('user-profile')

oneauxilia.mountUserProfile(userProfileDiv)

<script>

index.html

<!-- Add a <div id="user-profile"> element to your HTML -->
<div id="user-profile"></div>

<!-- Initialize OneAuxilia with your
OneAuxilia Publishable key and Frontend API URL -->
<script
  async
  crossorigin="anonymous"
  data-oneauxilia-publishable-key="YOUR_PUBLISHABLE_KEY"
  src="https://YOUR_FRONTEND_API_URL/npm/@oneauxilia/oneauxilia-js@latest/dist/oneauxilia.browser.js"
  type="text/javascript"
></script>

<script>
  window.addEventListener('load', async function () {
    await OneAuxilia.load()

    const userProfileDiv = document.getElementById('user-profile')

    OneAuxilia.mountUserProfile(userProfileDiv)
  })
</script>

unmountUserProfile()

Unmount and run cleanup on an existing <UserProfile /> component instance.

function unmountUserProfile(node: HTMLDivElement): void

unmountUserProfile() params

---

node HTMLDivElement The container <div> element with a rendered component instance.

unmountUserProfile() usage

NPM module

main.js

import { OneAuxilia } from '@oneauxilia/oneauxilia-js'

// Initialize OneAuxilia with your OneAuxilia publishable key
const oneauxilia = new OneAuxilia('YOUR_PUBLISHABLE_KEY')
await oneauxilia.load()

document.getElementById('app').innerHTML = `
  <div id="user-profile"></div>
`

const userProfileDiv = document.getElementById('user-profile')

oneauxilia.mountUserProfile(userProfileDiv)

// ...

oneauxilia.unmountUserProfile(userProfileDiv)

<script>

index.html

<!-- Add a <div id="user-profile"> element to your HTML -->
<div id="user-profile"></div>

<!-- Initialize OneAuxilia with your
OneAuxilia Publishable key and Frontend API URL -->
<script
  async
  crossorigin="anonymous"
  data-oneauxilia-publishable-key="YOUR_PUBLISHABLE_KEY"
  src="https://YOUR_FRONTEND_API_URL/npm/@oneauxilia/oneauxilia-js@latest/dist/oneauxilia.browser.js"
  type="text/javascript"
></script>

<script>
  window.addEventListener('load', async function () {
    await OneAuxilia.load()

    const userProfileDiv = document.getElementById('user-profile')

    OneAuxilia.mountUserProfile(userProfileDiv)

    // ...

    OneAuxilia.unmountUserProfile(userProfileDiv)
  })
</script>

openUserProfile()

Opens the <UserProfile /> component as an overlay at the root of your HTML body element.

function openUserProfile(props?: UserProfileProps): void

openUserProfile() params

---

props? UserProfileProps The properties to pass to the <UserProfile /> component

openUserProfile() usage

NPM module

main.js

import { OneAuxilia } from '@oneauxilia/oneauxilia-js'

// Initialize OneAuxilia with your OneAuxilia publishable key
const oneauxilia = new OneAuxilia('YOUR_PUBLISHABLE_KEY')
await oneauxilia.load()

document.getElementById('app').innerHTML = `
  <div id="user-profile"></div>
`

const userProfileDiv = document.getElementById('user-profile')

oneauxilia.openUserProfile(userProfileDiv)

<script>

index.html

<!-- Add a <div id="user-profile"> element to your HTML -->
<div id="user-profile"></div>

<!-- Initialize OneAuxilia with your
OneAuxilia Publishable key and Frontend API URL -->
<script
  async
  crossorigin="anonymous"
  data-oneauxilia-publishable-key="YOUR_PUBLISHABLE_KEY"
  src="https://YOUR_FRONTEND_API_URL/npm/@oneauxilia/oneauxilia-js@latest/dist/oneauxilia.browser.js"
  type="text/javascript"
></script>

<script>
  window.addEventListener('load', async function () {
    await OneAuxilia.load()

    const userProfileDiv = document.getElementById('user-profile')

    OneAuxilia.openUserProfile(userProfileDiv)
  })
</script>

closeUserProfile()

Closes the user profile overlay.

function closeUserProfile(): void

closeUserProfile() usage

NPM module

main.js

import { OneAuxilia } from '@oneauxilia/oneauxilia-js'

// Initialize OneAuxilia with your OneAuxilia publishable key
const oneauxilia = new OneAuxilia('YOUR_PUBLISHABLE_KEY')
await oneauxilia.load()

document.getElementById('app').innerHTML = `
  <div id="user-profile"></div>
`

const userProfileDiv = document.getElementById('user-profile')

oneauxilia.closeUserProfile(userProfileDiv)

<script>

index.html

<!-- Add a <div id="user-profile"> element to your HTML -->
<div id="user-profile"></div>

<!-- Initialize OneAuxilia with your
OneAuxilia Publishable key and Frontend API URL -->
<script
  async
  crossorigin="anonymous"
  data-oneauxilia-publishable-key="YOUR_PUBLISHABLE_KEY"
  src="https://YOUR_FRONTEND_API_URL/npm/@oneauxilia/oneauxilia-js@latest/dist/oneauxilia.browser.js"
  type="text/javascript"
></script>

<script>
  window.addEventListener('load', async function () {
    await OneAuxilia.load()

    const userProfileDiv = document.getElementById('user-profile')

    OneAuxilia.closeUserProfile(userProfileDiv)
  })
</script>

Customization

To learn about how to customize OneAuxilia components, see the customization documentation.

In addition, you also can add custom pages and links to the <UserProfile /> navigation sidebar. For more information, refer to the Custom Pages documentation.