example simple registration/login logic with basic UI

# Conflicts:
#	apps/client/package.json
#	apps/client/src/index.ts
#	apps/server/package.json
#	apps/server/src/index.ts

apps/browser/package.json

@@ -1,10 +1,10 @@
 {
-  "name": "rage-fw-example-cef",
+  "name": "rage-fw-example-browser",
   "version": "0.0.0",
   "type": "module",
   "author": "Entity Seven Group",
-  "license": "CC BY-ND",
-  "description": "CEF side of rage-fw example",
+  "license": "MIT",
+  "description": "Browser side of rage-fw-example",
   "scripts": {
     "dev": "vite",
     "build": "tsc && vite build",
@@ -12,9 +12,12 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@entityseven/rage-fw-browser": "0.2.0",
+    "@tailwindcss/vite": "^4.0.17",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "rage-fw-cef": "latest"
+    "tailwindcss": "^4.0.17",
+    "zod": "^3.24.2"
   },
   "devDependencies": {
     "@types/react": "^18.2.66",

apps/browser/src/App.tsx

@@ -1,20 +1,30 @@
-import { fw } from 'rage-fw-cef'
-import { useEffect, useState } from 'react'
+import React from 'react'
+import LoginPage from './pages/Authorization/LoginPage'
+import RegisterPage from './pages/Authorization/RegisterPage'
+
+import './index.css'
 
 function App() {
-    const [data, setData] = useState('')
-
-    useEffect(() => {
-        fw.event.register('customCefEvent', async ([test]) => {
-            setData(p => p + ' ' + test)
-            return 'from cef'
-        })
-    }, [])
+    const [showLogin, setShowLogin] = React.useState(true)
 
     return (
-        <div style={{ width: '100%', color: 'white', textAlign: 'center' }}>
-            <h1>Hello World!</h1>
-            <h2>{data}</h2>
+        <div>
+            <div className="p-4 text-center">
+                <button
+                    onClick={() => setShowLogin(true)}
+                    className={`mr-2 px-4 py-2 rounded ${showLogin ? 'bg-sky-600 text-white' : 'bg-gray-300'}`}
+                >
+                    Show Login
+                </button>
+                <button
+                    onClick={() => setShowLogin(false)}
+                    className={`px-4 py-2 rounded ${!showLogin ? 'bg-sky-600 text-white' : 'bg-gray-300'}`}
+                >
+                    Show Register
+                </button>
+            </div>
+
+            {showLogin ? <LoginPage /> : <RegisterPage />}
         </div>
     )
 }

apps/browser/src/components/ui/Button.tsx

@@ -0,0 +1,62 @@
+import React from 'react'
+
+interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    isLoading?: boolean
+}
+
+const Button: React.FC<ButtonProps> = ({
+    children,
+    className,
+    isLoading = false,
+    disabled,
+    ...props
+}) => {
+    const baseClasses =
+        'w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white focus:outline-none focus:ring-2 focus:ring-offset-2'
+    const activeClasses = 'bg-sky-600 hover:bg-sky-700 focus:ring-sky-500'
+    const loadingClasses = 'bg-sky-400 cursor-not-allowed'
+    const disabledClasses = 'bg-gray-400 cursor-not-allowed'
+
+    const getButtonClasses = () => {
+        if (isLoading)
+            return `${baseClasses} ${loadingClasses} ${className || ''}`
+        if (disabled)
+            return `${baseClasses} ${disabledClasses} ${className || ''}`
+        return `${baseClasses} ${activeClasses} ${className || ''}`
+    }
+
+    return (
+        <button
+            className={getButtonClasses()}
+            disabled={disabled || isLoading}
+            {...props}
+        >
+            {isLoading ? (
+                <svg
+                    className="animate-spin -ml-1 mr-3 h-5 w-5 text-white"
+                    xmlns="http://www.w3.org/2000/svg"
+                    fill="none"
+                    viewBox="0 0 24 24"
+                >
+                    <circle
+                        className="opacity-25"
+                        cx="12"
+                        cy="12"
+                        r="10"
+                        stroke="currentColor"
+                        strokeWidth="4"
+                    ></circle>
+                    <path
+                        className="opacity-75"
+                        fill="currentColor"
+                        d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+                    ></path>
+                </svg>
+            ) : (
+                children
+            )}
+        </button>
+    )
+}
+
+export default Button

apps/browser/src/components/ui/Checkbox.tsx

@@ -0,0 +1,29 @@
+import React from 'react'
+
+interface CheckboxProps extends React.InputHTMLAttributes<HTMLInputElement> {
+    label: string
+    id: string
+}
+
+const Checkbox: React.FC<CheckboxProps> = ({
+    label,
+    id,
+    className,
+    ...props
+}) => {
+    return (
+        <div className="flex items-center mb-4">
+            <input
+                id={id}
+                type="checkbox"
+                className={`h-4 w-4 rounded border-gray-300 text-sky-600 focus:ring-sky-500 ${className || ''}`}
+                {...props}
+            />
+            <label htmlFor={id} className="ml-2 block text-sm text-gray-900">
+                {label}
+            </label>
+        </div>
+    )
+}
+
+export default Checkbox

apps/browser/src/components/ui/Input.tsx

@@ -0,0 +1,49 @@
+import React from 'react'
+
+interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+    label: string
+    id: string
+    error?: string
+}
+
+const Input: React.FC<InputProps> = ({
+    label,
+    id,
+    error,
+    className,
+    ...props
+}) => {
+    const baseClasses =
+        'mt-1 block w-full px-3 py-2 bg-white border border-slate-300 rounded-md text-sm shadow-sm placeholder-slate-400 focus:outline-none focus:border-sky-500 focus:ring-1 focus:ring-sky-500 disabled:bg-slate-50 disabled:text-slate-500 disabled:border-slate-200 disabled:shadow-none'
+    const errorClasses =
+        'border-red-500 text-red-600 focus:border-red-500 focus:ring-red-500'
+
+    return (
+        <div className="mb-4">
+            <label
+                htmlFor={id}
+                className="block text-sm font-medium text-slate-700"
+            >
+                {label}
+            </label>
+            <input
+                id={id}
+                className={`${baseClasses} ${error ? errorClasses : ''} ${className || ''}`}
+                {...props}
+                aria-invalid={!!error}
+                aria-describedby={error ? `${id}-error` : undefined}
+            />
+            {error && (
+                <p
+                    id={`${id}-error`}
+                    className="mt-1 text-xs text-red-600"
+                    role="alert"
+                >
+                    {error}
+                </p>
+            )}
+        </div>
+    )
+}
+
+export default Input

