mirror of
https://github.com/Memo-2023/mana-monorepo.git
synced 2026-05-27 15:37:43 +02:00
feat(auth): add access tier system for phased app releases
Introduces a tiered access control system so apps can be released gradually (founder → alpha → beta → public) without extra infrastructure. Users are gated at the AuthGate level based on their tier vs the app's requiredTier. All apps remain deployed and reachable, but only users with sufficient tier can enter. - Add accessTier enum + column to users schema (default: 'public') - Add tier claim to JWT payload in better-auth config - Add requiredTier field to ManaApp interface + all 25 apps - Add hasAppAccess(), getAccessibleManaApps(), ACCESS_TIER_LABELS - Update AuthGate with tier check + access denied screen - Update getPillAppItems + Home page to filter by user tier - Update all 22 app layouts to pass user tier to PillNav - Add admin API: GET/PUT /api/v1/admin/users/:id/tier - Document access tier system in CLAUDE.md Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Till JS
parent
4f68215e68
commit
b737240ec1
33 changed files with 494 additions and 39 deletions
|
|
@ -5,17 +5,19 @@
|
|||
- Auth store initialization
|
||||
- Loading spinner while checking auth
|
||||
- Redirect to login if not authenticated (unless allowGuest)
|
||||
- Access tier check (blocks apps the user doesn't have access to)
|
||||
- Calling onReady callback after auth is confirmed
|
||||
- Rendering children only when ready
|
||||
|
||||
Usage:
|
||||
<AuthGate authStore={authStore} onReady={loadAppData}>
|
||||
<AuthGate authStore={authStore} onReady={loadAppData} requiredTier="beta">
|
||||
<AppContent />
|
||||
</AuthGate>
|
||||
-->
|
||||
<script lang="ts">
|
||||
import { onMount } from 'svelte';
|
||||
import type { Snippet } from 'svelte';
|
||||
import { hasAppAccess, ACCESS_TIER_LABELS, type AccessTier } from '@manacore/shared-branding';
|
||||
|
||||
/**
|
||||
* Minimal interface that all app auth stores must satisfy.
|
||||
|
|
@ -24,6 +26,7 @@
|
|||
interface AuthStoreInterface {
|
||||
initialize(): Promise<void>;
|
||||
readonly isAuthenticated: boolean;
|
||||
readonly user: { tier?: string; email?: string } | null;
|
||||
}
|
||||
|
||||
interface Props {
|
||||
|
|
@ -33,6 +36,10 @@
|
|||
loginHref?: string;
|
||||
/** If true, render children even when not authenticated (for guest-mode apps) */
|
||||
allowGuest?: boolean;
|
||||
/** Minimum access tier required to use this app */
|
||||
requiredTier?: AccessTier;
|
||||
/** App name shown on the access denied screen */
|
||||
appName?: string;
|
||||
/** Callback invoked after auth is confirmed, before children are rendered.
|
||||
* Use this for loading app-specific data (projects, calendars, etc.) */
|
||||
onReady?: () => void | Promise<void>;
|
||||
|
|
@ -46,12 +53,17 @@
|
|||
authStore,
|
||||
loginHref = '/login',
|
||||
allowGuest = false,
|
||||
requiredTier,
|
||||
appName,
|
||||
onReady,
|
||||
goto: gotoFn,
|
||||
children,
|
||||
}: Props = $props();
|
||||
|
||||
let ready = $state(false);
|
||||
let tierDenied = $state(false);
|
||||
let userTierLabel = $state('');
|
||||
let requiredTierLabel = $state('');
|
||||
|
||||
function navigate(url: string) {
|
||||
if (gotoFn) {
|
||||
|
|
@ -61,6 +73,12 @@
|
|||
}
|
||||
}
|
||||
|
||||
function goHome() {
|
||||
const isLocal = typeof window !== 'undefined' && window.location.hostname === 'localhost';
|
||||
const homeUrl = isLocal ? 'http://localhost:5173' : 'https://mana.how';
|
||||
window.location.href = homeUrl;
|
||||
}
|
||||
|
||||
onMount(async () => {
|
||||
await authStore.initialize();
|
||||
|
||||
|
|
@ -69,6 +87,17 @@
|
|||
return;
|
||||
}
|
||||
|
||||
// Check access tier if required and user is authenticated
|
||||
if (requiredTier && authStore.isAuthenticated && authStore.user) {
|
||||
const userTier = authStore.user.tier || 'public';
|
||||
if (!hasAppAccess(userTier, requiredTier)) {
|
||||
userTierLabel = ACCESS_TIER_LABELS['de'][userTier as AccessTier] || userTier;
|
||||
requiredTierLabel = ACCESS_TIER_LABELS['de'][requiredTier] || requiredTier;
|
||||
tierDenied = true;
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
if (onReady) {
|
||||
await onReady();
|
||||
}
|
||||
|
|
@ -77,10 +106,129 @@
|
|||
});
|
||||
</script>
|
||||
|
||||
{#if !ready}
|
||||
{#if tierDenied}
|
||||
<div class="tier-denied">
|
||||
<div class="tier-denied-card">
|
||||
{#if appName}
|
||||
<h1 class="tier-denied-title">{appName}</h1>
|
||||
{/if}
|
||||
<div class="tier-denied-icon">🔒</div>
|
||||
<p class="tier-denied-message">
|
||||
Diese App ist aktuell in der geschlossenen <strong>{requiredTierLabel}</strong>-Phase.
|
||||
</p>
|
||||
<div class="tier-denied-info">
|
||||
<div class="tier-row">
|
||||
<span class="tier-label">Dein Zugang:</span>
|
||||
<span class="tier-value">{userTierLabel}</span>
|
||||
</div>
|
||||
<div class="tier-row">
|
||||
<span class="tier-label">Benötigt:</span>
|
||||
<span class="tier-value tier-required">{requiredTierLabel}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tier-denied-actions">
|
||||
<button class="tier-btn-primary" onclick={goHome}> Zur Übersicht </button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{:else if !ready}
|
||||
<div class="flex items-center justify-center h-screen bg-background">
|
||||
<div class="animate-spin rounded-full h-8 w-8 border-b-2 border-primary"></div>
|
||||
</div>
|
||||
{:else}
|
||||
{@render children()}
|
||||
{/if}
|
||||
|
||||
<style>
|
||||
.tier-denied {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: 100vh;
|
||||
background: hsl(var(--background, 0 0% 100%));
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
.tier-denied-card {
|
||||
max-width: 24rem;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
padding: 2.5rem 2rem;
|
||||
border-radius: 1rem;
|
||||
border: 1px solid hsl(var(--border, 0 0% 90%));
|
||||
background: hsl(var(--card, 0 0% 100%));
|
||||
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
|
||||
.tier-denied-title {
|
||||
font-size: 1.25rem;
|
||||
font-weight: 700;
|
||||
color: hsl(var(--foreground, 0 0% 9%));
|
||||
margin: 0 0 1rem;
|
||||
}
|
||||
|
||||
.tier-denied-icon {
|
||||
font-size: 3rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.tier-denied-message {
|
||||
font-size: 0.9375rem;
|
||||
color: hsl(var(--muted-foreground, 0 0% 45%));
|
||||
margin: 0 0 1.5rem;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.tier-denied-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
padding: 1rem;
|
||||
border-radius: 0.75rem;
|
||||
background: hsl(var(--muted, 0 0% 96%));
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.tier-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.tier-label {
|
||||
color: hsl(var(--muted-foreground, 0 0% 45%));
|
||||
}
|
||||
|
||||
.tier-value {
|
||||
font-weight: 600;
|
||||
color: hsl(var(--foreground, 0 0% 9%));
|
||||
}
|
||||
|
||||
.tier-required {
|
||||
color: #8b5cf6;
|
||||
}
|
||||
|
||||
.tier-denied-actions {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.tier-btn-primary {
|
||||
width: 100%;
|
||||
padding: 0.625rem 1rem;
|
||||
border-radius: 0.5rem;
|
||||
border: none;
|
||||
background: hsl(var(--primary, 239 84% 67%));
|
||||
color: hsl(var(--primary-foreground, 0 0% 100%));
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: opacity 0.15s;
|
||||
}
|
||||
|
||||
.tier-btn-primary:hover {
|
||||
opacity: 0.9;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -78,6 +78,7 @@ export function getUserFromToken(token: string, storedEmail?: string): UserData
|
|||
id: payload.sub,
|
||||
email: email || 'user@example.com',
|
||||
role: payload.role || 'user',
|
||||
tier: payload.tier || 'public',
|
||||
};
|
||||
} catch (error) {
|
||||
console.error('Error extracting user from token:', error);
|
||||
|
|
|
|||
|
|
@ -24,6 +24,7 @@ export interface DecodedToken {
|
|||
sub: string;
|
||||
email?: string;
|
||||
role?: string;
|
||||
tier?: string;
|
||||
exp: number;
|
||||
iat: number;
|
||||
aud?: string;
|
||||
|
|
@ -50,6 +51,7 @@ export interface UserData {
|
|||
id: string;
|
||||
email: string;
|
||||
role: string;
|
||||
tier: string;
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
|
|||
|
|
@ -54,12 +54,17 @@ export {
|
|||
getManaAppsByStatus,
|
||||
getAvailableManaApps,
|
||||
getActiveManaApps,
|
||||
getAccessibleManaApps,
|
||||
hasAppAccess,
|
||||
getTierLevel,
|
||||
APP_STATUS_LABELS,
|
||||
APP_SLIDER_LABELS,
|
||||
APP_URLS,
|
||||
ACCESS_TIER_LABELS,
|
||||
getPillAppItems,
|
||||
type ManaApp,
|
||||
type AppStatus,
|
||||
type AccessTier,
|
||||
type PillAppItemConfig,
|
||||
} from './mana-apps';
|
||||
|
||||
|
|
|
|||
|
|
@ -8,6 +8,56 @@ import type { AppIconId } from './app-icons';
|
|||
|
||||
export type AppStatus = 'published' | 'beta' | 'development' | 'planning';
|
||||
|
||||
/**
|
||||
* Access tier hierarchy (higher number = more access):
|
||||
* guest(0) < public(1) < beta(2) < alpha(3) < founder(4)
|
||||
*/
|
||||
export type AccessTier = 'guest' | 'public' | 'beta' | 'alpha' | 'founder';
|
||||
|
||||
const TIER_LEVELS: Record<AccessTier, number> = {
|
||||
guest: 0,
|
||||
public: 1,
|
||||
beta: 2,
|
||||
alpha: 3,
|
||||
founder: 4,
|
||||
};
|
||||
|
||||
/**
|
||||
* Check if a user's tier meets the required tier for an app
|
||||
*/
|
||||
export function hasAppAccess(userTier: string, requiredTier: AccessTier): boolean {
|
||||
const userLevel = TIER_LEVELS[userTier as AccessTier] ?? 0;
|
||||
const requiredLevel = TIER_LEVELS[requiredTier] ?? 0;
|
||||
return userLevel >= requiredLevel;
|
||||
}
|
||||
|
||||
/**
|
||||
* Get the numeric level for a tier (for comparisons)
|
||||
*/
|
||||
export function getTierLevel(tier: string): number {
|
||||
return TIER_LEVELS[tier as AccessTier] ?? 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Tier display labels
|
||||
*/
|
||||
export const ACCESS_TIER_LABELS = {
|
||||
de: {
|
||||
guest: 'Gast',
|
||||
public: 'Standard',
|
||||
beta: 'Beta',
|
||||
alpha: 'Alpha',
|
||||
founder: 'Founder',
|
||||
},
|
||||
en: {
|
||||
guest: 'Guest',
|
||||
public: 'Standard',
|
||||
beta: 'Beta',
|
||||
alpha: 'Alpha',
|
||||
founder: 'Founder',
|
||||
},
|
||||
} as const;
|
||||
|
||||
export interface ManaApp {
|
||||
id: AppIconId;
|
||||
name: string;
|
||||
|
|
@ -23,6 +73,8 @@ export interface ManaApp {
|
|||
color: string;
|
||||
comingSoon: boolean;
|
||||
status: AppStatus;
|
||||
/** Minimum access tier required to use this app */
|
||||
requiredTier: AccessTier;
|
||||
url?: string; // Optional URL for the app
|
||||
/** Whether this app is archived (in apps-archived folder) */
|
||||
archived?: boolean;
|
||||
|
|
@ -48,6 +100,7 @@ export const MANA_APPS: ManaApp[] = [
|
|||
color: '#0ea5e9',
|
||||
comingSoon: false,
|
||||
status: 'beta',
|
||||
requiredTier: 'alpha',
|
||||
},
|
||||
{
|
||||
id: 'memoro',
|
||||
|
|
@ -64,6 +117,7 @@ export const MANA_APPS: ManaApp[] = [
|
|||
color: '#f8d62b',
|
||||
comingSoon: false,
|
||||
status: 'published',
|
||||
requiredTier: 'founder',
|
||||
archived: true,
|
||||
},
|
||||
{
|
||||
|
|
@ -81,6 +135,7 @@ export const MANA_APPS: ManaApp[] = [
|
|||
color: '#f97316',
|
||||
comingSoon: false,
|
||||
status: 'development',
|
||||
requiredTier: 'alpha',
|
||||
},
|
||||
{
|
||||
id: 'manadeck',
|
||||
|
|
@ -97,6 +152,7 @@ export const MANA_APPS: ManaApp[] = [
|
|||
color: '#8b5cf6',
|
||||
comingSoon: true,
|
||||
status: 'development',
|
||||
requiredTier: 'alpha',
|
||||
},
|
||||
{
|
||||
id: 'picture',
|
||||
|
|
@ -113,6 +169,7 @@ export const MANA_APPS: ManaApp[] = [
|
|||
color: '#22c55e',
|
||||
comingSoon: true,
|
||||
status: 'development',
|
||||
requiredTier: 'alpha',
|
||||
},
|
||||
{
|
||||
id: 'zitare',
|
||||
|
|
@ -129,6 +186,7 @@ export const MANA_APPS: ManaApp[] = [
|
|||
color: '#f59e0b',
|
||||
comingSoon: true,
|
||||
status: 'development',
|
||||
requiredTier: 'beta',
|
||||
},
|
||||
{
|
||||
id: 'wisekeep',
|
||||
|
|
@ -145,6 +203,7 @@ export const MANA_APPS: ManaApp[] = [
|
|||
color: '#6366f1',
|
||||
comingSoon: true,
|
||||
status: 'planning',
|
||||
requiredTier: 'founder',
|
||||
archived: true,
|
||||
},
|
||||
{
|
||||
|
|
@ -162,6 +221,7 @@ export const MANA_APPS: ManaApp[] = [
|
|||
color: '#10b981',
|
||||
comingSoon: false,
|
||||
status: 'development',
|
||||
requiredTier: 'founder',
|
||||
archived: true,
|
||||
},
|
||||
{
|
||||
|
|
@ -179,6 +239,7 @@ export const MANA_APPS: ManaApp[] = [
|
|||
color: '#3b82f6',
|
||||
comingSoon: false,
|
||||
status: 'development',
|
||||
requiredTier: 'beta',
|
||||
},
|
||||
{
|
||||
id: 'calendar',
|
||||
|
|
@ -195,6 +256,7 @@ export const MANA_APPS: ManaApp[] = [
|
|||
color: '#0ea5e9',
|
||||
comingSoon: false,
|
||||
status: 'development',
|
||||
requiredTier: 'beta',
|
||||
},
|
||||
{
|
||||
id: 'storage',
|
||||
|
|
@ -211,6 +273,7 @@ export const MANA_APPS: ManaApp[] = [
|
|||
color: '#3b82f6',
|
||||
comingSoon: false,
|
||||
status: 'development',
|
||||
requiredTier: 'alpha',
|
||||
},
|
||||
{
|
||||
id: 'clock',
|
||||
|
|
@ -227,6 +290,7 @@ export const MANA_APPS: ManaApp[] = [
|
|||
color: '#f59e0b',
|
||||
comingSoon: false,
|
||||
status: 'development',
|
||||
requiredTier: 'beta',
|
||||
},
|
||||
{
|
||||
id: 'todo',
|
||||
|
|
@ -243,6 +307,7 @@ export const MANA_APPS: ManaApp[] = [
|
|||
color: '#8b5cf6',
|
||||
comingSoon: false,
|
||||
status: 'development',
|
||||
requiredTier: 'beta',
|
||||
},
|
||||
{
|
||||
id: 'mail',
|
||||
|
|
@ -259,6 +324,7 @@ export const MANA_APPS: ManaApp[] = [
|
|||
color: '#6366f1',
|
||||
comingSoon: false,
|
||||
status: 'development',
|
||||
requiredTier: 'founder',
|
||||
},
|
||||
{
|
||||
id: 'moodlit',
|
||||
|
|
@ -275,6 +341,7 @@ export const MANA_APPS: ManaApp[] = [
|
|||
color: '#8b5cf6',
|
||||
comingSoon: false,
|
||||
status: 'development',
|
||||
requiredTier: 'alpha',
|
||||
},
|
||||
{
|
||||
id: 'inventory',
|
||||
|
|
@ -291,6 +358,7 @@ export const MANA_APPS: ManaApp[] = [
|
|||
color: '#14b8a6',
|
||||
comingSoon: false,
|
||||
status: 'development',
|
||||
requiredTier: 'alpha',
|
||||
},
|
||||
{
|
||||
id: 'questions',
|
||||
|
|
@ -307,6 +375,7 @@ export const MANA_APPS: ManaApp[] = [
|
|||
color: '#8b5cf6',
|
||||
comingSoon: false,
|
||||
status: 'development',
|
||||
requiredTier: 'alpha',
|
||||
},
|
||||
{
|
||||
id: 'matrix',
|
||||
|
|
@ -323,6 +392,7 @@ export const MANA_APPS: ManaApp[] = [
|
|||
color: '#8b5cf6',
|
||||
comingSoon: false,
|
||||
status: 'development',
|
||||
requiredTier: 'alpha',
|
||||
},
|
||||
{
|
||||
id: 'context',
|
||||
|
|
@ -339,6 +409,7 @@ export const MANA_APPS: ManaApp[] = [
|
|||
color: '#0ea5e9',
|
||||
comingSoon: false,
|
||||
status: 'development',
|
||||
requiredTier: 'alpha',
|
||||
},
|
||||
{
|
||||
id: 'times',
|
||||
|
|
@ -355,6 +426,7 @@ export const MANA_APPS: ManaApp[] = [
|
|||
color: '#f59e0b',
|
||||
comingSoon: false,
|
||||
status: 'development',
|
||||
requiredTier: 'alpha',
|
||||
},
|
||||
{
|
||||
id: 'citycorners',
|
||||
|
|
@ -371,6 +443,7 @@ export const MANA_APPS: ManaApp[] = [
|
|||
color: '#2563eb',
|
||||
comingSoon: false,
|
||||
status: 'development',
|
||||
requiredTier: 'alpha',
|
||||
},
|
||||
{
|
||||
id: 'uload',
|
||||
|
|
@ -387,6 +460,7 @@ export const MANA_APPS: ManaApp[] = [
|
|||
color: '#6366f1',
|
||||
comingSoon: false,
|
||||
status: 'development',
|
||||
requiredTier: 'alpha',
|
||||
},
|
||||
{
|
||||
id: 'reader',
|
||||
|
|
@ -403,6 +477,7 @@ export const MANA_APPS: ManaApp[] = [
|
|||
color: '#f97316',
|
||||
comingSoon: false,
|
||||
status: 'development',
|
||||
requiredTier: 'founder',
|
||||
},
|
||||
{
|
||||
id: 'news',
|
||||
|
|
@ -419,6 +494,7 @@ export const MANA_APPS: ManaApp[] = [
|
|||
color: '#10b981',
|
||||
comingSoon: false,
|
||||
status: 'development',
|
||||
requiredTier: 'founder',
|
||||
},
|
||||
{
|
||||
id: 'calc',
|
||||
|
|
@ -435,6 +511,7 @@ export const MANA_APPS: ManaApp[] = [
|
|||
color: '#ec4899',
|
||||
comingSoon: false,
|
||||
status: 'development',
|
||||
requiredTier: 'beta',
|
||||
},
|
||||
];
|
||||
|
||||
|
|
@ -466,6 +543,14 @@ export function getActiveManaApps(): ManaApp[] {
|
|||
return MANA_APPS.filter((app) => !app.archived);
|
||||
}
|
||||
|
||||
/**
|
||||
* Get apps accessible to a user based on their tier
|
||||
* Only returns active (non-archived) apps the user has access to
|
||||
*/
|
||||
export function getAccessibleManaApps(userTier: string): ManaApp[] {
|
||||
return MANA_APPS.filter((app) => !app.archived && hasAppAccess(userTier, app.requiredTier));
|
||||
}
|
||||
|
||||
/**
|
||||
* Status labels in German and English
|
||||
*/
|
||||
|
|
@ -548,21 +633,24 @@ export interface PillAppItemConfig {
|
|||
|
||||
/**
|
||||
* Get app items for PillNavigation app switcher
|
||||
* Only returns active (non-archived) apps
|
||||
* Only returns apps the user has access to (non-archived, tier-gated)
|
||||
* @param currentAppId - The ID of the current app to mark as active
|
||||
* @param isDev - Whether to use development URLs (default: auto-detect)
|
||||
* @param customUrls - Optional custom URL overrides per app
|
||||
* @param userTier - The user's access tier (default: 'public')
|
||||
*/
|
||||
export function getPillAppItems(
|
||||
currentAppId?: AppIconId,
|
||||
isDev?: boolean,
|
||||
customUrls?: Partial<Record<AppIconId, string>>
|
||||
customUrls?: Partial<Record<AppIconId, string>>,
|
||||
userTier?: string
|
||||
): PillAppItemConfig[] {
|
||||
const isDevMode =
|
||||
isDev ?? (typeof window !== 'undefined' && window.location.hostname === 'localhost');
|
||||
|
||||
// Only show active (non-archived) apps
|
||||
return getActiveManaApps().map((app) => ({
|
||||
const tier = userTier || 'public';
|
||||
// Only show apps the user has access to
|
||||
return getAccessibleManaApps(tier).map((app) => ({
|
||||
id: app.id,
|
||||
name: app.name,
|
||||
url: customUrls?.[app.id] || (isDevMode ? APP_URLS[app.id].dev : APP_URLS[app.id].prod),
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue