hypertwist/website/src/components/ui/BrowserAuthMethodsGuide.tsx
2026-07-03 03:32:15 +00:00

117 lines
4.5 KiB
TypeScript

import {
getSuperTokensAuthRuntimeValidation,
isGitHubOAuthEnabled,
isGoogleOAuthEnabled,
isOrcidOAuthEnabled,
} from '../../auth/supertokens-runtime'
type BrowserAuthMethodCard = {
title: string
description: string
bullets: readonly string[]
}
function buildBrowserAuthMethodCards(): readonly BrowserAuthMethodCard[] {
const cards: BrowserAuthMethodCard[] = [
{
title: 'Email and password',
description:
'This is the default browser-account lane and remains the most predictable shared-auth path across early access, mixed, and production deployments.',
bullets: [
'Use it when you want the clearest route into the protected dashboard, protected downloads, and desktop-link pairing.',
'It opens the same protected account and release surfaces as the optional provider buttons.',
'It does not change the desktop-first simulator boundary or replace native pairing.',
],
},
]
if (isGitHubOAuthEnabled()) {
cards.push({
title: 'GitHub sign-in',
description:
'GitHub is available in this build as an optional browser-account shortcut when the shared auth server has that provider configured.',
bullets: [
'Use it to enter the same protected dashboard and release lanes without creating a separate password first.',
'It still relies on the same shared auth runtime, entitlement checks, and desktop-link handoff as the email/password lane.',
],
})
}
if (isGoogleOAuthEnabled()) {
cards.push({
title: 'Google sign-in',
description:
'Google is available in this build as an optional shared-auth provider for browser account continuity.',
bullets: [
'Use it when you want the same protected download, account, and rollout surfaces through a Google-backed sign-in flow.',
'It does not widen browser ownership into simulator execution or change the desktop pairing boundary.',
],
})
}
if (isOrcidOAuthEnabled()) {
cards.push({
title: 'ORCID sign-in',
description:
'ORCID is available in this build as a first-party shared-auth provider, so research-oriented identity can route through the same protected operator lanes.',
bullets: [
'Use it when this deployment has ORCID configured and you want standards-backed browser sign-in continuity into the protected dashboard and download lanes.',
'It remains a browser-account path only; it does not replace desktop-link pairing or the native simulator runtime.',
],
})
}
return cards
}
export function BrowserAuthMethodsGuide() {
const authRuntimeValidation = getSuperTokensAuthRuntimeValidation()
const cards = buildBrowserAuthMethodCards()
const diagnostics = [
...authRuntimeValidation.missing.map((item) => `Auth runtime setting pending: ${item}`),
...authRuntimeValidation.warnings,
]
const statusLabel = authRuntimeValidation.ready
? (diagnostics.length === 0 ? 'Auth methods ready' : 'Auth methods mixed')
: 'Auth methods bounded'
const summary = authRuntimeValidation.ready
? (
diagnostics.length === 0
? 'The shared browser-auth runtime is configured cleanly in this build, so the methods below all route into the same protected account, release, and desktop-pairing surfaces.'
: 'The shared browser-auth runtime is present in this build, but remaining warnings should be cleared before this surface is treated as fully production-ready.'
)
: 'This build may still rely on bounded recovery mode until the pending shared-auth runtime values are configured, even though the method lineup below stays useful as operator guidance.'
return (
<div>
<article className="callout">
<p className={`status-pill${authRuntimeValidation.ready && diagnostics.length === 0 ? ' status-pill--success' : ' status-pill--info'}`}>
{statusLabel}
</p>
<p>{summary}</p>
{diagnostics.length > 0 ? (
<ul className="list top-gap">
{diagnostics.map((item) => (
<li key={item}>{item}</li>
))}
</ul>
) : null}
</article>
<div className="card-grid top-gap">
{cards.map((card) => (
<article key={card.title} className="card">
<h3>{card.title}</h3>
<p>{card.description}</p>
<ul className="list top-gap">
{card.bullets.map((bullet) => (
<li key={bullet}>{bullet}</li>
))}
</ul>
</article>
))}
</div>
</div>
)
}