Add Discord OAuth login with whitelist for user 1207017997173137481

client/src/context/AuthContext.js

@@ -8,6 +8,13 @@ export function AuthProvider({ children }) {
   const [loading, setLoading] = useState(true);
 
   useEffect(() => {
+    const params = new URLSearchParams(window.location.search);
+    const urlToken = params.get('token');
+    if (urlToken) {
+      localStorage.setItem('token', urlToken);
+      window.history.replaceState({}, '', window.location.pathname);
+    }
+
     const token = localStorage.getItem('token');
     if (token) {
       auth.me()

client/src/index.css

@@ -141,6 +141,26 @@ body {
 .btn-primary:hover { background: var(--accent-hover); }
 .btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }
 
+.btn-discord {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  margin-top: 12px;
+  padding: 10px 16px;
+  background: #5865F2;
+  color: #fff;
+  border: none;
+  border-radius: var(--radius-sm);
+  font-size: 14px;
+  cursor: pointer;
+  transition: var(--transition);
+  text-decoration: none;
+  font-weight: 500;
+}
+
+.btn-discord:hover { background: #4752c4; }
+
 .btn-secondary {
   display: inline-flex;
   align-items: center;

client/src/pages/Login.js

@@ -1,6 +1,7 @@
 import React, { useState } from 'react';
 import { useNavigate, Link } from 'react-router-dom';
 import { useAuth } from '../context/AuthContext';
+import { getDiscordAuthUrl } from '../services/api';
 
 export default function Login() {
   const [username, setUsername] = useState('');
@@ -30,6 +31,7 @@ export default function Login() {
           <input type="password" placeholder="Password" value={password} onChange={(e) => setPassword(e.target.value)} required />
           <button type="submit" className="btn-primary">Sign In</button>
         </form>
+        <a href={getDiscordAuthUrl()} className="btn-discord">Sign in with Discord</a>
         <p className="auth-link">Don't have an account? <Link to="/register">Register</Link></p>
       </div>
     </div>

client/src/services/api.js

@@ -1,4 +1,5 @@
 const API_URL = process.env.REACT_APP_API_URL || 'http://localhost:3001/api';
+const API_ORIGIN = API_URL.replace(/\/api$/, '');
 
 async function request(endpoint, options = {}) {
   const token = localStorage.getItem('token');
@@ -64,6 +65,10 @@ export const fragments = {
   delete: (id) => request(`/fragments/${id}`, { method: 'DELETE' }),
 };
 
+export function getDiscordAuthUrl(next = '/') {
+  return `${API_ORIGIN}/auth/discord?next=${encodeURIComponent(next)}`;
+}
+
 export const ai = {
   suggest: (prompt) => request('/ai/suggest', { method: 'POST', body: JSON.stringify({ prompt }) }),
   generateName: (style) => request('/ai/generate-name', { method: 'POST', body: JSON.stringify({ style }) }),