Add Auth

frontend/items.ts

@@ -59,12 +59,44 @@ export interface Game {
   minPlayers: number;
   maxPlayers: number;
   price: number;
+  remoteId: number;
 }
 
 export interface PersonList {
   person: Person[];
 }
 
+/** Authentication messages */
+export interface LoginRequest {
+  username: string;
+  password: string;
+}
+
+export interface LoginResponse {
+  token: string;
+  success: boolean;
+  message: string;
+}
+
+export interface LogoutRequest {
+  token: string;
+}
+
+export interface LogoutResponse {
+  success: boolean;
+  message: string;
+}
+
+export interface AuthStatusRequest {
+  token: string;
+}
+
+export interface AuthStatusResponse {
+  authenticated: boolean;
+  username: string;
+  message: string;
+}
+
 function createBasePerson(): Person {
   return { name: "", opinion: [] };
 }
@@ -218,7 +250,7 @@ export const Opinion: MessageFns<Opinion> = {
 };
 
 function createBaseGame(): Game {
-  return { title: "", source: 0, multiplayer: false, minPlayers: 0, maxPlayers: 0, price: 0 };
+  return { title: "", source: 0, multiplayer: false, minPlayers: 0, maxPlayers: 0, price: 0, remoteId: 0 };
 }
 
 export const Game: MessageFns<Game> = {
@@ -241,6 +273,9 @@ export const Game: MessageFns<Game> = {
     if (message.price !== 0) {
       writer.uint32(48).uint32(message.price);
     }
+    if (message.remoteId !== 0) {
+      writer.uint32(56).uint64(message.remoteId);
+    }
     return writer;
   },
 
@@ -299,6 +334,14 @@ export const Game: MessageFns<Game> = {
           message.price = reader.uint32();
           continue;
         }
+        case 7: {
+          if (tag !== 56) {
+            break;
+          }
+
+          message.remoteId = longToNumber(reader.uint64());
+          continue;
+        }
       }
       if ((tag & 7) === 4 || tag === 0) {
         break;
@@ -316,6 +359,7 @@ export const Game: MessageFns<Game> = {
       minPlayers: isSet(object.minPlayers) ? globalThis.Number(object.minPlayers) : 0,
       maxPlayers: isSet(object.maxPlayers) ? globalThis.Number(object.maxPlayers) : 0,
       price: isSet(object.price) ? globalThis.Number(object.price) : 0,
+      remoteId: isSet(object.remoteId) ? globalThis.Number(object.remoteId) : 0,
     };
   },
 
@@ -339,6 +383,9 @@ export const Game: MessageFns<Game> = {
     if (message.price !== 0) {
       obj.price = Math.round(message.price);
     }
+    if (message.remoteId !== 0) {
+      obj.remoteId = Math.round(message.remoteId);
+    }
     return obj;
   },
 
@@ -353,6 +400,7 @@ export const Game: MessageFns<Game> = {
     message.minPlayers = object.minPlayers ?? 0;
     message.maxPlayers = object.maxPlayers ?? 0;
     message.price = object.price ?? 0;
+    message.remoteId = object.remoteId ?? 0;
     return message;
   },
 };
@@ -417,6 +465,499 @@ export const PersonList: MessageFns<PersonList> = {
   },
 };
 
