.

Author: as7ar

astro.config.mjs

@@ -4,6 +4,7 @@ import { defineConfig } from 'astro/config';
 // https://astro.build/config
 export default defineConfig({
     site: 'https://grassproject.github.io',
+    output: 'server',
     server: {
         allowedHosts: ['0.tcp.jp.ngrok.io']
     }

public/script/CookieManager.js

@@ -0,0 +1,20 @@
+export function getCookie(name) {
+    const nameEQ = name + "=";
+    const ca = document.cookie.split(';');
+    for (let i = 0; i < ca.length; i++) {
+        let c = ca[i].trim();
+        if (c.indexOf(nameEQ) === 0) {
+            return decodeURIComponent(c.substring(nameEQ.length, c.length));
+        }
+    }
+    return null;
+}
+
+export function setCookie(name, value) {
+    const cookieValue = typeof value === 'object' ? JSON.stringify(value) : value;
+    document.cookie = `${name}=${encodeURIComponent(cookieValue)};path=/`;
+}
+
+export function removeCookie(name) {
+    document.cookie = name + "=; Max-Age=0; path=/";
+}

src/script/DiscordUser.ts public/script/DiscordUser.jssrc/script/DiscordUser.ts renamed to public/script/DiscordUser.js

@@ -4,7 +4,7 @@ import qs from 'qs';
 const clientId = '1358603949015564449';
 const clientSecret = 's8Tf9GpGwOHxaDcqXaF8NnZzF_GEkduL';
 
-export async function getDiscordUser(code: string, redirectUri: string) {
+export async function getDiscordUser(code, redirectUri) {
     try {
         const tokenRes = await axios.post(
             'https://discord.com/api/v10/oauth2/token',
@@ -27,8 +27,10 @@ export async function getDiscordUser(code: string, redirectUri: string) {
         });
 
         return userRes.data;
-    } catch (err: any) {
+    } catch (err) {
         console.error(err.response?.data || err.message);
         throw new Error(err.message || 'Discord API Error');
     }
-}
+}
+
+module.exports = { getDiscordUser };

public/script/consts.ts

@@ -0,0 +1,2 @@
+const url= 'https://grassproject.github.io';
+export default url

src/components/BaseFooter.astro

@@ -19,7 +19,7 @@
     </div>
     &copy; 2025 GrassProject. ALL RIGHT RESERVED
 </footer>
-<style>
+<style is:global>
     .social-icons {
         display: flex;
         gap: 1rem;
@@ -38,6 +38,7 @@
     }
 
     footer {
+        text-align: center;
         margin-top: 2rem;
         color: #c9f1a4;
         padding: 1.2rem 0;

src/components/page/CallBackView.astro

@@ -0,0 +1,61 @@
+---
+import url from '../../../public/script/consts.ts'
+
+const redirectUri = `${url}/callback`;
+---
+
+
+<div class="logging" id="login-container">
+    <h1 id="logging-in" data-redirect-uri={redirectUri}>Logging in...</h1>
+</div>
+
+<script type="module">
+    function setCookie(name, value) {
+        const cookieValue = typeof value === 'object' ? JSON.stringify(value) : value;
+        document.cookie = `${name}=${encodeURIComponent(cookieValue)};path=/`;
+    }
+
+    const h1 = document.getElementById("logging-in");
+    const url = h1.dataset.redirectUri;
+    const urlParams = new URLSearchParams(window.location.search);
+    const code = urlParams.get('code') || 'NULL'
+    const redirectUri = `${url}`;
+
+    if (!code || code === 'NULL') {
+        alert('Code Not Received')
+    } else {
+
+        const res = await fetch('/api/discord', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ code, redirectUri }),
+        });
+
+        const user = await res.json();
+
+        if (user.error) {
+            console.error('Discord user fetch failed:', user.error);
+            alert('Failed to fetch Discord user info');
+        } else {
+            console.log(user);
+            setCookie('user', {
+                id: user.id,
+                username: user.username,
+                global_name: user.global_name,
+                email: user.email,
+                locale: user.locale,
+                banner_color: user.banner_color
+            });
+            setCookie('isLoggedIn', 'true');
+
+            window.location.href = '/';
+        }
+    }
+</script>
+<style>
+    .logging {
+        text-align: center;
+        margin-top: 12rem;
+        margin-bottom: 6rem;
+    }
+</style>

src/consts.ts

@@ -2,6 +2,12 @@
 import BaseHeader from "../components/BaseHeader.astro";
 import Navigator from "../components/Navigator.astro";
 import BaseFooter from "../components/BaseFooter.astro";
+import url from "../../public/script/consts.ts";
+
+const redirectUri = `${url}/callback`;
+const discordLoginUrl = `https://discord.com/oauth2/authorize?client_id=1358603949015564449&response_type=code&redirect_uri=${
+    encodeURIComponent(redirectUri)
+}&scope=email+identify+openid`;
 ---
 
 <html lang="ko">
