Introduce basic authentication models

Author: lucemans

app/src/server/auth/mod.rs

@@ -0,0 +1,40 @@
+use poem::Result;
+use poem_openapi::{payload::Json, Object, OpenApi};
+use serde::{Deserialize, Serialize};
+use sqids::Sqids;
+use rand::Rng;
+
+pub struct AuthApi;
+
+#[derive(Deserialize, Serialize, Object)]
+pub struct GuestResponse {
+    pub token: String,
+    pub user: Option<GuestUser>,
+}
+
+#[OpenApi]
+impl AuthApi {
+    #[oai(path = "/auth/guest", method = "post")]
+    pub async fn guest(&self) -> Result<Json<GuestResponse>> {
+        let new_id = Sqids::default();
+        let random_number = rand::thread_rng().gen_range(0..u64::MAX);
+        let new_id = new_id.encode(&[0, random_number]).unwrap();
+
+        Ok(Json(GuestResponse {
+            token: new_id.clone(),
+            user: Some(GuestUser {
+                user_id: new_id,
+                name: "John Doe".to_string(),
+            }),
+        }))
+    }
+}
+
+/**
+ * This is a guest user
+ */
+#[derive(Deserialize, Serialize, Object)]
+pub struct GuestUser {
+    pub user_id: String,
+    pub name: String,
+}

app/src/server/mod.rs

