feat(web): GitHub Login

apps/web/app/(auth)/signin/_components/GitHubLogin.tsx

@@ -0,0 +1,25 @@
+import { signIn } from "@/server/auth";
+import { Github } from "@repo/ui/components/icons";
+
+function GitHubLogin() {
+	return (
+		<form
+			action={async () => {
+				"use server";
+				await signIn("github", {
+					redirectTo: "/home",
+				});
+			}}
+		>
+			<button
+				type="submit"
+				className={`relative text-white transition-width flex gap-3 justify-center w-full items-center rounded-2xl bg-page-gradient hover:opacity-70  duration-500  px-6 py-4 outline-none duration- focus:outline-none `}
+			>
+				<Github className="w-4 h-4" />
+				<span className="relative w-full">Continue with GitHub</span>
+			</button>
+		</form>
+	)
+}
+
+export default GitHubLogin;

apps/web/app/(auth)/signin/_components/GoogleLogin.tsx

@@ -0,0 +1,25 @@
+import { signIn } from "@/server/auth";
+import { Google } from "@repo/ui/components/icons";
+
+function GoogleLogin() {
+	return (
+		<form
+			action={async () => {
+				"use server";
+				await signIn("google", {
+					redirectTo: "/home",
+				});
+			}}
+		>
+			<button
+				type="submit"
+				className={`relative text-white transition-width flex gap-3 justify-center w-full items-center rounded-2xl bg-page-gradient hover:opacity-70  duration-500  px-6 py-4 outline-none duration- focus:outline-none `}
+			>
+				<Google className="w-4 h-4" />
+				<span className="relative w-full">Continue with Google</span>
+			</button>
+		</form>
+	)
+}
+
+export default GoogleLogin;

apps/web/app/(auth)/signin/page.tsx

@@ -1,12 +1,12 @@
 import Image from "next/image";
 import Link from "next/link";
 import Logo from "@/public/logo.svg";
-import { auth, signIn } from "@/server/auth";
-import { Google } from "@repo/ui/components/icons";
+import { auth } from "@/server/auth";
 import gradientStyle from "./_components/TextGradient/gradient.module.css";
 import { cn } from "@repo/ui/lib/utils";
 import { redirect } from "next/navigation";
-import { toast } from "sonner";
+import GoogleLogin from "./_components/GoogleLogin";
+import GitHubLogin from "./_components/GitHubLogin";
 
 export const runtime = "edge";
 
@@ -60,22 +60,12 @@ async function Signin({
 						<div
 							className={`relative cursor-pointer transition-width z-20 rounded-2xl bg-hero-gradient   p-[0.7px] duration-500  ease-in-out fit dark:[box-shadow:0_-20px_80px_-20px_#8686f01f_inset]`}
 						>
-							<form
-								action={async () => {
-									"use server";
-									await signIn("google", {
-										redirectTo: "/home",
-									});
-								}}
-							>
-								<button
-									type="submit"
-									className={`relative text-white transition-width flex gap-3 justify-center w-full items-center rounded-2xl bg-page-gradient hover:opacity-70  duration-500  px-6 py-4 outline-none duration- focus:outline-none `}
-								>
-									<Google />
-									<span className="relative w-full">Continue with Google</span>
-								</button>
-							</form>
+							<GoogleLogin />
+						</div>
+						<div
+							className={`relative cursor-pointer transition-width z-20 rounded-2xl bg-hero-gradient   p-[0.7px] duration-500  ease-in-out fit dark:[box-shadow:0_-20px_80px_-20px_#8686f01f_inset]`}
+						>
+							<GitHubLogin />
 						</div>
 					</div>
 					<div className="text-slate-500 mt-16 z-20">

apps/web/app/actions/fetchers.ts

@@ -3,6 +3,7 @@
 import { and, asc, eq, exists, not, or } from "drizzle-orm";
 import { db } from "../../server/db";
 import {
+  accounts,
 	canvas,
 	chatHistory,
 	ChatThread,
@@ -39,6 +40,18 @@ export const getUser = async (): ServerActionReturnType<User> => {
 	return { success: true, data: user };
 };
 
+export const getProvider = async (userId: string): ServerActionReturnType<string> => {
+  const account = await db.query.accounts.findFirst({
+    where: eq(accounts.userId, userId),
+  });
+
+  if (!account) {
+    return { error: "No account found", success: false };
+  }
+
+  return { success: true, data: account.provider };
+}
+
 export const getSpaces = async (): ServerActionReturnType<StoredSpace[]> => {
 	const data = await auth();
 

apps/web/app/api/ensureAuth.ts

@@ -1,6 +1,6 @@
 import { NextRequest } from "next/server";
 import { db } from "../../server/db";
-import { accounts, sessions, users } from "../../server/db/schema";
+import { sessions, users } from "../../server/db/schema";
 import { eq } from "drizzle-orm";
 
 export async function ensureAuth(req: NextRequest) {
@@ -31,21 +31,25 @@ export async function ensureAuth(req: NextRequest) {
 
 		console.log(token, newToken);
 
-		const authUserFetch = await fetch(
+		const tokenInfo = await fetch(
 			`https://www.googleapis.com/oauth2/v1/tokeninfo?access_token=${newToken}`,
 		);
 
-		if (!authUserFetch.ok) {
+    const userInfo = await fetch(
+      `https://www.googleapis.com/oauth2/v1/userinfo?access_token=${newToken}`,
+    );
+
+		if (!tokenInfo.ok) {
 			console.error(
 				"Error fetching Google user,",
-				authUserFetch.statusText,
-				await authUserFetch.text(),
+				tokenInfo.statusText,
+				await tokenInfo.text(),
 			);
 			console.log("Google user not found or error.");
 			return undefined;
 		}
 
-		const authUserData = (await authUserFetch.json()) as {
+		const authUserData = (await tokenInfo.json()) as {
 			email: string;
 			audience: string;
 			issued_to: string;

apps/web/server/auth.ts

@@ -1,5 +1,6 @@
 import NextAuth, { NextAuthResult } from "next-auth";
 import Google from "next-auth/providers/google";
+import GitHub from "next-auth/providers/github";
 import { DrizzleAdapter } from "@auth/drizzle-adapter";
 import { db } from "./db";
 import { accounts, sessions, users, verificationTokens } from "./db/schema";
@@ -31,5 +32,9 @@ export const {
 			clientId: process.env.GOOGLE_CLIENT_ID,
 			clientSecret: process.env.GOOGLE_CLIENT_SECRET,
 		}),
+		GitHub({
+			clientId: process.env.GITHUB_CLIENT_ID,
+			clientSecret: process.env.GITHUB_CLIENT_SECRET,
+		}),
 	],
 });