apps/browser/src/hooks/useLoginForm.ts

@@ -0,0 +1,100 @@
+import React, { useState, useCallback } from 'react'
+import { loginSchema, LoginFormData, FieldErrors } from '../validation'
+import { ZodError } from 'zod'
+
+interface UseLoginFormProps {
+    onSubmitSuccess?: (data: LoginFormData) => void // Optional callback for successful submission
+}
+
+export function useLoginForm({ onSubmitSuccess }: UseLoginFormProps = {}) {
+    const [formData, setFormData] = useState<LoginFormData>({
+        identifier: '', // Can hold email or username
+        password: '',
+        saveLogin: false,
+        savePassword: false,
+    })
+    const [errors, setErrors] = useState<FieldErrors<LoginFormData>>({})
+    const [isLoading, setIsLoading] = useState(false)
+    const [submitError, setSubmitError] = useState<string | null>(null)
+
+    const handleChange = useCallback(
+        (e: React.ChangeEvent<HTMLInputElement>) => {
+            const { name, value, type, checked } = e.target
+            setFormData(prev => ({
+                ...prev,
+                [name]: type === 'checkbox' ? checked : value,
+            }))
+            // Clear error for the field being edited
+            if (errors[name as keyof LoginFormData]) {
+                setErrors(prev => ({ ...prev, [name]: undefined }))
+            }
+            // Clear general submission error
+            if (submitError) {
+                setSubmitError(null)
+            }
+        },
+        [errors, submitError],
+    )
+
+    const validateForm = useCallback(() => {
+        try {
+            loginSchema.parse(formData)
+            setErrors({})
+            return true
+        } catch (error) {
+            if (error instanceof ZodError) {
+                const fieldErrors: FieldErrors<LoginFormData> = {}
+                error.errors.forEach(err => {
+                    if (err.path.length > 0) {
+                        fieldErrors[err.path[0] as keyof LoginFormData] =
+                            err.message
+                    }
+                })
+                setErrors(fieldErrors)
+            } else {
+                console.error(
+                    'An unexpected error occurred during validation:',
+                    error,
+                )
+                setSubmitError('An unexpected validation error occurred.')
+            }
+            return false
+        }
+    }, [formData])
+
+    const handleSubmit = useCallback(
+        async (e: React.FormEvent<HTMLFormElement>) => {
+            e.preventDefault()
+            setSubmitError(null)
+
+            if (!validateForm()) {
+                return
+            }
+
+            setIsLoading(true)
+            console.log('Submitting login data:', formData)
+
+            try {
+                setErrors({}) // Clear errors on success
+                if (onSubmitSuccess) {
+                    onSubmitSuccess(formData) // Call success callback
+                }
+            } catch (apiError: unknown) {
+                console.error('Login API error:', apiError)
+                setSubmitError('Login failed. Please check your credentials.')
+            } finally {
+                setIsLoading(false)
+            }
+        },
+        [formData, validateForm, onSubmitSuccess],
+    )
+
+    return {
+        formData,
+        errors,
+        isLoading,
+        submitError,
+        handleChange,
+        handleSubmit,
+    }
+}

