feat: add telegram and discord connect buttons to faucet

apps/staking/.env.local.template

@@ -1,4 +1,7 @@
 NEXT_PUBLIC_WALLET_CONNECT_PROJECT_ID=
 NEXT_PUBLIC_SENT_STAKING_API_URL=
 FAUCET_WALLET_PRIVATE_KEY=
-NEXT_PUBLIC_ENV_FLAG= pick from dev, qa, stg, prd
+NEXT_PUBLIC_ENV_FLAG= pick from dev, qa, stg, prd
+DISCORD_CLIENT_ID=
+DISCORD_CLIENT_SECRET=
+TELEGRAM_BOT_TOKEN=

apps/staking/app/api/auth/[...nextauth]/route.ts

@@ -0,0 +1,31 @@
+import { createAuthHandler } from '@session/auth/api';
+import { DiscordProvider, handleDiscordSession } from '@session/auth/providers/discord';
+import { TelegramProvider } from '@session/auth/providers/telegram';
+
+const discordClientId = process.env.DISCORD_CLIENT_ID;
+const discordClientSecret = process.env.DISCORD_CLIENT_SECRET;
+const telegramBotToken = process.env.TELEGRAM_BOT_TOKEN;
+
+if (!discordClientId || !discordClientSecret) {
+  throw new Error('Discord client ID and client secret must be provided');
+}
+
+if (!telegramBotToken) {
+  throw new Error('Telegram bot token must be provided');
+}
+
+export const { GET, POST } = createAuthHandler({
+  providers: [
+    DiscordProvider({
+      clientId: discordClientId,
+      clientSecret: discordClientSecret,
+    }),
+    TelegramProvider({ botToken: telegramBotToken }),
+  ],
+  callbacks: {
+    async session({ session, token }) {
+      handleDiscordSession({ session, token });
+      return session;
+    },
+  },
+});

apps/staking/app/faucet/AuthModule.tsx

@@ -0,0 +1,12 @@
+import { useSession } from '@session/auth/client';
+
+export const AuthModule = () => {
+  const { data, status } = useSession();
+
+  console.log(data);
+
+  /** @ts-expect-error -- Workaround to get id */
+  const discordId = data?.user?.discordId;
+
+  return <pre>{discordId}</pre>;
+};

apps/staking/app/faucet/page.tsx

@@ -1,3 +1,22 @@
+'use client';
+import { NextAuthProvider } from '@session/auth/client';
+import { DiscordAuthButton } from '@session/auth/components/DiscordAuthButton';
+import { TelegramAuthButton } from '@session/auth/components/TelegramAuthButton';
+import { AuthModule } from './AuthModule';
+
 export default function FaucetPage() {
-  return <div className="flex justify-center p-4 align-middle">{/* <FaucetModule /> */}</div>;
+  return (
+    <NextAuthProvider>
+      <div className="flex justify-center p-4 align-middle">
+        <AuthModule />
+        <DiscordAuthButton />
+        <TelegramButton />
+      </div>
+    </NextAuthProvider>
+  );
+}
+
+async function TelegramButton() {
+  const csrfToken = '';
+  return <TelegramAuthButton csrfToken={csrfToken} />;
 }

apps/staking/app/page.tsx

@@ -49,7 +49,13 @@ export default function LandingPage() {
         </div>
       </div>
       <div className="flex max-w-[50vh] items-center justify-center align-middle lg:max-w-full">
-        <Image src="/images/cube.png" alt={dictionary('heroImageAlt')} height={1024} width={1024} />
+        <Image
+          src="/images/cube.png"
+          alt={dictionary('heroImageAlt')}
+          height={1024}
+          width={1024}
+          priority
+        />
       </div>
     </div>
   );

apps/staking/package.json

@@ -14,6 +14,7 @@
     "@session/contracts": "workspace:*",
     "@session/sent-staking-js": "workspace:*",
     "@session/ui": "workspace:*",
+    "@session/auth": "workspace:*",
     "@session/util": "workspace:*",
     "@session/wallet": "workspace:*",
     "@tanstack/react-query": "^5.32.1",