add authentication context + ssr (#57)

* add authentication context + ssr

* fix lint

app/contexts/appApollo/appApolloProvider.tsx → app/contexts/apollo/apolloClientProvider.tsx

@@ -3,15 +3,14 @@ import { ApolloProvider } from "@apollo/client";
 import { useAuthenticationContext } from "../authentication/authenticationContext";
 import { useMemo } from "react";
 
-export const AppApolloProvider = ({
+export const ApolloClientProvider = ({
   children,
 }: {
   children: React.ReactNode;
 }) => {
   const { user } = useAuthenticationContext();
 
   const client = useMemo(() => {
-    console.log("Client is created!!!"); //TODO:
     return getApolloClient(
       sessionStorage.getItem("graphql_url"),
       user?.jwt_token,

app/contexts/apollo/apolloServerProvider.tsx

@@ -0,0 +1,15 @@
+import {
+  ApolloClient,
+  ApolloProvider,
+  NormalizedCacheObject,
+} from "@apollo/client";
+
+export const ApolloServerProvider = ({
+  client,
+  children,
+}: {
+  client: ApolloClient<NormalizedCacheObject>;
+  children: React.ReactNode;
+}) => {
+  return <ApolloProvider client={client}>{children}</ApolloProvider>;
+};

app/contexts/authentication/authenticationProvider.tsx → app/contexts/authentication/AuthenticationClientProvider.tsx

@@ -3,15 +3,21 @@ import { useState } from "react";
 import { User } from "~/models/user";
 import { AuthenticationContext } from "./authenticationContext";
 
-export const AuthenticationProvider = ({
+export const AuthenticationClientProvider = ({
   children,
 }: {
   children: React.ReactNode;
 }) => {
-  const [user, setUser] = useState<User | undefined>();
+  const [user, setUser] = useState<User>(window.__USER_STATE__);
 
   return (
-    <AuthenticationContext.Provider value={{ user: user, setUser: setUser }}>
+    <AuthenticationContext.Provider
+      value={{
+        user: user,
+        setUser: setUser,
+        isAuthenticated: user != null,
+      }}
+    >
       {children}
     </AuthenticationContext.Provider>
   );

app/contexts/authentication/AuthenticationServerProvider.tsx

@@ -0,0 +1,22 @@
+import { User } from "~/models/user";
+import { AuthenticationContext } from "./authenticationContext";
+
+export const AuthenticationServerProvider = ({
+  user,
+  children,
+}: {
+  user: User | null;
+  children: React.ReactNode;
+}) => {
+  return (
+    <AuthenticationContext.Provider
+      value={{
+        user: user,
+        setUser: () => {},
+        isAuthenticated: user != null,
+      }}
+    >
+      {children}
+    </AuthenticationContext.Provider>
+  );
+};

app/contexts/authentication/authenticationContext.ts

@@ -2,11 +2,13 @@ import React from "react";
 import { User } from "~/models/user";
 
 export const AuthenticationContext = React.createContext<{
-  user?: User;
-  setUser: React.Dispatch<React.SetStateAction<User | undefined>>;
+  user: User | null;
+  setUser: React.Dispatch<React.SetStateAction<User>>;
+  isAuthenticated: boolean;
 }>({
-  user: undefined,
+  user: null,
   setUser: () => {},
+  isAuthenticated: false,
 });
 
 export function useAuthenticationContext() {

app/contexts/index.ts

@@ -1,3 +1,5 @@
 export * from "./authentication/authenticationContext";
-export * from "./authentication/authenticationProvider";
-export * from "./appApollo/appApolloProvider";
+export * from "./authentication/AuthenticationClientProvider";
+export * from "./authentication/AuthenticationServerProvider";
+export * from "./apollo/apolloClientProvider";
+export * from "./apollo/apolloServerProvider";

app/entry.client.tsx

@@ -8,19 +8,19 @@ import { ThemeProvider } from "@material-tailwind/react";
 import { RemixBrowser } from "@remix-run/react";
 import { startTransition, StrictMode } from "react";
 import { hydrateRoot } from "react-dom/client";
-import { AppApolloProvider, AuthenticationProvider } from "./contexts";
+import { ApolloClientProvider, AuthenticationClientProvider } from "./contexts";
 
 startTransition(() => {
   hydrateRoot(
     document,
     <StrictMode>
-      <AuthenticationProvider>
-        <AppApolloProvider>
+      <AuthenticationClientProvider>
+        <ApolloClientProvider>
           <ThemeProvider>
             <RemixBrowser />
           </ThemeProvider>
-        </AppApolloProvider>
-      </AuthenticationProvider>
+        </ApolloClientProvider>
+      </AuthenticationClientProvider>
     </StrictMode>,
   );
 });

app/entry.server.tsx

@@ -12,11 +12,13 @@ import { RemixServer } from "@remix-run/react";
 import isbot from "isbot";
 import { renderToPipeableStream } from "react-dom/server";
 
-import { ApolloProvider } from "@apollo/client";
+import { ApolloClient, NormalizedCacheObject } from "@apollo/client";
 import { getDataFromTree } from "@apollo/client/react/ssr";
 import { authenticator } from "./services/auth.server";
 import type { ReactElement } from "react";
 import * as utils from "./utils";
+import { AuthenticationServerProvider, ApolloServerProvider } from "./contexts";
+import { User } from "./models/user";
 
 const ABORT_DELAY = 5_000;
 // process.env.NODE_TLS_REJECT_UNAUTHORIZED = "0"; //TODO: remove this line. It is dangerous. We have it because there is an issue with the SSL certificate chain of render.com in production
@@ -152,9 +154,10 @@ async function wrapRemixServerWithApollo(
   remixServer: ReactElement,
   request: Request,
 ) {
-  const client = await buildApolloClient(request);
+  const user = await authenticator.isAuthenticated(request);
+  const client = await buildApolloClient(user);
 
-  const app = <ApolloProvider client={client}>{remixServer}</ApolloProvider>;
+  const app = getServerApp(user, client, remixServer);
 
   await getDataFromTree(app);
   const initialState = client.extract();
@@ -164,22 +167,36 @@ async function wrapRemixServerWithApollo(
       {app}
       <script
         dangerouslySetInnerHTML={{
-          __html: `window.__APOLLO_STATE__=${JSON.stringify(
-            initialState,
-          ).replace(/</g, "\\u003c")}`, // The replace call escapes the < character to prevent cross-site scripting attacks that are possible via the presence of </script> in a string literal
+          __html: `
+            window.__APOLLO_STATE__=${serializeState(initialState)}; 
+            window.__USER_STATE__=${serializeState(user)}`,
         }}
       />
     </>
   );
   return appWithData;
 }
 
-async function buildApolloClient(request: Request) {
-  let user = await authenticator.isAuthenticated(request);
+function serializeState(state: any) {
+  return JSON.stringify(state).replace(/</g, "\\u003c"); // The replace call escapes the < character to prevent cross-site scripting attacks that are possible via the presence of </script> in a string literal
+}
 
+function buildApolloClient(user: User | null) {
   return utils.getApolloClient(
     process.env.GRAPHQL_SCHEMA_URL,
     user?.jwt_token,
     user?.organization_id.toString(),
   );
 }
+
+function getServerApp(
+  user: User | null,
+  client: ApolloClient<NormalizedCacheObject>,
+  remixServer: ReactElement,
+) {
+  return (
+    <AuthenticationServerProvider user={user}>
+      <ApolloServerProvider client={client}>{remixServer}</ApolloServerProvider>
+    </AuthenticationServerProvider>
+  );
+}

app/models/user.ts

@@ -3,7 +3,8 @@ export type User = {
   jwt_token: string;
   name: string;
   user_id: number;
-  individual_id?: number;
+  individual_id: number;
   organization_id: number;
   is_manager?: boolean;
+  isPersonal: boolean;
 };

app/routes/_auth.login.($id).tsx

@@ -86,7 +86,7 @@ export function SignIn() {
 
           <div className="mt-6 flex justify-between gap-2">
             <Typography variant="small" className="font-medium text-gray-900">
-              <a href="#">Forgot Password?</a>
+              <a href="/">Forgot Password?</a>
             </Typography>
           </div>
           <div className="mt-8 space-y-4">
@@ -167,6 +167,7 @@ export function SignIn() {
         <img
           src="/images/pattern.png"
           className="h-full w-full rounded-3xl object-cover"
+          alt=""
         />
       </div>
     </section>

app/routes/_dashboard.cycles._index/route.tsx

@@ -11,21 +11,13 @@ import {
   CardFooter,
   Spinner,
 } from "@material-tailwind/react";
-import { LoaderFunction, redirect } from "@remix-run/node";
+
 import { Link } from "@remix-run/react";
-import { authenticator } from "~/services/auth.server";
 import { noNull } from "~/utils";
 import { AssignMissedActivitiesButton } from "~/components/AssignMissedActivitiesButton";
 
 const TABLE_HEAD = ["Title", "From", "To", ""];
 
-export let loader: LoaderFunction = async ({ request }) => {
-  //we should completely change the following appraoch
-  let user = await authenticator.isAuthenticated(request);
-  if (!user) return redirect("/login");
-  else return { user };
-};
-
 export default function Cycles() {
   let pageTitle = "Cycles";
   let pageSubTitle = "";

app/routes/_dashboard.individuals.$id.coach/route.tsx

@@ -19,15 +19,20 @@ import { noNull } from "~/utils";
 
 import { GenerateCycleSummaryButton } from "./components/GenerateCycleSummaryButton";
 import { DefaultSkeleton } from "~/components/DefaultSkeleton";
+import { useAuthenticationContext } from "~/contexts";
 
 export default function IndividualCoach() {
-  const { id } = useParams();
-  if (id == null) throw new Error("id is null");
+  const { id: idParam } = useParams();
+  if (idParam == null) throw new Error("id is null");
   const [open, setOpen] = useState(0);
   const [isOnGneratingAdvice, setIsOnGneratingAdvice] = useState(false);
   const [adviceList, setAdviceList] = useState<AdviceFragmentFragment[] | null>(
     null,
   );
+  const { user } = useAuthenticationContext();
+
+  let id = idParam == "me" ? user?.individual_id.toString() : idParam;
+  if (id == null) throw new Error("id is null");
 
   const { data, loading, error } = useCoachIndividualQuery({
     variables: { id: id },
@@ -127,21 +132,20 @@ export default function IndividualCoach() {
                   </Link>
                 </Tooltip>
               </Typography>
-
-              <Typography color="gray" className="mb-8 font-normal">
-                {isOnGneratingAdvice ? (
-                  <DefaultSkeleton />
-                ) : cycle.advice?.activitySummary ? (
-                  <pre
-                    className="whitespace-pre-wrap"
-                    style={{ fontFamily: "inherit" }}
-                  >
-                    {cycle.advice.activitySummary}
-                  </pre>
-                ) : (
-                  "-"
-                )}
-              </Typography>
+              <pre
+                className="whitespace-pre-wrap"
+                style={{ fontFamily: "inherit" }}
+              >
+                <Typography color="gray" className="mb-8 font-normal">
+                  {isOnGneratingAdvice ? (
+                    <DefaultSkeleton />
+                  ) : cycle.advice?.activitySummary ? (
+                    cycle.advice.activitySummary
+                  ) : (
+                    "-"
+                  )}
+                </Typography>
+              </pre>
             </CardBody>
           </Card>
           <Card className="flex-1">
@@ -165,42 +169,41 @@ export default function IndividualCoach() {
                 </Tooltip>
               </Typography>
 
-              <Typography color="gray" className="mb-8 font-normal">
-                {isOnGneratingAdvice ? (
-                  <DefaultSkeleton />
-                ) : cycle.advice?.visionSummary ? (
-                  <pre
-                    className="whitespace-pre-wrap"
-                    style={{ fontFamily: "inherit" }}
-                  >
-                    {cycle.advice.visionSummary}
-                  </pre>
-                ) : (
-                  "-"
-                )}
-              </Typography>
+              <pre
+                className="whitespace-pre-wrap"
+                style={{ fontFamily: "inherit" }}
+              >
+                <Typography color="gray" className="mb-8 font-normal">
+                  {isOnGneratingAdvice ? (
+                    <DefaultSkeleton />
+                  ) : cycle.advice?.visionSummary ? (
+                    cycle.advice.visionSummary
+                  ) : (
+                    "-"
+                  )}
+                </Typography>
+              </pre>
             </CardBody>
           </Card>
           <Card className="flex-1">
             <CardBody>
               <Typography variant="h6" color="gray" className="mb-4 uppercase">
                 Coaching Advice
               </Typography>
-
-              <Typography color="gray" className="mb-8 font-normal">
-                {isOnGneratingAdvice ? (
-                  <DefaultSkeleton />
-                ) : cycle.advice?.result ? (
-                  <pre
-                    className="whitespace-pre-wrap"
-                    style={{ fontFamily: "inherit" }}
-                  >
-                    {cycle.advice.result}
-                  </pre>
-                ) : (
-                  "-"
-                )}
-              </Typography>
+              <pre
+                className="whitespace-pre-wrap"
+                style={{ fontFamily: "inherit" }}
+              >
+                <Typography color="gray" className="mb-8 font-normal">
+                  {isOnGneratingAdvice ? (
+                    <DefaultSkeleton />
+                  ) : cycle.advice?.result ? (
+                    cycle.advice.result
+                  ) : (
+                    "-"
+                  )}
+                </Typography>
+              </pre>
             </CardBody>
           </Card>
         </div>