+function createBaseLoginRequest(): LoginRequest {
+  return { username: "", password: "" };
+}
+
+export const LoginRequest: MessageFns<LoginRequest> = {
+  encode(message: LoginRequest, writer: BinaryWriter = new BinaryWriter()): BinaryWriter {
+    if (message.username !== "") {
+      writer.uint32(10).string(message.username);
+    }
+    if (message.password !== "") {
+      writer.uint32(18).string(message.password);
+    }
+    return writer;
+  },
+
+  decode(input: BinaryReader | Uint8Array, length?: number): LoginRequest {
+    const reader = input instanceof BinaryReader ? input : new BinaryReader(input);
+    const end = length === undefined ? reader.len : reader.pos + length;
+    const message = createBaseLoginRequest();
+    while (reader.pos < end) {
+      const tag = reader.uint32();
+      switch (tag >>> 3) {
+        case 1: {
+          if (tag !== 10) {
+            break;
+          }
+
+          message.username = reader.string();
+          continue;
+        }
+        case 2: {
+          if (tag !== 18) {
+            break;
+          }
+
+          message.password = reader.string();
+          continue;
+        }
+      }
+      if ((tag & 7) === 4 || tag === 0) {
+        break;
+      }
+      reader.skip(tag & 7);
+    }
+    return message;
+  },
+
+  fromJSON(object: any): LoginRequest {
+    return {
+      username: isSet(object.username) ? globalThis.String(object.username) : "",
+      password: isSet(object.password) ? globalThis.String(object.password) : "",
+    };
+  },
+
+  toJSON(message: LoginRequest): unknown {
+    const obj: any = {};
+    if (message.username !== "") {
+      obj.username = message.username;
+    }
+    if (message.password !== "") {
+      obj.password = message.password;
+    }
+    return obj;
+  },
+
+  create<I extends Exact<DeepPartial<LoginRequest>, I>>(base?: I): LoginRequest {
+    return LoginRequest.fromPartial(base ?? ({} as any));
+  },
+  fromPartial<I extends Exact<DeepPartial<LoginRequest>, I>>(object: I): LoginRequest {
+    const message = createBaseLoginRequest();
+    message.username = object.username ?? "";
+    message.password = object.password ?? "";
+    return message;
+  },
+};
+
+function createBaseLoginResponse(): LoginResponse {
+  return { token: "", success: false, message: "" };
+}
+
+export const LoginResponse: MessageFns<LoginResponse> = {
+  encode(message: LoginResponse, writer: BinaryWriter = new BinaryWriter()): BinaryWriter {
+    if (message.token !== "") {
+      writer.uint32(10).string(message.token);
+    }
+    if (message.success !== false) {
+      writer.uint32(16).bool(message.success);
+    }
+    if (message.message !== "") {
+      writer.uint32(26).string(message.message);
+    }
+    return writer;
+  },
+
+  decode(input: BinaryReader | Uint8Array, length?: number): LoginResponse {
+    const reader = input instanceof BinaryReader ? input : new BinaryReader(input);
+    const end = length === undefined ? reader.len : reader.pos + length;
+    const message = createBaseLoginResponse();
+    while (reader.pos < end) {
+      const tag = reader.uint32();
+      switch (tag >>> 3) {
+        case 1: {
+          if (tag !== 10) {
+            break;
+          }
+
+          message.token = reader.string();
+          continue;
+        }
+        case 2: {
+          if (tag !== 16) {
+            break;
+          }
+
+          message.success = reader.bool();
+          continue;
+        }
+        case 3: {
+          if (tag !== 26) {
+            break;
+          }
+
+          message.message = reader.string();
+          continue;
+        }
+      }
+      if ((tag & 7) === 4 || tag === 0) {
+        break;
+      }
+      reader.skip(tag & 7);
+    }
+    return message;
+  },
+
+  fromJSON(object: any): LoginResponse {
+    return {
+      token: isSet(object.token) ? globalThis.String(object.token) : "",
+      success: isSet(object.success) ? globalThis.Boolean(object.success) : false,
+      message: isSet(object.message) ? globalThis.String(object.message) : "",
+    };
+  },
+
+  toJSON(message: LoginResponse): unknown {
+    const obj: any = {};
+    if (message.token !== "") {
+      obj.token = message.token;
+    }
+    if (message.success !== false) {
+      obj.success = message.success;
+    }
+    if (message.message !== "") {
+      obj.message = message.message;
+    }
+    return obj;
+  },
+
+  create<I extends Exact<DeepPartial<LoginResponse>, I>>(base?: I): LoginResponse {
+    return LoginResponse.fromPartial(base ?? ({} as any));
+  },
+  fromPartial<I extends Exact<DeepPartial<LoginResponse>, I>>(object: I): LoginResponse {
+    const message = createBaseLoginResponse();
+    message.token = object.token ?? "";
+    message.success = object.success ?? false;
+    message.message = object.message ?? "";
+    return message;
+  },
+};
+
+function createBaseLogoutRequest(): LogoutRequest {
+  return { token: "" };
+}
+
+export const LogoutRequest: MessageFns<LogoutRequest> = {
+  encode(message: LogoutRequest, writer: BinaryWriter = new BinaryWriter()): BinaryWriter {
+    if (message.token !== "") {
+      writer.uint32(10).string(message.token);
+    }
+    return writer;
+  },
+
+  decode(input: BinaryReader | Uint8Array, length?: number): LogoutRequest {
+    const reader = input instanceof BinaryReader ? input : new BinaryReader(input);
+    const end = length === undefined ? reader.len : reader.pos + length;
+    const message = createBaseLogoutRequest();
+    while (reader.pos < end) {
+      const tag = reader.uint32();
+      switch (tag >>> 3) {
+        case 1: {
+          if (tag !== 10) {
+            break;
+          }
+
+          message.token = reader.string();
+          continue;
+        }
+      }
+      if ((tag & 7) === 4 || tag === 0) {
+        break;
+      }
+      reader.skip(tag & 7);
+    }
+    return message;
+  },
+
+  fromJSON(object: any): LogoutRequest {
+    return { token: isSet(object.token) ? globalThis.String(object.token) : "" };
+  },
+
+  toJSON(message: LogoutRequest): unknown {
+    const obj: any = {};
+    if (message.token !== "") {
+      obj.token = message.token;
+    }
+    return obj;
+  },
+
+  create<I extends Exact<DeepPartial<LogoutRequest>, I>>(base?: I): LogoutRequest {
+    return LogoutRequest.fromPartial(base ?? ({} as any));
+  },
+  fromPartial<I extends Exact<DeepPartial<LogoutRequest>, I>>(object: I): LogoutRequest {
+    const message = createBaseLogoutRequest();
+    message.token = object.token ?? "";
+    return message;
+  },
+};
+
+function createBaseLogoutResponse(): LogoutResponse {
+  return { success: false, message: "" };
+}
+
+export const LogoutResponse: MessageFns<LogoutResponse> = {
+  encode(message: LogoutResponse, writer: BinaryWriter = new BinaryWriter()): BinaryWriter {
+    if (message.success !== false) {
+      writer.uint32(8).bool(message.success);
+    }
+    if (message.message !== "") {
+      writer.uint32(18).string(message.message);
+    }
+    return writer;
+  },
+
+  decode(input: BinaryReader | Uint8Array, length?: number): LogoutResponse {
+    const reader = input instanceof BinaryReader ? input : new BinaryReader(input);
+    const end = length === undefined ? reader.len : reader.pos + length;
+    const message = createBaseLogoutResponse();
+    while (reader.pos < end) {
+      const tag = reader.uint32();
+      switch (tag >>> 3) {
+        case 1: {
+          if (tag !== 8) {
+            break;
+          }
+
+          message.success = reader.bool();
+          continue;
+        }
+        case 2: {
+          if (tag !== 18) {
+            break;
+          }
+
+          message.message = reader.string();
+          continue;
+        }
+      }
+      if ((tag & 7) === 4 || tag === 0) {
+        break;
+      }
+      reader.skip(tag & 7);
+    }
+    return message;
+  },
+
+  fromJSON(object: any): LogoutResponse {
+    return {
+      success: isSet(object.success) ? globalThis.Boolean(object.success) : false,
+      message: isSet(object.message) ? globalThis.String(object.message) : "",
+    };
+  },
+
+  toJSON(message: LogoutResponse): unknown {
+    const obj: any = {};
+    if (message.success !== false) {
+      obj.success = message.success;
+    }
+    if (message.message !== "") {
+      obj.message = message.message;
+    }
+    return obj;
+  },
+
+  create<I extends Exact<DeepPartial<LogoutResponse>, I>>(base?: I): LogoutResponse {
+    return LogoutResponse.fromPartial(base ?? ({} as any));
+  },
+  fromPartial<I extends Exact<DeepPartial<LogoutResponse>, I>>(object: I): LogoutResponse {
+    const message = createBaseLogoutResponse();
+    message.success = object.success ?? false;
+    message.message = object.message ?? "";
+    return message;
+  },
+};
+
+function createBaseAuthStatusRequest(): AuthStatusRequest {
+  return { token: "" };
+}
+
+export const AuthStatusRequest: MessageFns<AuthStatusRequest> = {
+  encode(message: AuthStatusRequest, writer: BinaryWriter = new BinaryWriter()): BinaryWriter {
+    if (message.token !== "") {
+      writer.uint32(10).string(message.token);
+    }
+    return writer;
+  },
+
+  decode(input: BinaryReader | Uint8Array, length?: number): AuthStatusRequest {
+    const reader = input instanceof BinaryReader ? input : new BinaryReader(input);
+    const end = length === undefined ? reader.len : reader.pos + length;
+    const message = createBaseAuthStatusRequest();
+    while (reader.pos < end) {
+      const tag = reader.uint32();
+      switch (tag >>> 3) {
+        case 1: {
+          if (tag !== 10) {
+            break;
+          }
+
+          message.token = reader.string();
+          continue;
+        }
+      }
+      if ((tag & 7) === 4 || tag === 0) {
+        break;
+      }
+      reader.skip(tag & 7);
+    }
+    return message;
+  },
+
+  fromJSON(object: any): AuthStatusRequest {
+    return { token: isSet(object.token) ? globalThis.String(object.token) : "" };
+  },
+
+  toJSON(message: AuthStatusRequest): unknown {
+    const obj: any = {};
+    if (message.token !== "") {
+      obj.token = message.token;
+    }
+    return obj;
+  },
+
+  create<I extends Exact<DeepPartial<AuthStatusRequest>, I>>(base?: I): AuthStatusRequest {
+    return AuthStatusRequest.fromPartial(base ?? ({} as any));
+  },
+  fromPartial<I extends Exact<DeepPartial<AuthStatusRequest>, I>>(object: I): AuthStatusRequest {
+    const message = createBaseAuthStatusRequest();
+    message.token = object.token ?? "";
+    return message;
+  },
+};
+
+function createBaseAuthStatusResponse(): AuthStatusResponse {
+  return { authenticated: false, username: "", message: "" };
+}
+
+export const AuthStatusResponse: MessageFns<AuthStatusResponse> = {
+  encode(message: AuthStatusResponse, writer: BinaryWriter = new BinaryWriter()): BinaryWriter {
+    if (message.authenticated !== false) {
+      writer.uint32(8).bool(message.authenticated);
+    }
+    if (message.username !== "") {
+      writer.uint32(18).string(message.username);
+    }
+    if (message.message !== "") {
+      writer.uint32(26).string(message.message);
+    }
+    return writer;
+  },
+
+  decode(input: BinaryReader | Uint8Array, length?: number): AuthStatusResponse {
+    const reader = input instanceof BinaryReader ? input : new BinaryReader(input);
+    const end = length === undefined ? reader.len : reader.pos + length;
+    const message = createBaseAuthStatusResponse();
+    while (reader.pos < end) {
+      const tag = reader.uint32();
+      switch (tag >>> 3) {
+        case 1: {
+          if (tag !== 8) {
+            break;
+          }
+
+          message.authenticated = reader.bool();
+          continue;
+        }
+        case 2: {
+          if (tag !== 18) {
+            break;
+          }
+
+          message.username = reader.string();
+          continue;
+        }
+        case 3: {
+          if (tag !== 26) {
+            break;
+          }
+
+          message.message = reader.string();
+          continue;
+        }
+      }
+      if ((tag & 7) === 4 || tag === 0) {
+        break;
+      }
+      reader.skip(tag & 7);
+    }
+    return message;
+  },
+
+  fromJSON(object: any): AuthStatusResponse {
+    return {
+      authenticated: isSet(object.authenticated) ? globalThis.Boolean(object.authenticated) : false,
+      username: isSet(object.username) ? globalThis.String(object.username) : "",
+      message: isSet(object.message) ? globalThis.String(object.message) : "",
+    };
+  },
+
+  toJSON(message: AuthStatusResponse): unknown {
+    const obj: any = {};
+    if (message.authenticated !== false) {
+      obj.authenticated = message.authenticated;
+    }
+    if (message.username !== "") {
+      obj.username = message.username;
+    }
+    if (message.message !== "") {
+      obj.message = message.message;
+    }
+    return obj;
+  },
+
+  create<I extends Exact<DeepPartial<AuthStatusResponse>, I>>(base?: I): AuthStatusResponse {
+    return AuthStatusResponse.fromPartial(base ?? ({} as any));
+  },
+  fromPartial<I extends Exact<DeepPartial<AuthStatusResponse>, I>>(object: I): AuthStatusResponse {
+    const message = createBaseAuthStatusResponse();
+    message.authenticated = object.authenticated ?? false;
+    message.username = object.username ?? "";
+    message.message = object.message ?? "";
+    return message;
+  },
+};
+
+/** Authentication service */
+export interface AuthService {
+  Login(request: LoginRequest): Promise<LoginResponse>;
+  Logout(request: LogoutRequest): Promise<LogoutResponse>;
+  GetAuthStatus(request: AuthStatusRequest): Promise<AuthStatusResponse>;
+}
+
+export const AuthServiceServiceName = "items.AuthService";
+export class AuthServiceClientImpl implements AuthService {
+  private readonly rpc: Rpc;
+  private readonly service: string;
+  constructor(rpc: Rpc, opts?: { service?: string }) {
+    this.service = opts?.service || AuthServiceServiceName;
+    this.rpc = rpc;
+    this.Login = this.Login.bind(this);
+    this.Logout = this.Logout.bind(this);
+    this.GetAuthStatus = this.GetAuthStatus.bind(this);
+  }
+  Login(request: LoginRequest): Promise<LoginResponse> {
+    const data = LoginRequest.encode(request).finish();
+    const promise = this.rpc.request(this.service, "Login", data);
+    return promise.then((data) => LoginResponse.decode(new BinaryReader(data)));
+  }
+
+  Logout(request: LogoutRequest): Promise<LogoutResponse> {
+    const data = LogoutRequest.encode(request).finish();
+    const promise = this.rpc.request(this.service, "Logout", data);
+    return promise.then((data) => LogoutResponse.decode(new BinaryReader(data)));
+  }
+
+  GetAuthStatus(request: AuthStatusRequest): Promise<AuthStatusResponse> {
+    const data = AuthStatusRequest.encode(request).finish();
+    const promise = this.rpc.request(this.service, "GetAuthStatus", data);
+    return promise.then((data) => AuthStatusResponse.decode(new BinaryReader(data)));
+  }
+}
+
+interface Rpc {
+  request(service: string, method: string, data: Uint8Array): Promise<Uint8Array>;
+}
+
 type Builtin = Date | Function | Uint8Array | string | number | boolean | undefined;
 
 export type DeepPartial<T> = T extends Builtin ? T
