Add NextJS support

FusionAuth · Jun 12, 2024 · 6e1d64c · 6e1d64c
1 parent 234e501
commit 6e1d64c
Show file tree

Hide file tree

Showing 8 changed files with 79 additions and 3 deletions.
diff --git a/packages/sdk-react/README.md b/packages/sdk-react/README.md
@@ -6,6 +6,7 @@ An SDK for using FusionAuth in React applications.
 - [Getting Started](#getting-started)
   - [Installation](#installation)
   - [Configuration](#configuration)
+    - [Configuration with NextJS](#configuration-with-nextjs)
 - [Usage](#usage)
 	- [useFusionAuth](#usefusionauth)
     - [State Parameter](#state-parameter)
@@ -98,6 +99,28 @@ ReactDOM.createRoot(document.getElementById("my-app")).render(
 )
 ```
 
+#### Configuration with [NextJS](https://nextjs.org/)
+
+To configure the SDK with Next, install [`next-client-cookies`](https://github.com/moshest/next-client-cookies?tab=readme-ov-file#install) and pass `useCookies` into the config object as `nextCookieAdapter`.
+
+```jsx
+'use client'
+
+import { useCookies } from 'next-client-cookies';
+
+export default function Providers({ children }) {
+  return (
+    <FusionAuthProvider {...config} nextCookieAdapter={useCookies}>
+      {children}
+    </FusionAuthProvider>
+  );
+}
+```
+
+Remember to wrap your layout in the `<CookiesProvider/>` from `next-client-cookies/server`.
+
+Vercel has published a guide for [rendering third party context providers in server components](https://vercel.com/guides/react-context-state-management-nextjs#rendering-third-party-context-providers-in-server-components).
+
 ## Usage
 
 ### useFusionAuth

diff --git a/packages/sdk-react/package.json b/packages/sdk-react/package.json
@@ -52,6 +52,7 @@
     "@types/react-dom": "^18.2.19",
     "@vitejs/plugin-react-swc": "^3.5.0",
     "jsdom": "^24.0.0",
+    "next-client-cookies": "^1.1.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "sass": "^1.56.1",

diff --git a/packages/sdk-react/src/components/providers/FusionAuthProvider.tsx b/packages/sdk-react/src/components/providers/FusionAuthProvider.tsx
@@ -3,7 +3,12 @@ import { PropsWithChildren, useContext, useMemo, useState, FC } from 'react';
 import { SDKCore } from '@fusionauth-sdk/core';
 
 import { FusionAuthProviderConfig } from './FusionAuthProviderConfig';
-import { useTokenRefresh, useRedirecting, useUserInfo } from './hooks';
+import {
+  useTokenRefresh,
+  useRedirecting,
+  useUserInfo,
+  useCookieAdapter,
+} from './hooks';
 import { FusionAuthContext } from './Context';
 import { FusionAuthProviderContext } from './FusionAuthProviderContext';
 
@@ -15,12 +20,15 @@ const FusionAuthProvider: FC<
     return config;
   }, [props]);
 
+  const cookieAdapter = useCookieAdapter(config);
+
   const core: SDKCore = useMemo<SDKCore>(() => {
     return new SDKCore({
       ...config,
       onTokenExpiration: () => setIsLoggedIn(false),
+      cookieAdapter,
     });
-  }, [config]);
+  }, [config, cookieAdapter]);
 
   const [isLoggedIn, setIsLoggedIn] = useState(core.isLoggedIn);
 

diff --git a/packages/sdk-react/src/components/providers/FusionAuthProviderConfig.ts b/packages/sdk-react/src/components/providers/FusionAuthProviderConfig.ts
@@ -1,3 +1,5 @@
+import { useCookies } from 'next-client-cookies';
+
 /**
  * Config for FusionAuthProvider
  */
@@ -72,6 +74,13 @@ export interface FusionAuthProviderConfig {
    */
   tokenRefreshPath?: string;
 
+  /**
+   * Pass in `useCookies` from [next-client-cookies](https://github.com/moshest/next-client-cookies).
+   * This is needed for the React SDK to support Next/SSR.
+   * See docs for [configuration with nextjs](https://github.com/FusionAuth/fusionauth-javascript-sdk/tree/main/packages/sdk-react#configuration-with-nextjs) for more information.
+   */
+  nextCookieAdapter?: typeof useCookies;
+
   /**
    * The path to the me endpoint.
    */

diff --git a/packages/sdk-react/src/components/providers/hooks/index.ts b/packages/sdk-react/src/components/providers/hooks/index.ts
@@ -1,3 +1,4 @@
 export * from './useRedirecting';
 export * from './useTokenRefresh';
 export * from './useUserInfo';
+export * from './useCookieAdapter';
diff --git a/packages/sdk-react/src/components/providers/hooks/useCookieAdapter.ts b/packages/sdk-react/src/components/providers/hooks/useCookieAdapter.ts
@@ -0,0 +1,22 @@
+import { useMemo } from 'react';
+
+import { CookieAdapter } from '@fusionauth-sdk/core';
+
+import { FusionAuthProviderConfig } from '../FusionAuthProviderConfig';
+
+export function useCookieAdapter(config: FusionAuthProviderConfig) {
+  const cookies = config.nextCookieAdapter?.();
+  const cookieName = config.accessTokenExpireCookieName ?? 'app.at_exp';
+
+  return useMemo<CookieAdapter | undefined>(
+    () =>
+      cookies
+        ? {
+            at_exp() {
+              return cookies.get(cookieName);
+            },
+          }
+        : undefined,
+    [cookies?.get, cookieName],
+  );
+}
diff --git a/packages/sdk-react/vite.config.ts b/packages/sdk-react/vite.config.ts
@@ -13,7 +13,12 @@ export default defineConfig({
       fileName: 'index',
     },
     rollupOptions: {
-      external: ['react', 'react-dom', 'react/jsx-runtime'],
+      external: [
+        'react',
+        'react-dom',
+        'react/jsx-runtime',
+        'next-client-cookies',
+      ],
     },
     sourcemap: true,
   },

diff --git a/yarn.lock b/yarn.lock
@@ -7106,6 +7106,13 @@ neo-async@^2.6.2:
   resolved "https://registry.yarnpkg.com/neo-async/-/neo-async-2.6.2.tgz#b4aafb93e3aeb2d8174ca53cf163ab7d7308305f"
   integrity sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==
 
+next-client-cookies@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/next-client-cookies/-/next-client-cookies-1.1.1.tgz#7e5e4d4c3a8dc0a5ffaf97e310d9ab84c21d4e52"
+  integrity sha512-7/wiTI5RPJcP7c1zh5a9XNkvChihtattUG9dHMvfijtvzgEQXotr6E3AHYD1aXyVqGiZA95y/cWlcEI5EJ31tw==
+  dependencies:
+    js-cookie "^3.0.5"
+
 ng-packagr@^17.2.0:
   version "17.3.0"
   resolved "https://registry.yarnpkg.com/ng-packagr/-/ng-packagr-17.3.0.tgz#c7036f79aa6b927ee399cd9de62706c44793896c"