Implement Discord linking

astro.config.mjs

@@ -21,7 +21,11 @@ export default defineConfig({
         optional: true,
         default: 'http://localhost:4321'
       }),
-      WEBHOOK_URL: envField.string({ context: 'server', access: 'secret' })
+      WEBHOOK_URL: envField.string({ context: 'server', access: 'secret' }),
+      DISCORD_OAUTH_ID: envField.string({ context: 'server', access: 'public' }),
+      DISCORD_OAUTH_SECRET: envField.string({ context: 'server', access: 'secret' }),
+      DISCORD_GUILD_ID: envField.string({ context: 'server', access: 'public' }),
+      DISCORD_DONATOR_ID: envField.string({ context: 'server', access: 'public' })
     },
     validateSecrets: true
   },
@@ -53,6 +57,7 @@ export default defineConfig({
     '/game/list': { status: 307, destination: '/maintenance' },
     '/platform/list': { status: 307, destination: '/maintenance' },
     '/platform/[id]': { status: 307, destination: '/maintenance' },
+    '/profile': { status: 307, destination: '/maintenance' },
     '/profile/[username]': { status: 307, destination: '/maintenance' },
     '/series/[slug]': { status: 307, destination: '/maintenance' },
     '/series/list': { status: 307, destination: '/maintenance' },

messages/en.json

@@ -65,5 +65,13 @@
   "flyInc": "Fly.inc",
   "ouoIO": "ouo.io",
   "direct": "Direct",
-	"relatedAlbums": "Related Albums"
+  "relatedAlbums": "Related Albums",
+  "loginDiscord": "Login using Discord",
+  "profile": "Profile",
+  "linkDiscord": "Link Discord account",
+  "loggedInPage": "You need to be logged in to access this page",
+  "alreadyDonator": "You are already a donator!",
+  "discordNeeded": "You need to link your Discord account to access this page",
+  "discordRoleNeeded": "You need the Donator Discord role to access this page",
+  "addedDonator": "Added donator benefits to your account!"
 }

prisma/migrations/20250321172750_fix_verification_table_column/migration.sql

@@ -0,0 +1,2 @@
+-- AlterTable
+ALTER TABLE `verification` MODIFY `value` TEXT NOT NULL;

prisma/schema.prisma

@@ -442,7 +442,7 @@ model session {
 model verification {
   id         String   @id
   identifier String
-  value      String
+  value      String   @db.Text
   expiresAt  DateTime
   createdAt  DateTime
   updatedAt  DateTime

src/auth.ts

@@ -1,6 +1,7 @@
 import { betterAuth } from 'better-auth'
 import { prismaAdapter } from 'better-auth/adapters/prisma'
 import { username, bearer } from 'better-auth/plugins'
+import { DISCORD_OAUTH_ID, DISCORD_OAUTH_SECRET } from 'astro:env/server'
 
 import prismaClient from './utils/prisma-client'
 import { sendEmail } from './utils/email'
@@ -11,6 +12,19 @@ export const auth = betterAuth({
   database: prismaAdapter(prismaClient, { provider: 'mysql' }),
   user: { modelName: 'users' },
   plugins: [username(), bearer()],
+  account: {
+    accountLinking: {
+      enabled: true,
+      allowDifferentEmails: true
+    }
+  },
+  socialProviders: {
+    discord: {
+      clientId: DISCORD_OAUTH_ID,
+      clientSecret: DISCORD_OAUTH_SECRET,
+      scope: ['identify', 'email', 'guilds.members.read']
+    }
+  },
   emailVerification: {
     sendOnSignUp: true,
     autoSignInAfterVerification: true,

src/components/header/LoginButton.tsx

@@ -79,13 +79,20 @@ function LoginForm(props: { setForm: SetState<FormOptions>; setModalOpen: SetSta
             />
           </div>
         </div>
-        <div className='flex'>
+        <div className='flex justify-center gap-x-2'>
-          <Button loading={loading} disabled={loading} className='mx-auto px-6'>
+          <Button loading={loading} disabled={loading} className='px-6' type='submit'>
             {m.login()}
           </Button>
+          <Button
+            onClick={(ev) => {
+              ev.preventDefault()
+              signIn.social({ provider: 'discord', callbackURL: window.location.href })
+            }}
+          >
+            {m.loginDiscord()}
+          </Button>
         </div>
       </form>
-
       <div className='mx-auto'>
         <Button
           onClick={() => {

src/components/header/LoginNav.astro

@@ -1,15 +1,37 @@
 ---
+import * as m from 'paraglide/messages'
+import prismaClient from 'utils/prisma-client'
+import clsx from 'clsx'
+
 import RegisterBtn from './RegisterButton'
 import LoginBtn from './LoginButton'
 import LogoutBtn from './LogoutButton'
+import Button from 'components/Button'
 
-const session = Astro.locals.session
+const { permissions, session, user } = Astro.locals
+const isDonator = permissions.includes('SKIP_ADS')
+
+const discordAcc = user
+  ? await prismaClient.account.findFirst({
+      where: { providerId: 'discord', userId: user.id }
+    })
+  : null
 ---
 
 <div class='px-2 flex gap-x-2 justify-end absolute w-full md:ms-auto md:block md:w-auto md:static'>
   {
     session ? (
+      <>
+        {!discordAcc ? (
+          <Button id='link-discord' className='rounded-t-none'>
+            {m.linkDiscord()}
+          </Button>
+        ) : null}
+        <a href='/profile'>
+          <Button className={clsx(['rounded-t-none', { '!bg-amber-400': isDonator }])}>{m.profile()}</Button>
+        </a>
         <LogoutBtn client:only='react' />
+      </>
     ) : (
       <>
         <LoginBtn client:only='react' />
@@ -18,3 +40,12 @@ const session = Astro.locals.session
     )
   }
 </div>
+
+<script>
+  import { linkSocial } from 'utils/auth-client'
+
+  const discordBtn = document.getElementById('link-discord')
+  discordBtn?.addEventListener('click', () => {
+    linkSocial({ provider: 'discord', callbackURL: window.location.href })
+  })
+</script>

src/env.d.ts

@@ -6,5 +6,6 @@ declare namespace App {
     session: import('better-auth').Session | null
     permissions: string[]
     pages: string[]
+    roles: string[]
   }
 }

src/middleware.ts

@@ -14,7 +14,7 @@ export const onRequest = defineMiddleware(async (context, next) => {
     context.locals.session = isAuthed.session
 
     const user = await prismaClient.users.findUnique({
-      select: { roles: { select: { roles: { select: { permissions: true } } } } },
+      select: { roles: { select: { roleName: true, roles: { select: { permissions: true } } } } },
       where: { id: isAuthed.user.id }
     })
     const permissions = (user?.roles.map((r) => r.roles.permissions).flat() as string[]) ?? []
@@ -22,6 +22,7 @@ export const onRequest = defineMiddleware(async (context, next) => {
 
     context.locals.permissions = permissions
     context.locals.pages = pages
+    context.locals.roles = user?.roles.map((r) => r.roleName) ?? []
   } else {
     context.locals.user = null
     context.locals.session = null

src/pages/donator/check.astro

@@ -0,0 +1,46 @@
+---
+import * as m from 'paraglide/messages'
+import { DISCORD_DONATOR_ID } from 'astro:env/server'
+import prismaClient from 'utils/prisma-client'
+
+const { session, user, roles } = Astro.locals
+
+async function getMessage() {
+  if (!user || !session) {
+    return m.loggedInPage()
+  }
+
+  if (roles.includes('Donator')) {
+    return m.alreadyDonator()
+  }
+
+  const discordAcc = await prismaClient.account.findFirst({
+    where: { providerId: 'discord', userId: session.userId }
+  })
+
+  if (!discordAcc) {
+    return m.discordNeeded()
+  }
+
+  const memberInfoRes = await fetch(`https://discord.com/api/users/@me/guilds/535484312124915714/member`, {
+    headers: {
+      Authorization: `Bearer ${discordAcc.accessToken}`,
+      'Content-Type': 'application/x-www-form-urlencoded'
+    }
+  })
+
+  const memberInfo: { roles: string[] } = await memberInfoRes.json()
+  const isDiscordDonator = memberInfo.roles.includes(DISCORD_DONATOR_ID)
+
+  if (!isDiscordDonator) {
+    return m.discordRoleNeeded()
+  }
+
+  await prismaClient.user_Role.create({ data: { userUsername: user.id, roleName: 'Donator' } })
+  return m.addedDonator()
+}
+
+const message = await getMessage()
+---
+
+<div>{message}</div>

src/utils/auth-client.ts

@@ -4,4 +4,4 @@ import { usernameClient } from 'better-auth/client/plugins'
 export const authClient = createAuthClient({
   plugins: [usernameClient()]
 })
-export const { useSession, signIn, signUp, signOut, forgetPassword, resetPassword } = authClient
+export const { useSession, signIn, signUp, signOut, forgetPassword, resetPassword, linkSocial } = authClient