Magic code (#291)

Co-authored-by: Rajat Saxena <hi@rajatsaxena.dev>

apps/web/components/admin/base-layout.tsx

@@ -1,20 +1,12 @@
 import React, { ReactNode, useEffect } from "react";
 import { connect } from "react-redux";
 import { useRouter } from "next/router";
-import {
-    Rocket,
-    Text,
-    Person,
-    Mail,
-    //Desktop,
-    Settings,
-} from "@courselit/icons";
+import { Rocket, Text, Person, Mail, Settings } from "@courselit/icons";
 import {
     CREATOR_AREA_PAGE_TITLE,
     SIDEBAR_MENU_BLOGS,
     SIDEBAR_MENU_PRODUCTS,
     SIDEBAR_MENU_SETTINGS,
-    //SIDEBAR_MENU_SITE,
     SIDEBAR_MENU_USERS,
     SIDEBAR_MENU_MAILS,
 } from "../../ui-config/strings";
@@ -27,7 +19,12 @@ import Auth from "../../ui-models/auth";
 import SiteInfo from "../../ui-models/site-info";
 import { UIConstants as constants } from "@courselit/common-models";
 import { checkPermission } from "@courselit/utils";
-import { AppState } from "@courselit/state-management";
+import {
+    actionCreators,
+    AppDispatch,
+    AppState,
+} from "@courselit/state-management";
+import { useSession } from "next-auth/react";
 const { permissions } = constants;
 
 const getSidebarMenuItems = (profile: Profile, featureFlags: string[]) => {
@@ -94,6 +91,7 @@ interface BaseLayoutProps {
     children: ReactNode;
     title: string;
     featureFlags: string[];
+    dispatch: AppDispatch;
 }
 
 const BaseLayoutAdmin = ({
@@ -103,7 +101,9 @@ const BaseLayoutAdmin = ({
     children,
     title,
     featureFlags,
+    dispatch,
 }: BaseLayoutProps) => {
+    const { status } = useSession();
     const router = useRouter();
 
     useEffect(() => {
@@ -113,10 +113,15 @@ const BaseLayoutAdmin = ({
     }, [profile.fetched]);
 
     useEffect(() => {
-        if (auth.checked && auth.guest) {
+        if (status === "authenticated") {
+            dispatch(actionCreators.signedIn());
+            dispatch(actionCreators.authChecked());
+        }
+        if (status === "unauthenticated") {
+            dispatch(actionCreators.authChecked());
             router.push(`/login?redirect=${router.asPath}`);
         }
-    }, [auth.checked]);
+    }, [status]);
 
     const items = getSidebarMenuItems(profile, featureFlags);
 
@@ -159,4 +164,6 @@ const mapStateToProps = (state: AppState) => ({
     featureFlags: state.featureFlags,
 });
 
-export default connect(mapStateToProps)(BaseLayoutAdmin);
+const mapDispatchToProps = (dispatch: AppDispatch) => ({ dispatch });
+
+export default connect(mapStateToProps, mapDispatchToProps)(BaseLayoutAdmin);

apps/web/components/admin/blogs/blog-item.tsx

@@ -41,7 +41,13 @@ function BlogItem({
                 </Link>
             </td>
             <td align="right">
-                <Chip className={product.published ? "!bg-black" : ""}>
+                <Chip
+                    className={
+                        product.published
+                            ? "!bg-black text-white !border-black"
+                            : ""
+                    }
+                >
                     {product.published
                         ? PRODUCT_STATUS_PUBLISHED
                         : PRODUCT_STATUS_DRAFT}

apps/web/components/admin/products/product.tsx

@@ -88,7 +88,13 @@ function Product({
                 <p>{capitalize(product.type)}</p>
             </td>
             <td align="right">
-                <Chip className={product.published ? "!bg-black" : ""}>
+                <Chip
+                    className={
+                        product.published
+                            ? "!bg-black text-white !border-black"
+                            : ""
+                    }
+                >
                     {product.published
                         ? PRODUCT_STATUS_PUBLISHED
                         : PRODUCT_STATUS_DRAFT}

apps/web/components/public/base-layout/index.tsx

@@ -2,8 +2,14 @@ import React, { ReactNode } from "react";
 import { connect } from "react-redux";
 import Head from "next/head";
 import Template from "./template";
-import type { AppState } from "@courselit/state-management";
+import {
+    actionCreators,
+    AppDispatch,
+    AppState,
+} from "@courselit/state-management";
 import type { Theme, Typeface, WidgetInstance } from "@courselit/common-models";
+import { useSession } from "next-auth/react";
+import { useEffect } from "react";
 
 interface MasterLayoutProps {
     title: string;
@@ -14,6 +20,7 @@ interface MasterLayoutProps {
     childrenOnTop?: boolean;
     typefaces: Typeface[];
     theme: Theme;
+    dispatch: AppDispatch;
 }
 
 const MasterLayout = ({
@@ -22,13 +29,26 @@ const MasterLayout = ({
     children,
     layout,
     typefaces,
+    dispatch,
     pageData = {},
     childrenOnTop = false,
 }: MasterLayoutProps) => {
+    const { status } = useSession();
+
     const primaryFontFamily = typefaces.filter(
         (x) => x.section === "default",
     )[0]?.typeface;
 
+    useEffect(() => {
+        if (status === "authenticated") {
+            dispatch(actionCreators.signedIn());
+            dispatch(actionCreators.authChecked());
+        }
+        if (status === "unauthenticated") {
+            dispatch(actionCreators.authChecked());
+        }
+    }, [status]);
+
     return (
         <>
             <Head>
@@ -71,4 +91,6 @@ const mapStateToProps = (state: AppState) => ({
     theme: state.theme,
 });
 
-export default connect(mapStateToProps)(MasterLayout);
+const mapDispatchToProps = (dispatch: AppDispatch) => ({ dispatch });
+
+export default connect(mapStateToProps, mapDispatchToProps)(MasterLayout);

apps/web/components/public/session-button.tsx

@@ -4,28 +4,31 @@ import {
     GENERIC_SIGNOUT_TEXT,
     GENERIC_SIGNIN_TEXT,
 } from "../../ui-config/strings";
-import { Button, Link } from "@courselit/components-library";
+import { Button } from "@courselit/components-library";
 import Profile from "../../ui-models/profile";
 import { AppState } from "@courselit/state-management";
+import { signIn, signOut, useSession } from "next-auth/react";
 
 interface SessionButtonProps {
     auth: any;
     profile: Profile;
 }
 
 function SessionButton(props: SessionButtonProps) {
+    const { data: session } = useSession();
+
+    if (session) {
+        return (
+            <Button onClick={() => signOut()} component="button">
+                {GENERIC_SIGNOUT_TEXT}
+            </Button>
+        );
+    }
+
     return (
-        <span className="">
-            {props.auth.guest ? (
-                <Link href="/login">
-                    <Button component="button">{GENERIC_SIGNIN_TEXT}</Button>
-                </Link>
-            ) : (
-                <Link href="/logout">
-                    <Button component="button">{GENERIC_SIGNOUT_TEXT}</Button>
-                </Link>
-            )}
-        </span>
+        <Button onClick={() => signIn()} component="button">
+            {GENERIC_SIGNIN_TEXT}
+        </Button>
     );
 }
 

apps/web/middlewares/set-user-from-session.ts

@@ -0,0 +1,30 @@
+import { NextApiResponse } from "next";
+import { getServerSession } from "next-auth";
+import ApiRequest from "../models/ApiRequest";
+import User from "../models/User";
+import { authOptions } from "../pages/api/auth/[...nextauth]";
+
+export default async function setUserFromSession(
+    req: ApiRequest,
+    res: NextApiResponse,
+    next: any,
+): Promise<void> {
+    const session = await getServerSession(req, res, authOptions);
+
+    if (session) {
+        try {
+            const user = await User.findOne({
+                email: session.user.email,
+                domain: req.subdomain._id,
+                active: true,
+            });
+            if (user) {
+                req.user = user;
+            }
+        } catch (e: any) {
+            next();
+        }
+    }
+
+    next();
+}

apps/web/models/VerificationToken.ts

@@ -0,0 +1,28 @@
+import mongoose from "mongoose";
+
+export interface VerificationToken {
+    _id: mongoose.Types.ObjectId;
+    email: string;
+    domain: string;
+    code: string;
+    timestamp: Date;
+}
+
+const VerificationTokenSchema = new mongoose.Schema<VerificationToken>({
+    email: { type: String, required: true },
+    domain: { type: String, required: true },
+    code: { type: String, required: true },
+    timestamp: { type: Date, required: true },
+});
+
+VerificationTokenSchema.index(
+    {
+        email: 1,
+        domain: 1,
+        code: 1,
+    },
+    { unique: true },
+);
+
+export default mongoose.models.VerificationToken ||
+    mongoose.model("VerificationToken", VerificationTokenSchema);

apps/web/package.json

@@ -28,6 +28,7 @@
         "mongodb": "^4.4.1",
         "mongoose": "^7.4.2",
         "next": "13.4.11",
+        "next-auth": "^4.23.2",
         "next-connect": "^0.12.2",
         "nodemailer": "^6.7.2",
         "passport": "^0.6.0",

apps/web/pages/_app.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import React from "react";
 import "../styles/globals.css";
 import "@courselit/common-widgets/styles.css";
 import "@courselit/components-library/styles.css";
@@ -15,46 +15,40 @@ import { useRouter } from "next/router";
 import "remirror/styles/all.css";
 import { getBackendAddress } from "../ui-lib/utils";
 import FontsInjector from "../components/public/fonts-injector";
+import { SessionProvider } from "next-auth/react";
 
 type CourseLitProps = AppProps & {};
 
-function MyApp({ Component, pageProps }: CourseLitProps) {
-    const [mounted, setMounted] = useState(false);
+function MyApp({
+    Component,
+    pageProps: { session, ...pageProps },
+}: CourseLitProps) {
+    //const [mounted, setMounted] = useState(false);
     const store = useStore();
     const router = useRouter();
 
+    /*
     useEffect(() => {
         setMounted(true);
-        checkForSession();
     }, []);
-
-    const checkForSession = async () => {
-        const response = await fetch("/api/auth/user", {
-            method: "POST",
-            credentials: "same-origin",
-        });
-        if (response.status === 200) {
-            (store.dispatch as ThunkDispatch<State, null, AnyAction>)(
-                actionCreators.signedIn(),
-            );
-        }
-        (store.dispatch as ThunkDispatch<State, null, AnyAction>)(
-            actionCreators.authChecked(),
-        );
-    };
+    */
 
     return (
-        <Provider store={store}>
-            <div
-                style={{
-                    visibility: !mounted ? "hidden" : "visible",
-                }}
-            >
-                <Component {...pageProps} />
-            </div>
-            <CodeInjector router={router} />
-            <FontsInjector router={router} />
-        </Provider>
+        <SessionProvider session={session}>
+            <Provider store={store}>
+                <div
+                    style={
+                        {
+                            //visibility: !mounted ? "hidden" : "visible",
+                        }
+                    }
+                >
+                    <Component {...pageProps} />
+                </div>
+                <CodeInjector router={router} />
+                <FontsInjector router={router} />
+            </Provider>
+        </SessionProvider>
     );
 }