Add session abstraction, mobile bearer auth, and pluggable SSO
Refactor authentication into a provider-agnostic session layer and build
two new auth surfaces on top of it, without changing local password/TOTP
behavior. Every flow now issues sessions through
sessionService.createSession(user, authMethod).
Part 1 — Session abstraction (backward-compatible refactor):
- New server/src/auth/: token.js (JWT/cookie primitives), session.service.js
(create/validate/partial-TOTP/revoke), session.middleware.js
(attachSession/requireAuth/requireRole). utils/auth.js is now a thin
compat facade so existing imports are unchanged.
Part 2 — Mobile bearer auth (additive):
- /api/v1/auth/mobile/{login,refresh,logout}: short-lived access JWT +
long-lived refresh token, stored hashed and rotated on use, in a new
mobile_refresh_tokens table. Reuses web bot-scoring/backoff; single-request
TOTP. token.signToken gains a backward-compatible expiresIn option.
Part 3 — Pluggable SSO (Google, Discord, generic OIDC):
- OAuth2Provider base + built-in Google/Discord (fixed endpoints) + generic
OIDC, a registry with health/validation, PKCE+CSRF transaction state, and
discovery (GET /auth/providers), start/link/callback routes.
- Link-only policy: SSO signs in only to an already-linked account; external
identities are never auto-provisioned. Client secrets encrypted at rest
(AES-256-GCM, utils/secretBox.js). Admin CRUD (/admin/auth/providers) and
account linking (/admin/account/identities). New auth_providers +
user_identities tables.
Frontend:
- Login page renders provider buttons from /auth/providers (inline SVG icons,
graceful with zero providers). New Authentication admin view
(Local/Google/Discord/Custom). Account page linked-accounts section.
Tests: 83 passing (session, mobile, providers, registry, secretBox, ssoState,
ssoCallback) — all DB-free via fetch mocks + model stubs. README + .env.example
updated.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
380
client/src/routes/admin/views/AuthProvidersAdmin.jsx
Normal file
380
client/src/routes/admin/views/AuthProvidersAdmin.jsx
Normal file
@@ -0,0 +1,380 @@
|
||||
import { useCallback, useEffect, useState } from 'react'
|
||||
import { Loading, ErrorState } from '../../../components/PageState.jsx'
|
||||
import ProviderIcon from '../../../components/ProviderIcon.jsx'
|
||||
import { api } from '../../../api/client.js'
|
||||
|
||||
// Admin config for authentication providers. Local password + TOTP is always on
|
||||
// (informational tab). Google/Discord are built-ins with a fixed config surface
|
||||
// (Enabled + Client ID + Client Secret). Custom providers use the full OIDC editor.
|
||||
|
||||
const TABS = [
|
||||
{ id: 'local', label: 'Local Accounts' },
|
||||
{ id: 'google', label: 'Google' },
|
||||
{ id: 'discord', label: 'Discord' },
|
||||
{ id: 'custom', label: 'Custom Providers' },
|
||||
]
|
||||
|
||||
// The redirect/callback URL to register with the provider. Mirrors the server's
|
||||
// redirect_uri (APP_BASE_URL + this path); shown so admins can copy it exactly.
|
||||
function callbackUrl(id) {
|
||||
return `${window.location.origin}/api/v1/auth/sso/${id}/callback`
|
||||
}
|
||||
|
||||
function HealthWarning({ provider }) {
|
||||
if (!provider || !provider.enabled || provider.health.valid) return null
|
||||
return (
|
||||
<p className="sans" style={{ margin: '4px 0 0', color: '#e0b070', fontSize: '0.82rem', lineHeight: 1.5 }}>
|
||||
Enabled but incomplete (missing: {provider.health.missing.join(', ')}). Hidden from the login
|
||||
page until fully configured.
|
||||
</p>
|
||||
)
|
||||
}
|
||||
|
||||
function CallbackHint({ id }) {
|
||||
return (
|
||||
<div style={{ marginTop: 4 }}>
|
||||
<span className="field-label">Redirect / callback URL (register this with the provider)</span>
|
||||
<code
|
||||
className="sans"
|
||||
style={{ display: 'block', padding: '9px 12px', borderRadius: 8, border: '1px solid var(--line)', background: 'var(--bg-deep)', color: 'var(--muted)', fontSize: '0.82rem', wordBreak: 'break-all' }}
|
||||
>
|
||||
{callbackUrl(id)}
|
||||
</code>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function Toggle({ checked, onChange, label }) {
|
||||
return (
|
||||
<label className="sans" style={{ display: 'inline-flex', alignItems: 'center', gap: 10, cursor: 'pointer', fontSize: '0.9rem', color: 'var(--ink)' }}>
|
||||
<input type="checkbox" checked={checked} onChange={(e) => onChange(e.target.checked)} />
|
||||
{label}
|
||||
</label>
|
||||
)
|
||||
}
|
||||
|
||||
// ── Built-in (Google / Discord) config form ────────────────────────────────
|
||||
function BuiltinForm({ provider, onSaved }) {
|
||||
const [enabled, setEnabled] = useState(provider.enabled)
|
||||
const [clientId, setClientId] = useState(provider.clientId || '')
|
||||
const [secret, setSecret] = useState('')
|
||||
const [busy, setBusy] = useState(false)
|
||||
const [msg, setMsg] = useState('')
|
||||
const [error, setError] = useState('')
|
||||
|
||||
// Re-sync when switching between provider tabs.
|
||||
useEffect(() => {
|
||||
setEnabled(provider.enabled)
|
||||
setClientId(provider.clientId || '')
|
||||
setSecret('')
|
||||
setMsg('')
|
||||
setError('')
|
||||
}, [provider.id]) // eslint-disable-line react-hooks/exhaustive-deps
|
||||
|
||||
async function save() {
|
||||
setBusy(true)
|
||||
setMsg('')
|
||||
setError('')
|
||||
try {
|
||||
const body = { enabled, clientId }
|
||||
if (secret) body.secret = secret // only send a new secret when entered
|
||||
await api.admin.updateAuthProvider(provider.id, body)
|
||||
setSecret('')
|
||||
setMsg('Saved.')
|
||||
await onSaved()
|
||||
} catch (err) {
|
||||
setError(err.message || 'Could not save.')
|
||||
} finally {
|
||||
setBusy(false)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div style={{ maxWidth: 560, display: 'flex', flexDirection: 'column', gap: 16 }}>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
|
||||
<span style={{ display: 'inline-flex', width: 26, height: 26 }}>
|
||||
<ProviderIcon icon={provider.kind} size={26} />
|
||||
</span>
|
||||
<h2 className="display" style={{ margin: 0, fontSize: '1.2rem', color: 'var(--head)' }}>
|
||||
{provider.name}
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<Toggle checked={enabled} onChange={setEnabled} label="Enable this sign-in method" />
|
||||
<HealthWarning provider={provider} />
|
||||
|
||||
<label style={{ display: 'block' }}>
|
||||
<span className="field-label">Client ID</span>
|
||||
<input type="text" value={clientId} onChange={(e) => setClientId(e.target.value)} className="input" autoComplete="off" />
|
||||
</label>
|
||||
|
||||
<label style={{ display: 'block' }}>
|
||||
<span className="field-label">Client Secret</span>
|
||||
<input
|
||||
type="password"
|
||||
value={secret}
|
||||
onChange={(e) => setSecret(e.target.value)}
|
||||
className="input"
|
||||
autoComplete="new-password"
|
||||
placeholder={provider.hasSecret ? '•••••••• configured — leave blank to keep' : 'Client secret'}
|
||||
/>
|
||||
</label>
|
||||
|
||||
<CallbackHint id={provider.id} />
|
||||
|
||||
<div style={{ display: 'flex', gap: 10, alignItems: 'center', marginTop: 4 }}>
|
||||
<button onClick={save} disabled={busy} className="btn btn-primary btn-sq">
|
||||
{busy ? 'Saving…' : 'Save changes'}
|
||||
</button>
|
||||
{msg && <span className="sans" style={{ color: '#7fd0a4', fontSize: '0.85rem' }}>{msg}</span>}
|
||||
{error && <span className="sans" style={{ color: '#d98b84', fontSize: '0.85rem' }}>{error}</span>}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
// ── Local accounts (informational) ─────────────────────────────────────────
|
||||
function LocalInfo() {
|
||||
return (
|
||||
<div style={{ maxWidth: 560 }}>
|
||||
<h2 className="display" style={{ marginTop: 0, fontSize: '1.2rem', color: 'var(--head)' }}>
|
||||
Local accounts
|
||||
</h2>
|
||||
<p className="sans" style={{ color: 'var(--muted)', fontSize: '0.9rem', lineHeight: 1.6 }}>
|
||||
Username & password sign-in (with optional TOTP two-factor) is always enabled and cannot
|
||||
be turned off — it is how you manage accounts and link SSO identities. Manage users under
|
||||
<strong> Users</strong>, and your own two-factor under <strong>Account</strong>.
|
||||
</p>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
// ── Custom OIDC/OAuth2 providers ────────────────────────────────────────────
|
||||
const EMPTY_CUSTOM = {
|
||||
id: '', name: '', kind: 'oidc', enabled: false, clientId: '', secret: '',
|
||||
authorizeUrl: '', tokenUrl: '', userinfoUrl: '', scopes: 'openid email profile', priority: 100,
|
||||
}
|
||||
|
||||
function CustomEditor({ initial, onDone, onCancel }) {
|
||||
const isNew = !initial.id
|
||||
const [f, setF] = useState(isNew ? EMPTY_CUSTOM : { ...initial, secret: '' })
|
||||
const [busy, setBusy] = useState(false)
|
||||
const [error, setError] = useState('')
|
||||
const set = (k) => (e) => setF((prev) => ({ ...prev, [k]: e.target.value }))
|
||||
|
||||
async function save() {
|
||||
setBusy(true)
|
||||
setError('')
|
||||
try {
|
||||
const body = {
|
||||
name: f.name, kind: f.kind, enabled: f.enabled, clientId: f.clientId,
|
||||
authorizeUrl: f.authorizeUrl, tokenUrl: f.tokenUrl, userinfoUrl: f.userinfoUrl,
|
||||
scopes: f.scopes, priority: Number(f.priority) || 100,
|
||||
}
|
||||
if (f.secret) body.secret = f.secret
|
||||
if (isNew) await api.admin.createAuthProvider({ id: f.id, ...body })
|
||||
else await api.admin.updateAuthProvider(initial.id, body)
|
||||
await onDone()
|
||||
} catch (err) {
|
||||
setError(err.message || 'Could not save provider.')
|
||||
} finally {
|
||||
setBusy(false)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div style={{ border: '1px solid var(--line)', borderRadius: 10, padding: 20, marginTop: 16, display: 'flex', flexDirection: 'column', gap: 14, maxWidth: 640 }}>
|
||||
<h3 className="display" style={{ margin: 0, fontSize: '1.05rem', color: 'var(--head)' }}>
|
||||
{isNew ? 'Add custom provider' : `Edit ${initial.name}`}
|
||||
</h3>
|
||||
{isNew && (
|
||||
<div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
|
||||
<label>
|
||||
<span className="field-label">ID (slug)</span>
|
||||
<input className="input" value={f.id} onChange={set('id')} placeholder="authentik" />
|
||||
</label>
|
||||
<label>
|
||||
<span className="field-label">Type</span>
|
||||
<select className="input" value={f.kind} onChange={set('kind')}>
|
||||
<option value="oidc">OIDC</option>
|
||||
<option value="oauth2">OAuth2</option>
|
||||
</select>
|
||||
</label>
|
||||
</div>
|
||||
)}
|
||||
<label>
|
||||
<span className="field-label">Display name</span>
|
||||
<input className="input" value={f.name} onChange={set('name')} placeholder="Authentik" />
|
||||
</label>
|
||||
<div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
|
||||
<label>
|
||||
<span className="field-label">Client ID</span>
|
||||
<input className="input" value={f.clientId} onChange={set('clientId')} autoComplete="off" />
|
||||
</label>
|
||||
<label>
|
||||
<span className="field-label">Client Secret</span>
|
||||
<input className="input" type="password" value={f.secret} onChange={set('secret')} autoComplete="new-password" placeholder={!isNew && initial.hasSecret ? '•••• leave blank to keep' : ''} />
|
||||
</label>
|
||||
</div>
|
||||
<label>
|
||||
<span className="field-label">Authorization URL</span>
|
||||
<input className="input" value={f.authorizeUrl} onChange={set('authorizeUrl')} placeholder="https://idp.example/application/o/authorize/" />
|
||||
</label>
|
||||
<label>
|
||||
<span className="field-label">Token URL</span>
|
||||
<input className="input" value={f.tokenUrl} onChange={set('tokenUrl')} placeholder="https://idp.example/application/o/token/" />
|
||||
</label>
|
||||
<label>
|
||||
<span className="field-label">UserInfo URL</span>
|
||||
<input className="input" value={f.userinfoUrl} onChange={set('userinfoUrl')} placeholder="https://idp.example/application/o/userinfo/" />
|
||||
</label>
|
||||
<div style={{ display: 'grid', gridTemplateColumns: '2fr 1fr', gap: 12 }}>
|
||||
<label>
|
||||
<span className="field-label">Scopes</span>
|
||||
<input className="input" value={f.scopes} onChange={set('scopes')} />
|
||||
</label>
|
||||
<label>
|
||||
<span className="field-label">Priority</span>
|
||||
<input className="input" type="number" value={f.priority} onChange={set('priority')} />
|
||||
</label>
|
||||
</div>
|
||||
<Toggle checked={f.enabled} onChange={(v) => setF((p) => ({ ...p, enabled: v }))} label="Enabled" />
|
||||
{!isNew && <CallbackHint id={initial.id} />}
|
||||
<div style={{ display: 'flex', gap: 10, alignItems: 'center' }}>
|
||||
<button onClick={save} disabled={busy} className="btn btn-primary btn-sq">
|
||||
{busy ? 'Saving…' : 'Save provider'}
|
||||
</button>
|
||||
<button onClick={onCancel} disabled={busy} className="pill">Cancel</button>
|
||||
{error && <span className="sans" style={{ color: '#d98b84', fontSize: '0.85rem' }}>{error}</span>}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function CustomProviders({ items, onChanged }) {
|
||||
const [editing, setEditing] = useState(null) // null | 'new' | provider
|
||||
|
||||
async function del(p) {
|
||||
if (!window.confirm(`Delete provider "${p.name}"? This cannot be undone.`)) return
|
||||
await api.admin.deleteAuthProvider(p.id)
|
||||
await onChanged()
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 14, gap: 12, flexWrap: 'wrap' }}>
|
||||
<p className="sans muted" style={{ margin: 0, fontSize: '0.9rem' }}>
|
||||
OAuth2 / OIDC providers (Authentik, Keycloak, Okta, Azure AD, Zitadel, …)
|
||||
</p>
|
||||
{!editing && (
|
||||
<button onClick={() => setEditing('new')} className="btn btn-primary btn-sq">+ Add provider</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{items.length === 0 && !editing && (
|
||||
<p className="sans dim" style={{ fontSize: '0.88rem' }}>No custom providers yet.</p>
|
||||
)}
|
||||
|
||||
{items.length > 0 && (
|
||||
<div className="panel-flat">
|
||||
<table className="adm-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th className="adm-th">Name</th>
|
||||
<th className="adm-th">Type</th>
|
||||
<th className="adm-th">Status</th>
|
||||
<th className="adm-th" />
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{items.map((p) => (
|
||||
<tr key={p.id}>
|
||||
<td className="adm-td" style={{ color: 'var(--head)' }}>{p.name}</td>
|
||||
<td className="adm-td dim">{p.kind}</td>
|
||||
<td className="adm-td">
|
||||
{p.enabled && p.health.valid ? (
|
||||
<span className="sans" style={{ color: '#7fd0a4' }}>Live</span>
|
||||
) : p.enabled ? (
|
||||
<span className="sans" style={{ color: '#e0b070' }}>Incomplete</span>
|
||||
) : (
|
||||
<span className="sans dim">Disabled</span>
|
||||
)}
|
||||
</td>
|
||||
<td className="adm-td" style={{ textAlign: 'right' }}>
|
||||
<span className="link-accent" onClick={() => setEditing(p)}>Edit</span>
|
||||
<span className="link-accent" onClick={() => del(p)} style={{ marginLeft: 14, color: '#d98b84' }}>Delete</span>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{editing && (
|
||||
<CustomEditor
|
||||
initial={editing === 'new' ? {} : editing}
|
||||
onCancel={() => setEditing(null)}
|
||||
onDone={async () => {
|
||||
setEditing(null)
|
||||
await onChanged()
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default function AuthProvidersAdmin() {
|
||||
const [providers, setProviders] = useState(null)
|
||||
const [error, setError] = useState('')
|
||||
const [tab, setTab] = useState('local')
|
||||
|
||||
const load = useCallback(async () => {
|
||||
try {
|
||||
setProviders(await api.admin.listAuthProviders())
|
||||
} catch {
|
||||
setError('Could not load authentication providers.')
|
||||
}
|
||||
}, [])
|
||||
useEffect(() => {
|
||||
load()
|
||||
}, [load])
|
||||
|
||||
if (error) return <ErrorState message={error} />
|
||||
if (!providers) return <Loading />
|
||||
|
||||
const byId = (id) => providers.find((p) => p.id === id)
|
||||
const customs = providers.filter((p) => !p.builtin)
|
||||
|
||||
return (
|
||||
<section>
|
||||
<div style={{ display: 'flex', gap: 6, borderBottom: '1px solid var(--line-soft)', marginBottom: 24, flexWrap: 'wrap' }}>
|
||||
{TABS.map((t) => (
|
||||
<button
|
||||
key={t.id}
|
||||
onClick={() => setTab(t.id)}
|
||||
className="sans"
|
||||
style={{
|
||||
padding: '9px 16px',
|
||||
border: 'none',
|
||||
background: 'transparent',
|
||||
cursor: 'pointer',
|
||||
fontSize: '0.9rem',
|
||||
color: tab === t.id ? 'var(--head)' : 'var(--muted)',
|
||||
borderBottom: `2px solid ${tab === t.id ? 'var(--accent)' : 'transparent'}`,
|
||||
marginBottom: -1,
|
||||
}}
|
||||
>
|
||||
{t.label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{tab === 'local' && <LocalInfo />}
|
||||
{tab === 'google' && <BuiltinForm provider={byId('google')} onSaved={load} />}
|
||||
{tab === 'discord' && <BuiltinForm provider={byId('discord')} onSaved={load} />}
|
||||
{tab === 'custom' && <CustomProviders items={customs} onChanged={load} />}
|
||||
</section>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user