Feat: Chess Mobile App with authentication

apps/backend/package.json

@@ -14,20 +14,24 @@
   "dependencies": {
     "@repo/db": "*",
     "@types/express-session": "^1.18.0",
+    "base-64": "^1.0.0",
     "cookie-session": "^2.1.0",
     "cors": "^2.8.5",
     "express": "^4.19.2",
     "express-session": "^1.18.0",
+    "express-useragent": "^1.0.15",
     "jsonwebtoken": "^9.0.2",
     "passport": "^0.7.0",
     "passport-facebook": "^3.0.0",
     "passport-github2": "^0.1.12",
     "passport-google-oauth20": "^2.0.0"
   },
   "devDependencies": {
+    "@types/base-64": "^1.0.2",
     "@types/cookie-session": "^2.0.49",
     "@types/cors": "^2.8.17",
     "@types/express": "^4.17.21",
+    "@types/express-useragent": "^1.0.5",
     "@types/jsonwebtoken": "^9.0.6",
     "@types/passport": "^1.0.16"
   }

apps/backend/src/router/auth.ts

@@ -1,9 +1,11 @@
 import { Request, Response, Router } from 'express';
 import passport from 'passport';
 import jwt from 'jsonwebtoken';
+import useragent from 'express-useragent';
 import { db } from '../db';
+import base64 from 'base-64';
 const router = Router();
-
+router.use(useragent.express());
 const CLIENT_URL =
   process.env.AUTH_REDIRECT_URL ?? 'http://localhost:5173/game/random';
 const JWT_SECRET = process.env.JWT_SECRET || 'your_secret_key';
