add discord oauth provider

.env.example

@@ -7,6 +7,12 @@ CSRF_SECRET="csrf_secret"
 GITHUB_CLIENT_ID="MOCK_GITHUB_CLIENT_ID"
 GITHUB_CLIENT_SECRET="MOCK_GITHUB_CLIENT_SECRET"
 
+# Discord Developer Portal > Applications > New Application
+# https://discord.com/developers/applications
+DISCORD_CLIENT_ID="MOCK_DISCORD_CLIENT_ID"
+DISCORD_CLIENT_SECRET="MOCK_DISCORD_CLIENT_SECRET"
+DISCORD_BOT_TOKEN="MOCK_DISCORD_BOT_TOKEN"
+
 # turso db show --url <database-name>
 TURSO_DB_URL="file:local/dev.db"
 # turso db tokens create <database-name>

app/routes/_auth.login.tsx

@@ -11,8 +11,8 @@ import {
   providerNames,
 } from "#app/utils/connections.tsx";
 import type {
-  DataFunctionArgs,
   HeadersFunction,
+  LoaderFunctionArgs,
   MetaFunction,
 } from "@remix-run/node";
 
@@ -31,7 +31,7 @@ export const headers: HeadersFunction = () => ({
   Vary: "Cookie",
 });
 
-export async function loader({ request }: DataFunctionArgs) {
+export async function loader({ request }: LoaderFunctionArgs) {
   await requireAnonymous(request);
 
   return null;

app/routes/_auth.onboarding.tsx

@@ -20,7 +20,7 @@ import { onboardingCookie } from "#app/utils/auth.onboarding.server.ts";
 import type { SubmissionResult } from "@conform-to/react";
 import { getFormProps, getInputProps, useForm } from "@conform-to/react";
 import { getZodConstraint, parseWithZod } from "@conform-to/zod";
-import type { ActionFunctionArgs, DataFunctionArgs } from "@remix-run/node";
+import type { ActionFunctionArgs, LoaderFunctionArgs } from "@remix-run/node";
 import { json, redirect } from "@remix-run/node";
 import { Form, useActionData, useLoaderData } from "@remix-run/react";
 import { z } from "zod";
@@ -47,7 +47,7 @@ const requireData = async (request: Request) => {
   }
 };
 
-export const loader = async ({ request }: DataFunctionArgs) => {
+export const loader = async ({ request }: LoaderFunctionArgs) => {
   const { profile } = await requireData(request);
 
   const prefill = profile;

app/routes/auth.$provider.callback.tsx

@@ -13,11 +13,11 @@ import {
 import { ProviderNameSchema } from "#app/utils/connections.tsx";
 import { db } from "#app/utils/db.server.ts";
 import { combineHeaders, destroySession } from "#app/utils/misc.ts";
-import { redirect, type DataFunctionArgs } from "@remix-run/node";
+import { redirect, type LoaderFunctionArgs } from "@remix-run/node";
 import { connectionTable, sessionTable } from "#drizzle/schema.ts";
 import { onboardingCookie } from "#app/utils/auth.onboarding.server.ts";
 
-export const loader = async ({ request, params }: DataFunctionArgs) => {
+export const loader = async ({ request, params }: LoaderFunctionArgs) => {
   const providerName = ProviderNameSchema.parse(params.provider);
 
   const profile = await authenticator.authenticate(providerName, request, {

app/routes/auth.$provider.tsx

@@ -4,9 +4,9 @@ import {
 } from "#app/components/error-boundary.tsx";
 import { authenticator } from "#app/utils/connections.server.ts";
 import { ProviderNameSchema } from "#app/utils/connections.tsx";
-import type { DataFunctionArgs } from "@remix-run/node";
+import type { ActionFunctionArgs } from "@remix-run/node";
 
-export const action = async ({ request, params }: DataFunctionArgs) => {
+export const action = async ({ request, params }: ActionFunctionArgs) => {
   const providerName = ProviderNameSchema.parse(params.provider);
 
   return await authenticator.authenticate(providerName, request);

app/routes/settings.profile.connections.tsx

@@ -15,7 +15,7 @@ import { useDoubleCheck } from "#app/utils/misc.ts";
 import { json } from "@remix-run/node";
 import type {
   MetaFunction,
-  DataFunctionArgs,
+  LoaderFunctionArgs,
   ActionFunctionArgs,
 } from "@remix-run/node";
 import { AuthenticityTokenInput } from "remix-utils/csrf/react";
@@ -64,7 +64,7 @@ export const meta: MetaFunction = () => {
   ];
 };
 
-export async function loader({ request }: DataFunctionArgs) {
+export async function loader({ request }: LoaderFunctionArgs) {
   const userId = await requireUserId(request);
   const connections = await getConnections(userId);
 

app/utils/connections.server.ts

@@ -4,6 +4,7 @@ import type { ProviderName } from "./connections.tsx";
 import { GitHubProvider } from "./providers/github.server.ts";
 import type { AuthProvider, ProviderUser } from "./providers/model.ts";
 import { Authenticator } from "remix-auth";
+import { DiscordProvider } from "./providers/discord.server.ts";
 
 export const connectionSessionStorage = createCookieSessionStorage({
   cookie: {
@@ -18,6 +19,7 @@ export const connectionSessionStorage = createCookieSessionStorage({
 
 export const providers: Record<ProviderName, AuthProvider> = {
   github: new GitHubProvider(),
+  discord: new DiscordProvider(),
 };
 
 export const authenticator = new Authenticator<ProviderUser>(

app/utils/connections.tsx

@@ -1,13 +1,17 @@
 import { StatusButton } from "#app/components/status-button.tsx";
-import { GitHubLogoIcon } from "@radix-ui/react-icons";
+import { DiscordLogoIcon, GitHubLogoIcon } from "@radix-ui/react-icons";
 import { Form } from "@remix-run/react";
-import { GitHubStrategyDefaultName } from "remix-auth-github";
+import { SocialsProvider } from "remix-auth-socials";
 import { z } from "zod";
 import { useIsPending } from "./misc.ts";
 
-export const GITHUB_PROVIDER_NAME = GitHubStrategyDefaultName;
+export const GITHUB_PROVIDER_NAME = SocialsProvider.GITHUB;
+export const DISCORD_PROVIDER_NAME = SocialsProvider.DISCORD;
 
-export const providerNames = [GITHUB_PROVIDER_NAME] as const;
+export const providerNames = [
+  GITHUB_PROVIDER_NAME,
+  DISCORD_PROVIDER_NAME,
+] as const;
 export const ProviderNameSchema = z.enum(providerNames);
 export type ProviderName = z.infer<typeof ProviderNameSchema>;
 
@@ -20,6 +24,10 @@ export const providerConfigs: Record<ProviderName, ProviderConfig> = {
     label: "Github",
     icon: <GitHubLogoIcon className="inline-block" />,
   },
+  [DISCORD_PROVIDER_NAME]: {
+    label: "Discord",
+    icon: <DiscordLogoIcon className="inline-block" />,
+  },
 };
 
 export const ProviderConnectionForm = ({

app/utils/env.server.ts

@@ -15,6 +15,10 @@ const envSchema = z.object({
   GITHUB_CLIENT_ID: z.string(),
   GITHUB_CLIENT_SECRET: z.string(),
 
+  DISCORD_CLIENT_ID: z.string(),
+  DISCORD_CLIENT_SECRET: z.string(),
+  DISCORD_BOT_TOKEN: z.string(),
+
   TURSO_DB_URL: z.string().url(),
   TURSO_DB_AUTH_TOKEN: z.string(),
 });

app/utils/providers/discord.server.ts

@@ -0,0 +1,73 @@
+import { type DiscordProfile, DiscordStrategy } from "remix-auth-socials";
+import type { AuthProvider } from "./model.ts";
+import { env } from "../env.server.ts";
+import { z } from "zod";
+
+const DiscordUserSchema = z.object({ username: z.string() });
+type DiscordUser = z.infer<typeof DiscordUserSchema>;
+const getDisplayName = (user: DiscordUser) => user.username;
+const getImageUr = (profile: DiscordProfile) => {
+  const avaterHash = profile.photos?.[0].value;
+  if (!avaterHash) {
+    return undefined;
+  }
+
+  return `https://cdn.discordapp.com/avatars/${profile.id}/${avaterHash}.png`;
+};
+
+export class DiscordProvider implements AuthProvider {
+  getAuthStrategy() {
+    return new DiscordStrategy(
+      {
+        clientID: env.DISCORD_CLIENT_ID,
+        clientSecret: env.DISCORD_CLIENT_SECRET,
+        callbackURL: "/auth/discord/callback",
+        scope: ["identify", "email", "guilds"],
+      },
+      async ({ profile }) => {
+        const id = profile.id;
+        const email = profile.__json.email;
+        if (!email) {
+          throw new Error("Email is a must");
+        }
+        const username = profile.__json.username;
+        const name = profile.displayName;
+        const imageUrl = getImageUr(profile);
+
+        return {
+          id,
+          email,
+          username,
+          name,
+          imageUrl,
+        };
+      },
+    );
+  }
+
+  async resolveConnectionInfo(providerId: string) {
+    // TODO: cache this
+    const response = await fetch(
+      `https://discord.com/api/users/${providerId}`,
+      {
+        headers: {
+          Authorization: `Bot ${env.DISCORD_BOT_TOKEN}`,
+        },
+      },
+    );
+    const rawJson = await response.json();
+    const result = DiscordUserSchema.safeParse(rawJson);
+
+    if (!result.success) {
+      return {
+        connectionUserDisplayName: "Unknown" as const,
+        profileLink: null,
+      };
+    }
+
+    return {
+      connectionUserDisplayName: getDisplayName(result.data),
+      profileLink: null,
+    };
+  }
+}

app/utils/providers/github.server.ts

@@ -1,4 +1,4 @@
-import { GitHubStrategy } from "remix-auth-github";
+import { GitHubStrategy } from "remix-auth-socials";
 import type { AuthProvider } from "./model.ts";
 import { env } from "../env.server.ts";
 import { z } from "zod";

app/utils/providers/model.ts

@@ -13,7 +13,7 @@ export interface AuthProvider {
   resolveConnectionInfo(profileId: string): Promise<
     | {
         connectionUserDisplayName: string;
-        profileLink: string;
+        profileLink: string | null;
       }
     | {
         connectionUserDisplayName: "Unknown";

package.json

@@ -69,7 +69,7 @@
     "rehype-slug": "6.0.0",
     "remark-mdx-images": "2.0.0",
     "remix-auth": "3.6.0",
-    "remix-auth-github": "1.6.0",
+    "remix-auth-socials": "2.0.6",
     "remix-utils": "7.5.0",
     "source-map-support": "0.5.21",
     "spin-delay": "1.2.0",