> ## Documentation Index
> Fetch the complete documentation index at: https://stytch.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# On Change Session

> Listen for changes to the current Session using the Stytch Vanilla JS SDK

export const userTip = "Represents an end user's account in your application.";

export const isReact_0 = undefined

{isReact_0 &&
<Info>
  In React, use the <a href="../../hooks/use-stytch-session"><code>useStytchSession</code></a> hook to access the active Session and react to changes.
</Info>
}

The Stytch SDK caches the Session of the logged-in <Tooltip tip={userTip}>User</Tooltip>. Use the `session.onChange` method to listen for and react to changes to the Session object.

## Parameters

<ResponseField name="callback" type="function">
  The callback function to call when the session changes. The first parameter is the updated Session object.

  <Expandable title="parameters">
    <ResponseField name="session" type="object">
      The updated Session object.

      <Expandable title="properties">
        <ResponseField name="session_id" type="string">
          A unique identifier for a specific Session.
        </ResponseField>

        <ResponseField name="user_id" type="string">
          The unique ID of the affected User.
        </ResponseField>

        <ResponseField name="authentication_factors" type="array[objects]">
          An array of different authentication factors that comprise a Session.
        </ResponseField>

        <ResponseField name="started_at" type="string">
          The timestamp when the Session was created. Values conform to the RFC 3339 standard and are expressed in UTC, e.g. 2021-12-29T12:33:09Z.
        </ResponseField>

        <ResponseField name="last_accessed_at" type="string">
          The timestamp when the Session was last accessed. Values conform to the RFC 3339 standard and are expressed in UTC, e.g. 2021-12-29T12:33:09Z.
        </ResponseField>

        <ResponseField name="expires_at" type="string">
          The timestamp when the Session expires. Values conform to the RFC 3339 standard and are expressed in UTC, e.g. 2021-12-29T12:33:09Z.
        </ResponseField>

        <ResponseField name="attributes" type="object">
          Provided attributes help with fraud detection.

          <Expandable title="properties">
            <ResponseField name="ip_address" type="string">
              The IP address of the user.
            </ResponseField>

            <ResponseField name="user_agent" type="string">
              The user agent of the User.
            </ResponseField>
          </Expandable>
        </ResponseField>

        <ResponseField name="custom_claims" type="map">
          The custom claims map for a Session. Claims can be added to a session during a Sessions authenticate call.
        </ResponseField>

        <ResponseField name="roles" type="array[string]">
          A list of the roles associated with the session.
        </ResponseField>
      </Expandable>
    </ResponseField>
  </Expandable>
</ResponseField>

## Return value

<ResponseField name="unsubscribe" type="function">
  The function to call to unsubscribe from the Session change event.
</ResponseField>

<Panel>
  <RequestExample>
    ```js theme={null}
    import { StytchClient } from '@stytch/vanilla-js';

    const stytch = new StytchClient('${publicToken}');

    const unsubscribe = stytch.session.onChange((session) => {
      if (session) {
        console.log('Session found:', session.session_id);
      } else {
        console.log('No active session');
      }
    });

    window.addEventListener('beforeunload', () => {
      unsubscribe();
    });
    ```
  </RequestExample>
</Panel>