making login work for prod

ios/App/Podfile

@@ -15,6 +15,7 @@ def capacitor_pods
   pod 'CapacitorGeolocation', :path => '../../node_modules/@capacitor/geolocation'
   pod 'CapacitorGoogleMaps', :path => '../../node_modules/@capacitor/google-maps'
   pod 'CapacitorHaptics', :path => '../../node_modules/@capacitor/haptics'
+  pod 'CapacitorPreferences', :path => '../../node_modules/@capacitor/preferences'
   pod 'CapacitorSplashScreen', :path => '../../node_modules/@capacitor/splash-screen'
 end
 

ios/App/Podfile.lock

@@ -13,6 +13,8 @@ PODS:
     - GoogleMaps (~> 8.4)
   - CapacitorHaptics (7.0.3):
     - Capacitor
+  - CapacitorPreferences (7.0.4):
+    - Capacitor
   - CapacitorSplashScreen (7.0.3):
     - Capacitor
   - Google-Maps-iOS-Utils (5.0.0):
@@ -31,6 +33,7 @@ DEPENDENCIES:
   - "CapacitorGeolocation (from `../../node_modules/@capacitor/geolocation`)"
   - "CapacitorGoogleMaps (from `../../node_modules/@capacitor/google-maps`)"
   - "CapacitorHaptics (from `../../node_modules/@capacitor/haptics`)"
+  - "CapacitorPreferences (from `../../node_modules/@capacitor/preferences`)"
   - "CapacitorSplashScreen (from `../../node_modules/@capacitor/splash-screen`)"
 
 SPEC REPOS:
@@ -52,6 +55,8 @@ EXTERNAL SOURCES:
     :path: "../../node_modules/@capacitor/google-maps"
   CapacitorHaptics:
     :path: "../../node_modules/@capacitor/haptics"
+  CapacitorPreferences:
+    :path: "../../node_modules/@capacitor/preferences"
   CapacitorSplashScreen:
     :path: "../../node_modules/@capacitor/splash-screen"
 
@@ -62,11 +67,12 @@ SPEC CHECKSUMS:
   CapacitorGeolocation: b96474c3259dd4a294227ea8ec19140b1837cceb
   CapacitorGoogleMaps: 20b5445a532f80dbb120fa99941fd094bcc88af6
   CapacitorHaptics: d17da7dd984cae34111b3f097ccd3e21f9feec62
+  CapacitorPreferences: d82a7e3b95fcab43a553268b803356522910d153
   CapacitorSplashScreen: d06ae8804808e9f649a08e7bb7f283c77b688084
   Google-Maps-iOS-Utils: 66d6de12be1ce6d3742a54661e7a79cb317a9321
   GoogleMaps: 8939898920281c649150e0af74aa291c60f2e77d
   IONGeolocationLib: 20f9d0248a0b5264511fb57a37e25dd2badf797a
 
-PODFILE CHECKSUM: 5fb01647092bb2f97342e333eedc70aeba99b283
+PODFILE CHECKSUM: 4f01ce5c2aa76ddcb757b8ad50c993f40e6aeb33
 
 COCOAPODS: 1.15.2

package.json

@@ -19,6 +19,7 @@
     "@capacitor/google-maps": "^7.2.0",
     "@capacitor/haptics": "^7.0.3",
     "@capacitor/ios": "^7.4.4",
