Add twitch scope selector

server/src/action-utils.js

@@ -74,8 +74,8 @@ async function createRecord(Cache, tableName, records) {
         newRecords.forEach(record => {
             Cache.set(cleanID(record.id), deAirtable(record.fields), { eager: true });
         });
-        console.log(newRecords.length);
-        console.log(newRecords);
+        // console.log(newRecords.length);
+        // console.log(newRecords);
     } catch (e) {
         console.error("Airtable create failed", e);
         return { error: true, errorMessage: e.message };

server/src/routes.js

@@ -308,7 +308,7 @@ module.exports = ({ app, cors, Cache, io }) => {
         if (!TwitchEnvSet) return res.status(503).send({ error: true, message: "Twitch authentication is disabled on the server." });
         let state = createState();
         states[state] = req.params.scopes;
-        res.redirect(`https://id.twitch.tv/oauth2/authorize?client_id=${process.env.TWITCH_CLIENT_ID}&redirect_uri=${process.env.TWITCH_REDIRECT_URI}&response_type=code&scope=${req.params.scopes}&force_verify=true`);
+        res.redirect(`https://id.twitch.tv/oauth2/authorize?client_id=${process.env.TWITCH_CLIENT_ID}&redirect_uri=${process.env.TWITCH_REDIRECT_URI}&response_type=code&scope=${req.params.scopes}&force_verify=true&state=${state}`);
     });
 
 
@@ -332,25 +332,29 @@ module.exports = ({ app, cors, Cache, io }) => {
             if (existingChannel) {
                 airtableResponse = await updateRecord(Cache, "Channels", existingChannel.id, {
                     "Twitch Refresh Token": tokenInfo.accessToken,
-                    "Twitch Scopes": tokenInfo.scopes.join(" "),
+                    "Twitch Scopes": tokenInfo.scope.join(" "),
                     "Channel ID": tokenInfo.userId,
                     "Name": tokenInfo.userName
                 });
+
             } else {
                 airtableResponse = await createRecord(Cache, "Channels", [{
                     "Twitch Refresh Token": tokenInfo.accessToken,
-                    "Twitch Scopes": tokenInfo.scopes.join(" "),
+                    "Twitch Scopes": tokenInfo.scope.join(" "),
                     "Channel ID": tokenInfo.userId,
                     "Name": tokenInfo.userName
                 }]);
             }
 
             // console.log(airtableResponse);
 
-            return res.send("okay thanks");
+            if (airtableResponse.error) {
+                return res.status(400).send({ error: true, errorMessage: airtableResponse.errorMessage });
+            }
+            return res.send("poggers thanks");
         } catch (e) {
             console.error("[Twitch Auth] error", e);
-            res.status(400).send({ error: true, errorMessage: e.message});
+            res.status(400).send({ error: true, errorMessage: e.message });
         }
     });
 

website/src/components/website/TwitchAuthScopeSelector.vue

@@ -0,0 +1,50 @@
+<template>
+    <div class="container">
+        <h1>Give our systems access to a twitch account</h1>
+        <b-form-group label="Enabled features" v-slot="{ ariaDescribedby }">
+            <b-form-checkbox-group
+                id="checkbox-group-1"
+                v-model="selected"
+                :options="options"
+                :aria-describedby="ariaDescribedby"
+                stacked
+            ></b-form-checkbox-group>
+        </b-form-group>
+
+        <a :href="twitchAuthURL" class="btn btn-dark" :class="{'disabled': selected.length === 0}">Authorize</a>
+
+    </div>
+</template>
+
+<script>
+import { BFormCheckboxGroup, BFormGroup } from "bootstrap-vue";
+export default {
+    name: "TwitchAuthScopeSelector",
+    components: {
+        BFormGroup,
+        BFormCheckboxGroup
+    },
+    data: () => ({
+        selected: [], // Must be an array reference!
+        options: [
+            {
+                text: "Predictions (channel:manage:predictions channel:read:predictions)",
+                value: "channel:manage:predictions channel:read:predictions"
+            },
+            {
+                text: "Title/Game (channel:manage:broadcast)",
+                value: "channel:manage:broadcast"
+            },
+            {
+                text: "Ads (channel:edit:commercial)",
+                value: "channel:edit:commercial"
+            }
+        ]
+    }),
+    computed: {
+        twitchAuthURL() {
+            return `${process.env.VUE_APP_DATA_SERVER}/twitch_auth/${this.selected.join(" ")}`;
+        }
+    }
+};
+</script>

website/src/router/default.js

@@ -12,6 +12,7 @@ import SharedRoutes from "@/router/shared-routes";
 import Authenticator from "@/views/Authenticator";
 import Dashboard from "@/views/Dashboard";
 import ProfilePage from "@/views/ProfilePage";
+import TwitchAuthScopeSelector from "@/components/website/TwitchAuthScopeSelector";
 
 export default [
     {
@@ -59,6 +60,10 @@ export default [
                 path: "/auth/discord/return",
                 props: route => ({ code: route.query.code }),
                 component: Authenticator
+            },
+            {
+                path: "/twitch-auth",
+                component: TwitchAuthScopeSelector
             }
         ]
     },