Google Auth

Author: Rajat

AGENTS.md

@@ -18,6 +18,7 @@
     - Use **Batching** with `bulkWrite` (e.g., batches of 500) to maximize performance and minimize network roundtrips.
     - Ensure **Idempotency** (safe to re-run) by using upserts or `$setOnInsert` where applicable.
 - When making changes to the structure of the Course, consider how it affects its representation on its public page (`apps/web/app/(with-contexts)/(with-layout)/p/[id]/page.tsx`) and the course viewer (`apps/web/app/(with-contexts)/course/[slug]/[id]/page.tsx`).
+- `apps/web` is a multi-tenant app.
 
 ### Workspace map (core modules):
 

apps/docs/public/assets/schools/google-login-button.png

@@ -123,6 +123,7 @@ export const SIDEBAR: Sidebar = {
             { text: "Use custom domain", link: "en/schools/add-custom-domain" },
             { text: "Set up payments", link: "en/schools/set-up-payments" },
             { text: "Single Sign-On", link: "en/schools/sso" },
+            { text: "Sign in with Google", link: "en/schools/google-sign-in" },
             { text: "Delete a school", link: "en/schools/delete" },
         ],
         Users: [

apps/docs/public/assets/schools/idp/entra-id/sso-entra-idp-cert-and-metadata.png

@@ -0,0 +1,75 @@
+---
+title: Set up Sign in with Google
+description: Learn how to let your customers sign in with their Google accounts
+layout: ../../../layouts/MainLayout.astro
+---
+
+Using Google sign-in, you can let customers authenticate with their Google accounts on your login page and checkout page.
+
+## Steps to set up Google sign-in
+
+1. In the CourseLit dashboard, go to `Settings` -> `Miscellaneous` -> `Login providers`.
+
+    ![Login providers area](/assets/schools/login-providers-area.png)
+
+2. Click on the Cog icon next to the Google provider to open its configuration screen.
+
+3. Keep the `School Settings` card open. You will use these values while creating the Google OAuth app:
+
+    - **Authorized redirect URI**: Usually `https://<school-url>/api/auth/sso/callback/google`
+    - **Authorized JavaScript origin**: Usually `https://<school-url>`
+
+4. Open the [Google Cloud Console](https://console.cloud.google.com/) and create or select the project you want to use.
+
+5. If prompted, configure the OAuth consent screen first:
+
+    - Choose the appropriate user type for your use case.
+    - Add the app name, support email, and authorized domain details requested by Google.
+    - If your app is in testing mode, add the Google accounts you want to use as test users.
+
+6. In Google Cloud Console, go to `APIs & Services` -> `Credentials` and click `Create Credentials` -> `OAuth client ID`.
+
+7. Select `Web application` as the application type.
+
+8. In the OAuth client configuration screen, use the values from CourseLit:
+
+    - Add the `Authorized JavaScript origin` shown in CourseLit.
+    - Add the `Authorized redirect URI` shown in CourseLit.
+
+9. Click `Create`, then copy the generated `Client ID` and `Client secret`.
+
+10. Return to CourseLit and paste those values into the `Google App Configuration` card.
+
+11. Click `Save`.
+
+12. Go back to the `Login providers` screen and enable the Google provider.
+
+## Customer's experience
+
+When Google login is configured and enabled, customers will see a `Continue with Google` button anywhere external login providers are shown, such as the login page and checkout page.
+
+![Google login button](/assets/schools/google-login-button.png)
+
+## Before you disable Google sign-in
+
+Disabling the Google provider does not delete the users who previously signed up with Google. Their CourseLit account, purchases, and progress remain intact.
+
+However, they will no longer be able to use `Continue with Google` to access that account. To keep signing in, they need another enabled login method that maps to the same email address, such as email login.
+
+## Troubleshooting
+
+### 1. I get a redirect URI mismatch error
+
+Make sure the `Authorized redirect URI` in Google Cloud Console exactly matches the value shown in CourseLit, including the protocol (`https://`) and the full path.
+
+### 2. I get an origin mismatch error
+
+Make sure the `Authorized JavaScript origin` in Google Cloud Console exactly matches the value shown in CourseLit.
+
+### 3. Only some Google accounts can sign in
+
+If your OAuth app is still in testing mode, Google only allows the accounts listed as test users to sign in. Add the required accounts as test users or publish the app when you are ready.
+
+## 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/docs/public/assets/schools/login-providers-area.png

@@ -76,7 +76,19 @@ To use this feature on [courseLit.app](https://courselit.app), you need to be on
     ![Okta IdP metadata](/assets/schools/idp/okta/saml-signing-certificates.png)
 
 9. Enter the values obtained in the `IDP Configuration` panel.
-10. The Okta IdP is now configured.
+10. The Okta IdP is now configured. Test the integration.
+
+### Microsoft Entra ID
+
+1. Go to `Azure` portal, search for `Enterprise applications` and click on it to go to the apps.
+2. Click `New application` to create a new app.
+3. In the `Browse Microsoft Entra App Gallery` screen, click `Create your own application`. In the settings pane, enter the app's name and click `Create`.
+4. After the application is created, select `Set up single sign on` and choose `SAML` as the single sign-on method.
+5. In the SAML setup screen, click the pencil icon in the `Basic SAML Configuration` card and enter CourseLit's `Audience URI (SP Entity ID)` in `Identifier (Entity ID)` and the `SAML ACS URL` in `Reply URL (Assertion Consumer Service URL)`.
+6. Next, obtain the IdP details from the `SAML Certificates` pane (on the same page). Click the pencil icon to open the settings pane, download the PEM certificate and the Federated certificate XML, and paste them into CourseLit's `Certificate` and `IDP Metadata` fields respectively.
+   ![Microsoft Entra ID's certificates](/assets/schools/idp/entra-id/sso-entra-idp-cert-and-metadata.png)
+7. Obtain the `Login URL` from the same screen and enter it into CourseLit's `Entry point` field.
+8. The Entra IdP is now configured — test the integration.
 
 ## Customer's experience
 

apps/docs/src/config.ts

@@ -27,4 +27,7 @@
 # SEQUENCE_DELAY_BETWEEN_MAILS = 86400000 # 1 day in milliseconds 
 
 # Cache directory
-# CACHE_DIR=/tmp
+# CACHE_DIR=/tmp
+
+# If using standalone Mongo (no replica set)
+# DB_TRANSACTION=false

apps/docs/src/pages/en/schools/google-sign-in.md

@@ -9,7 +9,7 @@ import { FetchBuilder } from "@courselit/utils";
 import { TOAST_TITLE_ERROR } from "@ui-config/strings";
 import { useSearchParams } from "next/navigation";
 import { useCallback, useContext, useEffect, useState } from "react";
-import type { SSOProvider } from "../login/page";
+import type { RuntimeLoginProvider } from "@/lib/login-providers";
 
 const { MembershipEntityType } = Constants;
 
@@ -23,7 +23,9 @@ export default function ProductCheckout() {
     const [product, setProduct] = useState<Product | null>(null);
     const [paymentPlans, setPaymentPlans] = useState<PaymentPlan[]>([]);
     const [includedProducts, setIncludedProducts] = useState<Course[]>([]);
-    const [ssoProvider, setSSOProvider] = useState<SSOProvider | undefined>();
+    const [loginProviders, setLoginProviders] = useState<
+        RuntimeLoginProvider[]
+    >([]);
 
     const getIncludedProducts = useCallback(async () => {
         const query = `
@@ -97,9 +99,12 @@ export default function ProductCheckout() {
                     }
                     defaultPaymentPlan
                 }
-                ssoProvider: getSSOProvider {
+                loginProviders: getExternalLoginProviders {
+                    key
                     providerId
-                    domain
+                    label
+                    buttonText
+                    authType
                 }
             }
         `;
@@ -126,9 +131,7 @@ export default function ProductCheckout() {
                     description: "Course not found",
                 });
             }
-            if (response.ssoProvider) {
-                setSSOProvider(response.ssoProvider);
-            }
+            setLoginProviders(response.loginProviders || []);
         } catch (err: any) {
             toast({
                 title: TOAST_TITLE_ERROR,
@@ -164,9 +167,12 @@ export default function ProductCheckout() {
                     joiningReasonText
                     defaultPaymentPlan
                 }
-                ssoProvider: getSSOProvider {
+                loginProviders: getExternalLoginProviders {
+                    key
                     providerId
-                    domain
+                    label
+                    buttonText
+                    authType
                 }
             }
         `;
@@ -194,9 +200,7 @@ export default function ProductCheckout() {
                     description: "Community not found",
                 });
             }
-            if (response.ssoProvider) {
-                setSSOProvider(response.ssoProvider);
-            }
+            setLoginProviders(response.loginProviders || []);
         } catch (err: any) {
             toast({
                 title: TOAST_TITLE_ERROR,
@@ -231,7 +235,7 @@ export default function ProductCheckout() {
             product={product}
             paymentPlans={paymentPlans}
             includedProducts={includedProducts}
-            ssoProvider={ssoProvider}
+            loginProviders={loginProviders}
             type={entityType as MembershipEntityType | undefined}
             id={entityId as string | undefined}
         />

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

@@ -37,16 +37,15 @@ import { Constants, Profile } from "@courselit/common-models";
 import { getUserProfile } from "../../helpers";
 import { ADMIN_PERMISSIONS } from "@ui-config/constants";
 import { authClient } from "@/lib/auth-client";
+import type { RuntimeLoginProvider } from "@/lib/login-providers";
+import ExternalLoginButton from "@/components/auth/external-login-button";
 
 export default function LoginForm({
     redirectTo,
-    ssoProvider,
+    loginProviders = [],
 }: {
     redirectTo?: string;
-    ssoProvider?: {
-        providerId: string;
-        domain: string;
-    };
+    loginProviders?: RuntimeLoginProvider[];
 }) {
     const { theme } = useContext(ThemeContext);
     const [showCode, setShowCode] = useState(false);
@@ -312,23 +311,20 @@ export default function LoginForm({
                                 )}
                             </>
                         )}
-                        {siteinfo.logins?.includes(
-                            Constants.LoginProvider.SSO,
-                        ) &&
-                            ssoProvider && (
-                                <Button
-                                    variant="outline"
-                                    onClick={async () => {
-                                        await authClient.signIn.sso({
-                                            providerId: ssoProvider.providerId,
-                                            callbackURL: "/dashboard",
-                                        });
-                                    }}
-                                    className="w-full lg:w-[360px] mx-auto"
-                                >
-                                    Login with SSO
-                                </Button>
-                            )}
+                        {loginProviders.map((provider) => (
+                            <ExternalLoginButton
+                                key={provider.key}
+                                provider={provider}
+                                theme={theme.theme}
+                                className="w-full lg:w-[360px] mx-auto"
+                                onClick={async () => {
+                                    await authClient.signIn.sso({
+                                        providerId: provider.providerId,
+                                        callbackURL: "/dashboard",
+                                    });
+                                }}
+                            />
+                        ))}
                         <Caption theme={theme.theme} className="text-center">
                             {LOGIN_FORM_DISCLAIMER}
                             <Link href="/p/terms">