base auth

.env.example

@@ -2,7 +2,7 @@ TWITCH_CHANNEL_NAME=""
 TWITCH_CHANNEL_ID=""
 
 # Go to your Twitch developer console and create a new application
-TWITCH_CLIENT_ID=""
+PUBLIC_TWITCH_CLIENT_ID=""
 TWITCH_SECRET_ID=""
 
 # Prepare URL and visit https://id.twitch.tv/oauth2/authorize?client_id=CLIENT_ID&redirect_uri=REDIRECT_URI&response_type=code&scope=chat:read+chat:edit+channel:read:redemptions+moderator:manage:announcements

src/lib/components/Header.svelte

@@ -1,6 +1,7 @@
 <script>
     import {page} from "$app/stores";
     import unit from '$lib/assets/website/unit-64.png';
+    import Profile from "$lib/components/Profile.svelte";
     import {DISCORD_SERVER_INVITE_URL} from "$lib/config";
 </script>
 
@@ -26,6 +27,8 @@
             </li>
         </ul>
     </nav>
+
+    <Profile/>
 </header>
 
 <style>

src/lib/components/Profile.svelte

@@ -0,0 +1,32 @@
+<script>
+    import {page} from "$app/stores";
+    import {env} from '$env/dynamic/public';
+    import {SIGNIN_REDIRECT_URL} from "$lib/config";
+
+    let url = new URL("https://id.twitch.tv/oauth2/authorize")
+    url.searchParams.set("client_id", env.PUBLIC_TWITCH_CLIENT_ID)
+    url.searchParams.set("redirect_uri", SIGNIN_REDIRECT_URL)
+    url.searchParams.set("response_type", "token")
+    url.searchParams.set("scope", "chat:read channel:read:redemptions")
+
+    let isSignedIn = !!$page.data.profile
+</script>
+
+{#if isSignedIn}
+    <div>Привет, {$page.data.profile.userName}!</div>
+{:else}
+    <a href={url.href}>Войти</a>
+{/if}
+
+<style>
+    a {
+        padding: 0.5em 1.2em;
+        color: white;
+        background-color: var(--color-twitch);
+        text-decoration: none;
+    }
+
+    a:hover {
+        text-decoration: none;
+    }
+</style>

src/lib/config.ts

@@ -2,6 +2,7 @@ export const DONATE_URL = "https://www.donationalerts.com/r/hmbanan666"
 export const DISCORD_SERVER_INVITE_URL = "https://discord.gg/B6etUajrGZ"
 export const TWITCH_URL = "https://www.twitch.tv/hmbanan666"
 export const GITHUB_REPO_URL = "https://github.com/hmbanan666/chat-game"
+export const SIGNIN_REDIRECT_URL = "http://localhost:5173/sign-in"
 
 export const TWITCH_CHANNEL_REWARDS = {
   add150ViewerPointsId: "d8237822-c943-434f-9d7e-87a9f549f4c4",

src/routes/+layout.server.ts

@@ -0,0 +1,16 @@
+import type { LayoutServerLoad } from "./$types"
+
+export const load = (async ({ cookies }) => {
+  const user = cookies.get("chat-game-twitch-access-token")
+  if (!user) {
+    return {
+      profile: null
+    }
+  }
+
+  return {
+    profile: {
+      userName: "123"
+    }
+  }
+}) satisfies LayoutServerLoad

src/routes/+layout.svelte

@@ -1,7 +1,7 @@
-<script>
-    import Footer from "$lib/components/Footer.svelte";
-    import Header from "$lib/components/Header.svelte"
-    import "./styles.css"
+<script lang="ts">
+  import Footer from "$lib/components/Footer.svelte";
+  import Header from "$lib/components/Header.svelte"
+  import "./styles.css"
 </script>
 
 <div class="app">
@@ -23,5 +23,6 @@
 
     main {
         width: 100%;
+        min-height: 80vh;
     }
 </style>

src/routes/+page.server.ts

@@ -4,8 +4,8 @@ import { db } from "$lib/server/db/db.client"
 export const prerender = false
 export const ssr = true
 
-export const load: PageServerLoad = async () => {
+export const load = (async () => {
   return {
     playersCount: await db.player.count()
   }
-}
+}) satisfies PageServerLoad

src/routes/+page.svelte

@@ -7,14 +7,14 @@
 </script>
 
 <svelte:head>
-    <title>Интерактивная игра-чат для Twitch</title>
+    <title>Интерактивная чат-игра для Twitch</title>
     <meta name="description" content="Стример играет вместе со своей аудиторией. Либо он делает
         перерыв, пока зрители..."/>
 </svelte:head>
 
 <section class="hero">
     <h1>
-        Интерактивная игра-чат для Twitch
+        Интерактивная чат-игра для Twitch
     </h1>
     <h2>Группа игроков сопровождает Машину из точки А в точку Б, не зная, доберутся ли. Зрители могут использовать
         "!команды", которые запускают динамичные действия.</h2>
@@ -28,9 +28,9 @@
 
 <section>
     <p>Стример играет вместе со своей аудиторией. Либо он делает
-        перерыв, пока зрители...</p>
-    <p>За все время создано {data.playersCount} юнитов. Присоединяйся <a href={TWITCH_URL} target="_blank"
-                                                                         class="twitch-link">на активном
+        перерыв, пока зрители развлекаются или...</p>
+    <p class="mt-2">За все время создано {data.playersCount} юнитов. Присоединяйся <a href={TWITCH_URL} target="_blank"
+                                                                                      class="twitch-link">на активном
         стриме</a>!</p>
 </section>
 
@@ -83,4 +83,8 @@
         width: 60vw;
         max-width: fit-content;
     }
+
+    .mt-2 {
+        margin-top: 1em;
+    }
 </style>

src/routes/auth/profile/+server.ts

@@ -0,0 +1,15 @@
+import { json, error } from '@sveltejs/kit';
+import type { RequestHandler } from './$types';
+
+export const GET: RequestHandler = async ({ cookies }) => {
+  const user = cookies.get("chat-game-twitch-access-token")
+  if (!user) {
+    return error(401)
+  }
+
+  return json({
+    profile: {
+      userName: "123"
+    }
+  })
+};

src/routes/auth/sign-in/+page.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+  import { page } from "$app/stores";
+
+  if ($page.url.hash) {
+    const hash = $page.url.hash.split("#")[1]
+
+    void fetch('/auth/sign-in', {
+      method: 'POST',
+      body: JSON.stringify({ hash }),
+      headers: {
+        'content-type': 'application/json',
+      },
+    }).then(res => res.ok && location.assign("/"))
+  }
+</script>
+
+<div>
+    Sign In
+</div>

src/routes/auth/sign-in/+server.ts

@@ -0,0 +1,24 @@
+import { json } from '@sveltejs/kit';
+import type { RequestHandler } from './$types';
+
+export const POST: RequestHandler = async ({ request, cookies }) => {
+  const data = await request.json()
+  if (!data?.hash) {
+    return json({
+      ok: false
+    })
+  }
+
+  const items = new URLSearchParams(data.hash);
+
+  if (items.has("access_token")) {
+    const accessToken = items.get("access_token")
+    if (accessToken) {
+      cookies.set("chat-game-twitch-access-token", accessToken, { path: "/" })
+    }
+  }
+
+  return json({
+    ok: true
+  })
+};

vite.config.ts

@@ -2,5 +2,5 @@ import { sveltekit } from '@sveltejs/kit/vite';
 import { defineConfig } from 'vite';
 
 export default defineConfig({
-	plugins: [sveltekit()]
+  plugins: [sveltekit()]
 });