feat: add support for OIDC auth (#171)

* feat: add support for OIDC auth

* Add changes lost in rebase

* Add OIDC_ALLOW_DANGEROUS_EMAIL_LINKING

* Add callback info to readme

* Small env example adjustment

* Formatting fix

* Add settable icons

* Add more provider icons

---------

Co-authored-by: krokosik <[email protected]>

Author: imnotjames

.env.example

@@ -56,6 +56,20 @@ AUTHENTIK_ID=
 AUTHENTIK_SECRET=
 AUTHENTIK_ISSUER=
 
+# OIDC Provider 
+# The (lowercase) name will be used to generate an id and possibly display an icon if it is added in https://github.com/oss-apps/split-pro/blob/main/src/pages/auth/signin.tsx#L25
+# If your provider is not added, simpleicon probably has it and you may submit a PR
+OIDC_NAME=
+OIDC_CLIENT_ID=
+OIDC_CLIENT_SECRET=
+
+# An OIDC Well-Known URI registry: https://openid.net/specs/openid-connect-discovery-1_0.html#WellKnownRegistry
+# For example, https://example.com/.well-known/openid-configuration
+OIDC_WELL_KNOWN_URL=
+
+# Required for some providers to link with existing accounts, make sure you trust your provider to properly verify email addresses
+# OIDC_ALLOW_DANGEROUS_EMAIL_LINKING=1
+
 # Storage: any S3 compatible storage will work, for self hosting can use minio
 # If you're using minio for dev, you can generate access keys from the console http://localhost:9001/access-keys/new-account
 # R2_ACCESS_KEY="access-key"

docker/README.md

@@ -80,3 +80,7 @@ docker exec -t <postgres container name> pg_dumpall -c -U postgres > splitpro_ba
 ```bash
 cat splitpro_backup.sql | docker exec -i <postgres container name> psql -U postgres
 ```
+
+## Authentication
+
+We use NextAuth for authentication providers, offering email, Google and Authentik providers out of the box. Other providers can be customized as OIDC providers, but remember that an OIDC callback is needed. Set up yout `NEXTAUTH_URL` and then a callback address of `https://${NEXTAUTH_URL}/api/auth/callback/oidc`.

src/env.js

@@ -51,6 +51,11 @@ export const env = createEnv({
     FEEDBACK_EMAIL: z.string().optional(),
     DISCORD_WEBHOOK_URL: z.string().optional(),
     DEFAULT_HOMEPAGE: z.string().default('/home'),
+    OIDC_NAME: z.string().optional(),
+    OIDC_CLIENT_ID: z.string().optional(),
+    OIDC_CLIENT_SECRET: z.string().optional(),
+    OIDC_WELL_KNOWN_URL: z.string().optional(),
+    OIDC_ALLOW_DANGEROUS_EMAIL_LINKING: z.boolean().optional(),
   },
 
   /**
@@ -96,6 +101,11 @@ export const env = createEnv({
     FEEDBACK_EMAIL: process.env.FEEDBACK_EMAIL,
     DISCORD_WEBHOOK_URL: process.env.DISCORD_WEBHOOK_URL,
     DEFAULT_HOMEPAGE: process.env.DEFAULT_HOMEPAGE,
+    OIDC_NAME: process.env.OIDC_NAME,
+    OIDC_CLIENT_ID: process.env.OIDC_CLIENT_ID,
+    OIDC_CLIENT_SECRET: process.env.OIDC_CLIENT_SECRET,
+    OIDC_WELL_KNOWN_URL: process.env.OIDC_WELL_KNOWN_URL,
+    OIDC_ALLOW_DANGEROUS_EMAIL_LINKING: !!process.env.OIDC_ALLOW_DANGEROUS_EMAIL_LINKING,
   },
   /**
    * Run `build` or `dev` with `SKIP_ENV_VALIDATION` to skip env validation. This is especially

src/pages/auth/signin.tsx

@@ -21,35 +21,22 @@ import { env } from '~/env';
 import { getServerAuthSession } from '~/server/auth';
 import { customServerSideTranslations } from '~/utils/i18n/server';
 import VerificationStep from './VerificationStep';
+import {
+  SiAuth0,
+  SiAuthelia,
+  SiAuthentik,
+  SiGithub,
+  SiGoogle,
+  SiKeycloak,
+} from '@icons-pack/react-simple-icons';
 
 const providerSvgs = {
-  github: (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      viewBox="0 0 496 512"
-      className="fill-primary-foreground h-4 w-4"
-    >
-      <path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3 .3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5 .3-6.2 2.3zm44.2-1.7c-2.9 .7-4.9 2.6-4.6 4.9 .3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3 .7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3 .3 2.9 2.3 3.9 1.6 1 3.6 .7 4.3-.7 .7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3 .7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3 .7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z" />
-    </svg>
-  ),
-  google: (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      viewBox="0 0 488 512"
-      className="fill-primary-foreground h-4 w-4"
-    >
-      <path d="M488 261.8C488 403.3 391.1 504 248 504 110.8 504 0 393.2 0 256S110.8 8 248 8c66.8 0 123 24.5 166.3 64.9l-67.5 64.9C258.5 52.6 94.3 116.6 94.3 256c0 86.5 69.1 156.6 153.7 156.6 98.2 0 135-70.4 140.8-106.9H248v-85.3h236.1c2.3 12.7 3.9 24.9 3.9 41.4z" />
-    </svg>
-  ),
-  authentik: (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      viewBox="0 0 25 25"
-      className="fill-primary-foreground h-4 w-4"
-    >
-      <path d="M13.96 9.01h-0.84V7.492h-1.234v3.663H5.722c0.34 0.517 0.538 0.982 0.538 1.152 0 0.46 -1.445 3.059 -3.197 3.059C0.8 15.427 -0.745 12.8 0.372 10.855a3.062 3.062 0 0 1 2.691 -1.606c1.04 0 1.971 0.915 2.557 1.755V6.577a3.773 3.773 0 0 1 3.77 -3.769h10.84C22.31 2.808 24 4.5 24 6.577v10.845a3.773 3.773 0 0 1 -3.77 3.769h-1.6V17.5h-7.64v3.692h-1.6a3.773 3.773 0 0 1 -3.77 -3.769v-3.41h12.114v-6.52h-1.59v0.893h-0.84v-0.893H13.96v1.516Zm-9.956 1.845c-0.662 -0.703 -1.578 -0.544 -2.209 0 -2.105 2.054 1.338 5.553 3.302 1.447a5.395 5.395 0 0 0 -1.093 -1.447Z" />
-    </svg>
-  ),
+  github: <SiGithub />,
+  google: <SiGoogle />,
+  authentik: <SiAuthentik />,
+  authelia: <SiAuthelia />,
+  auth0: <SiAuth0 />,
+  keycloak: <SiKeycloak />,
 };
 
 const emailSchema = (t: TFunction) =>

src/server/auth.ts

@@ -1,5 +1,6 @@
 import { PrismaAdapter } from '@next-auth/prisma-adapter';
 import { type GetServerSidePropsContext } from 'next';
+import type { User } from 'next-auth';
 import { type DefaultSession, type NextAuthOptions, getServerSession } from 'next-auth';
 import { type Adapter, type AdapterUser } from 'next-auth/adapters';
 import AuthentikProvider from 'next-auth/providers/authentik';
@@ -11,6 +12,7 @@ import { db } from '~/server/db';
 
 import { sendSignUpEmail } from './mailer';
 import { getBaseUrl } from '~/utils/api';
+import type { OAuthConfig } from 'next-auth/providers/oauth';
 
 /**
  * Module augmentation for `next-auth` types. Allows us to add custom properties to the `session`
@@ -195,6 +197,39 @@ function getProviders() {
     );
   }
 
+  if (env.OIDC_CLIENT_ID && env.OIDC_CLIENT_SECRET && env.OIDC_WELL_KNOWN_URL) {
+    providersList.push({
+      id: env.OIDC_NAME?.toLowerCase() ?? 'oidc',
+      name: env.OIDC_NAME ?? 'OIDC',
+      clientId: env.OIDC_CLIENT_ID,
+      clientSecret: env.OIDC_CLIENT_SECRET,
+      type: 'oauth',
+      wellKnown: env.OIDC_WELL_KNOWN_URL,
+      authorization: { params: { scope: 'openid email profile' } },
+      allowDangerousEmailAccountLinking: env.OIDC_ALLOW_DANGEROUS_EMAIL_LINKING,
+      idToken: true,
+      profile(profile) {
+        // This function expects a "standard" next-auth user but we override
+        // what a next-auth user is above.  The expected next-auth user must be
+        // a record that has an id, a name, an email, and an image.
+        //
+        // To work around this, we case to unknown and then `User`.
+        return {
+          id: profile.sub,
+          name: profile.name,
+          email: profile.email,
+          image: profile.picture,
+        } as unknown as User;
+      },
+    } satisfies OAuthConfig<{
+      sub: string;
+      name: string;
+      email: string;
+      picture: string;
+      preferred_username: string;
+    }>);
+  }
+
   return providersList;
 }