@@ -12,12 +12,11 @@ use poem::{
 use poem_openapi::{payload::Html, OpenApi, OpenApiService, Tags};
 
 use maps::MapsApi;
-// use request::RequestApi;
-// use stats::{balance::BalanceApi, StatsApi};
 use tracing::info;
 
 use crate::state::AppState;
 use tracing_mw::TraceId;
+use auth::AuthApi;
 
 // pub mod auth;
 // pub mod channel;
@@ -29,6 +28,7 @@ use tracing_mw::TraceId;
 // pub mod stats;
 pub mod party;
 pub mod maps;
+pub mod auth;
 pub mod tracing_mw;
 
 #[derive(Tags)]
@@ -37,13 +37,12 @@ enum ApiTags {
     Party,
     /// Maps Related Operations
     Maps,
+    /// Auth Related Operations
+    Auth,
 }
 
 fn get_api() -> impl OpenApi {
-    (
-        PartyApi,
-        MapsApi
-    )
+    (PartyApi, MapsApi, AuthApi)
 }
 
 pub async fn start_http(state: AppState) {

web/package.json

@@ -13,6 +13,7 @@
     "author": "V3X Labs",
     "license": "GPL-3.0-only",
     "dependencies": {
+        "@radix-ui/react-avatar": "^1.1.3",
         "@radix-ui/react-dialog": "^1.1.6",
         "@radix-ui/react-switch": "^1.1.3",
         "@tanstack/query-sync-storage-persister": "^5.64.1",
@@ -23,6 +24,7 @@
         "@types/react": "^19.0.7",
         "@types/react-dom": "^19.0.3",
         "@vitejs/plugin-react": "^4.3.4",
+        "@xstate/store": "^3.3.0",
         "autoprefixer": "^10.4.20",
         "classnames": "^2.5.1",
         "cx": "^25.3.1",

web/pnpm-lock.yaml

@@ -0,0 +1,16 @@
+import { MutationOptions, useMutation } from "@tanstack/react-query";
+import { components } from "./schema.gen";
+import { useApi } from "./api";
+
+export type GuestResponse = components['schemas']['GuestResponse'];
+
+export const useGuestAuth = (extra?: Partial<MutationOptions<GuestResponse, undefined, undefined>>) => {
+    return useMutation({
+        mutationFn: async () => {
+            const response = await useApi('/auth/guest', 'post', {})
+
+            return response.data;
+        },
+        ...extra,
+    })
+}

web/src/api/auth.ts

@@ -114,10 +114,57 @@ export interface paths {
         patch?: never;
         trace?: never;
     };
+    "/auth/guest": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        get?: never;
+        put?: never;
+        post: {
+            parameters: {
+                query?: never;
+                header?: never;
+                path?: never;
+                cookie?: never;
+            };
+            requestBody?: never;
+            responses: {
+                200: {
+                    headers: {
+                        [name: string]: unknown;
+                    };
+                    content: {
+                        "application/json; charset=utf-8": components["schemas"]["GuestResponse"];
+                    };
+                };
+            };
+        };
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
 }
 export type webhooks = Record<string, never>;
 export interface components {
     schemas: {
+        /** GuestResponse */
+        GuestResponse: {
+            token: string;
+            user?: components["schemas"]["GuestUser"];
+        };
+        /**
+         * GuestUser
+         * @description * This is a guest user
+         */
+        GuestUser: {
+            user_id: string;
+            name: string;
+        };
         /** MapData */
         MapData: {
             id: string;

web/src/api/schema.gen.ts

@@ -1,23 +1,105 @@
+import { useAuth } from "@/hooks/auth";
+import { Dialog, DialogClose, DialogContent, DialogTrigger } from "@radix-ui/react-dialog";
 import { Link } from "@tanstack/react-router";
+import { FC } from "react";
+import { Modal } from "./modal/Modal";
+import { FaSteam } from "react-icons/fa";
+import { useGuestAuth } from "@/api/auth";
+import { Avatar } from "./auth/Avatar";
+import { LuLogOut } from "react-icons/lu";
+import { toast } from "sonner";
 
 export const Navbar = () => {
     return (
         <>
-        <div className="w-full bg-primary fixed sm:relative">
-            <div className="flex items-stretch gap-2 h-full">
-                <div className="px-1 max-h-full min-w-2 flex items-center gap-2 bg-secondary">
-                    <div className="size-8 rounded-md">
-                        <img src="/lock.code.png" alt="lock.code" className="w-full h-full object-contain" />
+            <div className="w-full bg-primary fixed sm:relative flex justify-between items-center">
+                <div className="flex items-stretch gap-2 h-full">
+                    <div className="px-1 max-h-full min-w-2 flex items-center gap-2 bg-secondary">
+                        <div className="size-8 rounded-md">
+                            <img src="/lock.code.png" alt="lock.code" className="w-full h-full object-contain" />
+                        </div>
                     </div>
+                    <Link to="/" className="text-accent text-base hover:underline py-2 block">
+                        <span>code</span>
+                        <span className="text-secondary">.</span>
+                        <span>fishing</span>
+                    </Link>
+                </div>
+                <div className="flex items-center h-full gap-2 flex-1 justify-end">
+                    <UserProfile />
                 </div>
-                <Link to="/" className="text-accent text-base hover:underline py-2 block">
-                    <span>code</span>
-                    <span className="text-secondary">.</span>
-                    <span>fishing</span>
-                </Link>
-            </div>
             </div>
             <div className="h-12 w-full sm:hidden" />
         </>
     )
 };
+
+export const UserProfile: FC<{}> = () => {
+    const { isAuthenticated, logout, user } = useAuth();
+
+    if (!isAuthenticated) {
+        return (
+            <LoginModal />
+        );
+    }
+
+    return (
+        <div className="flex items-center gap-1">
+            <div className="flex items-center gap-1">
+                <Avatar src={user?.avatar} seed={user?.user_id} />
+                <span>{user?.name}</span>
+            </div>
+            <button className="button flex items-center gap-1" onClick={logout}>
+                <LuLogOut className="size-4" />
+                <span>Logout</span>
+            </button>
+        </div>
+    );
+};
+
+export const LoginModal: FC<{}> = () => {
+    return (
+        <Dialog>
+            <DialogTrigger asChild>
+                <button className="button">
+                    <span>Login</span>
+                </button>
+            </DialogTrigger>
+            <Modal size="medium">
+                <LoginModalContent />
+            </Modal>
+        </Dialog>
+    )
+}
+
+export const LoginModalContent: FC<{}> = () => {
+    const { login } = useAuth();
+    const { mutate: guestAuth } = useGuestAuth({
+        onSuccess: (data) => {
+            login(data.token, data.user);
+            toast.success("Logged in as guest");
+        }
+    });
+
+    return (
+        <div className="flex flex-wrap gap-4">
+            <div className="flex flex-col gap-2 sm:w-[calc(50%-1rem)]">
+                <h2>Sign in as Guest</h2>
+                <p className="text-secondary">Click here to continue as an anonymous user.</p>
+                <DialogClose asChild>
+                    <button className="button" onClick={() => guestAuth(undefined, undefined)}>
+                        <span>Continue as Guest</span>
+                    </button>
+                </DialogClose>
+            </div>
+            <div className="flex flex-col gap-2 sm:w-[calc(50%-1rem)]">
+                <h2>Sign in with Steam</h2>
+                <p className="text-secondary">Click here to sign in with your Steam account.</p>
+                <button className="button flex items-center justify-center gap-2" disabled>
+                    <FaSteam className="size-4" />
+                    <span>Sign in with Steam</span>
+                </button>
+            </div>
+        </div>
+    )
+}