feat: implement Single Sign-On (SSO) functionality, enhance login provider management, and introduce a new features system.

Author: Rajat

AGENTS.md

@@ -8,6 +8,7 @@
 - In `apps/web` workspace, create a string first in `apps/web/config/strings.ts` and then import it in the `.tsx` files, instead of using inline strings.
 - When working with forms, always use refs to keep the current state of the form's data and use it to enable/disable the form submit button.
 - Check the name field inside each package's package.json to confirm the right name—skip the top-level one.
+- While working with forms, always use zod and react-hook-form to validate the form. Take reference implementation from `apps/web/components/admin/settings/sso/new.tsx`.
 
 ## Testing instructions
 

apps/docs/src/pages/en/schools/sso.md

@@ -0,0 +1,9 @@
+---
+title: Set up Single Sign On (SSO)
+description: Learn how to set up Single Sign On (SSO)
+layout: ../../../layouts/MainLayout.astro
+---
+
+## Stuck somewhere?
+
+We are always here for you. Come chat with us in our <a href="https://discord.com/invite/GR4bQsN" target="_blank">Discord</a> channel or send a tweet at <a href="https://twitter.com/courselit" target="_blank">@CourseLit</a>.

apps/web/.migrations/13-12-25_23-07-init-login-settings.js

@@ -0,0 +1,28 @@
+import mongoose from "mongoose";
+
+mongoose.connect(process.env.DB_CONNECTION_STRING, {
+    useNewUrlParser: true,
+    useUnifiedTopology: true,
+});
+
+const SettingsSchema = new mongoose.Schema({
+    logins: { type: [String] },
+});
+
+const DomainSchema = new mongoose.Schema({
+    name: { type: String, required: true, unique: true },
+    settings: SettingsSchema,
+});
+
+const Domain = mongoose.model("Domain", DomainSchema);
+
+const addEmailLoginToDomainSettings = async () => {
+    console.log("🏁 Migrating login settings");
+    await Domain.updateMany({}, { $set: { "settings.logins": ["email"] } });
+    console.log("🏁 Migrated login settings");
+};
+
+(async () => {
+    await addEmailLoginToDomainSettings();
+    mongoose.connection.close();
+})();

apps/web/app/(with-contexts)/(with-layout)/login/login-form.tsx

@@ -37,7 +37,16 @@ import { getUserProfile } from "../../helpers";
 import { ADMIN_PERMISSIONS } from "@ui-config/constants";
 import { authClient } from "@/lib/auth-client";
 
