<RedirectToSignUp />

The <RedirectToSignUp /> component will navigate to the sign up URL which has been configured in your application instance. The behavior will be just like a server-side (3xx) redirect, and will override the current location in the history stack.

Usage

App Router

app/layout.tsx

import { OneAuxiliaProvider, SignedIn, SignedOut, RedirectToSignUp } from '@oneauxilia/nextjs'

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html>
      <body>
        <OneAuxiliaProvider>
          <SignedIn>{children}</SignedIn>
          <SignedOut>
            <RedirectToSignUp />
          </SignedOut>
        </OneAuxiliaProvider>
      </body>
    </html>
  )
}

Pages Router

pages/_app.tsx

import { OneAuxiliaProvider, SignedIn, SignedOut, RedirectToSignUp } from '@oneauxilia/nextjs'
import { AppProps } from 'next/app'

function MyApp({ Component, pageProps }: AppProps) {
  return (
    <OneAuxiliaProvider>
      <SignedIn>
        <Component {...pageProps} />
      </SignedIn>
      <SignedOut>
        <RedirectToSignUp />
      </SignedOut>
    </OneAuxiliaProvider>
  )
}

export default MyApp

pages/privatepage.tsx

import { OneAuxiliaProvider, SignedIn, SignedOut, RedirectToSignUp } from '@oneauxilia/oneauxilia-react'

function PrivatePage() {
  return (
    <OneAuxiliaProvider publishableKey={`YOUR_PUBLISHABLE_KEY`}>
      <SignedIn>Content that is displayed to signed in users.</SignedIn>
      <SignedOut>
        <RedirectToSignUp />
      </SignedOut>
    </OneAuxiliaProvider>
  )
}

routes/index.tsx

import { SignedIn, SignedOut, RedirectToSignUp, UserButton } from '@oneauxilia/remix'

export default function Index() {
  return (
    <div>
      <SignedIn>
        <h1>Index route</h1>
        <p>You are signed in!</p>
        <UserButton />
      </SignedIn>
      <SignedOut>
        <RedirectToSignUp />
      </SignedOut>
    </div>
  )
}

Properties

signUpFallbackRedirectUrl? 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.

signUpForceRedirectUrl? string

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

initialValues SignUpInitialValues

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

Previous<RedirectToSignIn />Next<RedirectToUserProfile />

Last updated 6 months ago

Usage

App Router

app/layout.tsx

import { OneAuxiliaProvider, SignedIn, SignedOut, RedirectToSignUp } from '@oneauxilia/nextjs'

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html>
      <body>
        <OneAuxiliaProvider>
          <SignedIn>{children}</SignedIn>
          <SignedOut>
            <RedirectToSignUp />
          </SignedOut>
        </OneAuxiliaProvider>
      </body>
    </html>
  )
}

Pages Router

pages/_app.tsx

import { OneAuxiliaProvider, SignedIn, SignedOut, RedirectToSignUp } from '@oneauxilia/nextjs'
import { AppProps } from 'next/app'

function MyApp({ Component, pageProps }: AppProps) {
  return (
    <OneAuxiliaProvider>
      <SignedIn>
        <Component {...pageProps} />
      </SignedIn>
      <SignedOut>
        <RedirectToSignUp />
      </SignedOut>
    </OneAuxiliaProvider>
  )
}

export default MyApp

pages/privatepage.tsx

import { OneAuxiliaProvider, SignedIn, SignedOut, RedirectToSignUp } from '@oneauxilia/oneauxilia-react'

function PrivatePage() {
  return (
    <OneAuxiliaProvider publishableKey={`YOUR_PUBLISHABLE_KEY`}>
      <SignedIn>Content that is displayed to signed in users.</SignedIn>
      <SignedOut>
        <RedirectToSignUp />
      </SignedOut>
    </OneAuxiliaProvider>
  )
}

routes/index.tsx

import { SignedIn, SignedOut, RedirectToSignUp, UserButton } from '@oneauxilia/remix'

export default function Index() {
  return (
    <div>
      <SignedIn>
        <h1>Index route</h1>
        <p>You are signed in!</p>
        <UserButton />
      </SignedIn>
      <SignedOut>
        <RedirectToSignUp />
      </SignedOut>
    </div>
  )
}

Properties

signUpFallbackRedirectUrl? 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.

signUpForceRedirectUrl? string

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

initialValues SignUpInitialValues

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