Improve Discord Auth URI generation (#72)

* Small changes to improve initial local development setup for contributors (#65) * Small changes to improve local development setup for contributors * Update README for local setup improvements * Suggested change to point 5. README.md Co-authored-by: Olivier Bourgeois <[email protected]> * Suggested change to README env var Co-authored-by: Olivier Bourgeois <[email protected]> * renamed method URL to URI * Sorted out env vars based on review * Remove unnecessary step in README per review * Update README.md * discard changes to README and auth.go superceeded by bourgeoisor's * rename discordauthURI to correct camelcase * Fix incorrect Discord client ID --------- Co-authored-by: Olivier Bourgeois <[email protected]> * Clean up Discord auth URI method --------- Co-authored-by: Paulo Santos <[email protected]>
bourgeoisor · Mar 30, 2024 · 1136cb9 · 1136cb9
1 parent b55832a
commit 1136cb9
Show file tree

Hide file tree

Showing 13 changed files with 55 additions and 43 deletions.
diff --git a/.github/workflows/gh-pages-deploy.yaml b/.github/workflows/gh-pages-deploy.yaml
@@ -10,40 +10,43 @@ jobs:
     name: Deploying to GitHub Pages
     runs-on: ubuntu-latest
     steps:
-        - name: Checkout
-          uses: actions/checkout@v4
+      - name: Checkout
+        uses: actions/checkout@v4
 
-        - name: Setup Node
-          uses: actions/setup-node@v4
-          with:
-            node-version: '20'
+      - name: Setup Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: '20'
 
-        - name: Setup git config
-          run: |
-            git config user.name "GitHub Actions Bot"
-            git config user.email "<>"
+      - name: Setup git config
+        run: |
+          git config user.name "GitHub Actions Bot"
+          git config user.email "<>"
 
-        - name: Install packages
-          run: |
-            cd frontend
-            npm install
-            cd ..
+      - name: Install packages
+        run: |
+          cd frontend
+          npm install
+          cd ..
 
-        - name: Generate build number and date
-          run: |
-            APP_BUILD_NUM=$GITHUB_RUN_NUMBER.$GITHUB_SHA
-            APP_BUILD_DATE=`date`
-            echo "VUE_APP_BUILD_NUM=$APP_BUILD_NUM" > frontend/.env.production
-            echo "VUE_APP_BUILD_DATE=$APP_BUILD_DATE" >> frontend/.env.production
-            echo "VUE_APP_BACKEND_API_URI=https://api.xivtodo.com" >> frontend/.env.production
-            echo "VUE_APP_DISCORD_AUTH_URI=https://discord.com/api/oauth2/authorize?response_type=code&client_id=933567168912719923&scope=identify&redirect_uri=https%3A%2F%2Fxivtodo.com%2Fauth&prompt=consent" >> frontend/.env.production
+      - name: Generate build number and date
+        run: |
+          APP_BUILD_NUM=$GITHUB_RUN_NUMBER.$GITHUB_SHA
+          APP_BUILD_DATE=`date`
+          cat << EOF > frontend/.env.production
+            VUE_APP_BUILD_NUM=$APP_BUILD_NUM
+            VUE_APP_BUILD_DATE=$APP_BUILD_DATE
+            VUE_APP_BACKEND_API_URI=https://api.xivtodo.com
+            VUE_APP_DISCORD_CLIENT_ID=933567168912719923
+            VUE_APP_DISCORD_REDIRECT_URI=https://xivtodo.com/auth&prompt=consent
+          EOF
 
-        - name: Deploy to gh-pages
-          run: |
-            git checkout --orphan gh-pages-test
-            cd frontend
-            npm run build
-            cd ..
-            git --work-tree frontend/dist add --all
-            git --work-tree frontend/dist commit -m "Automated dist build"
-            git push origin HEAD:gh-pages --force
+      - name: Deploy to gh-pages
+        run: |
+          git checkout --orphan gh-pages-test
+          cd frontend
+          npm run build
+          cd ..
+          git --work-tree frontend/dist add --all
+          git --work-tree frontend/dist commit -m "Automated dist build"
+          git push origin HEAD:gh-pages --force
diff --git a/frontend/.env b/frontend/.env
@@ -1,4 +1,5 @@
 VUE_APP_BUILD_NUM=local
 VUE_APP_BUILD_DATE=now
 VUE_APP_BACKEND_API_URI=http://localhost:8181
-VUE_APP_DISCORD_AUTH_URI=https://discord.com/api/oauth2/authorize?response_type=code&client_id=933567168912719923&scope=identify&redirect_uri=http%3A%2F%2Flocalhost%3A8080%2Fauth&prompt=consent
+VUE_APP_DISCORD_CLIENT_ID=933567168912719923
+VUE_APP_DISCORD_REDIRECT_URI=http://localhost:8080/auth
diff --git a/frontend/src/components/TheNavbar.vue b/frontend/src/components/TheNavbar.vue
@@ -189,7 +189,7 @@
               </ul>
             </li>
             <li v-if="!this.$store.getters.isSignedIn" class="nav-item">
-              <a class="nav-link" :href="this.$store.state.env.VUE_APP_DISCORD_AUTH_URI">
+              <a class="nav-link" :href="this.$store.getters.discordAuthURI">
                 {{ $t("home.signInDiscord") }}
               </a>
             </li>

diff --git a/frontend/src/store/index.js b/frontend/src/store/index.js
@@ -29,6 +29,14 @@ const store = createStore({
     isSignedIn(state) {
       return state.userData != null && state.userData != {};
     },
+    discordAuthURI(state) {
+      return "https://discord.com/api/oauth2/authorize" +
+        "?response_type=code" +
+        "&client_id=" + state.env.VUE_APP_DISCORD_CLIENT_ID +
+        "&scope=identify" +
+        "&redirect_uri=" + encodeURIComponent(state.env.VUE_APP_DISCORD_REDIRECT_URI) +
+        "&prompt=consent";
+    },
     discordUser(state) {
       return state.userData?.discordUser || {};
     },

diff --git a/frontend/src/views/Achievements.vue b/frontend/src/views/Achievements.vue
@@ -20,7 +20,7 @@
     <AlertMsg
       v-if="!this.$store.getters.isSignedIn"
       type="normal"
-      :msg="$t('message.notSignedIn', { url: this.$store.state.env.VUE_APP_DISCORD_AUTH_URI })"
+      :msg="$t('message.notSignedIn', { url: this.$store.getters.discordAuthURI })"
     />
     <AlertMsg v-else-if="!this.$store.getters.hasCharacter" type="normal" :msg="$t('message.noCharacters')" />
     <hr />

diff --git a/frontend/src/views/Challenges.vue b/frontend/src/views/Challenges.vue
@@ -16,7 +16,7 @@
     <AlertMsg
       v-if="!this.$store.getters.isSignedIn"
       type="normal"
-      :msg="$t('message.notSignedIn', { url: this.$store.state.env.VUE_APP_DISCORD_AUTH_URI })"
+      :msg="$t('message.notSignedIn', { url: this.$store.getters.discordAuthURI })"
     />
     <AlertMsg v-else-if="!this.$store.getters.hasCharacter" type="normal" :msg="$t('message.noCharacters')" />
     <hr />

diff --git a/frontend/src/views/Checklist.vue b/frontend/src/views/Checklist.vue
@@ -24,7 +24,7 @@
     <AlertMsg
       v-if="!this.$store.getters.isSignedIn"
       type="normal"
-      :msg="$t('message.notSignedIn', { url: this.$store.state.env.VUE_APP_DISCORD_AUTH_URI })"
+      :msg="$t('message.notSignedIn', { url: this.$store.getters.discordAuthURI })"
     />
     <AlertMsg v-else-if="!this.$store.getters.hasCharacter" type="normal" :msg="$t('message.noCharacters')" />
     <hr />

diff --git a/frontend/src/views/Encounters.vue b/frontend/src/views/Encounters.vue
@@ -22,7 +22,7 @@
     <AlertMsg
       v-if="!this.$store.getters.isSignedIn"
       type="normal"
-      :msg="$t('message.notSignedIn', { url: this.$store.state.env.VUE_APP_DISCORD_AUTH_URI })"
+      :msg="$t('message.notSignedIn', { url: this.$store.getters.discordAuthURI })"
     />
     <AlertMsg v-else-if="!this.$store.getters.hasCharacter" type="normal" :msg="$t('message.noCharacters')" />
     <hr />

diff --git a/frontend/src/views/Home.vue b/frontend/src/views/Home.vue
@@ -14,7 +14,7 @@
                 {{ $t("home.addCharacter") }}
               </button>
             </router-link>
-            <a v-else :href="this.$store.state.env.VUE_APP_DISCORD_AUTH_URI">
+            <a v-else :href="this.$store.getters.discordAuthURI">
               <button type="button" class="btn btn-success btn-lg px-4 gap-3">
                 {{ $t("home.signInDiscord") }}
               </button>

diff --git a/frontend/src/views/Minions.vue b/frontend/src/views/Minions.vue
@@ -20,7 +20,7 @@
     <AlertMsg
       v-if="!this.$store.getters.isSignedIn"
       type="normal"
-      :msg="$t('message.notSignedIn', { url: this.$store.state.env.VUE_APP_DISCORD_AUTH_URI })"
+      :msg="$t('message.notSignedIn', { url: this.$store.getters.discordAuthURI })"
     />
     <AlertMsg v-else-if="!this.$store.getters.hasCharacter" type="normal" :msg="$t('message.noCharacters')" />
     <hr />

diff --git a/frontend/src/views/Mounts.vue b/frontend/src/views/Mounts.vue
@@ -20,7 +20,7 @@
     <AlertMsg
       v-if="!this.$store.getters.isSignedIn"
       type="normal"
-      :msg="$t('message.notSignedIn', { url: this.$store.state.env.VUE_APP_DISCORD_AUTH_URI })"
+      :msg="$t('message.notSignedIn', { url: this.$store.getters.discordAuthURI })"
     />
     <AlertMsg v-else-if="!this.$store.getters.hasCharacter" type="normal" :msg="$t('message.noCharacters')" />
     <hr />

diff --git a/frontend/src/views/Questlines.vue b/frontend/src/views/Questlines.vue
@@ -20,7 +20,7 @@
     <AlertMsg
       v-if="!this.$store.getters.isSignedIn"
       type="normal"
-      :msg="$t('message.notSignedIn', { url: this.$store.state.env.VUE_APP_DISCORD_AUTH_URI })"
+      :msg="$t('message.notSignedIn', { url: this.$store.getters.discordAuthURI })"
     />
     <AlertMsg v-else-if="!this.$store.getters.hasCharacter" type="normal" :msg="$t('message.noCharacters')" />
     <hr />

diff --git a/frontend/src/views/Titles.vue b/frontend/src/views/Titles.vue
@@ -20,7 +20,7 @@
     <AlertMsg
       v-if="!this.$store.getters.isSignedIn"
       type="normal"
-      :msg="$t('message.notSignedIn', { url: this.$store.state.env.VUE_APP_DISCORD_AUTH_URI })"
+      :msg="$t('message.notSignedIn', { url: this.$store.getters.discordAuthURI })"
     />
     <AlertMsg v-else-if="!this.$store.getters.hasCharacter" type="normal" :msg="$t('message.noCharacters')" />
     <hr />