apps/browser/src/hooks/useRegisterForm.ts

@@ -0,0 +1,107 @@
+import React, { useState, useCallback } from 'react'
+import { registerSchema, RegisterFormData, FieldErrors } from '../validation'
+import { ZodError } from 'zod'
+
+interface UseRegisterFormProps {
+    onSubmitSuccess?: (data: RegisterFormData) => void // Optional callback for successful submission
+}
+
+export function useRegisterForm({
+    onSubmitSuccess,
+}: UseRegisterFormProps = {}) {
+    const [formData, setFormData] = useState<RegisterFormData>({
+        username: '',
+        email: '',
+        password: '',
+        passwordRepeat: '',
+        promocode: '',
+    })
+    const [errors, setErrors] = useState<FieldErrors<RegisterFormData>>({})
+    const [isLoading, setIsLoading] = useState(false)
+    const [submitError, setSubmitError] = useState<string | null>(null) // For general API errors
+
+    const handleChange = useCallback(
+        (e: React.ChangeEvent<HTMLInputElement>) => {
+            const { name, value } = e.target
+            setFormData(prev => ({ ...prev, [name]: value }))
+            // Clear error for the field being edited
+            if (errors[name as keyof RegisterFormData]) {
+                setErrors(prev => ({ ...prev, [name]: undefined }))
+            }
+            // Clear general submission error when user starts typing again
+            if (submitError) {
+                setSubmitError(null)
+            }
+        },
+        [errors, submitError],
+    )
+
+    const validateForm = useCallback(() => {
+        try {
+            registerSchema.parse(formData)
+            setErrors({}) // Clear errors if validation passes
+            return true
+        } catch (error) {
+            if (error instanceof ZodError) {
+                const fieldErrors: FieldErrors<RegisterFormData> = {}
+                error.errors.forEach(err => {
+                    if (err.path.length > 0) {
+                        fieldErrors[err.path[0] as keyof RegisterFormData] =
+                            err.message
+                    }
+                })
+                setErrors(fieldErrors)
+            } else {
+                console.error(
+                    'An unexpected error occurred during validation:',
+                    error,
+                )
+                setSubmitError('An unexpected validation error occurred.') // Generic error for non-Zod issues
+            }
+            return false
+        }
+    }, [formData])
+
+    const handleSubmit = useCallback(
+        async (e: React.FormEvent<HTMLFormElement>) => {
+            e.preventDefault()
+            setSubmitError(null) // Clear previous submit errors
+
+            if (!validateForm()) {
+                return // Stop submission if validation fails
+            }
+
+            setIsLoading(true)
+            console.log('Submitting registration data:', formData)
+
+            try {
+                setFormData({
+                    username: '',
+                    email: '',
+                    password: '',
+                    passwordRepeat: '',
+                    promocode: '',
+                }) // Reset form
+                setErrors({})
+                if (onSubmitSuccess) {
+                    onSubmitSuccess(formData) // Call success callback if provided
+                }
+            } catch (apiError: unknown) {
+                console.error('Registration API error:', apiError)
+                setSubmitError('Registration failed. Please try again.')
+            } finally {
+                setIsLoading(false)
+            }
+        },
+        [formData, validateForm, onSubmitSuccess],
+    )
+
+    return {
+        formData,
+        errors,
+        isLoading,
+        submitError,
+        handleChange,
+        handleSubmit,
+    }
+}

apps/browser/src/index.css

@@ -1,3 +1,5 @@
+@import "tailwindcss";
+
 body {
   margin: 0;
 }

apps/browser/src/pages/Authorization/LoginPage.tsx

