descope / react-sdk Goto Github PK

Issue seems to affect versions 2.0.17 -> 2.0.23, using Next.js version 14.2.3 and the App Router. It appears importing the AuthProvider named export, even within components with the 'use client' directive, breaks static page generation due to references to client-side APIs.

Broken example:

// project/app/home/layout.tsx
'use client'

import { AuthProvider } from '@descope/react-sdk'

export default function HomeLayout( {children}: {children: ReactNode} ) {
  return (
    <AuthProvider
      projectId={myProjectId}
      sessionTokenViaCookie
      baseUrl={myAppBaseUrl}
    >
      {children}
    </AuthProvider>
  );
}

Ran into this problem today when our dependency on descope/react-sdk was upgraded from 2.0.2 to 2.0.23 as part of some package upgrades (our version string in our package.json was ^2.0.2)

After the version upgrade, we began seeing errors like this when running next build:

Error occurred prerendering page "/home". Read more: https://nextjs.org/docs/messages/prerender-error

ReferenceError: document is not defined
    /** trimmed stack trace **/

Using the dynamic utility to lazy-load the dependency seems to resolve the issue:

'use client'

import dynamic from 'next/dynamic';
// explicitly lazy-load the AuthProvider, and disable SSR
const AuthProvider = dynamic(
  () => import('@descope/react-sdk').then(mod => mod.AuthProvider),
  { ssr: false }
);

export default function HomeLayout( {children}: {children: ReactNode} ) {
  return (
    <AuthProvider
      projectId={myProjectId}
      sessionTokenViaCookie
      baseUrl={myAppBaseUrl}
    >
      {children}
    </AuthProvider>
  );
}

I don't fully understand why this change/regression happened, surely versions of the SDK prior to 2.0.17 had to reference document or other properties present in the browser in order to do basic functionality? I wasn't able to find a changelog for this release that might indicate what changes were the root cause here. We've found this workaround for now, so including that here for anyone else that might run into this problem.

I'm curious if there is a public facing changelog for the library beyond what notes are included in the github releases, which appear to be more sparse than what is published to npm. Also, are there any integration tests being run for the SDK in popular frameworks like Next.js?

