Configure app and cookies for deployment on Azure

README.md

@@ -12,7 +12,7 @@ Requirements:
 
 Set up an app registered at <https://developer.spotify.com/dashboard>
 
-Set a Redirect URL for `http://localhost:1234`.
+Set a Redirect URL for `http://localhost:8080`.
 
 Create a `.env` file in the `backend` folder based on `.env.template`, and set the appropriate missing variables using those from the Spotify dashboard.
 
@@ -34,12 +34,11 @@ From the frontend directory, build the backend in development mode with `docker
 
 From the backend directory, build the frontend in development mode with `docker build --target development --tag frontend:dev .`
 
-
 Build backend tests docker image with `docker build --target test --tag backend:test ./backend/`
 
 Run backend in development mode from the backend folder with `docker run --env-file .env -p 5000:5000 --mount "type=bind,source=$(pwd)/src,target=/backend/src" backend:dev`
 
-Run frontend in development mode from the frontend folderwith `docker run -it --init --env-file .env -p 1234:1234 --mount "type=bind,source=$(pwd)/src,target=/frontend/src" frontend:dev` (use --entrypoint /bin/bash for debugging)
+Run frontend in development mode from the frontend folderwith `docker run -it --init --env-file .env -p 8080:8080 --mount "type=bind,source=$(pwd)/src,target=/frontend/src" frontend:dev` (use --entrypoint /bin/bash for debugging)
 
 ## Provisioning VMs with Ansible
 

ansible/ansible-playbook.yml

@@ -2,110 +2,110 @@
   hosts: managed-nodes
   remote_user: ec2-user
   vars:
-    frontend_url: "http://{{ inventory_hostname }}:1234"
-    backend_url: "http://{{ inventory_hostname }}:5000"
+      frontend_url: "http://{{ inventory_hostname }}:8080"
+      backend_url: "http://{{ inventory_hostname }}:5000"
   vars_files:
-    - .ansible-secrets.yml
+      - .ansible-secrets.yml
 
   tasks:
-    - name: Install Git
-      yum:
-        name: "git"
-        state: "present"
-        update_cache: yes
-      become: yes # Installing git must be run as the root user
-
-    - name: Install Python
-      yum:
-        name: "python3.11"
-        state: "present"
-        update_cache: yes
-      become: yes # Installing python must be run as the root user
-
-    - name: Install Node
-      yum:
-        name: "nodejs"
-        state: "present"
-        update_cache: yes
-      become: yes # Installing node must be run as the root user
-
-    - name: Install Poetry
-      shell:
-        cmd: "curl -sSL https://install.python-poetry.org | python3.11 -"
-        creates: "/home/ec2-user/.local/bin/poetry"
-
-    - name: Create folder for Playlist Manager
-      file:
-        path: /opt/playlist-manager
-        state: directory
-        owner: "ec2-user"
-      become: yes
-
-    - name: Clone Playlist Manager
-      git:
-        repo: "https://github.com/CalPinSW/playlist-manager.git"
-        version: "main"
-        dest: "/opt/playlist-manager"
-        force: true
-
-    - name: Install Project Backend Dependencies
-      shell:
-        chdir: "/opt/playlist-manager/backend"
-        cmd: "poetry env use python3.11; poetry install"
-
-    - name: Install Project Frontend Dependencies
-      shell:
-        chdir: "/opt/playlist-manager/frontend"
-        cmd: "npm install"
-
-    - name: Fetch backend environment template
-      run_once: yes
-      fetch:
-        src: /opt/playlist-manager/backend/.env.j2
-        dest: /tmp/backend/.env.j2
-        flat: yes
-
-    - name: Fetch frontend environment template
-      run_once: yes
-      fetch:
-        src: /opt/playlist-manager/frontend/.env.j2
-        dest: /tmp/frontend/.env.j2
-        flat: yes
-
-    - name: Setup backend environment variables
-      template:
-        src: /tmp/backend/.env.j2
-        dest: /opt/playlist-manager/backend/.env
-
-    - name: Setup frontend environment variables
-      template:
-        src: /tmp/frontend/.env.j2
-        dest: /opt/playlist-manager/frontend/.env
-
-    - name: Add backend service to systemd
-      copy:
-        src: /opt/playlist-manager/ansible/resources/playlist-manager-backend.service
-        dest: /etc/systemd/system/playlist-manager-backend.service
-        remote_src: yes
-      become: yes
-
-    - name: Add frontend service to systemd
-      copy:
-        src: /opt/playlist-manager/ansible/resources/playlist-manager-frontend.service
-        dest: /etc/systemd/system/playlist-manager-frontend.service
-        remote_src: yes
-      become: yes
-
-    - name: Start Playlist Manager Frontend
-      systemd:
-        name: "playlist-manager-frontend.service"
-        daemon_reload: yes
-        state: "restarted"
-      become: yes
-
-    - name: Start Playlist Manager Backend
-      systemd:
-        name: "playlist-manager-backend.service"
-        daemon_reload: yes
-        state: "restarted"
-      become: yes
+      - name: Install Git
+        yum:
+            name: "git"
+            state: "present"
+            update_cache: yes
+        become: yes # Installing git must be run as the root user
+
+      - name: Install Python
+        yum:
+            name: "python3.11"
+            state: "present"
+            update_cache: yes
+        become: yes # Installing python must be run as the root user
+
+      - name: Install Node
+        yum:
+            name: "nodejs"
+            state: "present"
+            update_cache: yes
+        become: yes # Installing node must be run as the root user
+
+      - name: Install Poetry
+        shell:
+            cmd: "curl -sSL https://install.python-poetry.org | python3.11 -"
+            creates: "/home/ec2-user/.local/bin/poetry"
+
+      - name: Create folder for Playlist Manager
+        file:
+            path: /opt/playlist-manager
+            state: directory
+            owner: "ec2-user"
+        become: yes
+
+      - name: Clone Playlist Manager
+        git:
+            repo: "https://github.com/CalPinSW/playlist-manager.git"
+            version: "main"
+            dest: "/opt/playlist-manager"
+            force: true
+
+      - name: Install Project Backend Dependencies
+        shell:
+            chdir: "/opt/playlist-manager/backend"
+            cmd: "poetry env use python3.11; poetry install"
+
+      - name: Install Project Frontend Dependencies
+        shell:
+            chdir: "/opt/playlist-manager/frontend"
+            cmd: "npm install"
+
+      - name: Fetch backend environment template
+        run_once: yes
+        fetch:
+            src: /opt/playlist-manager/backend/.env.j2
+            dest: /tmp/backend/.env.j2
+            flat: yes
+
+      - name: Fetch frontend environment template
+        run_once: yes
+        fetch:
+            src: /opt/playlist-manager/frontend/.env.j2
+            dest: /tmp/frontend/.env.j2
+            flat: yes
+
+      - name: Setup backend environment variables
+        template:
+            src: /tmp/backend/.env.j2
+            dest: /opt/playlist-manager/backend/.env
+
+      - name: Setup frontend environment variables
+        template:
+            src: /tmp/frontend/.env.j2
+            dest: /opt/playlist-manager/frontend/.env
+
+      - name: Add backend service to systemd
+        copy:
+            src: /opt/playlist-manager/ansible/resources/playlist-manager-backend.service
+            dest: /etc/systemd/system/playlist-manager-backend.service
+            remote_src: yes
+        become: yes
+
+      - name: Add frontend service to systemd
+        copy:
+            src: /opt/playlist-manager/ansible/resources/playlist-manager-frontend.service
+            dest: /etc/systemd/system/playlist-manager-frontend.service
+            remote_src: yes
+        become: yes
+
+      - name: Start Playlist Manager Frontend
+        systemd:
+            name: "playlist-manager-frontend.service"
+            daemon_reload: yes
+            state: "restarted"
+        become: yes
+
+      - name: Start Playlist Manager Backend
+        systemd:
+            name: "playlist-manager-backend.service"
+            daemon_reload: yes
+            state: "restarted"
+        become: yes

backend/.env.template

@@ -2,7 +2,7 @@
 # Needed because of the presence of the "src" folder
 FLASK_APP="src/app"
 BACKEND_URL=http://localhost:5000
-FRONTEND_URL=http://localhost:1234
+FRONTEND_URL=http://localhost:8080
 
 # Turn on debug mode (which enables reloading on code changes and the interactive debugger: https://flask.palletsprojects.com/en/2.3.x/config/#DEBUG)
 FLASK_DEBUG=true

backend/.env.test

@@ -2,7 +2,7 @@
 # Needed because of the presence of the "src" folder
 FLASK_APP="src/app"
 BACKEND_URL=http://localhost:5000
-FRONTEND_URL=http://localhost:1234
+FRONTEND_URL=http://localhost:8080
 
 # Turn on debug mode (which enables reloading on code changes and the interactive debugger: https://flask.palletsprojects.com/en/2.3.x/config/#DEBUG)
 FLASK_DEBUG=true

backend/Dockerfile

@@ -1,4 +1,4 @@
-FROM python:3.10 AS os-base
+FROM --platform=linux/amd64 python:3.10 AS os-base
 
 RUN curl -sSL https://install.python-poetry.org | python3 -
 ENV PATH="/root/.local/bin:$PATH"

backend/src/controllers/auth.py

@@ -1,6 +1,6 @@
 from urllib.parse import urlencode
 from uuid import uuid4
-from flask import Blueprint, redirect, request, session
+from flask import Blueprint, make_response, redirect, request, session
 from src.spotify import SpotifyClient
 
 
@@ -19,9 +19,10 @@ def login():
     @auth_controller.route("get-user-code")
     def auth_redirect():
         code = request.args.get("code")
-        state = request.args.get("state")
-        if state != session["SpotifyState"]:
-            return redirect("/#" + urlencode({"error": "state_mismatch"}))
+        # state = request.args.get("state")
+        # test = session["SpotifyState"]
+        # if state != test:
+        #     return make_response({"error": test}, 401)
         return spotify.request_access_token(code=code)
 
     @auth_controller.route("refresh-user-code")

backend/src/spotify.py

@@ -94,8 +94,10 @@ def refresh_access_token(self, refresh_token):
         user_info = self.get_current_user(access_token)
 
         resp = make_response()
-        resp.set_cookie("spotify_access_token", access_token)
-        resp.set_cookie("user_id", user_info.id)
+        resp.set_cookie(
+            "spotify_access_token", access_token, samesite="None", secure=True
+        )
+        resp.set_cookie("user_id", user_info.id, samesite="None", secure=True)
         return resp
 
     def request_access_token(self, code):
@@ -116,9 +118,16 @@ def request_access_token(self, code):
         access_token = token_response.access_token
         user_info = self.get_current_user(access_token)
         resp = make_response(redirect(f"{Config().FRONTEND_URL}/"))
-        resp.set_cookie("spotify_access_token", access_token)
-        resp.set_cookie("spotify_refresh_token", token_response.refresh_token)
-        resp.set_cookie("user_id", user_info.id)
+        resp.set_cookie(
+            "spotify_access_token", access_token, samesite="None", secure=True
+        )
+        resp.set_cookie(
+            "spotify_refresh_token",
+            token_response.refresh_token,
+            samesite="None",
+            secure=True,
+        )
+        resp.set_cookie("user_id", user_info.id, samesite="None", secure=True)
         return resp
 
     def get_playlists(

compose.yaml

@@ -6,7 +6,7 @@ services:
             dockerfile: Dockerfile
             target: development
         ports:
-            - "1234:1234"
+            - "8080:8080"
         env_file:
             - path: frontend/.env
               required: true

frontend/.env.template

@@ -1,2 +1,2 @@
 BACKEND_URL=http://localhost:5000
-FRONTEND_URL=http://localhost:1234
+FRONTEND_URL=http://localhost:8080

frontend/Dockerfile

@@ -1,4 +1,4 @@
-FROM node:18 AS base
+FROM --platform=linux/amd64 node:18 AS base
 
 WORKDIR /frontend
 
@@ -11,7 +11,7 @@ COPY build build
 COPY public public
 COPY tailwind.config.ts ./
 
-EXPOSE 1234
+EXPOSE 8080
 
 FROM base AS production
 

frontend/README.md

@@ -47,11 +47,11 @@ You should see output similar to the following:
 > [email protected] dev:esbuild
 > node build/server.mjs
 
-frontend running on http://127.0.0.1:1234
+frontend running on http://127.0.0.1:8080
 
 Rebuilding...
 
 Done in 159ms.
 ```
 