@@ -0,0 +1,137 @@
+import React from 'react'
+import { fw } from '@entityseven/rage-fw-browser'
+
+import { AuthEvent } from '../../../../shared/events'
+
+import Input from '../../components/ui/Input'
+import Checkbox from '../../components/ui/Checkbox'
+import Button from '../../components/ui/Button'
+import { useLoginForm } from '../../hooks/useLoginForm'
+import { LoginFormData } from '../../validation'
+
+const LoginPage: React.FC = () => {
+    const handleLoginSuccess = async (data: LoginFormData) => {
+        const tempData = {
+            login: data.identifier,
+            password: data.password,
+        }
+
+        const response = await fw.event.triggerServer(AuthEvent.LOGIN, [
+            tempData,
+        ])
+
+        console.log(response)
+    }
+
+    const {
+        formData,
+        errors,
+        isLoading,
+        submitError,
+        handleChange,
+        handleSubmit,
+    } = useLoginForm({ onSubmitSuccess: handleLoginSuccess })
+
+    return (
+        <div className="min-h-screen bg-gray-100 flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8">
+            <div className="max-w-md w-full space-y-8 bg-white p-10 rounded-lg shadow-md">
+                <div>
+                    <h2 className="mt-6 text-center text-3xl font-extrabold text-gray-900">
+                        Sign in to your account
+                    </h2>
+                    {/* Optional: Link to registration page */}
+                    {/* <p className="mt-2 text-center text-sm text-gray-600">
+                        Or{' '}
+                        <a href="/register" className="font-medium text-sky-600 hover:text-sky-500">
+                            create a new account
+                        </a>
+                    </p> */}
+                </div>
+                <form
+                    className="mt-8 space-y-6"
+                    onSubmit={handleSubmit}
+                    noValidate
+                >
+                    {/* Display general submission errors */}
+                    {submitError && (
+                        <div
+                            className="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative"
+                            role="alert"
+                        >
+                            <strong className="font-bold">Error: </strong>
+                            <span className="block sm:inline">
+                                {submitError}
+                            </span>
+                        </div>
+                    )}
+
+                    <div className="rounded-md shadow-sm -space-y-px">
+                        <Input
+                            label="Username"
+                            id="identifier"
+                            name="identifier"
+                            type="text" // Use text to allow both email and username
+                            autoComplete="username" // Browsers often use 'username' for this field
+                            required
+                            placeholder="Username"
+                            value={formData.identifier}
+                            onChange={handleChange}
+                            error={errors.identifier}
+                        />
+                        <Input
+                            label="Password"
+                            id="password"
+                            name="password"
+                            type="password"
+                            autoComplete="current-password"
+                            required
+                            placeholder="Password"
+                            value={formData.password}
+                            onChange={handleChange}
+                            error={errors.password}
+                        />
+                    </div>
+
+                    <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between">
+                        <div className="flex flex-col">
+                            <Checkbox
+                                label="Remember username"
+                                id="saveLogin"
+                                name="saveLogin"
+                                checked={formData.saveLogin}
+                                onChange={handleChange}
+                            />
+                            <Checkbox
+                                label="Remember password"
+                                id="savePassword"
+                                name="savePassword"
+                                checked={formData.savePassword}
+                                onChange={handleChange}
+                                // Add a warning or disable based on security policy
+                            />
+                        </div>
+
+                        {/* Optional: Forgot Password Link */}
+                        {/* <div className="text-sm mt-2 sm:mt-0">
+                            <a href="/forgot-password" className="font-medium text-sky-600 hover:text-sky-500">
+                                Forgot your password?
+                            </a>
+                        </div> */}
+                    </div>
+
+                    <div>
+                        <Button
+                            type="submit"
+                            isLoading={isLoading}
+                            disabled={isLoading}
+                        >
+                            {isLoading ? 'Signing In...' : 'Sign In'}
+                        </Button>
+                    </div>
+                </form>
+            </div>
+        </div>
+    )
+}
+
+export default LoginPage

apps/browser/src/pages/Authorization/RegisterPage.tsx

