<SignUpButton>

The <SignUpButton> component is a button that links to the sign-up page or displays the sign-up modal.

Properties

---

asChild? boolean

For Astro only: If true, the <SignUpButton> component will render its children as a child of the component.

---

forceRedirectUrl? string

If provided, this URL will always be redirected to after the user signs up. It's recommended to use the environment variable instead.

---

fallbackRedirectUrl? string

The fallback URL to redirect to after the user signs up, if there's no redirect_url in the path already. Defaults to /. It's recommended to use the environment variable instead.

---

signInForceRedirectUrl? string

If provided, this URL will always be redirected to after the user signs in. It's recommended to use the environment variable instead.

---

signInFallbackRedirectUrl? string

The fallback URL to redirect to after the user signs in, if there's no redirect_url in the path already. Defaults to /. It's recommended to use the environment variable instead.

---

mode? 'redirect' | 'modal'

Determines what happens when a user clicks on the <SignUpButton>. Setting this to 'redirect' will redirect the user to the sign-up route. Setting this to 'modal' will open a modal on the current route. Defaults to 'redirect'

---

children? React.ReactNode

Children you want to wrap the <SignUpButton> in.

---

initialValues SignUpInitialValues

The values used to prefill the sign-up fields with.

Usage

Basic usage

Next.js

pages/index.js

import { SignUpButton } from '@oneauxilia/nextjs'

export default function Home() {
  return <SignUpButton />
}

React

example.js

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

export default function Example() {
  return <SignUpButton />
}

Remix

pages/index.js

import { SignUpButton } from '@oneauxilia/remix'

export default function Home() {
  return <SignUpButton />
}

Astro

pages/index.astro

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

<SignUpButton />

Custom usage

You can create a custom button by wrapping your own button, or button text, in the <SignUpButton> component.

Next.js

pages/index.js

import { SignUpButton } from '@oneauxilia/nextjs'

export default function Home() {
  return (
    <SignUpButton>
      <button>My custom button</button>
    </SignUpButton>
  )
}

React

example.js

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

export default function Example() {
  return (
    <SignUpButton>
      <button>My custom button</button>
    </SignUpButton>
  )
}

Remix

pages/index.js

import { SignUpButton } from '@oneauxilia/remix'

export default function Home() {
  return (
    <SignUpButton>
      <button>My custom button</button>
    </SignUpButton>
  )
}

Astro

You must pass the asChild prop to the <SignUpButton> component if you are passing children to it.

pages/index.astro

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

<SignUpButton asChild>
  <button>My custom button</button>
</SignUpButton>