@@ -13,6 +15,7 @@ interface User {
 }
 
 router.get('/refresh', async (req: Request, res: Response) => {
+  console.log(req.headers.cookie);
   if (req.user) {
     const user = req.user as User;
 
@@ -60,11 +63,29 @@ router.get(
 router.get(
   '/google/callback',
   passport.authenticate('google', {
-    successRedirect: CLIENT_URL,
+    // successRedirect: CLIENT_URL,
     failureRedirect: '/login/failed',
   }),
+  (req, res) => {
+    res.redirect('/auth/capture-mode');
+  },
 );
 
+router.get('/capture-mode', (req, res) => {
+  const cookies = req.headers.cookie?.split(';').map((cookie) => cookie.trim());
+  const authCookie = cookies?.find((cookie) =>
+    cookie.startsWith('connect.sid'),
+  );
+  const token = base64.encode(authCookie!);
+  console.log('authCookie', token);
+
+  const ua = req.useragent;
+  if (ua?.isMobile) {
+    res.redirect(`chess-mobile://sign-in?cookie=${token}`);
+  } else {
+    res.redirect(CLIENT_URL);
+  }
+});
 router.get(
   '/github',
   passport.authenticate('github', { scope: ['read:user', 'user:email'] }),
@@ -73,9 +94,12 @@ router.get(
 router.get(
   '/github/callback',
   passport.authenticate('github', {
-    successRedirect: CLIENT_URL,
+    // successRedirect: CLIENT_URL,
     failureRedirect: '/login/failed',
   }),
+  (req, res) => {
+    res.redirect('/auth/capture-mode');
+  },
 );
 
 router.get(

apps/chess-mobile/.env.sample

@@ -0,0 +1,3 @@
+EXPO_USE_METRO_WORKSPACE_ROOT=1
+EXPO_PUBLIC_API_URL=https://staging.example.com
+EXPO_PUBLIC_WS_URL=ws://localhost:8080

apps/chess-mobile/.gitignore

@@ -0,0 +1,24 @@
+node_modules/
+.expo/
+dist/
+npm-debug.*
+*.jks
+*.p8
+*.p12
+*.key
+*.mobileprovision
+*.orig.*
+web-build/
+# expo router
+expo-env.d.ts
+
+
+
+ios
+android
+
+# macOS
+.DS_Store
+
+# Temporary files created by Metro to check the health of the file watcher
+.metro-health-check*

apps/chess-mobile/README.md

@@ -0,0 +1,102 @@
+# Chess Mobile App
+
+**NOTE: This app has only been tested on Android devices.**
+
+## Features
+
+Demo Videos link:
+
+- https://youtu.be/TYqO7j7ydDo
+- https://youtu.be/-6WtZn5Zx0I
+- https://youtube.com/shorts/uG1elnCFi4Q?feature=share
+
+In the Mobile App, Users Can:
+
+1. Sign up using Google or GitHub, similar to the web version.
+2. Store cookies in secure storage and send them with every request for user authentication.
+3. Play chess between mobile-to-mobile or mobile-to-desktop devices.
+4. Note: "Play with Friend" and "Play as Guest" functionalities are currently not implemented.
+
+## Tech Stack
+
+1. Expo
+2. Recoil for state management
+
+## Running the App Locally
+
+### Important Notes
+
+- The app cannot be used with the `EXPO GO` mobile app due to authentication flow and deep-linking requirements.
+- To pass the sign-in screen, a backend and WebSocket server must be running.
+
+### Setup Instructions
+
+1. **Backend and WebSocket Setup:**
+
+   - Mobile devices cannot access servers running on localhost. Instead, you must expose your backend and WebSocket server to the internet. A convenient way to do this is through [ngrok](https://ngrok.com/).
+   - Ngrok allows only one endpoint to be exposed for free. To expose both WebSocket and backend servers, you need a config file with your authToken.
+   - Ngrok also provides one free domain that doesn't change each time you start a server. Claim a free domain for the HTTP server to use the backend.
+
+2. **Ngrok Configuration:**
+
+   - In order to edit the `ngrok.yml` file, run this command,
+     ```bash
+     ngrok config edit
+     ```
+   - Update the `ngrok.yml` file with the following content:
+     ```yml
+     version: '2'
+     authtoken: YOUR_TOKEN_HERE
+     tunnels:
+       chess_server:
+         proto: http
+         addr: 3000
+         domain: dynamic-honeybee-humorous.ngrok-free.app
+       wschess:
+         proto: tcp
+         addr: 8080
+     ```
+     (Replace `YOUR_TOKEN_HERE` with your actual Ngrok auth token.)
+   - Run the following command to start Ngrok:
+     ```bash
+     ngrok start --all
+     ```
+     (Ensure your backend is running on port 3000 and WebSocket on port 8080, adjust if necessary.)
+
+3. **Environment Configuration:**
+
+   - Copy `.env.sample` to `.env`.
+   - Do not change the `EXPO_USE_METRO_WORKSPACE_ROOT` variable, as it is necessary for Expo metro config to work in a monorepo.
+   - Set the backend URL in `EXPO_PUBLIC_API_URL` and WebSocket URL in `EXPO_PUBLIC_WS_URL`.
+
+4. **Running the App:**
+   ```bash
+   # For Android
+   yarn expo run:android
+   # For iOS
+   yarn expo run:ios
+   ```
+   _Note: Use Yarn as the package manager since it is a yarn turborepo._
+
+### Troubleshooting
+
+- **Android Development Build Issues:**
+  - Ensure you have an Android emulator and Java SDK that matches the emulator's requirements. Without this, the React Native app styles may flicker.
+  - Follow the setup guide [here](https://reactnative.dev/docs/set-up-your-environment).
+
+## About the App
+
+- Utilizes an animated splash screen via Lottie.
+- Uses NativeWind for styling, bringing Tailwind CSS to mobile.
+- Context is used for WebSocket to maintain consistent value with a single reference.
+- Most data, including the chess object, is stored in Recoil.
+
+## In Progress
+
+- Implementing "Play with Friends" functionality.
+- Adding WebSocket reconnect logic.
+- Allowing users to join games via links.
+- Implementing user cookie refresh to avoid repeated logins.
+- Adding confetti effects (note: avoid using Lottie for this due to performance).
+- Adding sound effects for moves.
+- Creating a settings page for customizing color, theme, master volume, and avatar.

apps/chess-mobile/app-env.d.ts

@@ -0,0 +1,2 @@
+// @ts-ignore
+/// <reference types="nativewind/types" />

apps/chess-mobile/app.json

@@ -0,0 +1,42 @@
+{
+  "expo": {
+    "name": "chess-mobile",
+    "slug": "chess-mobile",
+    "version": "1.0.0",
+    "scheme": "chess-mobile",
+    "web": {
+      "bundler": "metro",
+      "output": "static",
+      "favicon": "./assets/favicon.png"
+    },
+    "plugins": [
+      "expo-router",
+      "expo-secure-store"
+    ],
+    "experiments": {
+      "typedRoutes": true,
+      "tsconfigPaths": true
+    },
+    "orientation": "portrait",
+    "icon": "./assets/icon.png",
+    "userInterfaceStyle": "dark",
+    "splash": {
+      "image": "./assets/splash.png",
+      "resizeMode": "contain",
+      "backgroundColor": "#020617"
+    },
+    "assetBundlePatterns": [
+      "**/*"
+    ],
+    "ios": {
+      "supportsTablet": true
+    },
+    "android": {
+      "adaptiveIcon": {
+        "foregroundImage": "./assets/adaptive-icon.png",
+        "backgroundColor": "#ffffff"
+      },
+      "package": "com.codex100.chess"
+    }
+  }
+}