@@ -0,0 +1,147 @@
+import React from 'react'
+
+import { fw } from '@entityseven/rage-fw-browser'
+
+import { AuthEvent } from '../../../../shared/events'
+
+import Input from '../../components/ui/Input'
+import Button from '../../components/ui/Button'
+import { useRegisterForm } from '../../hooks/useRegisterForm'
+import { RegisterFormData } from '../../validation'
+
+const RegisterPage: React.FC = () => {
+    const handleRegistrationSuccess = async (data: RegisterFormData) => {
+        const tempData = {
+            login: data.username,
+            password: data.password,
+            email: data.email,
+        }
+
+        const response = await fw.event.triggerServer(AuthEvent.REGISTER, [
+            tempData,
+        ])
+
+        console.log(response)
+    }
+
+    const {
+        formData,
+        errors,
+        isLoading,
+        submitError,
+        handleChange,
+        handleSubmit,
+    } = useRegisterForm({ onSubmitSuccess: handleRegistrationSuccess })
+
+    return (
+        <div className="min-h-screen bg-gray-100 flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8">
+            <div className="max-w-md w-full space-y-8 bg-white p-10 rounded-lg shadow-md">
+                <div>
+                    <h2 className="mt-6 text-center text-3xl font-extrabold text-gray-900">
+                        Create your account
+                    </h2>
+                    {/* Optional: Link to login page */}
+                    {/* <p className="mt-2 text-center text-sm text-gray-600">
+                        Or{' '}
+                        <a href="/login" className="font-medium text-sky-600 hover:text-sky-500">
+                            sign in to your existing account
+                        </a>
+                    </p> */}
+                </div>
+                <form
+                    className="mt-8 space-y-6"
+                    onSubmit={handleSubmit}
+                    noValidate
+                >
+                    {/* Display general submission errors */}
+                    {submitError && (
+                        <div
+                            className="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative"
+                            role="alert"
+                        >
+                            <strong className="font-bold">Error: </strong>
+                            <span className="block sm:inline">
+                                {submitError}
+                            </span>
+                        </div>
+                    )}
+
+                    {/* Use hidden input for honeypot or CSRF token if needed */}
+                    {/* <input type="hidden" name="remember" defaultValue="true" /> */}
+                    <div className="rounded-md shadow-sm -space-y-px">
+                        <Input
+                            label="Username"
+                            id="username"
+                            name="username"
+                            type="text"
+                            autoComplete="username"
+                            required
+                            placeholder="Choose a username"
+                            value={formData.username}
+                            onChange={handleChange}
+                            error={errors.username}
+                        />
+                        <Input
+                            label="Email address"
+                            id="email"
+                            name="email"
+                            type="email"
+                            autoComplete="email"
+                            required
+                            placeholder="your@email.com"
+                            value={formData.email}
+                            onChange={handleChange}
+                            error={errors.email}
+                        />
+                        <Input
+                            label="Password"
+                            id="password"
+                            name="password"
+                            type="password"
+                            autoComplete="new-password"
+                            required
+                            placeholder="Create a password"
+                            value={formData.password}
+                            onChange={handleChange}
+                            error={errors.password}
+                        />
+                        <Input
+                            label="Repeat Password"
+                            id="passwordRepeat"
+                            name="passwordRepeat"
+                            type="password"
+                            autoComplete="new-password"
+                            required
+                            placeholder="Confirm your password"
+                            value={formData.passwordRepeat}
+                            onChange={handleChange}
+                            error={errors.passwordRepeat}
+                        />
+                        <Input
+                            label="Promocode (Optional)"
+                            id="promocode"
+                            name="promocode"
+                            type="text"
+                            placeholder="Enter promocode if you have one"
+                            value={formData.promocode || ''}
+                            onChange={handleChange}
+                            error={errors.promocode}
+                        />
+                    </div>
+
+                    <div>
+                        <Button
+                            type="submit"
+                            isLoading={isLoading}
+                            disabled={isLoading}
+                        >
+                            {isLoading ? 'Registering...' : 'Register'}
+                        </Button>
+                    </div>
+                </form>
+            </div>
+        </div>
+    )
+}
+
+export default RegisterPage

apps/browser/src/validation/index.ts

@@ -0,0 +1,6 @@
+export * from './loginSchema.ts'
+export * from './registerSchema.ts'
+
+export type FieldErrors<T> = {
+    [K in keyof T]?: string | undefined
+}

apps/browser/src/validation/loginSchema.ts

@@ -0,0 +1,10 @@
+import { z } from 'zod'
+
+export const loginSchema = z.object({
+    identifier: z.string().min(1, { message: 'Email or Username is required' }), // Can be email or username
+    password: z.string().min(1, { message: 'Password is required' }),
+    saveLogin: z.boolean().optional().default(false),
+    savePassword: z.boolean().optional().default(false),
+})
+
+export type LoginFormData = z.infer<typeof loginSchema>

apps/browser/src/validation/registerSchema.ts

@@ -0,0 +1,28 @@
+import { z } from 'zod'
+
+// --- Registration Schema ---
+export const registerSchema = z
+    .object({
+        username: z
+            .string()
+            .min(3, { message: 'Username must be at least 3 characters long' })
+            .max(20, { message: 'Username cannot exceed 20 characters' })
+            .regex(/^[a-zA-Z0-9_]+$/, {
+                message:
+                    'Username can only contain letters, numbers, and underscores',
+            }),
+        email: z.string().email({ message: 'Invalid email address' }),
+        password: z
+            .string()
+            .min(8, { message: 'Password must be at least 8 characters long' }),
+        // Optional: Add more complexity requirements if needed
+        // .regex(/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[a-zA-Z\d]{8,}$/, { message: "Password must contain uppercase, lowercase, and number" })
+        passwordRepeat: z.string(),
+        promocode: z.string().optional(), // Promocode is optional
+    })
+    .refine(data => data.password === data.passwordRepeat, {
+        message: "Passwords don't match",
+        path: ['passwordRepeat'], // Set error path to passwordRepeat field
+    })
+
+export type RegisterFormData = z.infer<typeof registerSchema>

apps/browser/vite.config.ts

@@ -1,11 +1,12 @@
 import { defineConfig } from 'vite'
 import react from '@vitejs/plugin-react'
+import tailwindcss from '@tailwindcss/vite'
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [react()],
-  build: {
-    outDir: '../../server/client_packages/cef',
-    emptyOutDir: true
-  }
+    plugins: [react(), tailwindcss()],
+    build: {
+        outDir: '../../server/client_packages/cef',
+        emptyOutDir: true,
+    },
 })