+    "@capacitor/preferences": "^7.0.4",
     "@capacitor/splash-screen": "^7.0.3"
   },
   "devDependencies": {

readme.md

@@ -2,8 +2,7 @@
 
 ```npm run start```
 
-### Build and Run iOS App
-
+### Build and Run (iOS App)
 https://capacitorjs.com/docs/ios#adding-the-ios-platform
 
 To Install:
@@ -16,10 +15,13 @@ npx cap open ios
 To Rerun:
 npm run build && npx cap copy ios
 
-### Build and run (hitting prod server)
+### Build and run (In Browser, hitting prod server)
 vite build        
 npx serve dist
 
+If you need to login again: 
+run "localStorage.clear() in the browser dev tools console and then refresh the page.
+
 ### Architecture
 
 In Development, API routes are routed using the vite.config.js.

src/Home/Login.js

@@ -1,4 +1,5 @@
 const env = import.meta.env
+import { Preferences } from '@capacitor/preferences';
 
 class Login extends Shadow {
     inputStyles(el) {
@@ -32,26 +33,44 @@ class Login extends Shadow {
             form(() => {
                 input("Email", "70vw")
                     .attr({name: "email", type: "email"})
-                    .margin(1, em)
-                    .padding(1, em)
+                    .margin(1, em).padding(1, em)
                     .styles(this.inputStyles)
                 input("Password", "70vw")
                     .attr({name: "password", type: "password"})
-                    .margin(1, em)
-                    .padding(1, em)
+                    .margin(1, em).padding(1, em)
                     .styles(this.inputStyles)
                 button("==>")
-                    .margin(1, em)                    
-                    .padding(1, em)
+                    .margin(1, em).padding(1, em)
                     .fontSize(0.9, rem)
                     .borderRadius(12, px)
                     .background("var(--accent)")
                     .color("var(--text)")
                     .border("1px solid var(--accent)")
             })
-            .attr({action: `${env.VITE_API_URL}/login`, method: "POST"})
             .x(50, vw).y(50, vh)
             .center()
+            .onSubmit(async (e) => {
+                e.preventDefault();
+                const data = new FormData(e.target);
+                
+                const res = await fetch(`${env.VITE_API_URL}/login`, {
+                    method: "POST",
+                    headers: { "Content-Type": "application/json", "X-Client": "mobile" },
+                    body: JSON.stringify({
+                        email: data.get("email"),
+                        password: data.get("password")
+                    })
+                });
+
+                if (res.ok) {
+                    const { token } = await res.json();
+                    await Preferences.set({ key: 'auth_token', value: token });
+                    global.onLogin();
+                } else {
+                    const { error } = await res.json();
+                    console.error(error)
+                }
+            })
         })
         .background("var(--main)")
         .width(100, vw)

src/_/code/ws/Connection.js

@@ -1,3 +1,6 @@
+import { Preferences } from '@capacitor/preferences';
+const env = import.meta.env
+
 class Connection {
     connectionTries = 0;
     ws;
@@ -8,10 +11,14 @@ class Connection {
     }
 
     init = async () => {
+        const { value: token } = await Preferences.get({ key: 'auth_token' });
         return new Promise((resolve, reject) => {
-            const url = window.location.hostname.includes("local") 
-                ? "ws://" + window.location.host + "/ws"
-                : "wss://" + window.location.hostname + window.location.pathname + "/ws";
+            let url = ""
+            if(env.VITE_API_URL) {
+                url = "wss://" + env.VITE_API_URL.replace(/^https?:\/\//, '') + "/ws" + `?token=${token}`;
+            } else {
+                url = "ws://" + window.location.host + "/ws"
+            }
 
             this.ws = new WebSocket(url);
 

src/index.js

@@ -2,6 +2,8 @@ import Socket from "/_/code/ws/Socket.js"
 import "./Home/Home.js"
 import "./Home/Login.js"
 import "./Home/ConnectionError.js"
+import util from "./util.js"
+
 const env = import.meta.env
 
 let Global = class {
@@ -38,7 +40,6 @@ let Global = class {
     }
 
     onNavigate = async () => {
-
         let selectedNetwork = this.networkFromPath()
 
         if(!selectedNetwork) {
@@ -117,9 +118,8 @@ let Global = class {
     }
 
     async getProfile() {
-        console.log(env)
         try {
-            const res = await fetch(`${env.VITE_API_URL}/profile`, {
+            const res = await util.authFetch(`${env.VITE_API_URL}/profile`, {
                 method: "GET",
                 credentials: "include",
                 headers: {
@@ -142,6 +142,16 @@ let Global = class {
         }
     }
 
+    async onLogin() {
+        if(!this.profile) {
+            await this.getProfile()
+        }
+        await this.Socket.init()
+        await this.onNavigate()
+        Home()
+        // navigateTo("/")
+    }
+
     constructor() {
         window.addEventListener("navigate", this.onNavigate)
 
@@ -151,10 +161,7 @@ let Global = class {
             } else if(status === 500) {
                 ConnectionError()
             } else {
-                console.log("else")
-                await this.Socket.init()
-                await this.onNavigate()
-                Home()
+                this.onLogin()
             }
         })
     }

src/manifest.json

@@ -4,9 +4,9 @@
   "start_url": "index.html",
   "display": "standalone",
   "icons": [{
-    "src": "_/imgs/logo.png",
+    "src": "_/icons/logo.svg",
     "sizes": "512x512",
-    "type": "image/png"
+    "type": "image/svg"
   }],
   "background_color": "#31d53d",
   "theme_color": "#31d53d"

src/util.js

@@ -1,4 +1,19 @@
+import { Preferences } from '@capacitor/preferences';
+
 export default class util {
+    static async authFetch(url, options = {}) {
+        const { value: token } = await Preferences.get({ key: 'auth_token' });
+        
+        return fetch(url, {
+            ...options,
+            headers: {
+                ...options.headers,
+                'Authorization': `Bearer ${token}`,
+                'X-Client': 'mobile'
+            }
+        });
+    }
+
     static cssVariable(value) {
         return getComputedStyle(document.documentElement)
         .getPropertyValue("--" + value)