-If the [backend](../backend/README.md) is running you should be able to access the site at http://localhost:1234
+If the [backend](../backend/README.md) is running you should be able to access the site at http://localhost:8080

frontend/build/build-common.mjs

@@ -2,21 +2,23 @@ import { config } from "dotenv";
 config();
 
 const define = {
-  "process.env.NODE_ENV": JSON.stringify(process.env.NODE_ENV || "development"),
-  "process.env.FRONTEND_URL": JSON.stringify(
-    process.env.FRONTEND_URL || "http://localhost:1234"
-  ),
-  "process.env.BACKEND_URL": JSON.stringify(
-    process.env.BACKEND_URL || "http://localhost:5000"
-  ),
+	"process.env.NODE_ENV": JSON.stringify(
+		process.env.NODE_ENV || "development",
+	),
+	"process.env.FRONTEND_URL": JSON.stringify(
+		process.env.FRONTEND_URL || "http://localhost:8080",
+	),
+	"process.env.BACKEND_URL": JSON.stringify(
+		process.env.BACKEND_URL || "http://localhost:5000",
+	),
 };
 
 export const buildOptions = {
-  bundle: true,
-  platform: "node",
-  define,
-  entryPoints: ["src/app.tsx"],
-  outfile: "public/bundle.js",
+	bundle: true,
+	platform: "node",
+	define,
+	entryPoints: ["src/app.tsx"],
+	outfile: "public/bundle.js",
 };
 
 export const devBuildOptions = Object.assign({}, buildOptions);