<SignedIn>

Overview

The <SignedIn> component offers authentication checks as a cross-cutting concern. Any children components wrapped by a <SignedIn> component will be rendered only if there's a User with an active Session signed in your application.

Usage

Next.js

app.tsx

import '@/styles/globals.css'
import { OneAuxiliaProvider, RedirectToSignIn, SignedIn } from '@oneauxilia/nextjs'
import { AppProps } from 'next/app'

function MyApp({ Component, pageProps }: AppProps) {
  return (
    <OneAuxiliaProvider {...pageProps}>
      <SignedIn>
        <div>You are signed in</div>
      </SignedIn>
      <div>Always visible</div>
    </OneAuxiliaProvider>
  )
}

export default MyApp

React

app.tsx

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

function Page() {
  return (
    <OneAuxiliaProvider publishableKey={`YOUR_PUBLISHABLE_KEY`}>
      <section>
        <div>This content is always visible.</div>
        <SignedIn>
          <div>This content is visible only to signed in users.</div>
        </SignedIn>
      </section>
    </OneAuxiliaProvider>
  )
}

Remix

routes/index.tsx

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

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

Astro

index.astro

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

<SignedIn>
  <div>You are signed in</div>
</SignedIn>
<div>Always visible</div>

Usage with React Router

Below is an example of how to use <SignedIn> with React Router. The <SignedIn> component can be used as a child of a <Route /> component to render content only to signed in users.

app.tsx

import { Routes, Route } from 'react-router-dom'
import { OneAuxiliaProvider, SignedIn } from '@oneauxilia/oneauxilia-react'

function App() {
  return (
    <OneAuxiliaProvider publishableKey={`YOUR_PUBLISHABLE_KEY`}>
      <Routes>
        <Route path="/" element={<div>This page is publicly accessible.</div>} />
        <Route
          path="/private"
          element={
            <SignedIn>
              <div>This content is accessible only to signed in users.</div>
            </SignedIn>
          }
        />
      </Routes>
    </OneAuxiliaProvider>
  )
}