mirror of
https://github.com/pezkuwichain/pwap.git
synced 2026-04-22 02:07:55 +00:00
Add session timeout and route guards
Route Guards (web/src/components/RouteGuards.tsx): - CitizenRoute: KYC approval required - ValidatorRoute: Validator pool membership required - EducatorRoute: Educator Tiki role required - ModeratorRoute: Moderator Tiki role required - AdminRoute: Supabase admin role required - Beautiful error screens with icons and clear messages Guards Library (shared/lib/guards.ts): - checkCitizenStatus(): KYC approval check - checkValidatorStatus(): Validator pool check - checkTikiRole(): Specific Tiki role check - checkEducatorRole(): Educator roles check - checkModeratorRole(): Moderator roles check - getUserPermissions(): Get all permissions at once - 44 Tiki roles mapped from blockchain Session Timeout (AuthContext.tsx): - 30 minute inactivity timeout - Track user activity (mouse, keyboard, scroll, touch) - Check every 1 minute for timeout - Auto-logout on inactivity - Clear activity timestamp on logout Security enhancement for production readiness.
This commit is contained in:
Claude
@@ -0,0 +1,382 @@
|
||||
// ========================================
|
||||
// Route Guards & Permission Checking
|
||||
// ========================================
|
||||
// Functions to check user permissions for protected routes
|
||||
|
||||
import type { ApiPromise } from '@polkadot/api';
|
||||
|
||||
// ========================================
|
||||
// CITIZENSHIP STATUS CHECK
|
||||
// ========================================
|
||||
|
||||
/**
|
||||
* Check if user has approved citizenship (KYC approved)
|
||||
* Required for: Voting, Education, Validator Pool, etc.
|
||||
*/
|
||||
export async function checkCitizenStatus(
|
||||
api: ApiPromise | null,
|
||||
address: string | null | undefined
|
||||
): Promise<boolean> {
|
||||
if (!api || !address) {
|
||||
return false;
|
||||
}
|
||||
|
||||
try {
|
||||
// Check if Identity KYC pallet exists
|
||||
if (!api.query?.identityKyc?.kycStatuses) {
|
||||
console.warn('Identity KYC pallet not available');
|
||||
return false;
|
||||
}
|
||||
|
||||
const kycStatus = await api.query.identityKyc.kycStatuses(address);
|
||||
|
||||
if (kycStatus.isEmpty) {
|
||||
return false;
|
||||
}
|
||||
|
||||
const statusStr = kycStatus.toString();
|
||||
return statusStr === 'Approved';
|
||||
} catch (error) {
|
||||
console.error('Error checking citizen status:', error);
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
// ========================================
|
||||
// VALIDATOR POOL STATUS CHECK
|
||||
// ========================================
|
||||
|
||||
/**
|
||||
* Check if user is registered in validator pool
|
||||
* Required for: Validator Pool dashboard, validator settings
|
||||
*/
|
||||
export async function checkValidatorStatus(
|
||||
api: ApiPromise | null,
|
||||
address: string | null | undefined
|
||||
): Promise<boolean> {
|
||||
if (!api || !address) {
|
||||
return false;
|
||||
}
|
||||
|
||||
try {
|
||||
// Check if ValidatorPool pallet exists
|
||||
if (!api.query?.validatorPool?.poolMembers) {
|
||||
console.warn('ValidatorPool pallet not available');
|
||||
return false;
|
||||
}
|
||||
|
||||
const poolMember = await api.query.validatorPool.poolMembers(address);
|
||||
return !poolMember.isEmpty;
|
||||
} catch (error) {
|
||||
console.error('Error checking validator status:', error);
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
// ========================================
|
||||
// TIKI ROLE CHECK
|
||||
// ========================================
|
||||
|
||||
// Tiki role enum mapping (from pallet-tiki)
|
||||
const TIKI_ROLES = [
|
||||
'Hemwelatî', // 0 - Citizen
|
||||
'Parlementer', // 1 - Parliament Member
|
||||
'SerokiMeclise', // 2 - Speaker of Parliament
|
||||
'Serok', // 3 - President
|
||||
'Wezir', // 4 - Minister
|
||||
'EndameDiwane', // 5 - Dîwan Member (Constitutional Court)
|
||||
'Dadger', // 6 - Judge
|
||||
'Dozger', // 7 - Prosecutor
|
||||
'Hiquqnas', // 8 - Lawyer
|
||||
'Noter', // 9 - Notary
|
||||
'Xezinedar', // 10 - Treasurer
|
||||
'Bacgir', // 11 - Tax Collector
|
||||
'GerinendeyeCavkaniye',// 12 - Resource Manager
|
||||
'OperatorêTorê', // 13 - Network Operator
|
||||
'PisporêEwlehiyaSîber',// 14 - Cyber Security Expert
|
||||
'GerinendeyeDaneye', // 15 - Data Manager
|
||||
'Berdevk', // 16 - Spokesperson
|
||||
'Qeydkar', // 17 - Registrar
|
||||
'Balyoz', // 18 - Ambassador
|
||||
'Navbeynkar', // 19 - Mediator
|
||||
'ParêzvaneÇandî', // 20 - Cultural Protector
|
||||
'Mufetîs', // 21 - Inspector
|
||||
'KalîteKontrolker', // 22 - Quality Controller
|
||||
'Mela', // 23 - Mullah
|
||||
'Feqî', // 24 - Religious Scholar
|
||||
'Perwerdekar', // 25 - Educator
|
||||
'Rewsenbîr', // 26 - Intellectual
|
||||
'RêveberêProjeyê', // 27 - Project Manager
|
||||
'SerokêKomele', // 28 - Community Leader
|
||||
'ModeratorêCivakê', // 29 - Society Moderator
|
||||
'Axa', // 30 - Lord/Landowner
|
||||
'Pêseng', // 31 - Pioneer
|
||||
'Sêwirmend', // 32 - Counselor
|
||||
'Hekem', // 33 - Wise Person
|
||||
'Mamoste', // 34 - Teacher
|
||||
'Bazargan', // 35 - Merchant
|
||||
'SerokWeziran', // 36 - Prime Minister
|
||||
'WezireDarayiye', // 37 - Finance Minister
|
||||
'WezireParez', // 38 - Defense Minister
|
||||
'WezireDad', // 39 - Justice Minister
|
||||
'WezireBelaw', // 40 - Publication Minister
|
||||
'WezireTend', // 41 - Health Minister
|
||||
'WezireAva', // 42 - Infrastructure Minister
|
||||
'WezireCand', // 43 - Education Minister
|
||||
];
|
||||
|
||||
/**
|
||||
* Check if user has specific Tiki role
|
||||
* @param role - Kurdish name of role (e.g., 'Hemwelatî', 'Perwerdekar')
|
||||
*/
|
||||
export async function checkTikiRole(
|
||||
api: ApiPromise | null,
|
||||
address: string | null | undefined,
|
||||
role: string
|
||||
): Promise<boolean> {
|
||||
if (!api || !address) {
|
||||
return false;
|
||||
}
|
||||
|
||||
try {
|
||||
// Check if Tiki pallet exists
|
||||
if (!api.query?.tiki?.userTikis) {
|
||||
console.warn('Tiki pallet not available');
|
||||
return false;
|
||||
}
|
||||
|
||||
const tikis = await api.query.tiki.userTikis(address);
|
||||
|
||||
if (tikis.isEmpty) {
|
||||
return false;
|
||||
}
|
||||
|
||||
// userTikis returns BoundedVec of Tiki enum indices
|
||||
const tikiIndices = tikis.toJSON() as number[];
|
||||
|
||||
// Find role index
|
||||
const roleIndex = TIKI_ROLES.indexOf(role);
|
||||
if (roleIndex === -1) {
|
||||
console.warn(`Unknown Tiki role: ${role}`);
|
||||
return false;
|
||||
}
|
||||
|
||||
// Check if user has this role
|
||||
return tikiIndices.includes(roleIndex);
|
||||
} catch (error) {
|
||||
console.error('Error checking Tiki role:', error);
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Check if user has ANY Tiki role from a list
|
||||
* Useful for checking multiple acceptable roles
|
||||
*/
|
||||
export async function checkAnyTikiRole(
|
||||
api: ApiPromise | null,
|
||||
address: string | null | undefined,
|
||||
roles: string[]
|
||||
): Promise<boolean> {
|
||||
if (!api || !address) {
|
||||
return false;
|
||||
}
|
||||
|
||||
try {
|
||||
for (const role of roles) {
|
||||
const hasRole = await checkTikiRole(api, address, role);
|
||||
if (hasRole) {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
return false;
|
||||
} catch (error) {
|
||||
console.error('Error checking any Tiki role:', error);
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Check if user is an educator (Perwerdekar)
|
||||
* Required for: Creating courses in Perwerde
|
||||
*/
|
||||
export async function checkEducatorRole(
|
||||
api: ApiPromise | null,
|
||||
address: string | null | undefined
|
||||
): Promise<boolean> {
|
||||
return checkAnyTikiRole(api, address, [
|
||||
'Perwerdekar', // Educator
|
||||
'Mamoste', // Teacher
|
||||
'WezireCand', // Education Minister
|
||||
'Rewsenbîr', // Intellectual
|
||||
]);
|
||||
}
|
||||
|
||||
/**
|
||||
* Check if user can moderate (ModeratorêCivakê or higher)
|
||||
* Required for: Forum moderation, governance moderation
|
||||
*/
|
||||
export async function checkModeratorRole(
|
||||
api: ApiPromise | null,
|
||||
address: string | null | undefined
|
||||
): Promise<boolean> {
|
||||
return checkAnyTikiRole(api, address, [
|
||||
'ModeratorêCivakê', // Society Moderator
|
||||
'Berdevk', // Spokesperson
|
||||
'Serok', // President
|
||||
'SerokWeziran', // Prime Minister
|
||||
]);
|
||||
}
|
||||
|
||||
/**
|
||||
* Check if user can participate in governance (citizen or higher)
|
||||
* Required for: Voting, proposing, elections
|
||||
*/
|
||||
export async function checkGovernanceParticipation(
|
||||
api: ApiPromise | null,
|
||||
address: string | null | undefined
|
||||
): Promise<boolean> {
|
||||
// Any citizen with approved KYC can participate
|
||||
return checkCitizenStatus(api, address);
|
||||
}
|
||||
|
||||
/**
|
||||
* Check if user can create proposals
|
||||
* Required for: Creating referendum proposals
|
||||
*/
|
||||
export async function checkProposalCreationRights(
|
||||
api: ApiPromise | null,
|
||||
address: string | null | undefined
|
||||
): Promise<boolean> {
|
||||
// Citizen + certain roles can create proposals
|
||||
const isCitizen = await checkCitizenStatus(api, address);
|
||||
if (!isCitizen) {
|
||||
return false;
|
||||
}
|
||||
|
||||
// Additional check: has any leadership role
|
||||
return checkAnyTikiRole(api, address, [
|
||||
'Parlementer', // Parliament Member
|
||||
'SerokiMeclise', // Speaker
|
||||
'Serok', // President
|
||||
'SerokWeziran', // Prime Minister
|
||||
'Wezir', // Minister
|
||||
'SerokêKomele', // Community Leader
|
||||
'RêveberêProjeyê', // Project Manager
|
||||
]);
|
||||
}
|
||||
|
||||
// ========================================
|
||||
// STAKING SCORE CHECK
|
||||
// ========================================
|
||||
|
||||
/**
|
||||
* Check if user has started staking score tracking
|
||||
* Required for: Advanced staking features
|
||||
*/
|
||||
export async function checkStakingScoreTracking(
|
||||
api: ApiPromise | null,
|
||||
address: string | null | undefined
|
||||
): Promise<boolean> {
|
||||
if (!api || !address) {
|
||||
return false;
|
||||
}
|
||||
|
||||
try {
|
||||
if (!api.query?.stakingScore?.stakingStartBlock) {
|
||||
console.warn('Staking score pallet not available');
|
||||
return false;
|
||||
}
|
||||
|
||||
const startBlock = await api.query.stakingScore.stakingStartBlock(address);
|
||||
return !startBlock.isNone;
|
||||
} catch (error) {
|
||||
console.error('Error checking staking score tracking:', error);
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
// ========================================
|
||||
// COMBINED PERMISSION CHECKS
|
||||
// ========================================
|
||||
|
||||
export interface UserPermissions {
|
||||
isCitizen: boolean;
|
||||
isValidator: boolean;
|
||||
hasStakingScore: boolean;
|
||||
canVote: boolean;
|
||||
canCreateProposals: boolean;
|
||||
canModerate: boolean;
|
||||
canCreateCourses: boolean;
|
||||
tikis: string[];
|
||||
}
|
||||
|
||||
/**
|
||||
* Get all user permissions at once
|
||||
* Useful for dashboard/profile pages
|
||||
*/
|
||||
export async function getUserPermissions(
|
||||
api: ApiPromise | null,
|
||||
address: string | null | undefined
|
||||
): Promise<UserPermissions> {
|
||||
if (!api || !address) {
|
||||
return {
|
||||
isCitizen: false,
|
||||
isValidator: false,
|
||||
hasStakingScore: false,
|
||||
canVote: false,
|
||||
canCreateProposals: false,
|
||||
canModerate: false,
|
||||
canCreateCourses: false,
|
||||
tikis: [],
|
||||
};
|
||||
}
|
||||
|
||||
try {
|
||||
// Fetch all in parallel
|
||||
const [
|
||||
isCitizen,
|
||||
isValidator,
|
||||
hasStakingScore,
|
||||
canCreateProposals,
|
||||
canModerate,
|
||||
canCreateCourses,
|
||||
tikiData,
|
||||
] = await Promise.all([
|
||||
checkCitizenStatus(api, address),
|
||||
checkValidatorStatus(api, address),
|
||||
checkStakingScoreTracking(api, address),
|
||||
checkProposalCreationRights(api, address),
|
||||
checkModeratorRole(api, address),
|
||||
checkEducatorRole(api, address),
|
||||
api.query?.tiki?.userTikis?.(address),
|
||||
]);
|
||||
|
||||
// Parse tikis
|
||||
const tikiIndices = tikiData?.isEmpty ? [] : (tikiData?.toJSON() as number[]);
|
||||
const tikis = tikiIndices.map((index) => TIKI_ROLES[index] || `Unknown(${index})`);
|
||||
|
||||
return {
|
||||
isCitizen,
|
||||
isValidator,
|
||||
hasStakingScore,
|
||||
canVote: isCitizen, // Citizens can vote
|
||||
canCreateProposals,
|
||||
canModerate,
|
||||
canCreateCourses,
|
||||
tikis,
|
||||
};
|
||||
} catch (error) {
|
||||
console.error('Error getting user permissions:', error);
|
||||
return {
|
||||
isCitizen: false,
|
||||
isValidator: false,
|
||||
hasStakingScore: false,
|
||||
canVote: false,
|
||||
canCreateProposals: false,
|
||||
canModerate: false,
|
||||
canCreateCourses: false,
|
||||
tikis: [],
|
||||
};
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,466 @@
|
||||
// ========================================
|
||||
// Route Guard Components
|
||||
// ========================================
|
||||
// Protected route wrappers that check user permissions
|
||||
|
||||
import React, { useEffect, useState, ReactNode } from 'react';
|
||||
import { Navigate } from 'react-router-dom';
|
||||
import { usePolkadot } from '@/contexts/PolkadotContext';
|
||||
import { useAuth } from '@/contexts/AuthContext';
|
||||
import {
|
||||
checkCitizenStatus,
|
||||
checkValidatorStatus,
|
||||
checkEducatorRole,
|
||||
checkModeratorRole,
|
||||
} from '@pezkuwi/lib/guards';
|
||||
import { Card, CardContent } from '@/components/ui/card';
|
||||
import { Alert, AlertDescription } from '@/components/ui/alert';
|
||||
import { Loader2, AlertCircle, Users, GraduationCap, Shield } from 'lucide-react';
|
||||
import { Button } from '@/components/ui/button';
|
||||
|
||||
interface RouteGuardProps {
|
||||
children: ReactNode;
|
||||
fallbackPath?: string;
|
||||
}
|
||||
|
||||
// ========================================
|
||||
// LOADING COMPONENT
|
||||
// ========================================
|
||||
|
||||
const LoadingGuard: React.FC = () => {
|
||||
return (
|
||||
<div className="min-h-screen bg-gray-950 flex items-center justify-center">
|
||||
<Card className="bg-gray-900 border-gray-800 p-8">
|
||||
<CardContent className="flex flex-col items-center gap-4">
|
||||
<Loader2 className="w-12 h-12 text-green-500 animate-spin" />
|
||||
<p className="text-gray-400">Checking permissions...</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
// ========================================
|
||||
// CITIZEN ROUTE GUARD
|
||||
// ========================================
|
||||
|
||||
/**
|
||||
* CitizenRoute - Requires approved KYC (citizenship)
|
||||
* Use for: Voting, Education, Elections, etc.
|
||||
*
|
||||
* @example
|
||||
* <Route path="/vote" element={
|
||||
* <CitizenRoute>
|
||||
* <VotingPage />
|
||||
* </CitizenRoute>
|
||||
* } />
|
||||
*/
|
||||
export const CitizenRoute: React.FC<RouteGuardProps> = ({
|
||||
children,
|
||||
fallbackPath = '/be-citizen',
|
||||
}) => {
|
||||
const { api, isApiReady, selectedAccount } = usePolkadot();
|
||||
const { user } = useAuth();
|
||||
const [isCitizen, setIsCitizen] = useState<boolean | null>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
|
||||
useEffect(() => {
|
||||
const checkPermission = async () => {
|
||||
if (!isApiReady || !api) {
|
||||
setLoading(true);
|
||||
return;
|
||||
}
|
||||
|
||||
if (!selectedAccount?.address) {
|
||||
setIsCitizen(false);
|
||||
setLoading(false);
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const citizenStatus = await checkCitizenStatus(api, selectedAccount.address);
|
||||
setIsCitizen(citizenStatus);
|
||||
} catch (error) {
|
||||
console.error('Citizen check failed:', error);
|
||||
setIsCitizen(false);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
checkPermission();
|
||||
}, [api, isApiReady, selectedAccount]);
|
||||
|
||||
// Loading state
|
||||
if (loading || !isApiReady) {
|
||||
return <LoadingGuard />;
|
||||
}
|
||||
|
||||
// Not connected to wallet
|
||||
if (!selectedAccount) {
|
||||
return (
|
||||
<div className="min-h-screen bg-gray-950 flex items-center justify-center p-4">
|
||||
<Card className="bg-gray-900 border-gray-800 max-w-md">
|
||||
<CardContent className="p-8">
|
||||
<div className="flex flex-col items-center gap-4 text-center">
|
||||
<Users className="w-16 h-16 text-yellow-500" />
|
||||
<h2 className="text-2xl font-bold text-white">Wallet Not Connected</h2>
|
||||
<p className="text-gray-400">
|
||||
Please connect your Polkadot wallet to access this feature.
|
||||
</p>
|
||||
<Button
|
||||
onClick={() => window.location.href = '/'}
|
||||
className="bg-green-600 hover:bg-green-700"
|
||||
>
|
||||
Go to Home
|
||||
</Button>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// Not a citizen
|
||||
if (isCitizen === false) {
|
||||
return <Navigate to={fallbackPath} replace />;
|
||||
}
|
||||
|
||||
// Authorized
|
||||
return <>{children}</>;
|
||||
};
|
||||
|
||||
// ========================================
|
||||
// VALIDATOR ROUTE GUARD
|
||||
// ========================================
|
||||
|
||||
/**
|
||||
* ValidatorRoute - Requires validator pool membership
|
||||
* Use for: Validator pool dashboard, validator settings
|
||||
*
|
||||
* @example
|
||||
* <Route path="/validator-pool" element={
|
||||
* <ValidatorRoute>
|
||||
* <ValidatorPoolDashboard />
|
||||
* </ValidatorRoute>
|
||||
* } />
|
||||
*/
|
||||
export const ValidatorRoute: React.FC<RouteGuardProps> = ({
|
||||
children,
|
||||
fallbackPath = '/staking',
|
||||
}) => {
|
||||
const { api, isApiReady, selectedAccount } = usePolkadot();
|
||||
const [isValidator, setIsValidator] = useState<boolean | null>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
|
||||
useEffect(() => {
|
||||
const checkPermission = async () => {
|
||||
if (!isApiReady || !api) {
|
||||
setLoading(true);
|
||||
return;
|
||||
}
|
||||
|
||||
if (!selectedAccount?.address) {
|
||||
setIsValidator(false);
|
||||
setLoading(false);
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const validatorStatus = await checkValidatorStatus(api, selectedAccount.address);
|
||||
setIsValidator(validatorStatus);
|
||||
} catch (error) {
|
||||
console.error('Validator check failed:', error);
|
||||
setIsValidator(false);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
checkPermission();
|
||||
}, [api, isApiReady, selectedAccount]);
|
||||
|
||||
// Loading state
|
||||
if (loading || !isApiReady) {
|
||||
return <LoadingGuard />;
|
||||
}
|
||||
|
||||
// Not connected to wallet
|
||||
if (!selectedAccount) {
|
||||
return <Navigate to="/" replace />;
|
||||
}
|
||||
|
||||
// Not in validator pool
|
||||
if (isValidator === false) {
|
||||
return (
|
||||
<div className="min-h-screen bg-gray-950 flex items-center justify-center p-4">
|
||||
<Card className="bg-gray-900 border-gray-800 max-w-md">
|
||||
<CardContent className="p-8">
|
||||
<Alert className="bg-red-900/20 border-red-500">
|
||||
<AlertCircle className="h-5 w-5 text-red-400" />
|
||||
<AlertDescription className="text-gray-300">
|
||||
<strong className="block mb-2">Validator Access Required</strong>
|
||||
You must be registered in the Validator Pool to access this feature.
|
||||
<div className="mt-4">
|
||||
<Button
|
||||
onClick={() => window.location.href = fallbackPath}
|
||||
className="bg-green-600 hover:bg-green-700"
|
||||
>
|
||||
Go to Staking
|
||||
</Button>
|
||||
</div>
|
||||
</AlertDescription>
|
||||
</Alert>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// Authorized
|
||||
return <>{children}</>;
|
||||
};
|
||||
|
||||
// ========================================
|
||||
// EDUCATOR ROUTE GUARD
|
||||
// ========================================
|
||||
|
||||
/**
|
||||
* EducatorRoute - Requires educator Tiki role
|
||||
* Use for: Creating courses in Perwerde (Education platform)
|
||||
*
|
||||
* @example
|
||||
* <Route path="/education/create-course" element={
|
||||
* <EducatorRoute>
|
||||
* <CourseCreator />
|
||||
* </EducatorRoute>
|
||||
* } />
|
||||
*/
|
||||
export const EducatorRoute: React.FC<RouteGuardProps> = ({
|
||||
children,
|
||||
fallbackPath = '/education',
|
||||
}) => {
|
||||
const { api, isApiReady, selectedAccount } = usePolkadot();
|
||||
const [isEducator, setIsEducator] = useState<boolean | null>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
|
||||
useEffect(() => {
|
||||
const checkPermission = async () => {
|
||||
if (!isApiReady || !api) {
|
||||
setLoading(true);
|
||||
return;
|
||||
}
|
||||
|
||||
if (!selectedAccount?.address) {
|
||||
setIsEducator(false);
|
||||
setLoading(false);
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const educatorStatus = await checkEducatorRole(api, selectedAccount.address);
|
||||
setIsEducator(educatorStatus);
|
||||
} catch (error) {
|
||||
console.error('Educator check failed:', error);
|
||||
setIsEducator(false);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
checkPermission();
|
||||
}, [api, isApiReady, selectedAccount]);
|
||||
|
||||
// Loading state
|
||||
if (loading || !isApiReady) {
|
||||
return <LoadingGuard />;
|
||||
}
|
||||
|
||||
// Not connected to wallet
|
||||
if (!selectedAccount) {
|
||||
return <Navigate to="/" replace />;
|
||||
}
|
||||
|
||||
// Not an educator
|
||||
if (isEducator === false) {
|
||||
return (
|
||||
<div className="min-h-screen bg-gray-950 flex items-center justify-center p-4">
|
||||
<Card className="bg-gray-900 border-gray-800 max-w-md">
|
||||
<CardContent className="p-8">
|
||||
<Alert className="bg-red-900/20 border-red-500">
|
||||
<GraduationCap className="h-5 w-5 text-red-400" />
|
||||
<AlertDescription className="text-gray-300">
|
||||
<strong className="block mb-2">Educator Role Required</strong>
|
||||
You need one of these Tiki roles to create courses:
|
||||
<ul className="list-disc list-inside mt-2 text-sm">
|
||||
<li>Perwerdekar (Educator)</li>
|
||||
<li>Mamoste (Teacher)</li>
|
||||
<li>WezireCand (Education Minister)</li>
|
||||
<li>Rewsenbîr (Intellectual)</li>
|
||||
</ul>
|
||||
<div className="mt-4">
|
||||
<Button
|
||||
onClick={() => window.location.href = fallbackPath}
|
||||
className="bg-green-600 hover:bg-green-700"
|
||||
>
|
||||
Browse Courses
|
||||
</Button>
|
||||
</div>
|
||||
</AlertDescription>
|
||||
</Alert>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// Authorized
|
||||
return <>{children}</>;
|
||||
};
|
||||
|
||||
// ========================================
|
||||
// MODERATOR ROUTE GUARD
|
||||
// ========================================
|
||||
|
||||
/**
|
||||
* ModeratorRoute - Requires moderator Tiki role
|
||||
* Use for: Forum moderation, governance moderation
|
||||
*
|
||||
* @example
|
||||
* <Route path="/moderate" element={
|
||||
* <ModeratorRoute>
|
||||
* <ModerationPanel />
|
||||
* </ModeratorRoute>
|
||||
* } />
|
||||
*/
|
||||
export const ModeratorRoute: React.FC<RouteGuardProps> = ({
|
||||
children,
|
||||
fallbackPath = '/',
|
||||
}) => {
|
||||
const { api, isApiReady, selectedAccount } = usePolkadot();
|
||||
const [isModerator, setIsModerator] = useState<boolean | null>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
|
||||
useEffect(() => {
|
||||
const checkPermission = async () => {
|
||||
if (!isApiReady || !api) {
|
||||
setLoading(true);
|
||||
return;
|
||||
}
|
||||
|
||||
if (!selectedAccount?.address) {
|
||||
setIsModerator(false);
|
||||
setLoading(false);
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const moderatorStatus = await checkModeratorRole(api, selectedAccount.address);
|
||||
setIsModerator(moderatorStatus);
|
||||
} catch (error) {
|
||||
console.error('Moderator check failed:', error);
|
||||
setIsModerator(false);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
checkPermission();
|
||||
}, [api, isApiReady, selectedAccount]);
|
||||
|
||||
// Loading state
|
||||
if (loading || !isApiReady) {
|
||||
return <LoadingGuard />;
|
||||
}
|
||||
|
||||
// Not connected to wallet
|
||||
if (!selectedAccount) {
|
||||
return <Navigate to="/" replace />;
|
||||
}
|
||||
|
||||
// Not a moderator
|
||||
if (isModerator === false) {
|
||||
return (
|
||||
<div className="min-h-screen bg-gray-950 flex items-center justify-center p-4">
|
||||
<Card className="bg-gray-900 border-gray-800 max-w-md">
|
||||
<CardContent className="p-8">
|
||||
<Alert className="bg-red-900/20 border-red-500">
|
||||
<Shield className="h-5 w-5 text-red-400" />
|
||||
<AlertDescription className="text-gray-300">
|
||||
<strong className="block mb-2">Moderator Access Required</strong>
|
||||
You need moderator privileges to access this feature.
|
||||
<div className="mt-4">
|
||||
<Button
|
||||
onClick={() => window.location.href = fallbackPath}
|
||||
className="bg-green-600 hover:bg-green-700"
|
||||
>
|
||||
Go to Home
|
||||
</Button>
|
||||
</div>
|
||||
</AlertDescription>
|
||||
</Alert>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// Authorized
|
||||
return <>{children}</>;
|
||||
};
|
||||
|
||||
// ========================================
|
||||
// ADMIN ROUTE GUARD (Supabase-based)
|
||||
// ========================================
|
||||
|
||||
/**
|
||||
* AdminRoute - Requires Supabase admin role
|
||||
* Use for: Admin panel, system settings
|
||||
* Note: This is separate from blockchain permissions
|
||||
*/
|
||||
export const AdminRoute: React.FC<RouteGuardProps> = ({
|
||||
children,
|
||||
fallbackPath = '/',
|
||||
}) => {
|
||||
const { user, isAdmin, loading } = useAuth();
|
||||
|
||||
// Loading state
|
||||
if (loading) {
|
||||
return <LoadingGuard />;
|
||||
}
|
||||
|
||||
// Not logged in
|
||||
if (!user) {
|
||||
return <Navigate to="/login" replace />;
|
||||
}
|
||||
|
||||
// Not admin
|
||||
if (!isAdmin) {
|
||||
return (
|
||||
<div className="min-h-screen bg-gray-950 flex items-center justify-center p-4">
|
||||
<Card className="bg-gray-900 border-gray-800 max-w-md">
|
||||
<CardContent className="p-8">
|
||||
<Alert className="bg-red-900/20 border-red-500">
|
||||
<AlertCircle className="h-5 w-5 text-red-400" />
|
||||
<AlertDescription className="text-gray-300">
|
||||
<strong className="block mb-2">Admin Access Required</strong>
|
||||
You do not have permission to access the admin panel.
|
||||
<div className="mt-4">
|
||||
<Button
|
||||
onClick={() => window.location.href = fallbackPath}
|
||||
className="bg-green-600 hover:bg-green-700"
|
||||
>
|
||||
Go to Home
|
||||
</Button>
|
||||
</div>
|
||||
</AlertDescription>
|
||||
</Alert>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// Authorized
|
||||
return <>{children}</>;
|
||||
};
|
||||
@@ -1,7 +1,12 @@
|
||||
import React, { createContext, useContext, useEffect, useState } from 'react';
|
||||
import React, { createContext, useContext, useEffect, useState, useCallback } from 'react';
|
||||
import { supabase } from '@/lib/supabase';
|
||||
import { User } from '@supabase/supabase-js';
|
||||
|
||||
// Session timeout configuration
|
||||
const SESSION_TIMEOUT_MS = 30 * 60 * 1000; // 30 minutes
|
||||
const ACTIVITY_CHECK_INTERVAL_MS = 60 * 1000; // Check every 1 minute
|
||||
const LAST_ACTIVITY_KEY = 'last_activity_timestamp';
|
||||
|
||||
interface AuthContextType {
|
||||
user: User | null;
|
||||
loading: boolean;
|
||||
@@ -27,6 +32,66 @@ export const AuthProvider: React.FC<{ children: React.ReactNode }> = ({ children
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [isAdmin, setIsAdmin] = useState(false);
|
||||
|
||||
// ========================================
|
||||
// SESSION TIMEOUT MANAGEMENT
|
||||
// ========================================
|
||||
|
||||
// Update last activity timestamp
|
||||
const updateLastActivity = useCallback(() => {
|
||||
localStorage.setItem(LAST_ACTIVITY_KEY, Date.now().toString());
|
||||
}, []);
|
||||
|
||||
// Check if session has timed out
|
||||
const checkSessionTimeout = useCallback(async () => {
|
||||
if (!user) return;
|
||||
|
||||
const lastActivity = localStorage.getItem(LAST_ACTIVITY_KEY);
|
||||
if (!lastActivity) {
|
||||
updateLastActivity();
|
||||
return;
|
||||
}
|
||||
|
||||
const lastActivityTime = parseInt(lastActivity, 10);
|
||||
const now = Date.now();
|
||||
const inactiveTime = now - lastActivityTime;
|
||||
|
||||
if (inactiveTime >= SESSION_TIMEOUT_MS) {
|
||||
console.log('⏱️ Session timeout - logging out due to inactivity');
|
||||
await signOut();
|
||||
}
|
||||
}, [user]);
|
||||
|
||||
// Setup activity listeners
|
||||
useEffect(() => {
|
||||
if (!user) return;
|
||||
|
||||
// Update activity on user interactions
|
||||
const activityEvents = ['mousedown', 'keydown', 'scroll', 'touchstart'];
|
||||
|
||||
const handleActivity = () => {
|
||||
updateLastActivity();
|
||||
};
|
||||
|
||||
// Register event listeners
|
||||
activityEvents.forEach((event) => {
|
||||
window.addEventListener(event, handleActivity);
|
||||
});
|
||||
|
||||
// Initial activity timestamp
|
||||
updateLastActivity();
|
||||
|
||||
// Check for timeout periodically
|
||||
const timeoutChecker = setInterval(checkSessionTimeout, ACTIVITY_CHECK_INTERVAL_MS);
|
||||
|
||||
// Cleanup
|
||||
return () => {
|
||||
activityEvents.forEach((event) => {
|
||||
window.removeEventListener(event, handleActivity);
|
||||
});
|
||||
clearInterval(timeoutChecker);
|
||||
};
|
||||
}, [user, updateLastActivity, checkSessionTimeout]);
|
||||
|
||||
useEffect(() => {
|
||||
// Check active sessions and sets the user
|
||||
supabase.auth.getSession().then(({ data: { session } }) => {
|
||||
@@ -134,6 +199,8 @@ export const AuthProvider: React.FC<{ children: React.ReactNode }> = ({ children
|
||||
|
||||
const signOut = async () => {
|
||||
setIsAdmin(false);
|
||||
setUser(null);
|
||||
localStorage.removeItem(LAST_ACTIVITY_KEY);
|
||||
await supabase.auth.signOut();
|
||||
};
|
||||
|
||||
|
||||
Reference in New Issue
Block a user