diff --git a/.env.example b/.env.example index 38ebc4e1..89e2ddec 100644 --- a/.env.example +++ b/.env.example @@ -25,4 +25,35 @@ DISCORD_CLIENT_ID= DISCORD_CLIENT_SECRET= GITHUB_CLIENT_ID= GITHUB_CLIENT_SECRET= +GITLAB_CLIENT_ID= +GITLAB_CLIENT_SECRET= +GITLAB_ISSUER= +MICROSOFT_CLIENT_ID= +MICROSOFT_CLIENT_SECRET= +TWITTER_CLIENT_ID= +TWITTER_CLIENT_SECRET= +KICK_CLIENT_ID= +KICK_CLIENT_SECRET= +ZOOM_CLIENT_ID= +ZOOM_CLIENT_SECRET= +DROPBOX_CLIENT_ID= +DROPBOX_CLIENT_SECRET= +VK_CLIENT_ID= +VK_CLIENT_SECRET= +LINKEDIN_CLIENT_ID= +LINKEDIN_CLIENT_SECRET= +REDDIT_CLIENT_ID= +REDDIT_CLIENT_SECRET= +ROBLOX_CLIENT_ID= +ROBLOX_CLIENT_SECRET= +SPOTIFY_CLIENT_ID= +SPOTIFY_CLIENT_SECRET= +TIKTOK_CLIENT_ID= +TIKTOK_CLIENT_SECRET= +TIKTOK_CLIENT_KEY= +TWITCH_CLIENT_ID= +TWITCH_CLIENT_SECRET= +APPLE_CLIENT_ID= +APPLE_CLIENT_SECRET= +APPLE_APP_BUNDLE_IDENTIFIER= diff --git a/apps/web/src/components/AuthForm.tsx b/apps/web/src/components/AuthForm.tsx index 61e72be3..b3b6006f 100644 --- a/apps/web/src/components/AuthForm.tsx +++ b/apps/web/src/components/AuthForm.tsx @@ -2,7 +2,9 @@ import { zodResolver } from "@hookform/resolvers/zod"; import { useQuery } from "@tanstack/react-query"; import { useState } from "react"; import { useForm } from "react-hook-form"; -import { FaDiscord, FaGithub, FaGoogle } from "react-icons/fa"; +import { FaDiscord, FaGithub, FaGoogle, FaApple, FaMicrosoft, FaFacebook, FaSpotify, FaTwitch, FaTwitter, FaDropbox, FaLinkedin, FaGitlab, FaTiktok, FaReddit, FaVk } from "react-icons/fa"; +import { SiRoblox, SiZoom } from "react-icons/si"; +import { TbBrandKick } from "react-icons/tb"; import { z } from "zod"; import type { SocialProvider } from "better-auth/social-providers"; @@ -21,6 +23,99 @@ interface AuthProps { const EmailSchema = z.object({ email: z.string().email() }); +const availableSocialProviders = { + google: { + id: "google", + name: "Google", + icon: FaGoogle, + }, + github: { + id: "github", + name: "GitHub", + icon: FaGithub, + }, + discord: { + id: "discord", + name: "Discord", + icon: FaDiscord, + }, + apple: { + id: "apple", + name: "Apple", + icon: FaApple, + }, + microsoft: { + id: "microsoft", + name: "Microsoft", + icon: FaMicrosoft, + }, + facebook: { + id: "facebook", + name: "Facebook", + icon: FaFacebook, + }, + spotify: { + id: "spotify", + name: "Spotify", + icon: FaSpotify, + }, + twitch: { + id: "twitch", + name: "Twitch", + icon: FaTwitch, + }, + twitter: { + id: "twitter", + name: "Twitter", + icon: FaTwitter, + }, + dropbox: { + id: "dropbox", + name: "Dropbox", + icon: FaDropbox, + }, + linkedin: { + id: "linkedin", + name: "LinkedIn", + icon: FaLinkedin, + }, + gitlab: { + id: "gitlab", + name: "GitLab", + icon: FaGitlab, + }, + tiktok: { + id: "tiktok", + name: "TikTok", + icon: FaTiktok, + }, + reddit: { + id: "reddit", + name: "Reddit", + icon: FaReddit, + }, + roblox: { + id: "roblox", + name: "Roblox", + icon: SiRoblox, + }, + vk: { + id: "vk", + name: "VK", + icon: FaVk, + }, + kick: { + id: "kick", + name: "Kick", + icon: TbBrandKick, + }, + zoom: { + id: "zoom", + name: "Zoom", + icon: SiZoom, + }, +} + export function Auth({ setIsMagicLinkSent }: AuthProps) { const [isLoginWithProviderPending, setIsLoginWithProviderPending] = useState< null | SocialProvider @@ -86,39 +181,21 @@ export function Auth({ setIsMagicLinkSent }: AuthProps) {