feat: SessionAuth SSR support (initialSessionAuthContext) (#789)

* feat: Add SSR support for SessionAuth (initialSessionAuthContext) * Add preloaded to sessionAuth test file * Rename preloaded to isContextFromSSR * changes to SSRSessionContextType * add missing initialSessionAuthContext test
supertokens · Jan 26, 2024 · f99aef2 · f99aef2
1 parent d2ca50e
commit f99aef2
Show file tree

Hide file tree

Showing 15 changed files with 107 additions and 19 deletions.
diff --git a/lib/build/index2.js b/lib/build/index2.js
diff --git a/lib/build/recipe/session/sessionAuth.d.ts b/lib/build/recipe/session/sessionAuth.d.ts
diff --git a/lib/build/recipe/session/types.d.ts b/lib/build/recipe/session/types.d.ts
diff --git a/lib/ts/recipe/session/index.ts b/lib/ts/recipe/session/index.ts
@@ -25,7 +25,7 @@ import { RecipeComponentsOverrideContextProvider } from "./componentOverrideCont
 import Session from "./recipe";
 import SessionAuthWrapper from "./sessionAuth";
 import SessionContext from "./sessionContext";
-import { InputType, SessionContextType } from "./types";
+import { InputType, SessionContextType, SSRSessionContextType } from "./types";
 import { useClaimValue as useClaimValueFunc } from "./useClaimValue";
 import useSessionContextFunc from "./useSessionContext";
 
@@ -150,6 +150,7 @@ export {
     InputType,
     SessionContext,
     SessionContextType,
+    SSRSessionContextType,
     BooleanClaim,
     ClaimValidationError,
     ClaimValidationResult,

diff --git a/lib/ts/recipe/session/sessionAuth.tsx b/lib/ts/recipe/session/sessionAuth.tsx
@@ -28,12 +28,21 @@ import Session from "./recipe";
 import SessionContext from "./sessionContext";
 import { getFailureRedirectionInfo } from "./utils";
 
-import type { LoadedSessionContext, RecipeEventWithSessionContext, SessionContextType } from "./types";
+import type {
+    LoadedSessionContext,
+    RecipeEventWithSessionContext,
+    SessionContextType,
+    SSRSessionContextType,
+} from "./types";
 import type { Navigate, ReactComponentClass, SessionClaimValidator, UserContext } from "../../types";
 import type { PropsWithChildren } from "react";
 import type { ClaimValidationError } from "supertokens-web-js/recipe/session";
 
 export type SessionAuthProps = {
+    /**
+     * Initial context that is rendered on a server side (SSR).
+     */
+    initialSessionAuthContext?: SSRSessionContextType;
     /**
      * For a detailed explanation please see https://github.com/supertokens/supertokens-auth-react/issues/570
      */
@@ -65,9 +74,16 @@ const SessionAuth: React.FC<PropsWithChildren<SessionAuthProps>> = ({ children,
         );
     }
 
+    const initialContext: SessionContextType = props.initialSessionAuthContext
+        ? {
+              ...props.initialSessionAuthContext,
+              invalidClaims: [], // invalidClaims is currently unsupported on server (SSR)
+          }
+        : { loading: true };
+
     // Reusing the parent context was removed because it caused a redirect loop in an edge case
     // because it'd also reuse the invalid claims part until it loaded.
-    const [context, setContext] = useState<SessionContextType>({ loading: true });
+    const [context, setContext] = useState<SessionContextType>(initialContext);
 
     const session = useRef<Session>();
 
@@ -101,6 +117,7 @@ const SessionAuth: React.FC<PropsWithChildren<SessionAuthProps>> = ({ children,
 
         if (sessionExists === false) {
             return {
+                isContextFromSSR: false,
                 loading: false,
                 doesSessionExist: false,
                 accessTokenPayload: {},
@@ -128,6 +145,7 @@ const SessionAuth: React.FC<PropsWithChildren<SessionAuthProps>> = ({ children,
                 throw err;
             }
             return {
+                isContextFromSSR: false,
                 loading: false,
                 doesSessionExist: false,
                 accessTokenPayload: {},
@@ -138,6 +156,7 @@ const SessionAuth: React.FC<PropsWithChildren<SessionAuthProps>> = ({ children,
 
         try {
             return {
+                isContextFromSSR: false,
                 loading: false,
                 doesSessionExist: true,
                 invalidClaims,
@@ -159,6 +178,7 @@ const SessionAuth: React.FC<PropsWithChildren<SessionAuthProps>> = ({ children,
             // This means that loading the access token or the userId failed
             // This may happen if the server cleared the error since the validation was done which should be extremely rare
             return {
+                isContextFromSSR: false,
                 loading: false,
                 doesSessionExist: false,
                 accessTokenPayload: {},
@@ -246,7 +266,12 @@ const SessionAuth: React.FC<PropsWithChildren<SessionAuthProps>> = ({ children,
                             userContext,
                         });
                         if (failureRedirectInfo.redirectPath) {
-                            setContext({ ...event.sessionContext, loading: false, invalidClaims });
+                            setContext({
+                                ...event.sessionContext,
+                                isContextFromSSR: false,
+                                loading: false,
+                                invalidClaims,
+                            });
                             return await SuperTokens.getInstanceOrThrow().redirectToUrl(
                                 failureRedirectInfo.redirectPath,
                                 navigate
@@ -259,21 +284,22 @@ const SessionAuth: React.FC<PropsWithChildren<SessionAuthProps>> = ({ children,
                             });
                             return setContext({
                                 ...event.sessionContext,
+                                isContextFromSSR: false,
                                 loading: false,
                                 invalidClaims,
                                 accessDeniedValidatorError: failureRedirectInfo.failedClaim,
                             });
                         }
                     }
-                    setContext({ ...event.sessionContext, loading: false, invalidClaims });
+                    setContext({ ...event.sessionContext, isContextFromSSR: false, loading: false, invalidClaims });
 
                     return;
                 }
                 case "SIGN_OUT":
-                    setContext({ ...event.sessionContext, loading: false, invalidClaims: [] });
+                    setContext({ ...event.sessionContext, isContextFromSSR: false, loading: false, invalidClaims: [] });
                     return;
                 case "UNAUTHORISED":
-                    setContext({ ...event.sessionContext, loading: false, invalidClaims: [] });
+                    setContext({ ...event.sessionContext, isContextFromSSR: false, loading: false, invalidClaims: [] });
                     if (props.onSessionExpired !== undefined) {
                         props.onSessionExpired();
                     } else if (props.requireAuth !== false && props.doRedirection !== false) {

diff --git a/lib/ts/recipe/session/types.ts b/lib/ts/recipe/session/types.ts
@@ -50,6 +50,7 @@ export type SessionContextUpdate = {
 };
 
 export type LoadedSessionContext = {
+    isContextFromSSR: boolean;
     loading: false;
     invalidClaims: ClaimValidationError[];
     accessDeniedValidatorError?: ClaimValidationError;
@@ -61,6 +62,8 @@ export type SessionContextType =
           loading: true;
       };
 
+export type SSRSessionContextType = Omit<LoadedSessionContext, "invalidClaims" | "accessDeniedValidatorError">;
+
 export type AccessDeniedThemeProps = {
     recipe: Session;
     navigate: Navigate;

diff --git a/package-lock.json b/package-lock.json
diff --git a/recipe/session/index.js b/recipe/session/index.js
@@ -13,6 +13,7 @@
  * under the License.
  */
 "use strict";
+"use client"; // Important for NextJS support (SessionAuth is a client component)
 function __export(m) {
     for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
 }

diff --git a/test/unit/componentOverrides.test.tsx b/test/unit/componentOverrides.test.tsx
@@ -214,6 +214,7 @@ describe("Components override per recipe provider", () => {
             ],
         });
         setMockResolvesSession({
+            isContextFromSSR: false,
             userId: "mock-user-id",
             accessTokenPayload: {},
             invalidClaims: [],

diff --git a/test/unit/recipe/emailpassword/signInUp.test.tsx b/test/unit/recipe/emailpassword/signInUp.test.tsx
@@ -56,6 +56,7 @@ describe("EmailPassword.SignInAndUp", () => {
         });
 
         setMockResolvesSession({
+            isContextFromSSR: false,
             userId: "mock-user-id",
             accessTokenPayload: {},
             invalidClaims: [],

diff --git a/test/unit/recipe/passwordless/signInUp.test.tsx b/test/unit/recipe/passwordless/signInUp.test.tsx
@@ -57,6 +57,7 @@ describe("Passwordless.SingInUp", () => {
         });
 
         setMockResolvesSession({
+            isContextFromSSR: false,
             userId: "mock-user-id",
             accessTokenPayload: {},
             invalidClaims: [],