apps/client/package.json

@@ -8,6 +8,6 @@
     "build": "esbuild src/index.ts --bundle --platform=node --outfile=../../server/client_packages/index.js --format=esm"
   },
   "dependencies": {
-    "rage-fw-client": "latest"
+    "@entityseven/rage-fw-client": "latest"
   }
 }

apps/client/src/index.ts

@@ -1,14 +1,3 @@
-import { fw } from 'rage-fw-client'
+import { fw } from '@entityseven/rage-fw-client'
 
 fw.player.browser = mp.browsers.new('package://cef/index.html')
-
-fw.event.register('cefReady', async () => {
-    fw.system.log.info('cefReady')
-
-    const responseCef = await fw.player.triggerBrowser('customCefEvent', [
-        'from client',
-    ])
-    fw.system.log.info(responseCef)
-
-    await fw.player.triggerServer('customServerEvent', ['from client'])
-})

apps/server/.env

@@ -0,0 +1,5 @@
+POSTGRES_USER="postgres"
+POSTGRES_PASSWORD="mypassword"
+POSTGRES_DB="postgres"
+
+DATABASE_URL="postgres://${POSTGRES_USER}:${POSTGRES_PASSWORD}@localhost:5432/${POSTGRES_DB}"

apps/server/docker-compose.yml

@@ -0,0 +1,20 @@
+services:
+  database:
+    image: postgres:17
+    ports:
+      - "5432:5432"
+    healthcheck:
+      test:
+        [ "CMD", "pg_isready", "-U", "${POSTGRES_USER}", "-d", "${POSTGRES_DB}" ]
+      interval: 5s
+      timeout: 10s
+      retries: 5
+    environment:
+      - POSTGRES_PASSWORD
+      - POSTGRES_USER
+      - POSTGRES_DB
+    volumes:
+      - rage_fw_db_data:/var/lib/postgresql/data
+
+volumes:
+  rage_fw_db_data:

apps/server/drizzle.config.ts

@@ -0,0 +1,15 @@
+import 'dotenv/config'
+import { defineConfig } from 'drizzle-kit'
+
+export default defineConfig({
+    out: './drizzle',
+    schema: './src/db/schema.ts',
+    dialect: 'postgresql',
+    dbCredentials: {
+        user: process.env.POSTGRES_USER!,
+        password: process.env.POSTGRES_PASSWORD!,
+        database: process.env.POSTGRES_DB!,
+        host: 'localhost',
+        ssl: false,
+    },
+})

apps/server/drizzle/0000_burly_jubilee.sql

@@ -0,0 +1,10 @@
+CREATE TABLE "users" (
+	"id" integer PRIMARY KEY GENERATED ALWAYS AS IDENTITY (sequence name "users_id_seq" INCREMENT BY 1 MINVALUE 1 MAXVALUE 2147483647 START WITH 1 CACHE 1),
+	"socialClub" varchar(255) NOT NULL,
+	"email" varchar(255) NOT NULL,
+	"login" varchar(255) NOT NULL,
+	"password" varchar(255) NOT NULL,
+	CONSTRAINT "users_socialClub_unique" UNIQUE("socialClub"),
+	CONSTRAINT "users_email_unique" UNIQUE("email"),
+	CONSTRAINT "users_login_unique" UNIQUE("login")
+);

apps/server/drizzle/meta/0000_snapshot.json

