feat: add more auth social providers (#547)

apps/main/src/server/services/auth/auth-providers.ts

@@ -2,10 +2,12 @@ import { UserByPkDocument } from '@chirpy-dev/graphql';
 import { SESSION_MAX_AGE, isENVProd } from '@chirpy-dev/utils';
 import { Provider } from 'next-auth/providers';
 import CredentialsProvider from 'next-auth/providers/credentials';
-import EmailProvider from 'next-auth/providers/email';
+import DiscordProvider from 'next-auth/providers/discord';
+import emailProvider from 'next-auth/providers/email';
 import facebookProvider from 'next-auth/providers/facebook';
-import GitHubProvider from 'next-auth/providers/github';
-import GoogleProvider from 'next-auth/providers/google';
+import gitHubProvider from 'next-auth/providers/github';
+import googleProvider from 'next-auth/providers/google';
+import redditProvider from 'next-auth/providers/reddit';
 import twitterProvider from 'next-auth/providers/twitter';
 
 import { query } from '$/server/common/gql';
@@ -17,16 +19,8 @@ import { generateUsername } from './utilities';
 const REQUEST_TIMEOUT = isENVProd ? 10_000 : 60_000;
 
 export const authProviders: Provider[] = [
-  process.env.GITHUB_CLIENT_ID &&
-    GitHubProvider({
-      clientId: process.env.GITHUB_CLIENT_ID,
-      clientSecret: process.env.GITHUB_CLIENT_SECRET,
-      httpOptions: {
-        timeout: REQUEST_TIMEOUT,
-      },
-    }),
   process.env.GOOGLE_CLIENT_ID &&
-    GoogleProvider({
+    googleProvider({
       clientId: process.env.GOOGLE_CLIENT_ID,
       clientSecret: process.env.GOOGLE_CLIENT_SECRET,
       httpOptions: {
@@ -49,7 +43,30 @@ export const authProviders: Provider[] = [
         timeout: REQUEST_TIMEOUT,
       },
     }),
-
+  process.env.REDDIT_CLIENT_ID &&
+    redditProvider({
+      clientId: process.env.REDDIT_CLIENT_ID,
+      clientSecret: process.env.REDDIT_CLIENT_SECRET,
+      authorization: {
+        params: {
+          duration: 'permanent',
+        },
+      },
+    }),
+  process.env.DISCORD_CLIENT_ID &&
+    process.env.DISCORD_CLIENT_SECRET &&
+    DiscordProvider({
+      clientId: process.env.DISCORD_CLIENT_ID,
+      clientSecret: process.env.DISCORD_CLIENT_SECRET,
+    }),
+  process.env.GITHUB_CLIENT_ID &&
+    gitHubProvider({
+      clientId: process.env.GITHUB_CLIENT_ID,
+      clientSecret: process.env.GITHUB_CLIENT_SECRET,
+      httpOptions: {
+        timeout: REQUEST_TIMEOUT,
+      },
+    }),
   CredentialsProvider({
     name: 'Anonymous',
     credentials: {
@@ -87,7 +104,7 @@ export const authProviders: Provider[] = [
       return null;
     },
   }),
-  EmailProvider({
+  emailProvider({
     server: process.env.EMAIL_SERVER,
     from: process.env.EMAIL_FROM,
     maxAge: SESSION_MAX_AGE,

packages/ui/src/blocks/sign-in-form/use-social-auth-options.tsx

@@ -1,6 +1,8 @@
 import { getProviders } from 'next-auth/react';
 import { StaticImageData } from 'next/image';
+import DiscordLogo from 'super-tiny-icons/images/svg/discord.svg';
 import GitHubLogo from 'super-tiny-icons/images/svg/github.svg';
+import RedditLogo from 'super-tiny-icons/images/svg/reddit.svg';
 import TwitterLogo from 'super-tiny-icons/images/svg/twitter.svg';
 
 import { useAsync } from '../../hooks/use-async';
@@ -29,7 +31,7 @@ export type AuthOption = {
   icon: React.FC;
 };
 
-export type SupportedProviders = 'twitter' | 'github';
+export type SupportedProviders = 'twitter' | 'github' | 'reddit' | 'discord';
 
 const AUTH_OPTIONS: Record<SupportedProviders, AuthOption> = {
   // TODO: Make google sign-in work
@@ -42,20 +44,24 @@ const AUTH_OPTIONS: Record<SupportedProviders, AuthOption> = {
   //   name: 'Facebook',
   //   icon: getLogoComponent(FacebookLogo, 'facebook', 24),
   // },
-  twitter: {
-    name: 'Twitter',
-    icon: getLogoComponent(TwitterLogo, 'twitter', 24),
-  },
-  github: {
-    name: 'GitHub',
-    icon: getLogoComponent(GitHubLogo, 'github', 24),
-  },
+  twitter: getAuthOption(TwitterLogo, 'Twitter', 24),
+  github: getAuthOption(GitHubLogo, 'GitHub', 24),
+  reddit: getAuthOption(RedditLogo, 'Reddit', 24),
+  discord: getAuthOption(DiscordLogo, 'Discord', 24),
 };
 
-function getLogoComponent(data: StaticImageData, brand: string, size: number) {
-  return function SocialLogo() {
-    return (
-      <img src={data.src} width={size} height={size} alt={`Logo of ${brand}`} />
-    );
+function getAuthOption(data: StaticImageData, brand: string, size: number) {
+  return {
+    name: brand,
+    icon: function SocialLogo() {
+      return (
+        <img
+          src={data.src}
+          width={size}
+          height={size}
+          alt={`Logo of ${brand}`}
+        />
+      );
+    },
   };
 }