@@ -429,6 +970,17 @@ type KeysOfUnion<T> = T extends T ? keyof T : never;
 export type Exact<P, I extends P> = P extends Builtin ? P
   : P & { [K in keyof P]: Exact<P[K], I[K]> } & { [K in Exclude<keyof I, KeysOfUnion<P>>]: never };
 
+function longToNumber(int64: { toString(): string }): number {
+  const num = globalThis.Number(int64.toString());
+  if (num > globalThis.Number.MAX_SAFE_INTEGER) {
+    throw new globalThis.Error("Value is larger than Number.MAX_SAFE_INTEGER");
+  }
+  if (num < globalThis.Number.MIN_SAFE_INTEGER) {
+    throw new globalThis.Error("Value is smaller than Number.MIN_SAFE_INTEGER");
+  }
+  return num;
+}
+
 function isSet(value: any): boolean {
   return value !== null && value !== undefined;
 }

frontend/src/App.tsx

@@ -1,31 +1,63 @@
-import { useState, useEffect } from 'react'
-import { Person, PersonList } from '../items'
-import './App.css'
+import { useState, useEffect } from "react";
+import { Person, PersonList } from "../items";
+import { Login } from "./Login";
+import "./App.css";
 
 function App() {
-  const [people, setPeople] = useState<Person[]>([])
+  const [people, setPeople] = useState<Person[]>([]);
+  const [token, setToken] = useState<string>("");
 
   useEffect(() => {
-    fetch('/api')
+    if (!token) return;
+
+    fetch("/api")
       .then((res) => res.arrayBuffer())
       .then((buffer) => {
-        const list = PersonList.decode(new Uint8Array(buffer))
-        setPeople(list.person)
+        const list = PersonList.decode(new Uint8Array(buffer));
+        setPeople(list.person);
       })
-      .catch((err) => console.error('Failed to fetch people:', err))
-  }, [])
+      .catch((err) => console.error("Failed to fetch people:", err));
+  }, [token]);
+
+  const handleLogout = () => {
+    setToken("");
+    setPeople([]);
+  };
+
+  if (!token) {
+    return <Login onLogin={setToken} />;
+  }
 
   return (
     <>
       <div className="card">
-        <h2>People List</h2>
+        <div
+          style={{
+            display: "flex",
+            justifyContent: "space-between",
+            alignItems: "center",
+            marginBottom: "1rem",
+          }}
+        >
+          <h2>People List</h2>
+          <button onClick={handleLogout}>Logout</button>
+        </div>
         {people.map((person, index) => (
-          <div key={index}>
+          <div
+            key={index}
+            style={{
+              marginBottom: "1rem",
+              padding: "1rem",
+              border: "1px solid #ccc",
+              borderRadius: "8px",
+            }}
+          >
             <h3>{person.name}</h3>
             <ul>
               {person.opinion.map((op, i) => (
                 <li key={i}>
-                  {op.game?.title} - {op.wouldPlay ? 'Would Play' : 'Would Not Play'}
+                  {op.game?.title} -{" "}
+                  {op.wouldPlay ? "Would Play" : "Would Not Play"}
                 </li>
               ))}
             </ul>
@@ -33,7 +65,7 @@ function App() {
         ))}
       </div>
     </>
-  )
+  );
 }
 