@@ -0,0 +1,95 @@
+{
+  "id": "690592ed-01d9-40ee-91c5-45e2ed38926b",
+  "prevId": "00000000-0000-0000-0000-000000000000",
+  "version": "7",
+  "dialect": "postgresql",
+  "tables": {
+    "public.users": {
+      "name": "users",
+      "schema": "",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "integer",
+          "primaryKey": true,
+          "notNull": true,
+          "identity": {
+            "type": "always",
+            "name": "users_id_seq",
+            "schema": "public",
+            "increment": "1",
+            "startWith": "1",
+            "minValue": "1",
+            "maxValue": "2147483647",
+            "cache": "1",
+            "cycle": false
+          }
+        },
+        "socialClub": {
+          "name": "socialClub",
+          "type": "varchar(255)",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "email": {
+          "name": "email",
+          "type": "varchar(255)",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "login": {
+          "name": "login",
+          "type": "varchar(255)",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "password": {
+          "name": "password",
+          "type": "varchar(255)",
+          "primaryKey": false,
+          "notNull": true
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {},
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {
+        "users_socialClub_unique": {
+          "name": "users_socialClub_unique",
+          "nullsNotDistinct": false,
+          "columns": [
+            "socialClub"
+          ]
+        },
+        "users_email_unique": {
+          "name": "users_email_unique",
+          "nullsNotDistinct": false,
+          "columns": [
+            "email"
+          ]
+        },
+        "users_login_unique": {
+          "name": "users_login_unique",
+          "nullsNotDistinct": false,
+          "columns": [
+            "login"
+          ]
+        }
+      },
+      "policies": {},
+      "checkConstraints": {},
+      "isRLSEnabled": false
+    }
+  },
+  "enums": {},
+  "schemas": {},
+  "sequences": {},
+  "roles": {},
+  "policies": {},
+  "views": {},
+  "_meta": {
+    "columns": {},
+    "schemas": {},
+    "tables": {}
+  }
+}

apps/server/drizzle/meta/_journal.json

@@ -0,0 +1,13 @@
+{
+  "version": "7",
+  "dialect": "postgresql",
+  "entries": [
+    {
+      "idx": 0,
+      "version": "7",
+      "when": 1744901803714,
+      "tag": "0000_burly_jubilee",
+      "breakpoints": true
+    }
+  ]
+}

apps/server/package.json

@@ -5,9 +5,19 @@
   "license": "CC BY-ND",
   "description": "Server side of rage-fw example",
   "scripts": {
-    "build": "esbuild src/index.ts --bundle --platform=node --target=node10.4 --outfile=../../server/packages/server/index.js"
+    "build": "esbuild src/index.ts --bundle --platform=node --target=node14.10 --format=cjs --outfile=../../server/packages/server/index.js"
   },
   "dependencies": {
-    "rage-fw-server": "latest"
+    "@entityseven/rage-fw-server": "latest",
+    "dotenv": "^16.5.0",
+    "drizzle-orm": "^0.42.0",
+    "md5": "^2.3.0",
+    "pg": "^8.14.1"
+  },
+  "devDependencies": {
+    "@types/pg": "^8.11.13",
+    "drizzle-kit": "^0.31.0",
+    "tsx": "^4.19.3",
+    "@types/md5": "^2.3.5"
   }
 }

apps/server/src/db/index.ts

@@ -0,0 +1,6 @@
+import 'dotenv/config'
+import { drizzle } from 'drizzle-orm/node-postgres'
+
+const connUrl = `postgres://${process.env.POSTGRES_USER}:${process.env.POSTGRES_PASSWORD}@localhost:5432/${process.env.POSTGRES_DB}`
+
+export const db = drizzle(connUrl)

apps/server/src/db/schema.ts

@@ -0,0 +1,9 @@
+import { integer, pgTable, varchar } from 'drizzle-orm/pg-core'
+
+export const usersTable = pgTable('users', {
+    id: integer().primaryKey().generatedAlwaysAsIdentity(),
+    socialClub: varchar({ length: 255 }).notNull().unique(),
+    email: varchar({ length: 255 }).notNull().unique(),
+    login: varchar({ length: 255 }).notNull().unique(),
+    password: varchar({ length: 255 }).notNull(),
+})

apps/server/src/index.ts

@@ -1,18 +1,85 @@
-import { fw } from 'rage-fw-server'
+import { fw } from '@entityseven/rage-fw-server'
+import { AuthEvent } from '@shared/events'
 
-fw.event.register('playerJoin', async ([player]) => {
-    fw.system.log.info(`Connected: ${player.socialClub}`)
+import md5 from 'md5'
+
+import { eq, or } from 'drizzle-orm'
+
+import { usersTable } from './db/schema'
+import { db } from './db'
+
+fw.event.register(AuthEvent.REGISTER, async (player, [data]) => {
+    const { login, email, password } = data
+
+    const normalizedEmail = email.toLowerCase()
+    const normalizedLogin = login.toLowerCase()
+
+    try {
+        const existingUser = await db
+            .select()
+            .from(usersTable)
+            .where(
+                or(
+                    eq(usersTable.login, normalizedLogin),
+                    eq(usersTable.email, normalizedEmail),
+                    eq(usersTable.socialClub, player.socialClub),
+                ),
+            )
+
+        if (existingUser.length > 0) {
+            return 'User already exists'
+        }
+
+        const user: typeof usersTable.$inferInsert = {
+            socialClub: player.socialClub,
+            password: md5(password), // we can use md5 for simplicity, but in production you should use more secure hashing algorithms
+            email: normalizedEmail,
+            login: normalizedLogin,
+        }
+
+        await db.insert(usersTable).values(user)
+    } catch (e) {
+        console.log(e)
+        return 'Something went wrong'
+    }
+
+    console.log('User registered:', player.socialClub)
+
+    return 'User created successfully'
 })
 
-fw.event.register('customServerEvent', async ([player, msg]) => {
-    fw.system.log.info(player.socialClub + ' ' + msg)
+fw.event.register(AuthEvent.LOGIN, async (player, [data]) => {
+    const { login, password } = data
+    const normalizedLogin = login.toLowerCase()
 
-    const resFromCef = await fw.player.triggerBrowser(
-        player,
-        'customCefEvent',
-        ['from server'],
-    )
-    fw.system.log.info(player.socialClub + ' ' + resFromCef)
+    console.log('Login data', data)
 
-    return 'from server'
+    try {
+        const users = await db
+            .select()
+            .from(usersTable)
+            .where(eq(usersTable.login, normalizedLogin))
+
+        if (users.length === 0) {
+            return 'Invalid credentials'
+        }
+
+        const user = users[0]
+
+        if (user.password !== md5(password)) {
+            return 'Invalid credentials'
+        }
+
+        if (user.socialClub !== player.socialClub) {
+            return 'Invalid credentials'
+        }
+
+        console.log('User logged in:', user, player.socialClub)
+
+        // Auth success
+        return 'Login successful'
+    } catch (e) {
+        console.error('Login error:', e)
+        return 'Internal server error'
+    }
 })

apps/server/tsconfig.json

@@ -4,7 +4,8 @@
     "resolveJsonModule": true,
     "baseUrl": "./src",
     "types": [
-      "../../node_modules/@ragempcommunity/types-server",
+      "node",
+      "../../node_modules/@ragempcommunity/types-server/",
       "../shared/declarations/rage-fw-shared-types/"
     ]
   }

apps/shared/declarations/rage-fw-shared-types/index.d.ts

@@ -1,11 +1,20 @@
-declare module 'rage-fw-shared-types' {
-    export interface RageFW_ICustomClientEvent {}
+import { AuthEvent } from '../../events'
+
+declare module '@entityseven/rage-fw-shared-types' {
+    export interface RageFW_ICustomClientEvent {
+        customClientEvent(greetings: string): string
+    }
 
     export interface RageFW_ICustomServerEvent {
-        customServerEvent(greetings: string): string
+        [AuthEvent.LOGIN](data: { login: string; password: string }): string
+        [AuthEvent.REGISTER](data: {
+            login: string
+            email: string
+            password: string
+        }): string
     }
 
-    export interface RageFW_ICustomCefEvent {
-        customCefEvent(greetings: string): string
+    export interface RageFW_ICustomBrowserEvent {
+        customBrowserEvent(greetings: string): string
     }
 }

apps/shared/events/index.ts

@@ -0,0 +1,4 @@
+export enum AuthEvent {
+    LOGIN = 'AuthEvent::LOGIN',
+    REGISTER = 'AuthEvent::REGISTER',
+}

apps/shared/package.json

@@ -0,0 +1,7 @@
+{
+  "name": "@shared",
+  "version": "0.1.0",
+  "author": "Entity Seven Group",
+  "license": "CC BY-ND",
+  "description": "Shared types for rage-fw example"
+}

package.json

@@ -1,25 +1,27 @@
 {
   "name": "framework-example",
   "description": "This project is example of RAGE FW usage.",
-  "workspaces": ["apps/*"],
+  "workspaces": [
+    "apps/*"
+  ],
   "scripts": {
     "server:update": "cd server && rage-win64.exe",
-
     "build:client": "cd apps/client && pnpm build",
     "build:server": "cd apps/server && pnpm build",
     "build:cef": "cd apps/cef && pnpm build",
     "build:all": "pnpm build:client && pnpm build:server && pnpm build:cef"
   },
   "devDependencies": {
+    "@entityseven/rage-fw-shared-types": "0.2.0",
     "@ragempcommunity/types-client": "^2.1.8",
     "@ragempcommunity/types-server": "^2.1.8",
     "@ragempcommunity/types-cef": "^2.1.8",
-    "rage-fw-shared-types": "latest",
     "esbuild": "^0.21.5",
     "typescript": "^5.4.5",
     "prettier": "^3.3.2"
   },
   "author": "Entity Seven Group",
-  "license": "CC BY-ND",
-  "version": "0.1.0"
+  "license": "MIT",
+  "version": "0.1.0",
+  "packageManager": "pnpm@10.2.1+sha512.398035c7bd696d0ba0b10a688ed558285329d27ea994804a52bad9167d8e3a72bcb993f9699585d3ca25779ac64949ef422757a6c31102c12ab932e5cbe5cc92"
 }

server/.env

@@ -0,0 +1,5 @@
+POSTGRES_USER="postgres"
+POSTGRES_PASSWORD="mypassword"
+POSTGRES_DB="postgres"
+
+DATABASE_URL="postgres://${POSTGRES_USER}:${POSTGRES_PASSWORD}@localhost:5432/${POSTGRES_DB}"

tsconfig.json

@@ -1,7 +1,7 @@
 {
   "compilerOptions": {
     "target": "ESNext",
-    "lib": ["ESNext", "ES2019"],
+    "lib": ["ESNext", "DOM"],
     "moduleResolution": "node",
     "module": "ESNext",
     "resolveJsonModule": true,