Add support for OpenID Connect authentication

README.md

@@ -82,6 +82,7 @@ See how Rybbit compares to other analytics solutions:
 | **Error Tracking**                | ✅     | ❌         | ❌         | ❌         |
 | **Public Dashboards**             | ✅     | ❌         | ✅         | ❌         |
 | **Organizations**                 | ✅     | ✅         | ✅         | ✅         |
+| **SSO / OpenID Connect**          | ✅     | ✅         | ✅         | ✅         |
 | **Free Tier**                     | ✅     | ✅         | ❌         | ✅         |
 | **Frog 🐸**                       | ✅     | ❌         | ❌         | ❌         |
 

client/src/app/invitation/components/login.tsx

@@ -4,6 +4,7 @@ import { useExtracted } from "next-intl";
 import { useState } from "react";
 import { authClient } from "../../../lib/auth";
 import { userStore } from "../../../lib/userStore";
+import { useConfigs } from "../../../lib/configs";
 import { AuthInput } from "@/components/auth/AuthInput";
 import { AuthButton } from "@/components/auth/AuthButton";
 import { AuthError } from "@/components/auth/AuthError";
@@ -19,6 +20,21 @@ export function Login({ callbackURL }: LoginProps) {
   const [error, setError] = useState<string>("");
   const [email, setEmail] = useState("");
   const [password, setPassword] = useState("");
+  const { configs } = useConfigs();
+
+  const handleSSOLogin = async () => {
+    if (!configs?.enabledOIDCProviders.length) return;
+
+    const provider = configs.enabledOIDCProviders[0];
+    try {
+      await authClient.signIn.oauth2({
+        providerId: provider.providerId,
+        callbackURL,
+      });
+    } catch (err) {
+      setError(String(err));
+    }
+  };
 
   const handleLogin = async (e: React.FormEvent) => {
     e.preventDefault();
@@ -53,27 +69,41 @@ export function Login({ callbackURL }: LoginProps) {
     <form onSubmit={handleLogin}>
       <div className="flex flex-col gap-4">
         <SocialButtons onError={setError} callbackURL={callbackURL} />
-        <AuthInput
-          id="email"
-          label={t("Email")}
-          type="email"
-          placeholder="example@email.com"
-          required
-          value={email}
-          onChange={e => setEmail(e.target.value)}
-        />
-        <AuthInput
-          id="password"
-          label={t("Password")}
-          type="password"
-          placeholder="••••••••"
-          required
-          value={password}
-          onChange={e => setPassword(e.target.value)}
-        />
-        <AuthButton isLoading={isLoading} loadingText={t("Logging in...")}>
-          {t("Login to Accept Invitation")}
-        </AuthButton>
+        {configs?.internalAuthEnabled && (
+          <>
+            <AuthInput
+              id="email"
+              label={t("Email")}
+              type="email"
+              placeholder="example@email.com"
+              required
+              value={email}
+              onChange={e => setEmail(e.target.value)}
+            />
+            <AuthInput
+              id="password"
+              label={t("Password")}
+              type="password"
+              placeholder="••••••••"
+              required
+              value={password}
+              onChange={e => setPassword(e.target.value)}
+            />
+            <AuthButton isLoading={isLoading} loadingText={t("Logging in...")}>
+              {t("Login to Accept Invitation")}
+            </AuthButton>
+          </>
+        )}
+        {configs?.enabledOIDCProviders.length ? (
+          <AuthButton
+            isLoading={false}
+            type="button"
+            variant="default"
+            onClick={handleSSOLogin}
+          >
+            Login with SSO
+          </AuthButton>
+        ) : null}
         <AuthError error={error} />
       </div>
     </form>

client/src/app/login/page.tsx

@@ -8,7 +8,7 @@ import { Turnstile } from "@/components/auth/Turnstile";
 import { useExtracted } from "next-intl";
 import Link from "next/link";
 import { useRouter } from "next/navigation";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { RybbitTextLogo } from "../../components/RybbitLogo";
 import { SpinningGlobe } from "../../components/SpinningGlobe";
 import { useSetPageTitle } from "../../hooks/useSetPageTitle";
@@ -73,6 +73,19 @@ export default function Page() {
 
   const turnstileEnabled = IS_CLOUD && process.env.NODE_ENV === "production";
 
+  // Auto-redirect to SSO if internal auth is disabled and there's only one OIDC provider
+  useEffect(() => {
+    if (!isLoadingConfigs && configs && !configs.internalAuthEnabled && configs.enabledOIDCProviders.length === 1) {
+      const provider = configs.enabledOIDCProviders[0];
+      authClient.signIn.oauth2({
+        providerId: provider.providerId,
+        callbackURL: "/",
+      }).catch(err => {
+        setError(String(err));
+      });
+    }
+  }, [configs, isLoadingConfigs]);
+
   return (
     <div className="flex h-dvh w-full">
       {/* Left panel - login form */}
@@ -87,55 +100,57 @@ export default function Page() {
           <h1 className="text-lg text-neutral-600 dark:text-neutral-300 mb-6">{t("Welcome back")}</h1>
           <div className="flex flex-col gap-4">
             <SocialButtons onError={setError} />
-            <form onSubmit={handleSubmit}>
-              <div className="flex flex-col gap-4">
-                <AuthInput
-                  id="email"
-                  label={t("Email")}
-                  type="email"
-                  placeholder="example@email.com"
-                  required
-                  value={email}
-                  onChange={e => setEmail(e.target.value)}
-                />
-
-                <AuthInput
-                  id="password"
-                  label={t("Password")}
-                  type="password"
-                  placeholder="••••••••"
-                  required
-                  value={password}
-                  onChange={e => setPassword(e.target.value)}
-                  rightElement={
-                    IS_CLOUD && (
-                      <Link href="/reset-password" className="text-xs text-muted-foreground hover:text-primary">
-                        {t("Forgot password?")}
-                      </Link>
-                    )
-                  }
-                />
-
-                {turnstileEnabled && (
-                  <Turnstile
-                    onSuccess={token => setTurnstileToken(token)}
-                    onError={() => setTurnstileToken("")}
-                    onExpire={() => setTurnstileToken("")}
-                    className="flex justify-center"
+            {configs?.internalAuthEnabled && (
+              <form onSubmit={handleSubmit}>
+                <div className="flex flex-col gap-4">
+                  <AuthInput
+                    id="email"
+                    label={t("Email")}
+                    type="email"
+                    placeholder="example@email.com"
+                    required
+                    value={email}
+                    onChange={e => setEmail(e.target.value)}
                   />
-                )}
 
-                <AuthButton
-                  isLoading={isLoading}
-                  loadingText={t("Logging in...")}
-                  disabled={turnstileEnabled ? !turnstileToken || isLoading : isLoading}
-                >
-                  {t("Login")}
-                </AuthButton>
+                  <AuthInput
+                    id="password"
+                    label={t("Password")}
+                    type="password"
+                    placeholder="••••••••"
+                    required
+                    value={password}
+                    onChange={e => setPassword(e.target.value)}
+                    rightElement={
+                      IS_CLOUD && (
+                        <Link href="/reset-password" className="text-xs text-muted-foreground hover:text-primary">
+                          {t("Forgot password?")}
+                        </Link>
+                      )
+                    }
+                  />
 
-                <AuthError error={error} title={t("Error Logging In")} />
-              </div>
-            </form>
+                  {turnstileEnabled && (
+                    <Turnstile
+                      onSuccess={token => setTurnstileToken(token)}
+                      onError={() => setTurnstileToken("")}
+                      onExpire={() => setTurnstileToken("")}
+                      className="flex justify-center"
+                    />
+                  )}
+
+                  <AuthButton
+                    isLoading={isLoading}
+                    loadingText={t("Logging in...")}
+                    disabled={turnstileEnabled ? !turnstileToken || isLoading : isLoading}
+                  >
+                    {t("Login")}
+                  </AuthButton>
+
+                  <AuthError error={error} title={t("Error Logging In")} />
+                </div>
+              </form>
+            )}
 
             {(!configs?.disableSignup || !isLoadingConfigs) && (
               <div className="text-center text-sm">

client/src/app/signup/components/AccountStep.tsx

@@ -6,6 +6,7 @@ import { ArrowRight } from "lucide-react";
 import { useExtracted } from "next-intl";
 import Link from "next/link";
 
+import { useConfigs } from "../../../lib/configs";
 import { IS_CLOUD } from "../../../lib/const";
 
 interface AccountStepProps {
@@ -32,49 +33,54 @@ export function AccountStep({
   setError,
 }: AccountStepProps) {
   const t = useExtracted();
+  const { configs } = useConfigs();
 
   return (
     <div>
       <h2 className="text-2xl font-semibold mb-4">{t("Signup")}</h2>
       <div className="space-y-4">
         <SocialButtons onError={setError} callbackURL="/signup?step=2" mode="signup" />
-        <AuthInput
-          id="email"
-          label={t("Email")}
-          type="email"
-          placeholder="email@example.com"
-          required
-          value={email}
-          onChange={e => setEmail(e.target.value)}
-        />
-        <AuthInput
-          id="password"
-          label={t("Password")}
-          type="password"
-          placeholder="••••••••"
-          required
-          value={password}
-          onChange={e => setPassword(e.target.value)}
-        />
-        {IS_CLOUD && (
-          <Turnstile
-            onSuccess={token => setTurnstileToken(token)}
-            onError={() => setTurnstileToken("")}
-            onExpire={() => setTurnstileToken("")}
-            className="flex justify-center"
-          />
+        {configs?.internalAuthEnabled && (
+          <>
+            <AuthInput
+              id="email"
+              label={t("Email")}
+              type="email"
+              placeholder="email@example.com"
+              required
+              value={email}
+              onChange={e => setEmail(e.target.value)}
+            />
+            <AuthInput
+              id="password"
+              label={t("Password")}
+              type="password"
+              placeholder="••••••••"
+              required
+              value={password}
+              onChange={e => setPassword(e.target.value)}
+            />
+            {IS_CLOUD && (
+              <Turnstile
+                onSuccess={token => setTurnstileToken(token)}
+                onError={() => setTurnstileToken("")}
+                onExpire={() => setTurnstileToken("")}
+                className="flex justify-center"
+              />
+            )}
+            <AuthButton
+              isLoading={isLoading}
+              loadingText={t("Creating account...")}
+              onClick={onSubmit}
+              type="button"
+              className="mt-6 transition-all duration-300 h-11"
+              disabled={IS_CLOUD ? !turnstileToken || isLoading : isLoading}
+            >
+              {t("Continue")}
+              <ArrowRight className="ml-2 h-4 w-4" />
+            </AuthButton>
+          </>
         )}
-        <AuthButton
-          isLoading={isLoading}
-          loadingText={t("Creating account...")}
-          onClick={onSubmit}
-          type="button"
-          className="mt-6 transition-all duration-300 h-11"
-          disabled={IS_CLOUD ? !turnstileToken || isLoading : isLoading}
-        >
-          {t("Continue")}
-          <ArrowRight className="ml-2 h-4 w-4" />
-        </AuthButton>
         <div className="text-center text-sm">
           {t("Already have an account?")}{" "}
           <Link