rve/learning-platform
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Azure (Entra ID) login as user login (#16)

Browse Source 
Replaces the client-side PIN login with real authentication against Azure
Entra ID via PocketBase's built-in OAuth2 (OIDC) flow. Every Azure user is
auto-provisioned as a team_member on first login.

- pb_migrations: team_members becomes a PocketBase auth collection (OIDC
  provider configured from env); all collections require @request.auth.id
- pb_hooks: provisioning of role (ENTRA_ADMIN_EMAILS allow-list) and
  enrollment_status, with admin-role re-sync on every login
- frontend: "Sign in with Microsoft" login, pb.authStore-based session,
  TeamManager manages roster/roles (no PIN/manual create)
- infra: Entra env wiring + pb_hooks mount for dev (Labs) and prod
- src/lib/azureAuth.js + tests for the canonical role/allow-list logic
- docs/auth-spec.md

Knowledge base, generated tests and micro-learnings are left untouched.
Existing PIN users are dropped (no migration required, per sign-off).

Closes #16

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
RaymondVerhoef
2026-06-23 11:41:08 +02:00
parent 5f34a6f825
commit 3af105bccd
17 changed files with 734 additions and 170 deletions
Download Patch File Download Diff File Expand all files Collapse all files

128
src/components/admin/TeamManager.jsx
View File

@@ -1,19 +1,20 @@
import { useState, useEffect } from 'react';
import { UserPlus, Trash2, Edit2, Shield, User, CheckCircle } from 'lucide-react';
import { Trash2, Shield, User, CheckCircle, Info } from 'lucide-react';
import Card from '../ui/Card';
import Button from '../ui/Button';
import Input from '../ui/Input';
import Tag from '../ui/Tag';
import * as db from '../../lib/db';
import { pb } from '../../lib/pb';
import { useApp } from '../../store/AppContext';
// Users are provisioned automatically on first Azure (Entra ID) login — admins
// no longer create them by hand. This panel lets an admin review the roster,
// switch a member between user/admin, and remove members. The admin role is
// also re-synced from the ENTRA_ADMIN_EMAILS allow-list on every login (see
// pb_hooks/team_members.pb.js), so a manual change here can be overridden on
// the member's next sign-in if their e-mail is on/off that list.
const TeamManager = () => {
const { state } = useApp();
const [users, setUsers] = useState([]);
const [isEditing, setIsEditing] = useState(false);
const [editingId, setEditingId] = useState(null);
const [formData, setFormData] = useState({ name: '', role: 'user', pin: '' });
const [message, setMessage] = useState('');
const loadUsers = async () => {
@@ -23,29 +24,16 @@ const TeamManager = () => {
useEffect(() => { loadUsers(); }, []);
const handleSave = async (e) => {
e.preventDefault();
if (!formData.name || !formData.pin) return;
if (editingId) {
await db.updateTeamMember(editingId, { name: formData.name, role: formData.role, pin: formData.pin });
setMessage('User updated successfully.');
} else {
await db.addTeamMember({ name: formData.name, role: formData.role, pin: formData.pin });
setMessage('User added successfully.');
}
await loadUsers();
setFormData({ name: '', role: 'user', pin: '' });
setIsEditing(false);
setEditingId(null);
const flash = (msg) => {
setMessage(msg);
setTimeout(() => setMessage(''), 3000);
};
const handleEdit = (user) => {
setFormData({ name: user.name, role: user.role, pin: user.pin });
setIsEditing(true);
setEditingId(user.id);
const handleRoleChange = async (user, role) => {
if (role === user.role) return;
await db.updateTeamMember(user.id, { role });
await loadUsers();
flash(`${user.name} is now ${role}.`);
};
const handleDelete = async (id) => {
@@ -56,24 +44,17 @@ const TeamManager = () => {
if (confirm("Are you sure you want to delete this user?")) {
await db.deleteTeamMember(id);
// Also remove from leaderboard
// Also remove from leaderboard.
try {
const entry = await pb.collection('leaderboard').getFirstListItem(`user_id="${id}"`);
await pb.collection('leaderboard').delete(entry.id);
} catch { /* no leaderboard entry, nothing to do */ }
await loadUsers();
setMessage('User deleted.');
setTimeout(() => setMessage(''), 3000);
flash('User deleted.');
}
};
const cancelEdit = () => {
setIsEditing(false);
setEditingId(null);
setFormData({ name: '', role: 'user', pin: '' });
};
return (
<div className="space-y-8">
{message && (
@@ -82,58 +63,22 @@ const TeamManager = () => {
</div>
)}
<Card className="border border-bg-warm">
<h2 className="text-xl font-bold flex items-center gap-2 mb-4">
{isEditing ? <Edit2 size={20} className="text-teal" /> : <UserPlus size={20} className="text-teal" />}
{isEditing ? 'Edit Team Member' : 'Add New Team Member'}
</h2>
<form onSubmit={handleSave} className="flex flex-col sm:flex-row gap-4 items-end">
<div className="flex-1 w-full">
<Input
label="Full Name"
placeholder="e.g. Jane Doe"
value={formData.name}
onChange={e => setFormData({...formData, name: e.target.value})}
required
/>
</div>
<div className="flex-1 w-full">
<label className="block text-sm font-medium mb-1.5 text-fg">Role</label>
<select
value={formData.role}
onChange={e => setFormData({...formData, role: e.target.value})}
className="w-full h-11 px-3 rounded-[var(--r-sm)] border border-bg-warm bg-paper text-sm focus:outline-none focus:ring-2 focus:ring-teal/30 focus:border-teal"
>
<option value="user">User</option>
<option value="admin">Admin</option>
</select>
</div>
<div className="flex-1 w-full">
<Input
label="Login PIN"
type="text"
placeholder="e.g. 1234"
value={formData.pin}
onChange={e => setFormData({...formData, pin: e.target.value})}
required
/>
</div>
<div className="flex gap-2 w-full sm:w-auto">
<Button type="submit" className="w-full sm:w-auto h-11 px-6">
{isEditing ? 'Update' : 'Add'}
</Button>
{isEditing && (
<Button type="button" variant="outline" onClick={cancelEdit} className="h-11 px-4">
Cancel
</Button>
)}
</div>
</form>
<Card className="border border-bg-warm bg-bg-warm/30">
<p className="text-sm text-fg-muted flex items-start gap-2">
<Info size={16} className="mt-0.5 shrink-0 text-teal" />
Team members are created automatically when they first sign in with their
Microsoft account. Admins are granted via the <code>ENTRA_ADMIN_EMAILS</code>{' '}
allow-list and re-synced on each login.
</p>
</Card>
<Card className="p-0 border border-bg-warm overflow-hidden">
<div className="divide-y divide-bg-warm">
{users.length === 0 && (
<div className="p-6 text-sm text-fg-muted text-center">
No team members yet — they appear here after their first sign-in.
</div>
)}
{users.map(user => (
<div key={user.id} className="p-4 flex items-center justify-between hover:bg-bg-warm/30 transition-colors">
<div className="flex items-center gap-4">
@@ -145,19 +90,26 @@ const TeamManager = () => {
{user.name}
{user.id === state.currentUser?.id && <Tag variant="accent" className="text-[10px] py-0">You</Tag>}
</p>
<p className="text-sm text-fg-muted">PIN: {user.pin}</p>
<p className="text-sm text-fg-muted">{user.email}</p>
</div>
</div>
<div className="flex items-center gap-3">
<Tag variant={user.role === 'admin' ? 'dark' : 'default'} className="hidden sm:inline-flex">{user.role}</Tag>
<button onClick={() => handleEdit(user)} className="p-2 text-fg-muted hover:text-teal transition-colors">
<Edit2 size={16} />
</button>
<select
value={user.role || 'user'}
onChange={e => handleRoleChange(user, e.target.value)}
disabled={user.id === state.currentUser?.id}
className="h-9 px-2 rounded-[var(--r-sm)] border border-bg-warm bg-paper text-sm focus:outline-none focus:ring-2 focus:ring-teal/30 focus:border-teal disabled:opacity-40"
aria-label={`Role for ${user.name}`}
>
<option value="user">User</option>
<option value="admin">Admin</option>
</select>
<button
onClick={() => handleDelete(user.id)}
disabled={user.id === state.currentUser?.id}
className="p-2 text-fg-muted hover:text-red-500 disabled:opacity-30 transition-colors"
aria-label={`Delete ${user.name}`}
>
<Trash2 size={16} />
</button>