-export default App
+export default App;

frontend/src/Login.tsx

@@ -0,0 +1,77 @@
+import { useState } from "react";
+import { LoginRequest, LoginResponse } from "../items";
+
+interface LoginProps {
+  onLogin: (token: string) => void;
+}
+
+export function Login({ onLogin }: LoginProps) {
+  const [username, setUsername] = useState("");
+  const [password, setPassword] = useState("");
+  const [error, setError] = useState("");
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setError("");
+
+    try {
+      const req = LoginRequest.create({ username, password });
+      const body = LoginRequest.encode(req).finish();
+
+      const res = await fetch("/auth/login", {
+        method: "POST",
+        body,
+        headers: {
+          "Content-Type": "application/octet-stream",
+        },
+      });
+
+      const buffer = await res.arrayBuffer();
+      const response = LoginResponse.decode(new Uint8Array(buffer));
+
+      if (response.success) {
+        onLogin(response.token);
+      } else {
+        setError(response.message);
+      }
+    } catch (err) {
+      console.error("Login error:", err);
+      setError("Failed to login");
+    }
+  };
+
+  return (
+    <div className="card">
+      <h2>Login</h2>
+      <form
+        onSubmit={handleSubmit}
+        style={{ display: "flex", flexDirection: "column", gap: "1rem" }}
+      >
+        <div>
+          <label style={{ display: "block", marginBottom: "0.5rem" }}>
+            Username:{" "}
+          </label>
+          <input
+            type="text"
+            value={username}
+            onChange={(e) => setUsername(e.target.value)}
+            style={{ padding: "0.5rem" }}
+          />
+        </div>
+        <div>
+          <label style={{ display: "block", marginBottom: "0.5rem" }}>
+            Password:{" "}
+          </label>
+          <input
+            type="password"
+            value={password}
+            onChange={(e) => setPassword(e.target.value)}
+            style={{ padding: "0.5rem" }}
+          />
+        </div>
+        <button type="submit">Login</button>
+      </form>
+      {error && <p style={{ color: "red", marginTop: "1rem" }}>{error}</p>}
+    </div>
+  );
+}