Adapt session management

examples/nextjs/README.md

@@ -13,10 +13,9 @@ These are the different pages that you will find in this application:
 - `/signup` : Signup component page
 - `/dashboard` : The dashboard has three nested routes:
   - `/` : User Details page which uses `@corbado/node-sdk` to fetch complete details of the currently logged-in user.
-  - `/session-details` : this page deserializes the short session and show cases the details stored in the short session.
+  - `/session-details` : this page deserializes the session-token and show cases the details stored in the session-token.
   - `/passkey-list` : this page uses the `@corbado/react`'s `<PasskeyList/>` component to showcase its use
 
 ## Points to Note
 
 - When you use a component from `@corbado/react` either a UI component or a Provider component you need to `use client` for client side rendering as the components make use of react contexts.
-- For using `<CorbadoProvider />` with NextJS application we need to set `setShortSessionCookie` to true. It's important to set this since Corbado uses refresh tokens to keep the user logged in and by storing short session cookies, the user will be able to stay logged in even if the token is refreshed

examples/nextjs/app/providers.tsx

@@ -7,9 +7,6 @@ export function Providers({ children }: { children: React.ReactNode }) {
     <CorbadoProvider
       projectId={process.env.NEXT_PUBLIC_CORBADO_PROJECT_ID!}
       darkMode='off'
-      //it's important to set this since Corbado uses refresh tokens to keep the user logged in
-      //by storing short session cookies, the user will be able to stay logged in even if the token is refreshed
-      setShortSessionCookie={true}
     >
       {children}
     </CorbadoProvider>

examples/nextjs/app/ui/dashboard/current-user.tsx

@@ -4,9 +4,9 @@ import createNodeSDK from '@/app/utils/createNodeSDK';
 
 export default async function CurrentUser() {
   const cookieStore = cookies();
-  const session = cookieStore.get('cbo_short_session');
+  const sessionTokenCookie = cookieStore.get('cbo_session_token');
   const sdk = createNodeSDK();
-  const currentSessionUser = await sdk.sessions().getCurrentUser(session?.value ?? '');
+  const currentSessionUser = await sdk.sessions().getCurrentUser(sessionTokenCookie?.value ?? '');
   const userResp = await sdk.users().get(currentSessionUser?.getID() ?? '');
   const user = userResp.data;
   const activeEmail = user.emails.find(email => email.status === 'active');

examples/nextjs/app/ui/dashboard/session-details.tsx

@@ -3,16 +3,16 @@ import { cookies } from 'next/headers';
 
 export default function SessionDetails() {
   const cookieStore = cookies();
-  const session = cookieStore.get('cbo_short_session');
+  const sessionTokenCookie = cookieStore.get('cbo_session_token');
 
-  const decodedShortSession = jwtDecode(session?.value ?? '');
-  const serializedDecodedShortSession = JSON.stringify(decodedShortSession, null, 2);
+  const decodedSessionToken = jwtDecode(sessionTokenCookie?.value ?? '');
+  const serializedDecodedSessionToken = JSON.stringify(decodedSessionToken, null, 2);
 
   return (
     <>
       <div className='mb-3 mt-3'>
-        <p>This is your shortSession:</p>
-        <pre>{serializedDecodedShortSession}</pre>
+        <p>This is your sessionToken:</p>
+        <pre>{serializedDecodedSessionToken}</pre>
       </div>
     </>
   );

examples/nextjs/app/ui/right-intro-section.tsx

@@ -6,9 +6,9 @@ import Image from 'next/image';
 
 export default async function RightIntroSection() {
   const cookieStore = cookies();
-  const sessionCookie = cookieStore.get('cbo_short_session');
-  const shortSession = sessionCookie?.value;
-  const isSessionValid = await validateSession(shortSession);
+  const sessionTokenCookie = cookieStore.get('cbo_session_token');
+  const sessionToken = sessionTokenCookie?.value;
+  const isSessionValid = await validateSession(sessionToken);
 
   if (isSessionValid) {
     return (

examples/nextjs/app/utils/validateSession.ts

@@ -1,18 +1,18 @@
 import { jwtDecode } from 'jwt-decode';
 import createNodeSDK from './createNodeSDK';
 
-export default async function validateSession(shortSession: string | undefined) {
-  if (!shortSession) {
+export default async function validateSession(sessionToken: string | undefined) {
+  if (!sessionToken) {
     return false;
   }
 
   const sdk = createNodeSDK();
-  const verifiedSession = await sdk.sessions().validateShortSessionValue(shortSession);
+  const verifiedSession = await sdk.sessions().validateShortSessionValue(sessionToken);
 
   if (!verifiedSession.isAuthenticated()) {
     return false;
   }
 
-  const decodedShortSession = jwtDecode(shortSession);
-  return !!decodedShortSession.exp && decodedShortSession.exp > Date.now() / 1000;
+  const decodedSessionToken = jwtDecode(sessionToken);
+  return !!decodedSessionToken.exp && decodedSessionToken.exp > Date.now() / 1000;
 }

examples/nextjs/middleware.ts

@@ -15,9 +15,9 @@ export async function middleware(request: NextRequest) {
     return NextResponse.next();
   }
 
-  const cookie = request.cookies.get('cbo_short_session');
-  const shortSession = cookie?.value;
-  const isSessionValid = await validateSession(shortSession);
+  const cookie = request.cookies.get('cbo_session_token');
+  const sessionToken = cookie?.value;
+  const isSessionValid = await validateSession(sessionToken);
 
   if (isSessionValid && routes.authPaths.includes(url.pathname)) {
     url.pathname = '/dashboard';

packages/react/src/contexts/CorbadoSessionContext.tsx

@@ -10,11 +10,6 @@ const missingImplementation = (): never => {
 export interface CorbadoSessionContextProps {
   corbadoApp: CorbadoApp | undefined;
 
-  /**
-   * @deprecated Use sessionToken instead
-   */
-  shortSession: string | undefined;
-
   sessionToken: string | undefined;
   loading: boolean;
   isAuthenticated: boolean;
@@ -29,7 +24,6 @@ export interface CorbadoSessionContextProps {
 
 export const initialContext: CorbadoSessionContextProps = {
   corbadoApp: undefined,
-  shortSession: undefined,
   sessionToken: undefined,
   loading: true,
   isAuthenticated: false,

packages/react/src/contexts/CorbadoSessionProvider.tsx

@@ -22,7 +22,7 @@ export const CorbadoSessionProvider: FC<CorbadoSessionProviderParams> = ({
   const [loading, setLoading] = useState<boolean>(true);
   const [user, setUser] = useState<SessionUser | undefined>();
   const [isAuthenticated, setIsAuthenticated] = useState<boolean>(false);
-  const [shortSession, setShortSession] = useState<string | undefined>();
+  const [sessionToken, setSessionToken] = useState<string | undefined>();
 
   const init = async () => {
     setLoading(true);
@@ -46,14 +46,14 @@ export const CorbadoSessionProvider: FC<CorbadoSessionProviderParams> = ({
       setIsAuthenticated(!!value);
     });
 
-    const shortSessionSub = corbadoApp.sessionService.shortSessionChanges.subscribe((value: string | undefined) => {
-      setShortSession(value);
+    const sessionTokenSub = corbadoApp.sessionService.sessionTokenChanges.subscribe((value: string | undefined) => {
+      setSessionToken(value);
     });
 
     return () => {
       userSub.unsubscribe();
       authStateSub.unsubscribe();
-      shortSessionSub.unsubscribe();
+      sessionTokenSub.unsubscribe();
     };
   }, []);
 
@@ -86,13 +86,10 @@ export const CorbadoSessionProvider: FC<CorbadoSessionProviderParams> = ({
     [corbadoApp],
   );
 
-  const sessionToken = shortSession;
-
   return (
     <CorbadoSessionContext.Provider
       value={{
         corbadoApp,
-        shortSession,
         sessionToken,
         loading,
         user,

packages/shared-ui/src/flowHandler/processHandler.ts

@@ -108,7 +108,7 @@ export class ProcessHandler {
     this.#corbadoApp.authProcessService.clearProcess();
     this.#corbadoApp.authProcessService.dropLastIdentifier(data.passkeyOperation);
     this.#currentBlock = null;
-    this.#corbadoApp.sessionService.setSession(data.shortSession, data.longSession);
+    this.#corbadoApp.sessionService.setSession(data.sessionToken, data.refreshToken);
 
     this.#postProcess();
   }

packages/types/src/common.ts

@@ -7,10 +7,7 @@ export interface Paging {
 export interface CorbadoAppParams {
   projectId: string;
   apiTimeout?: number;
-  // deprecated (no longer needed, Corbado backend sets this value automatically)
-  frontendApiUrl?: string;
   frontendApiUrlSuffix?: string;
   isDevMode?: boolean;
-  setShortSessionCookie?: boolean;
   isPreviewMode?: boolean;
 }

packages/web-core/openapi/spec_v2.yaml

@@ -1137,6 +1137,8 @@ components:
           type: boolean
         shortSessionCookieConfig:
           $ref: '#/components/schemas/shortSessionCookieConfig'
+        sessionTokenCookieConfig:
+          $ref: '#/components/schemas/sessionTokenCookieConfig'
         frontendApiUrl:
           type: string
 
@@ -1170,9 +1172,13 @@ components:
       type: object
       required:
         - shortSession
+        - sessionToken
       properties:
         shortSession:
           type: string
+          deprecated: true
+        sessionToken:
+          type: string
 
     mePasskeyDeleteRsp:
       type: object
@@ -1592,6 +1598,28 @@ components:
           type: boolean
 
     shortSessionCookieConfig:
+      type: object
+      deprecated: true
+      required:
+        - domain
+        - secure
+        - sameSite
+        - path
+        - lifetimeSeconds
+      properties:
+        domain:
+          type: string
+        secure:
+          type: boolean
+        sameSite:
+          type: string
+          enum: [ 'lax', 'strict', 'none' ]
+        path:
+          type: string
+        lifetimeSeconds:
+          type: integer
+
+    sessionTokenCookieConfig:
       type: object
       required:
         - domain
@@ -1820,14 +1848,22 @@ components:
       required:
         - blockType
         - shortSession
+        - sessionToken
       properties:
         blockType:
           type: string
         longSession:
           type: string
-          description: Only given when project environment is dev
+          deprecated: true
+          description: This is only set if the project environment is set to 'dev'. If set the UI components will set the longSession in local storage because the cookie dropping will not work in Safari for example ("third-party cookie").
+        refreshToken:
+          type: string
+          description: This is only set if the project environment is set to 'dev'. If set the UI components will set the longSession in local storage because the cookie dropping will not work in Safari for example ("third-party cookie").
         shortSession:
           type: string
+          deprecated: true
+        sessionToken:
+          type: string
         passkeyOperation:
           $ref: '#/components/schemas/passkeyOperation'
 

packages/web-core/src/api/v2/api.ts

@@ -855,17 +855,31 @@ export interface GeneralBlockCompleted {
      */
     'blockType': string;
     /**
-     * Only given when project environment is dev
+     * This is only set if the project environment is set to \'dev\'. If set the UI components will set the longSession in local storage because the cookie dropping will not work in Safari for example (\"third-party cookie\").
      * @type {string}
      * @memberof GeneralBlockCompleted
+     * @deprecated
      */
     'longSession'?: string;
+    /**
+     * This is only set if the project environment is set to \'dev\'. If set the UI components will set the longSession in local storage because the cookie dropping will not work in Safari for example (\"third-party cookie\").
+     * @type {string}
+     * @memberof GeneralBlockCompleted
+     */
+    'refreshToken'?: string;
     /**
      * 
      * @type {string}
      * @memberof GeneralBlockCompleted
+     * @deprecated
      */
     'shortSession': string;
+    /**
+     * 
+     * @type {string}
+     * @memberof GeneralBlockCompleted
+     */
+    'sessionToken': string;
     /**
      * 
      * @type {PasskeyOperation}
@@ -1644,8 +1658,15 @@ export interface MeRefreshRsp {
      * 
      * @type {string}
      * @memberof MeRefreshRsp
+     * @deprecated
      */
     'shortSession': string;
+    /**
+     * 
+     * @type {string}
+     * @memberof MeRefreshRsp
+     */
+    'sessionToken': string;
 }
 /**
  * 
@@ -2163,15 +2184,68 @@ export interface SessionConfigRsp {
      * 
      * @type {ShortSessionCookieConfig}
      * @memberof SessionConfigRsp
+     * @deprecated
      */
     'shortSessionCookieConfig'?: ShortSessionCookieConfig;
+    /**
+     * 
+     * @type {SessionTokenCookieConfig}
+     * @memberof SessionConfigRsp
+     */
+    'sessionTokenCookieConfig'?: SessionTokenCookieConfig;
     /**
      * 
      * @type {string}
      * @memberof SessionConfigRsp
      */
     'frontendApiUrl'?: string;
 }
+/**
+ * 
+ * @export
+ * @interface SessionTokenCookieConfig
+ */
+export interface SessionTokenCookieConfig {
+    /**
+     * 
+     * @type {string}
+     * @memberof SessionTokenCookieConfig
+     */
+    'domain': string;
+    /**
+     * 
+     * @type {boolean}
+     * @memberof SessionTokenCookieConfig
+     */
+    'secure': boolean;
+    /**
+     * 
+     * @type {string}
+     * @memberof SessionTokenCookieConfig
+     */
+    'sameSite': SessionTokenCookieConfigSameSiteEnum;
+    /**
+     * 
+     * @type {string}
+     * @memberof SessionTokenCookieConfig
+     */
+    'path': string;
+    /**
+     * 
+     * @type {number}
+     * @memberof SessionTokenCookieConfig
+     */
+    'lifetimeSeconds': number;
+}
+
+export const SessionTokenCookieConfigSameSiteEnum = {
+    Lax: 'lax',
+    Strict: 'strict',
+    None: 'none'
+} as const;
+
+export type SessionTokenCookieConfigSameSiteEnum = typeof SessionTokenCookieConfigSameSiteEnum[keyof typeof SessionTokenCookieConfigSameSiteEnum];
+
 /**
  * 
  * @export