fix!: move useSession hook to its own entry point

packages/elements-react/package.json

@@ -7,6 +7,11 @@
       "import": "./dist/index.mjs",
       "require": "./dist/index.js"
     },
+    "./client": {
+      "types": "./dist/client/index.d.ts",
+      "import": "./dist/client/index.mjs",
+      "require": "./dist/client/index.js"
+    },
     "./theme": {
       "types": "./dist/theme/default/index.d.ts",
       "import": "./dist/theme/default/index.mjs",
@@ -19,6 +24,9 @@
       "index": [
         "./dist/index.d.ts"
       ],
+      "client": [
+        "./dist/client/index.d.ts"
+      ],
       "theme": [
         "./dist/theme/default/index.d.ts"
       ]

packages/elements-react/src/client/frontendClient.ts

@@ -0,0 +1,20 @@
+import {
+  Configuration,
+  ConfigurationParameters,
+  FrontendApi,
+} from "@ory/client-fetch"
+
+export function frontendClient(
+  sdkUrl: string,
+  opts: Partial<ConfigurationParameters> = {},
+) {
+  const config = new Configuration({
+    ...opts,
+    basePath: sdkUrl,
+    headers: {
+      Accept: "application/json",
+      ...opts.headers,
+    },
+  })
+  return new FrontendApi(config)
+}

packages/elements-react/src/client/index.ts

@@ -0,0 +1 @@
+export { useSession } from "./useSession"

packages/elements-react/src/hooks/useSession.spec.tsx → packages/elements-react/src/client/useSession.spec.tsx

@@ -7,16 +7,10 @@ import { Session } from "@ory/client-fetch"
 import "@testing-library/jest-dom"
 import "@testing-library/jest-dom/jest-globals"
 import { act, render, screen, waitFor } from "@testing-library/react"
-import { useOryFlow } from "../context/flow-context"
-import { frontendClient } from "../util/client"
 import { sessionStore, useSession } from "./useSession"
+import { frontendClient } from "./frontendClient"
 
-// Mock the necessary imports
-jest.mock("../context/flow-context", () => ({
-  useOryFlow: jest.fn(),
-}))
-
-jest.mock("../util/client", () => ({
+jest.mock("./frontendClient", () => ({
   frontendClient: jest.fn(() => ({
     toSession: jest.fn(),
   })),
@@ -44,14 +38,9 @@ describe("useSession", () => {
     },
     expires_at: new Date(),
   }
-  const mockConfig = {
-    sdk: { url: "https://mock-sdk-url" },
-  }
 
   beforeEach(() => {
     jest.clearAllMocks()
-    // Mock the flow context
-    ;(useOryFlow as jest.Mock).mockReturnValue({ config: mockConfig })
     sessionStore.setState({
       isLoading: false,
       session: undefined,
@@ -102,19 +91,15 @@ describe("useSession", () => {
 
     // this is fine, because jest is not calling the function
     // eslint-disable-next-line @typescript-eslint/unbound-method
-    expect(frontendClient(mockConfig.sdk.url).toSession).toHaveBeenCalledTimes(
-      1,
-    )
+    expect(frontendClient("").toSession).toHaveBeenCalledTimes(1)
 
     act(() => {
       render(<TestComponent />)
     })
 
     // this is fine, because jest is not calling the function
     // eslint-disable-next-line @typescript-eslint/unbound-method
-    expect(frontendClient(mockConfig.sdk.url).toSession).toHaveBeenCalledTimes(
-      1,
-    )
+    expect(frontendClient("").toSession).toHaveBeenCalledTimes(1)
   })
 
   it("handles errors during session fetching", async () => {
@@ -155,8 +140,6 @@ describe("useSession", () => {
 
     // this is fine, because jest is not calling the function
     // eslint-disable-next-line @typescript-eslint/unbound-method
-    expect(frontendClient(mockConfig.sdk.url).toSession).toHaveBeenCalledTimes(
-      1,
-    )
+    expect(frontendClient("").toSession).toHaveBeenCalledTimes(1)
   })
 })

packages/elements-react/src/hooks/useSession.ts → packages/elements-react/src/client/useSession.ts

@@ -1,12 +1,12 @@
 // Copyright © 2024 Ory Corp
 // SPDX-License-Identifier: Apache-2.0
+"use client"
 
 import { Session } from "@ory/client-fetch"
 import { useCallback, useEffect } from "react"
 import { create, useStore } from "zustand"
 import { subscribeWithSelector } from "zustand/middleware"
-import { useOryFlow } from "../context/flow-context"
-import { frontendClient } from "../util/client"
+import { frontendClient } from "./frontendClient"
 
 type SessionStore = {
   setIsLoading: (loading: boolean) => void
@@ -38,8 +38,7 @@ export const sessionStore = create<SessionStore>()(
  *
  * @returns The current session, error and loading state.
  */
-export const useSession = () => {
-  const { config } = useOryFlow()
+export const useSession = (config?: { sdk: { url: string } }) => {
   const store = useStore(sessionStore)
 
   const fetchSession = useCallback(async () => {
@@ -52,15 +51,19 @@ export const useSession = () => {
 
     setIsLoading(true)
 
+    console.log(window.location.protocol + "//" + window.location.host)
     try {
-      const sessionData = await frontendClient(config.sdk.url).toSession()
+      const sessionData = await frontendClient(
+        config?.sdk.url ??
+          window.location.protocol + "//" + window.location.host,
+      ).toSession()
       setSession(sessionData)
     } catch (e) {
       setError(e instanceof Error ? e.message : "Unknown error occurred")
     } finally {
       setIsLoading(false)
     }
-  }, [config.sdk.url])
+  }, [config?.sdk.url])
 
   useEffect(() => {
     void fetchSession()

packages/elements-react/src/index.ts

@@ -5,5 +5,4 @@ export type * from "./types"
 export * from "./components"
 export * from "./context"
 export * from "./util"
-export * from "./hooks"
 export { locales as OryLocales } from "./locales"

packages/elements-react/src/theme/default/components/generic/page-header.tsx

@@ -1,12 +1,9 @@
 // Copyright © 2024 Ory Corp
 // SPDX-License-Identifier: Apache-2.0
 
-import {
-  OryPageHeaderProps,
-  useComponents,
-  useSession,
-} from "@ory/elements-react"
+import { OryPageHeaderProps, useComponents } from "@ory/elements-react"
 import { UserMenu } from "../ui/user-menu"
+import { useSession } from "@ory/elements-react/client"
 
 export const DefaultPageHeader = (_props: OryPageHeaderProps) => {
   const { Card } = useComponents()

packages/elements-react/tsup.config.ts

@@ -27,6 +27,15 @@ export default defineConfig([
       "react-intl",
     ],
   },
+  {
+    dts: true,
+    minify: false,
+    sourcemap: true,
+    bundle: false,
+    format: ["cjs", "esm"],
+    entry: ["src/client/**/*.ts"],
+    outDir: "dist/client",
+  },
   {
     ...baseConfig,
     entry: ["src/theme/default/index.ts"],