diff --git a/packages/sdks/react-sdk/README.md b/packages/sdks/react-sdk/README.md index dc4365e9d..6c67f3b6d 100644 --- a/packages/sdks/react-sdk/README.md +++ b/packages/sdks/react-sdk/README.md @@ -30,6 +30,20 @@ const AppRoot = () => { // must be configured (e.g., https://auth.app.example.com) // and should be set as the baseUrl property. // baseUrl = "https://auth.app.example.com" + // Allows to override the base URL that is used to fetch static files + // baseStaticUrl? = "https://auth.static.app.example.com" + // Determines if tokens will be stored on local storage and can accessed with getToken function + // persistTokens={false} // Default is true + // If true, session token (jwt) will be stored on cookie. Otherwise, the session token will be stored on local storage and can accessed with getSessionToken function. + // Use this option if session token will stay small (less than 1k) + // NOTE: Session token can grow, especially in cases of using authorization, or adding custom claims + // sessionTokenViaCookie={true} + // If true, last authenticated user will be stored on local storage and can accessed with getUser function + // storeLastAuthenticatedUser={false} // Default is true + // If true, last authenticated user will not be removed after logout + // keepLastAuthenticatedUserAfterLogout?: boolean; + // If true, session will be refreshed on first useSession call, even if the session is never fetched before + // eagerRefreshOnFirstUseSession={false} // Default is true > @@ -602,6 +616,18 @@ const handleUpdateUser = useCallback(() => { }, [sdk]); ``` +### I see a `/refresh` API call failure in my logs + +By default, the Descope SDK eagerly attempts to refresh the session when the `useSession` hook is first called regardless the previous logged in state. If you want to disable this behavior, you can set the `eagerRefreshOnFirstUseSession={false}` prop on the `AuthProvider` component. With this property set to `false`, the SDK will only attempt to refresh the session if the user has previously logged in. + +Example: + +```jsx + + + +``` + ## Learn More To learn more please see the [Descope Documentation and API reference page](https://docs.descope.com/). diff --git a/packages/sdks/react-sdk/examples/app/index.tsx b/packages/sdks/react-sdk/examples/app/index.tsx index d089a1ec7..fcbbe7226 100644 --- a/packages/sdks/react-sdk/examples/app/index.tsx +++ b/packages/sdks/react-sdk/examples/app/index.tsx @@ -13,6 +13,7 @@ root.render( diff --git a/packages/sdks/react-sdk/src/components/AuthProvider/AuthProvider.tsx b/packages/sdks/react-sdk/src/components/AuthProvider/AuthProvider.tsx index fab5cc3ca..d4f276209 100644 --- a/packages/sdks/react-sdk/src/components/AuthProvider/AuthProvider.tsx +++ b/packages/sdks/react-sdk/src/components/AuthProvider/AuthProvider.tsx @@ -27,6 +27,8 @@ interface IAuthProviderProps { storeLastAuthenticatedUser?: boolean; // If true, last authenticated user will not be removed after logout keepLastAuthenticatedUserAfterLogout?: boolean; + // If true, session will be refreshed on first useSession call, even if the session is never fetched before + eagerRefreshOnFirstUseSession?: boolean; children?: React.ReactNode; } @@ -38,6 +40,7 @@ const AuthProvider: FC = ({ persistTokens = true, storeLastAuthenticatedUser = true, keepLastAuthenticatedUserAfterLogout = false, + eagerRefreshOnFirstUseSession = true, children = undefined, }) => { const [user, setUser] = useState(); @@ -77,10 +80,14 @@ const AuthProvider: FC = ({ isSessionFetched.current = true; setIsSessionLoading(true); - withValidation(sdk?.refresh)().then(() => { + + const refreshFn = eagerRefreshOnFirstUseSession + ? sdk?.refresh + : sdk.refreshIfSessionTokenExists; + withValidation(refreshFn)().then(() => { setIsSessionLoading(false); }); - }, [sdk]); + }, [sdk, eagerRefreshOnFirstUseSession]); const fetchUser = useCallback(() => { // We want that the user will fetched only once diff --git a/packages/sdks/web-js-sdk/src/sdk/index.ts b/packages/sdks/web-js-sdk/src/sdk/index.ts index e33bd6719..ac6662491 100644 --- a/packages/sdks/web-js-sdk/src/sdk/index.ts +++ b/packages/sdks/web-js-sdk/src/sdk/index.ts @@ -7,13 +7,25 @@ import { getSessionToken } from '../enhancers/withPersistTokens/helpers'; const createSdk = (...args: Parameters) => { const coreSdk = createCoreSdk(...args); + const refresh = (token?: string) => { + // Descope use this query param to monitor if refresh is made + // When the user is already logged in in the past or not (We want to optimize that in the future) + const currentSessionToken = getSessionToken(); + return coreSdk.refresh(token, { dcs: currentSessionToken ? 't' : 'f' }); + }; + return { ...coreSdk, - refresh: (token?: string) => { - // Descope use this query param to monitor if refresh is made - // When the user is already logged in in the past or not (We want to optimize that in the future) + refresh, + refreshIfSessionTokenExists: (token?: string) => { const currentSessionToken = getSessionToken(); - return coreSdk.refresh(token, { dcs: currentSessionToken ? 't' : 'f' }); + if (currentSessionToken || token) { + return refresh(token); + } + // If session token does not exist, we return a failed promise + return Promise.resolve({ + ok: false, + }); }, flow: withFlow(coreSdk), webauthn: createWebAuthn(coreSdk),