privateMap.get is not a function
TypeError: privateMap.get is not a function
    at __classPrivateFieldGet (http://localhost:3000/static/js/bundle.js:181799:21)
    at new Lt (http://localhost:3000/static/js/vendors-node_modules_descope_web-component_dist_esm_index_js.chunk.js:278:78)
    at new Mt (http://localhost:3000/static/js/vendors-node_modules_descope_web-component_dist_esm_index_js.chunk.js:592:5)
    at createElement (http://localhost:3000/static/js/bundle.js:97103:38)
    at createInstance (http://localhost:3000/static/js/bundle.js:98290:24)
    at completeWork (http://localhost:3000/static/js/bundle.js:107416:32)
    at completeUnitOfWork (http://localhost:3000/static/js/bundle.js:110721:20)
    at performUnitOfWork (http://localhost:3000/static/js/bundle.js:110693:9)
    at workLoopSync (http://localhost:3000/static/js/bundle.js:110619:9)
    at renderRootSync (http://localhost:3000/static/js/bundle.js:110585:11)

@descope/react-sdk version: 1.0.4

Error happens even running locally.

Clicking the continue buttons print the error below into the console:

Uncaught (in promise) ReferenceError: PublicKeyCredential is not defined
    at index-b7476a59.js:2:4291
    at f (regeneratorRuntime.js:44:17)
    at Generator.<anonymous> (regeneratorRuntime.js:125:22)
    at Generator.next (regeneratorRuntime.js:69:21)
    at r (asyncToGenerator.js:3:20)
    at s (asyncToGenerator.js:22:9)
    at asyncToGenerator.js:27:7
    at new Promise (<anonymous>)
    at asyncToGenerator.js:19:12
    at Cr (index-b7476a59.js:2:4306)

Version: 1.0.3

There is this infomration typo in the title and a CSS issue causes overflow hence the scrollbar.

Version: 1.0.3

I am trying to catch 401 while fetching refresh token in react sdk I found DescopeInterceptor in angular sdk is there a way to catch 401/403 while refresh token

I was trying following code could't login. We are using Descope sso on our login page. Let me know what am I missing

Cypress.Commands.add('loginViaDescopeUI', () => {
  cy.request({
    method: 'POST',
    url: `${descopeApiBaseURL}/mgmt/user/create`,
    headers: authHeader,
    body: testUser,
})
    .then(({ body }) => {
        const loginId = body["user"]["loginIds"][0];
        cy.request({
            method: 'POST',
            url: `${descopeApiBaseURL}/mgmt/tests/generate/otp`,
            headers: authHeader,
            body: {
                "loginId": loginId,
                "deliveryMethod": "email"
            }
        })
            .then(({ body }) => {
                const otpCode = body["code"]
                cy.request({
                    method: 'POST',
                    url: `${descopeApiBaseURL}/auth/otp/verify/email`,
                    headers: authHeader,
                    body: {
                        "loginId": loginId,
                        "code": otpCode
                    }
                })
                    .then(({ body }) => {
                        console.log(body)
                        const sessionJwt = body["sessionJwt"]
                        const refreshJwt = body["refreshJwt"]

                        /** Default name for the session cookie name / local storage key */
                        const SESSION_TOKEN_KEY = 'DS';
                        /** Default name for the refresh local storage key */
                        const REFRESH_TOKEN_KEY = 'DSR';
                        // As of June 12, 2023, the session and refresh token constants can be found in:
                        // https://github.dev/descope/web-js-sdk src/withPersistTokens/constants.ts

                        // // Store the JWT in the browser's local storage.
                        cy.window().then((win) => {
                            win.localStorage.setItem(SESSION_TOKEN_KEY, sessionJwt);
                            win.localStorage.setItem(REFRESH_TOKEN_KEY, refreshJwt);
                            win.sessionStorage.setItem('sessionJWT', sessionJwt)
                        });

                    })
            })
    })
      })

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Awaiting Schedule

These updates are awaiting their schedule. Click on a checkbox to get an update now.

• chore(deps): update dependency @testing-library/user-event to v14.5.2
• chore(deps): update dependency @types/react-dom to v18.2.25
• chore(deps): update dependency ts-node to v10.9.2
• chore(deps): update babel monorepo (@babel/core, @babel/preset-env, @babel/preset-react, @babel/preset-typescript)
• chore(deps): update dependency eslint to v8.57.0
• chore(deps): update dependency eslint-plugin-import to v2.29.1
• chore(deps): update dependency eslint-plugin-jest to v27.9.0
• chore(deps): update dependency eslint-plugin-jsx-a11y to v6.8.0
• chore(deps): update dependency eslint-plugin-react to v7.34.1
• chore(deps): update dependency react-router-dom to v6.22.3
• chore(deps): update dependency eslint-config-prettier to v9
• chore(deps): update dependency eslint-plugin-jest-dom to v5
• chore(deps): update dependency eslint-plugin-prettier to v5
• chore(deps): update dependency eslint-plugin-testing-library to v6
• chore(deps): update dependency husky to v9
• chore(deps): update dependency jest-extended to v4
• chore(deps): update dependency lint-staged to v15
• chore(deps): update dependency pretty-quick to v4
• chore(deps): update dependency rollup-plugin-serve to v3

Edited/Blocked

These updates have been manually edited so Renovate will no longer make changes. To discard all commits and start over, click on a checkbox.

• chore(deps): update dependency eslint-import-resolver-typescript to v3

Pending Status Checks

These updates await pending status checks. To force their creation now, click the checkbox below.

• chore(deps): update tibdex/github-app-token action to v2

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

• chore(deps): update dependency @testing-library/jest-dom to v6
• chore(deps): update dependency @testing-library/react to v15
• chore(deps): update dependency eslint to v9
• chore(deps): update dependency eslint-config-airbnb-typescript to v18
• chore(deps): update dependency eslint-plugin-jest to v28
• chore(deps): update dependency eslint-plugin-n to v17
• chore(deps): update dependency rollup to v4
• chore(deps): update dependency rollup-plugin-dts to v6
• chore(deps): update dependency typescript to v5
• Click on this checkbox to rebase all open PRs at once

Ignored or Blocked

These are blocked by an existing closed PR and will not be recreated unless you click a checkbox below.

• chore(deps): update dependency @rollup/plugin-typescript to v11
• chore(deps): update jest monorepo to v29 (major) (@types/jest, babel-jest, jest, ts-jest)

Detected dependencies

• Check this box to trigger a request for Renovate to run again on this repository

There is an error with this repository's Renovate configuration that needs to be fixed. As a precaution, Renovate will stop PRs until it is resolved.

Error type: Cannot find preset's package (local>descope/renovate-config)

./node_modules/@descope/react-sdk/dist/index.esm.js 34:22
Module parse failed: Unexpected token (34:22)
File was processed with these loaders:

• ./node_modules/react-scripts/node_modules/babel-loader/lib/index.js
  You may need an additional loader to handle the result of these loaders.
  | projectId: "temp pid"
  | });

const w = () => m ? k?.getSessionToken() : (console.warn("Get session token is not supported in SSR"), ""),
| y = () => m ? k?.getRefreshToken() : (console.warn("Get refresh token is not supported in SSR"), ""),
| b = p((e = w(), r) => k?.getJwtPermissions(e, r)),

Node: 14.18.2
React: 17.0.1
react-scripts: "4.0.1"

Kindly help.