-export default function LoginForm({ redirectTo }: { redirectTo?: string }) {
+export default function LoginForm({
+    redirectTo,
+    ssoProviders,
+}: {
+    redirectTo?: string;
+    ssoProviders?: {
+        providerId: string;
+        domain: string;
+    }[];
+}) {
     const { theme } = useContext(ThemeContext);
     const [showCode, setShowCode] = useState(false);
     const [email, setEmail] = useState("");
@@ -289,6 +298,26 @@ export default function LoginForm({ redirectTo }: { redirectTo?: string }) {
                                 </div>
                             </div>
                         )}
+                        {ssoProviders && ssoProviders.length > 0 && (
+                            <div className="flex flex-col gap-2 mt-8">
+                                {ssoProviders.map((provider) => (
+                                    <Button
+                                        key={provider.providerId}
+                                        variant="outline"
+                                        onClick={async () => {
+                                            const { error } =
+                                                await authClient.signIn.sso({
+                                                    providerId:
+                                                        provider.providerId,
+                                                    callbackURL: "/dashboard",
+                                                });
+                                        }}
+                                    >
+                                        Login with SSO ({provider.providerId})
+                                    </Button>
+                                ))}
+                            </div>
+                        )}
                     </div>
                 </div>
             </div>

apps/web/app/(with-contexts)/(with-layout)/login/page.tsx

@@ -2,6 +2,8 @@ import { auth } from "@/auth";
 import { redirect } from "next/navigation";
 import LoginForm from "./login-form";
 import { headers } from "next/headers";
+import { getAddressFromHeaders } from "@/app/actions";
+import { FetchBuilder } from "@courselit/utils";
 
 export default async function LoginPage({
     searchParams,
@@ -14,10 +16,48 @@ export default async function LoginPage({
     });
 
     const redirectTo = (await searchParams).redirect as string | undefined;
+    const address = await getAddressFromHeaders(headers);
 
     if (session) {
         redirect(redirectTo || "/dashboard");
     }
 
-    return <LoginForm redirectTo={redirectTo} />;
+    return (
+        <LoginForm
+            redirectTo={redirectTo}
+            ssoProviders={await getSSOProviders(address)}
+        />
+    );
 }
+
+export const getSSOProviders = async (
+    backend: string,
+): Promise<
+    | {
+          providerId: string;
+          domain: string;
+      }[]
+    | undefined
+> => {
+    const query = `
+        query { 
+            ssoProviders: getSSOProviders {
+                providerId
+                domain
+            }
+        }
+        `;
+    const fetch = new FetchBuilder()
+        .setUrl(`${backend}/api/graph`)
+        .setPayload({ query })
+        .setIsGraphQLEndpoint(true)
+        .build();
+
+    try {
+        const response = await fetch.exec();
+        return response.ssoProviders;
+    } catch (e: any) {
+        console.log("getSSOProviders", e.message); // eslint-disable-line no-console
+        return undefined;
+    }
+};

apps/web/app/(with-contexts)/dashboard/(sidebar)/settings/sso/new/layout.tsx

@@ -0,0 +1,16 @@
+import { APIKEY_NEW_HEADER } from "@ui-config/strings";
+import type { Metadata, ResolvingMetadata } from "next";
+import { ReactNode } from "react";
+
+export async function generateMetadata(
+    _: any,
+    parent: ResolvingMetadata,
+): Promise<Metadata> {
+    return {
+        title: `${APIKEY_NEW_HEADER} | ${(await parent)?.title?.absolute}`,
+    };
+}
+
+export default function Layout({ children }: { children: ReactNode }) {
+    return children;
+}

apps/web/app/(with-contexts)/dashboard/(sidebar)/settings/sso/new/page.tsx

@@ -0,0 +1,45 @@
+"use client";
+
+import { useContext } from "react";
+import LoadingScreen from "@components/admin/loading-screen";
+import { checkPermission } from "@courselit/utils";
+import { AddressContext, ProfileContext } from "@components/contexts";
+import { UIConstants } from "@courselit/common-models";
+import DashboardContent from "@components/admin/dashboard-content";
+import {
+    SITE_MISCELLANEOUS_SETTING_HEADER,
+    SITE_SETTINGS_PAGE_HEADING,
+    SSO_PROVIDER_NEW_HEADER,
+} from "@ui-config/strings";
+import dynamic from "next/dynamic";
+const { permissions } = UIConstants;
+
+const SSOProviderNew = dynamic(
+    () => import("@/components/admin/settings/sso/new"),
+);
+
+const breadcrumbs = [
+    {
+        label: SITE_SETTINGS_PAGE_HEADING,
+        href: `/dashboard/settings?tab=${SITE_MISCELLANEOUS_SETTING_HEADER}`,
+    },
+    { label: SSO_PROVIDER_NEW_HEADER, href: "#" },
+];
+
+export default function Page() {
+    const address = useContext(AddressContext);
+    const { profile } = useContext(ProfileContext);
+
+    if (
+        !profile ||
+        !checkPermission(profile.permissions!, [permissions.manageSettings])
+    ) {
+        return <LoadingScreen />;
+    }
+
+    return (
+        <DashboardContent breadcrumbs={breadcrumbs}>
+            <SSOProviderNew address={address} />
+        </DashboardContent>
+    );
+}

apps/web/app/(with-contexts)/layout-with-context.tsx

@@ -8,13 +8,14 @@ import {
     useCallback,
     startTransition,
 } from "react";
-import { SiteInfo, ServerConfig } from "@courselit/common-models";
+import { SiteInfo, ServerConfig, Features } from "@courselit/common-models";
 import {
     AddressContext,
     ProfileContext,
     SiteInfoContext,
     ServerConfigContext,
     ThemeContext,
+    FeaturesContext,
 } from "@components/contexts";
 import { Toaster, useToast } from "@courselit/components-library";
 import { TOAST_TITLE_ERROR } from "@ui-config/strings";
@@ -33,13 +34,15 @@ function LayoutContent({
     theme: initialTheme,
     config,
     session,
+    features,
 }: {
     address: string;
     children: ReactNode;
     siteinfo: SiteInfo;
     theme: Theme;
     config: ServerConfig;
     session: BetterAuthSession;
+    features: Features[];
 }) {
     const [profile, setProfile] = useState(defaultState.profile);
     const [theme, setTheme] = useState(initialTheme);
@@ -77,25 +80,29 @@ function LayoutContent({
                 frontend: address,
             }}
         >
-            <SiteInfoContext.Provider value={siteinfo}>
-                <ThemeContext.Provider value={{ theme, setTheme }}>
-                    <ServerConfigContext.Provider value={config}>
-                        <NextThemesProvider
-                            attribute="class"
-                            defaultTheme="system"
-                            enableSystem
-                            disableTransitionOnChange
-                        >
-                            <ProfileContext.Provider
-                                value={{ profile, setProfile }}
+            <FeaturesContext.Provider value={features}>
+                <SiteInfoContext.Provider value={siteinfo}>
+                    <ThemeContext.Provider value={{ theme, setTheme }}>
+                        <ServerConfigContext.Provider value={config}>
+                            <NextThemesProvider
+                                attribute="class"
+                                defaultTheme="system"
+                                enableSystem
+                                disableTransitionOnChange
                             >
-                                <Suspense fallback={null}>{children}</Suspense>
-                            </ProfileContext.Provider>
-                        </NextThemesProvider>
-                    </ServerConfigContext.Provider>
-                </ThemeContext.Provider>
-            </SiteInfoContext.Provider>
-            <Toaster />
+                                <ProfileContext.Provider
+                                    value={{ profile, setProfile }}
+                                >
+                                    <Suspense fallback={null}>
+                                        {children}
+                                    </Suspense>
+                                </ProfileContext.Provider>
+                            </NextThemesProvider>
+                        </ServerConfigContext.Provider>
+                    </ThemeContext.Provider>
+                </SiteInfoContext.Provider>
+                <Toaster />
+            </FeaturesContext.Provider>
         </AddressContext.Provider>
     );
 }
@@ -107,6 +114,7 @@ export default function Layout(props: {
     theme: Theme;
     config: ServerConfig;
     session: BetterAuthSession;
+    features: Features[];
 }) {
     return (
         <Suspense fallback={null}>

apps/web/app/(with-contexts)/layout.tsx

@@ -32,6 +32,7 @@ export default async function Layout({
             theme={siteSetup?.theme || defaultState.theme}
             config={config}
             session={session}
+            features={siteSetup?.features || defaultState.features}
         >
             {children}
         </LayoutWithContext>

apps/web/app/verify-domain/route.ts

@@ -7,6 +7,7 @@ import { headers } from "next/headers";
 import connectToDatabase from "../../services/db";
 import { warn } from "@/services/logger";
 import SubscriberModel, { Subscriber } from "@models/Subscriber";
+import { Constants } from "@courselit/common-models";
 
 const { domainNameForSingleTenancy, schoolNameForSingleTenancy } = constants;
 
@@ -107,8 +108,6 @@ export async function GET(req: Request) {
 
             const currentDate = new Date();
             const dateAfter24Hours = new Date(currentDate.getTime() + 86400000);
-            // domain.checkSubscriptionStatusAfter = dateAfter24Hours;
-            // await (domain as any).save({ timestamps: true });
             await DomainModel.findOneAndUpdate(
                 { _id: domain!._id },
                 { $set: { checkSubscriptionStatusAfter: dateAfter24Hours } },
@@ -145,7 +144,13 @@ export async function GET(req: Request) {
                     },
                     settings: {
                         title: schoolNameForSingleTenancy,
+                        logins: [Constants.LoginProvider.EMAIL],
                     },
+                    features: [
+                        Constants.Features.SSO,
+                        Constants.Features.API,
+                        Constants.Features.LOG,
+                    ],
                 },
                 {
                     upsert: true,