<SignOutButton>

The <SignOutButton> component is a button that signs a user out. By default, it is a <button> tag that says Sign Out, but it is completely customizable by passing children.

Properties

---

asChild? boolean

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

---

redirectUrl? string

The redirect URL to navigate to after sign out is complete.

---

signOutOptions? SignOutOptions

Options for signing out. Includes sessionId which if passed, signs the user out of a specific session. Useful for multi-session applications.

---

children? React.ReactNode

Children you want to wrap the <SignOutButton> in.

SignOutOptions

The type of the signOutOptions prop for the component is defined as follows:

---

sessionId? string

The ID of a specific session to sign out of. Useful for multi-session applications.

---

redirectUrl? string

The redirect URL to navigate to after sign out is complete.

Usage

Basic usage

Next.js

app/page.js

import { SignOutButton } from '@oneauxilia/nextjs'

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

React

example.js

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

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

Remix

pages/index.js

import { SignOutButton } from '@oneauxilia/remix'

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

Astro

pages/index.astro

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

<SignOutButton />

Custom usage

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

Next.js

app/page.js

import { SignOutButton } from '@oneauxilia/nextjs'

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

React

example.js

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

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

Remix

pages/index.js

import { SignOutButton } from '@oneauxilia/remix'

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

Astro

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

pages/index.astro

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

<SignOutButton asChild>
  <button>My custom button</button>
</SignOutButton>

Multi-session usage

Sign out of all sessions

Clicking the <SignOutButton> component signs the user out of all sessions. This is the default behavior.

Sign out of a specific session

You can sign out of a specific session by passing in a sessionId to the signOutOptions prop. This is useful for signing a single account out of a multi-session (multiple account) application.

In the following example, the sessionId is retrieved from the useAuth() hook. If the user is not signed in, the sessionId will be null, and the user is shown the component. If the user is signed in, the user is shown the component, which when clicked, signs the user out of that specific session.

Next.js

app/page.tsx

'use client'

import { SignInButton, SignOutButton, useAuth } from '@oneauxilia/nextjs'

export default function Home() {
  const { sessionId } = useAuth()

  if (!sessionId) {
    return <SignInButton />
  }

  return <SignOutButton signOutOptions={{ sessionId }} />
}

React

example.js

import { SignInButton, SignOutButton, useAuth } from '@oneauxilia/oneauxilia-react'

export default function Home() {
  const { sessionId } = useAuth()

  if (!sessionId) {
    return <SignInButton />
  }

  return <SignOutButton signOutOptions={{ sessionId }} />
}

Remix

pages/index.js

import { SignInButton, SignOutButton, useAuth } from '@oneauxilia/remix'

export default function Home() {
  const { sessionId } = useAuth()

  if (!sessionId) {
    return <SignInButton />
  }

  return <SignOutButton signOutOptions={{ sessionId }} />
}