Google and Discord Sign in

www/app/auth/callback/route.ts

@@ -0,0 +1,33 @@
+import { createClient } from '@/utils/supabase/server'
+import { NextResponse } from 'next/server'
+import { cookies } from 'next/headers'
+
+export async function GET(request: Request) {
+  const { searchParams, origin } = new URL(request.url)
+  const code = searchParams.get('code')
+  // if "next" is in param, use it as the redirect URL
+  const next = searchParams.get('next') ?? '/'
+
+  if (code) {
+    const supabase = createClient()
+    const cookieStore = cookies()
+
+    const { error } = await supabase.auth.exchangeCodeForSession(code)
+
+    if (!error) {
+        const forwardedHost = request.headers.get('x-forwarded-host') // original origin before load balancer
+        const isLocalEnv = process.env.NODE_ENV === 'development'
+        if (isLocalEnv) {
+          // we can be sure that there is no load balancer in between, so no need to watch for X-Forwarded-Host
+          return NextResponse.redirect(`${origin}${next}`)
+        } else if (forwardedHost) {
+          return NextResponse.redirect(`https://${forwardedHost}${next}`)
+        } else {
+          return NextResponse.redirect(`${origin}${next}`)
+        }
+    }
+  }
+
+  // return the user to an error page with some instructions
+  return NextResponse.redirect(`${origin}/auth?error=Could not authenticate user`)
+}

www/components/auth/discord.tsx

@@ -0,0 +1,31 @@
+import { createClient } from '@/utils/supabase/client'
+import { useRouter } from 'next/navigation'
+import { FaDiscord } from 'react-icons/fa'
+
+export default function DiscordSignIn() {
+const supabase = createClient()
+  const router = useRouter()
+
+  const handleSignIn = async () => {
+    const { error } = await supabase.auth.signInWithOAuth({
+      provider: 'discord',
+      options: {
+        redirectTo: `${location.origin}/auth/callback`,
+      },
+    })
+
+    if (error) {
+      console.error('Error signing in with Discord:', error)
+    }
+  }
+
+  return (
+    <button
+      onClick={handleSignIn}
+      className="flex items-center justify-center w-full px-4 py-2 text-sm font-medium text-white bg-[#5865F2] hover:bg-[#4752C4] rounded-md transition-colors duration-300"
+    >
+      <FaDiscord className="mr-2 h-4 w-4" />
+      Sign in with Discord
+    </button>
+  )
+}

www/components/auth/google.tsx

@@ -0,0 +1,31 @@
+import { createClient } from '@/utils/supabase/client'
+import { useRouter } from 'next/navigation'
+import { FcGoogle } from 'react-icons/fc'
+
+export default function GoogleSignIn() {
+  const router = useRouter()
+  const supabase = createClient()
+
+  const handleGoogleSignIn = async () => {
+    const { error } = await supabase.auth.signInWithOAuth({
+      provider: 'google',
+      options: {
+        redirectTo: `${location.origin}/auth/callback`
+      }
+    })
+
+    if (error) {
+      console.error('Error signing in with Google:', error)
+    }
+  }
+
+  return (
+    <button
+      onClick={handleGoogleSignIn}
+      className="flex items-center justify-center w-full px-4 py-2 mt-4 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-neon-green"
+    >
+      <FcGoogle className="w-5 h-5 mr-2" />
+      Sign in with Google
+    </button>
+  )
+}

www/components/auth/signIn.tsx

@@ -1,6 +1,8 @@
 'use client';
 import { useState, useRef } from "react";
 import Swal from 'sweetalert2'
+import GoogleSignIn from './google'
+import DiscordSignIn from './discord'
 
 export default function SignIn(props: any) {
   const { stateSync, handler } = props
@@ -34,6 +36,7 @@ export default function SignIn(props: any) {
   };
 
   return (
+    <>
     <form action="#" ref={formRef} onSubmit={handleSignIn} className="mt-8 grid grid-cols-6 gap-6">
 
       <div className="col-span-6">
@@ -92,5 +95,10 @@ export default function SignIn(props: any) {
         </p>
       </div>
     </form>
+    <div className="mt-6 space-y-4">
+      <GoogleSignIn />
+      <DiscordSignIn />
+    </div>
+    </>
   )
 }