Use cookies for client requests (immich-app#377)

* Use cookie for frontend request

* Remove api helper to use SDK

* Added error handling to status box

* Remove additional places that check for session.user

* Refactor sending password

* prettier clean up

* remove deadcode

* Move all authentication requests to the client

* refactor upload panel to only fetch assets after the upload panel disappear

* Added keydown to remove focus on title change on album viewer

docker/docker-compose.dev.yml

@@ -70,6 +70,8 @@ services:
       - ../web:/usr/src/app
       - /usr/src/app/node_modules
     restart: always
+    depends_on:
+      - immich-server
 
   redis:
     container_name: immich_redis

server/apps/immich/src/middlewares/admin-role-guard.middleware.ts

@@ -16,23 +16,27 @@ export class AdminRolesGuard implements CanActivate {
 
   async canActivate(context: ExecutionContext): Promise<boolean> {
     const request = context.switchToHttp().getRequest();
+    let accessToken = '';
 
     if (request.headers['authorization']) {
-      const bearerToken = request.headers['authorization'].split(' ')[1];
-      const { userId } = await this.jwtService.validateToken(bearerToken);
+      accessToken = request.headers['authorization'].split(' ')[1];
+    } else if (request.cookies['immich_access_token']) {
+      accessToken = request.cookies['immich_access_token'];
+    } else {
+      return false;
+    }
 
-      if (!userId) {
-        return false;
-      }
+    const { userId } = await this.jwtService.validateToken(accessToken);
 
-      const user = await this.userRepository.findOne({ where: { id: userId } });
-      if (!user) {
-        return false;
-      }
+    if (!userId) {
+      return false;
+    }
 
-      return user.isAdmin;
+    const user = await this.userRepository.findOne({ where: { id: userId } });
+    if (!user) {
+      return false;
     }
 
-    return false;
+    return user.isAdmin;
   }
 }

web/postcss.config.cjs

@@ -1,6 +1,6 @@
 module.exports = {
-  plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
-  },
-}
+	plugins: {
+		tailwindcss: {},
+		autoprefixer: {}
+	}
+};

web/src/api/api.ts

@@ -30,6 +30,10 @@ class ImmichApi {
 	public setAccessToken(accessToken: string) {
 		this.config.accessToken = accessToken;
 	}
+
+	public removeAccessToken() {
+		this.config.accessToken = undefined;
+	}
 }
 
 export const api = new ImmichApi();