@@ -15,25 +21,19 @@ import BaseFooter from "../components/BaseFooter.astro";
 
     <Navigator/>
 
-    <div class="login" id="login-container"></div>
+    <div class="login" id="login-container" data-discord-login-url={discordLoginUrl}></div>
 
     <BaseFooter/>
 </div>
 
-<script type="module">
-    import Cookies from "js-cookie";
-    import {url} from "../consts.ts";
 
-    const redirectUri = `${url}/callback`;
-    const discordLoginUrl = `https://discord.com/oauth2/authorize?client_id=1358603949015564449&response_type=code&redirect_uri=${
-        encodeURIComponent(redirectUri
-    )}&scope=email+identify+openid`;
+<script type="module">
+    import {getCookie, removeCookie} from "/script/CookieManager.js";
 
     const container = document.getElementById("login-container");
-    const storedUser = Cookies.get("user");
-    const storedLoggedIn = Cookies.get("isLoggedIn");
-
-    // if (!container || !storedUser || !storedLoggedIn) return;
+    const discordLoginUrl = container.dataset.discordLoginUrl;
+    const storedUser = getCookie('user')
+    const storedLoggedIn = getCookie('isLoggedIn')
 
     if (storedUser && storedLoggedIn === "true") {
         const user = JSON.parse(storedUser);
@@ -43,26 +43,24 @@ import BaseFooter from "../components/BaseFooter.astro";
           <button id="logout-btn" class="round-btn logout-btn">
             <span class="btn-text">Logout</span>
           </button>
-        </div>
-      `;
+        </div>`;
 
         document.getElementById("logout-btn")?.addEventListener("click", () => {
-            Cookies.remove("user");
-            Cookies.remove("isLoggedIn");
+            removeCookie('user');
+            removeCookie('isLoggedIn')
             location.reload();
         });
     } else {
         container.innerHTML = `
         <a href="${discordLoginUrl}" class="round-btn login-btn">
           <span class="btn-text">Login</span>
-        </a>
-      `;
+        </a>`;
     }
 </script>
 </body>
 </html>
 
-<style>
+<style is:global>
     .container {
         min-height: 100vh;
         justify-content: space-between;
@@ -78,7 +76,7 @@ import BaseFooter from "../components/BaseFooter.astro";
 
     .user-info {
         display: flex;
-        flex-direction: column;
+        flex-direction: row;
         align-items: center;
         gap: 0.5rem;
     }
@@ -88,7 +86,7 @@ import BaseFooter from "../components/BaseFooter.astro";
         transition: opacity 0.3s ease-in-out;
     }
 
-    .user-info:hover .user-text {
+    .user-info:hover ~ .logout-btn {
         opacity: 0;
     }
 
@@ -132,6 +130,5 @@ import BaseFooter from "../components/BaseFooter.astro";
 
     .logout-btn {
         background: #c9f1a4;
-        color: #242424;
     }
 </style>

src/layouts/Layout.astro

@@ -1,7 +1,8 @@
 ---
 
 import Layout from "../layouts/Layout.astro";
-import NotFound from "../components/page/NotFound.astro";---
+import NotFound from "../components/page/NotFound.astro";
+---
 
 <Layout>
     <NotFound/>

src/pages/404.astro

@@ -0,0 +1,56 @@
+export const prerender = false;
+
+import axios from 'axios';
+import qs from 'qs';
+import type {APIRoute} from "astro";
+
+const clientId = '1358603949015564449';
+const clientSecret = 's8Tf9GpGwOHxaDcqXaF8NnZzF_GEkduL';
+
+export const POST: APIRoute = async ({ request }) => {
+    let data;
+    try {
+        data = await request.json();
+    } catch (err) {
+        return new Response(JSON.stringify({ error: 'Invalid JSON' }), { status: 400 });
+    }
+
+    const { code, redirectUri } = data;
+    if (!code || !redirectUri) {
+        return new Response(JSON.stringify({ error: 'Missing code or redirectUri' }), { status: 400 });
+    }
+
+    try {
+        // console.log(`redirect: ${redirectUri}`)
+        const tokenRes = await axios.post(
+            'https://discord.com/api/v10/oauth2/token',
+            qs.stringify({
+                grant_type: 'authorization_code',
+                code,
+                redirect_uri: redirectUri,
+                scope: 'identify email openid',
+            }),
+            {
+                headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
+                auth: { username: clientId, password: clientSecret },
+            }
+        );
+
+        const accessToken = tokenRes.data.access_token;
+
+        const userRes = await axios.get('https://discord.com/api/v10/users/@me', {
+            headers: { Authorization: `Bearer ${accessToken}` },
+        });
+
+        return new Response(JSON.stringify(userRes.data), {
+            status: 200,
+            headers: { 'Content-Type': 'application/json' },
+        });
+    } catch (err: any) {
+        console.error(err.response?.data || err.message);
+        return new Response(
+            JSON.stringify({ error: 'Discord API Error' }),
+            { status: 500 }
+        );
+    }
+};