Update examples

Author: bcbogdan

examples/with-next-ssr-app-directory/app/actions/checkSSRSession.ts

@@ -0,0 +1,14 @@
+"use server";
+
+import { cookies } from "next/headers";
+import { getServerActionSession, init } from "supertokens-auth-react/nextjs/ssr";
+import { ssrConfig } from "../config/ssr";
+
+init(ssrConfig());
+
+export async function serverActionThatLoadsTheSession() {
+    const cookiesStore = await cookies();
+    const session = await getServerActionSession(cookiesStore);
+    console.log("session", session);
+    return Promise.resolve(true);
+}

examples/with-next-ssr-app-directory/app/actions/serverActionThatLoadsTheSession.ts

@@ -0,0 +1,21 @@
+"use server";
+
+import { cookies } from "next/headers";
+import { redirect } from "next/navigation";
+import {
+    getServerComponentSession,
+    getServerActionSession,
+    init,
+    AuthenticatedServerAction,
+} from "supertokens-auth-react/nextjs/ssr";
+import { ssrConfig } from "../config/ssr";
+
+init(ssrConfig());
+
+export const serverActionThatReceivesTheSession: AuthenticatedServerAction<() => Promise<boolean>> = async (
+    session
+) => {
+    console.log("session", session);
+
+    return Promise.resolve(true);
+};

examples/with-next-ssr-app-directory/app/actions/serverActionThatReceivesTheSession.ts

@@ -10,7 +10,8 @@ import { SessionAuthForNextJS } from "./sessionAuthForNextJS";
 import { getServerComponentSession, init } from "supertokens-auth-react/nextjs/ssr";
 import { ssrConfig } from "../config/ssr";
 import { useState } from "react";
-import { SSRButton } from "./ssrButton";
+import { MiddlewareServerActionButton } from "./middlewareServerActionButton";
+import { ServerActionButton } from "./serverActionButton";
 
 init(ssrConfig());
 
@@ -35,7 +36,8 @@ export async function HomePage() {
                         <div>Your userID is:</div>
                         <div className={`${styles.truncate} ${styles.userId}`}>{session.userId}</div>
                         <CallAPIButton />
-                        <SSRButton />
+                        <MiddlewareServerActionButton />
+                        <ServerActionButton />
                     </div>
                 </div>
                 <LinksComponent />

examples/with-next-ssr-app-directory/app/components/home.tsx

@@ -1,27 +1,23 @@
 "use client";
 
-import { checkSSRSession } from "../actions/checkSSRSession";
+import { serverActionThatReceivesTheSession } from "../actions/serverActionThatReceivesTheSession";
 import { authenticateServerAction, init } from "supertokens-auth-react/nextjs/ssr";
 import styles from "../page.module.css";
 import { ssrConfig } from "../config/ssr";
 
-import { getAccessToken, attemptRefreshingSession } from "supertokens-web-js/recipe/session";
-
 init(ssrConfig());
 
-export const SSRButton = () => {
+export const MiddlewareServerActionButton = () => {
     return (
         <div
             style={{ marginTop: "20px" }}
             onClick={async (e) => {
-                // const session = await getAccessToken();
-                // console.log("sessionn in component", session);
-                const result = await authenticateServerAction(checkSSRSession);
+                const result = await authenticateServerAction(serverActionThatReceivesTheSession);
                 console.log(result);
             }}
             className={styles.sessionButton}
         >
-            Check SSR Session
+            Server Action that receives the session
         </div>
     );
 };

examples/with-next-ssr-app-directory/app/components/ssrButton.tsx renamed to examples/with-next-ssr-app-directory/app/components/middlewareServerActionButton.tsx

@@ -0,0 +1,19 @@
+"use client";
+
+import { serverActionThatLoadsTheSession } from "../actions/serverActionThatLoadsTheSession";
+import styles from "../page.module.css";
+
+export const ServerActionButton = () => {
+    return (
+        <div
+            style={{ marginTop: "20px" }}
+            onClick={async (e) => {
+                const result = await serverActionThatLoadsTheSession();
+                console.log(result);
+            }}
+            className={styles.sessionButton}
+        >
+            Server Action that loads the session
+        </div>
+    );
+};

examples/with-next-ssr-app-directory/app/components/serverActionButton.tsx

@@ -111,7 +111,8 @@ export default class SuperTokensNextjsSSRAPIWrapper {
      * Get the session state inside a server action
      * The function is meant to be used inside Next.js server actions
      * @param cookies - The cookies store exposed by next/headers (await cookies())
-     * @returns The session context value or undefined if the session does not exist or is invalid
+     * @returns An object that includes session context value and the status of the session ('valid' | 'expired' | 'invalid')
+     * If the status is 'invalid' or 'expired' then the users should be considered as unauthenticated
      **/
     static async getServerActionSession(
         cookies: CookiesStore
@@ -122,15 +123,19 @@ export default class SuperTokensNextjsSSRAPIWrapper {
         logDebugMessage(`SSR Session State: ${state}`);
         if (state === "tokens-match") {
             return { session: session as LoadedSessionContext, status: "valid" };
-        } else if (["tokens-do-not-match", "access-token-not-found", "access-token-invalid"].includes(state)) {
+        } else if (
+            ["tokens-do-not-match", "front-token-expired", "access-token-not-found", "access-token-invalid"].includes(
+                state
+            )
+        ) {
             return { status: "expired", session: undefined };
         }
 
         return { status: "invalid", session: undefined };
     }
 
     /**
-     * Authenticate a server action by passing the session context as a parameter
+     * Authenticates a server action and then passes the session context as a parameter
      * If the session does not exist/user is not authenticated, it will automatically redirect to the login page
      * The function is meant to run on the client, before calling the actual server action
      * @param action - A server action that takes the session context as its first parameter
@@ -207,6 +212,9 @@ export const getServerComponentSession = SuperTokensNextjsSSRAPIWrapper.getServe
 export const getServerActionSession = SuperTokensNextjsSSRAPIWrapper.getServerActionSession;
 export const getServerSidePropsSession = SuperTokensNextjsSSRAPIWrapper.getServerSidePropsSession;
 export const authenticateServerAction = SuperTokensNextjsSSRAPIWrapper.authenticateServerAction;
+export type AuthenticatedServerAction<T extends (...args: any[]) => any> = T extends (...args: infer A) => infer R
+    ? (session?: LoadedSessionContext, ...originalArgs: A) => R
+    : never;
 
 function getAuthPagePath(redirectPath: string): string {
     const authPagePath = SuperTokensNextjsSSRAPIWrapper.getConfigOrThrow().appInfo.websiteBasePath || "/auth";