From 7f0869c35ace721141ec30e1ad47b6c318995ba1 Mon Sep 17 00:00:00 2001 From: Kevin J Gao <32936811+gaokevin1@users.noreply.github.com> Date: Tue, 3 Sep 2024 09:43:45 -0700 Subject: [PATCH] feat(styling and theme): Added Parameter for Styling and Theme (#581) * feat(styling and theme) added param for styling and theme * added changes to App.tsx * added changes * added App.tsx changes * updated yarn.lock * changed styleId to use shorthand * changed STYLE_NAME to STYLE_ID --- .env.example | 1 + README.md | 4 ++ package.json | 2 +- src/App.tsx | 9 +++ yarn.lock | 176 ++++++++++++++++++++++++++------------------------- 5 files changed, 104 insertions(+), 88 deletions(-) diff --git a/.env.example b/.env.example index 106fab58..60e3d7d6 100644 --- a/.env.example +++ b/.env.example @@ -1,6 +1,7 @@ DESCOPE_PROJECT_ID= # Your Descope Project ID DESCOPE_TENANT_ID= # Your Descope Tenant ID DESCOPE_FLOW_ID="sign-up-or-in" # Your Descope flow ID +DESCOPE_STYLE_ID= # Your Descope Style ID DESCOPE_FLOW_DEBUG= # Set to true in case you want to debug your flow REACT_APP_DESCOPE_BASE_URL= # Descope API base URL REACT_APP_USE_ORIGIN_BASE_URL= # Set in case you want to use the origin as diff --git a/README.md b/README.md index 270fa474..ad0667b1 100644 --- a/README.md +++ b/README.md @@ -56,6 +56,10 @@ These are the different query parameters you can use: 6. `wide` query parameter is optional. If wide mode is nedded use `wide=true`. This will widen the flow component that is rendered, which is used for large forms made with Flow screens. +7. `theme` query parameter is optional. The default value is `light`, but otherwise it will override the theme for your flows rendered with the SDK. + +8. `style` query parameter is optional. The default style in your project will be used if not defined, but this allows you to override the `style` for the flows rendered with the SDK. + **Using .env** In case you don't want to provide the project ID as part of the URL, you can specify it as an environment variable `DESCOPE_PROJECT_ID`. diff --git a/package.json b/package.json index 8a422f52..a07261c6 100644 --- a/package.json +++ b/package.json @@ -3,7 +3,7 @@ "version": "0.1.0", "private": true, "dependencies": { - "@descope/react-sdk": "2.0.65", + "@descope/react-sdk": "2.0.68", "@emotion/react": "11.13.0", "@emotion/styled": "11.13.0", "@mui/icons-material": "5.16.4", diff --git a/src/App.tsx b/src/App.tsx index 1e202270..9aeb9af4 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -73,6 +73,13 @@ const App = () => { const backgroundColor = urlParams.get('bg') || process.env.DESCOPE_BG_COLOR; + const theme = (urlParams.get('theme') || + process.env.DESCOPE_FLOW_THEME) as React.ComponentProps< + typeof Descope + >['theme']; + + const styleId = urlParams.get('style') || process.env.DESCOPE_STYLE_ID; + const baseFunctionsUrl = process.env.REACT_APP_BASE_FUNCTIONS_URL || ''; const faviconUrl = @@ -96,8 +103,10 @@ const App = () => { flowId, debug, tenant: tenantId, + styleId, ...((flowId === 'saml-config' || flowId === 'sso-config') && { autoFocus: false, + theme, onSuccess: () => { let search = window?.location.search; if (search) { diff --git a/yarn.lock b/yarn.lock index 86ddce63..b718b414 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1347,15 +1347,15 @@ normalize-package-data "^3||^4||^5||^6" xmlbuilder2 "^3.0.2" -"@descope/access-key-management-widget@0.1.116": - version "0.1.116" - resolved "https://registry.yarnpkg.com/@descope/access-key-management-widget/-/access-key-management-widget-0.1.116.tgz#05bea7fb7e6ba6f8483057531907a5af422533ba" - integrity sha512-96asv0e9jSNBjHWkV1wCvBZ0maw5d6cinzNHGTVOdQK9rjxQJ2Z3+vVb/S81wsy9dc3fwx15ycygw0c1qjnELw== - dependencies: - "@descope/sdk-component-drivers" "0.2.40" - "@descope/sdk-helpers" "0.1.59" - "@descope/sdk-mixins" "0.2.44" - "@descope/web-js-sdk" "1.16.1" +"@descope/access-key-management-widget@0.1.118": + version "0.1.118" + resolved "https://registry.yarnpkg.com/@descope/access-key-management-widget/-/access-key-management-widget-0.1.118.tgz#cd59e4862ed16a2c40adc0f965ddec9165762da1" + integrity sha512-Bd/CcIiRlERUa1UTHk+9ndvBmSc6hGIzYtUiR1t65WQEbnx0eJs5Aw8ik+d+yvspBZI2WRaZlDh9nUkBAG3aWQ== + dependencies: + "@descope/sdk-component-drivers" "0.2.41" + "@descope/sdk-helpers" "0.1.60" + "@descope/sdk-mixins" "0.3.0" + "@descope/web-js-sdk" "1.16.3" "@reduxjs/toolkit" "^2.0.1" immer "^10.0.3" redux "5.0.1" @@ -1363,15 +1363,15 @@ reselect "5.1.1" tslib "2.6.3" -"@descope/audit-management-widget@0.1.79": - version "0.1.79" - resolved "https://registry.yarnpkg.com/@descope/audit-management-widget/-/audit-management-widget-0.1.79.tgz#091dc80dbce51dc0ae67edfb168ae1c852a5cd41" - integrity sha512-yINNHhCGTLjhGIVGgaIB4oXYwQH6tj+ngfqHwIxbZnyh5MgJtCSMF5TQ+ukHrckeRr+i4N11yb6ie30jHnPV3Q== +"@descope/audit-management-widget@0.1.81": + version "0.1.81" + resolved "https://registry.yarnpkg.com/@descope/audit-management-widget/-/audit-management-widget-0.1.81.tgz#978d81ce9361fadc4a064638c6fcd8c72b7f22c1" + integrity sha512-S5krIHCVc4Br6OkYDmz0WjnNKBrlitEE1Na9XPmC7A5xgmQm7jfNFnO/QWtv1YzMcE1n6jvwryDFyfJAdFeL3Q== dependencies: - "@descope/sdk-component-drivers" "0.2.40" - "@descope/sdk-helpers" "0.1.59" - "@descope/sdk-mixins" "0.2.44" - "@descope/web-js-sdk" "1.16.1" + "@descope/sdk-component-drivers" "0.2.41" + "@descope/sdk-helpers" "0.1.60" + "@descope/sdk-mixins" "0.3.0" + "@descope/web-js-sdk" "1.16.3" "@reduxjs/toolkit" "^2.0.1" immer "^10.0.3" redux "5.0.1" @@ -1379,36 +1379,36 @@ reselect "5.1.1" tslib "2.6.3" -"@descope/core-js-sdk@2.24.1": - version "2.24.1" - resolved "https://registry.yarnpkg.com/@descope/core-js-sdk/-/core-js-sdk-2.24.1.tgz#047faa1be15c60bc786a3cf746f37c5c11d70cb6" - integrity sha512-ebkRKfilIAAaYEpnLTNBAqoihDjaA9oXllvr5wcnr9uP/zh6hRE1Kw13IO5YLvAm/3ccGmjbHFnlEOV5TyqtaQ== +"@descope/core-js-sdk@2.24.3": + version "2.24.3" + resolved "https://registry.yarnpkg.com/@descope/core-js-sdk/-/core-js-sdk-2.24.3.tgz#755ff79f58be00b3a9d9810fefd39a737f6e428e" + integrity sha512-NqK57zXgKozIqCyjxhu7l4Mg6zPYOB7uxiZKnY3zpO2rOAiaSWZPg5dVrXtaDMJcBbHYsIY97LYfunMD3V/eiw== dependencies: jwt-decode "3.1.2" -"@descope/react-sdk@2.0.65": - version "2.0.65" - resolved "https://registry.yarnpkg.com/@descope/react-sdk/-/react-sdk-2.0.65.tgz#79ee51f362875f759e5d0a11db2095be53f58058" - integrity sha512-Mat5BuShIoiQZmOJhtgiiWC1Usa/Z7HGuEtCoGkZWGnjP2545R+fIQ1PJ4pWrAGKUCnfh6+D+MX5fG/gKDrbOQ== - dependencies: - "@descope/access-key-management-widget" "0.1.116" - "@descope/audit-management-widget" "0.1.79" - "@descope/core-js-sdk" "2.24.1" - "@descope/role-management-widget" "0.1.114" - "@descope/user-management-widget" "0.4.117" - "@descope/user-profile-widget" "0.0.97" - "@descope/web-component" "3.22.2" - "@descope/web-js-sdk" "1.16.1" - -"@descope/role-management-widget@0.1.114": - version "0.1.114" - resolved "https://registry.yarnpkg.com/@descope/role-management-widget/-/role-management-widget-0.1.114.tgz#726424214e87ab33cf8a53a8e486fe44a5afb62b" - integrity sha512-zut2uqZEx1rkpAhNEDULJQGRnGiQKuA37DbNKLMkp6H0Q7+xl/1m4yzuoV74/l0l9moJnVyTFJiw5wj0iWBm1w== - dependencies: - "@descope/sdk-component-drivers" "0.2.40" - "@descope/sdk-helpers" "0.1.59" - "@descope/sdk-mixins" "0.2.44" - "@descope/web-js-sdk" "1.16.1" +"@descope/react-sdk@2.0.68": + version "2.0.68" + resolved "https://registry.yarnpkg.com/@descope/react-sdk/-/react-sdk-2.0.68.tgz#58c4f90f36ac6ad03fb2470605da416d8c8d755e" + integrity sha512-EB744NMkKmRrTRPdw2kKcyRD0FcB1hivM5XOjUtdteCxbtr9DpQAa88k5XEh+4j0p7aaxYkTuCN8e7BBFS1UQw== + dependencies: + "@descope/access-key-management-widget" "0.1.118" + "@descope/audit-management-widget" "0.1.81" + "@descope/core-js-sdk" "2.24.3" + "@descope/role-management-widget" "0.1.116" + "@descope/user-management-widget" "0.4.119" + "@descope/user-profile-widget" "0.0.100" + "@descope/web-component" "3.23.2" + "@descope/web-js-sdk" "1.16.3" + +"@descope/role-management-widget@0.1.116": + version "0.1.116" + resolved "https://registry.yarnpkg.com/@descope/role-management-widget/-/role-management-widget-0.1.116.tgz#2166428f819285e9ce3de487cb1333bd2e78cf9b" + integrity sha512-S+3Wq505JjEfXLhfoM9iWy+F9kDo/6CpIjIlH3wEjAYK8d5zXXJna7kYQOgTiTowvIekhiYRVNeUrdlIlj+8Ow== + dependencies: + "@descope/sdk-component-drivers" "0.2.41" + "@descope/sdk-helpers" "0.1.60" + "@descope/sdk-mixins" "0.3.0" + "@descope/web-js-sdk" "1.16.3" "@reduxjs/toolkit" "^2.0.1" immer "^10.0.3" redux "5.0.1" @@ -1416,39 +1416,39 @@ reselect "5.1.1" tslib "2.6.3" -"@descope/sdk-component-drivers@0.2.40": - version "0.2.40" - resolved "https://registry.yarnpkg.com/@descope/sdk-component-drivers/-/sdk-component-drivers-0.2.40.tgz#90647a70c421f643b67c5465a4c3a4d4bc63c0b5" - integrity sha512-6uhLrwPBzyY/YaUO7ZOQ9WOMQj5vZApRvAb2RUB+ByHDS9aQa8SwuZb/oSQkjh014iURmSuw5ottRrH3OguAPA== +"@descope/sdk-component-drivers@0.2.41": + version "0.2.41" + resolved "https://registry.yarnpkg.com/@descope/sdk-component-drivers/-/sdk-component-drivers-0.2.41.tgz#ab67f6c7d4501814544ba71f414d2d1ab6850cda" + integrity sha512-JRV1t2p2ULvb1Bvtrll1CglqIuz86BDgomrgZUKMHfIpem1TVuINouJxkX7GyoayUMTchBn5vVd4ZtlvW9F8/Q== dependencies: - "@descope/sdk-helpers" "0.1.59" + "@descope/sdk-helpers" "0.1.60" tslib "2.6.3" -"@descope/sdk-helpers@0.1.59": - version "0.1.59" - resolved "https://registry.yarnpkg.com/@descope/sdk-helpers/-/sdk-helpers-0.1.59.tgz#a0a13b09ca4c286396b12ac9c9873559b9069a85" - integrity sha512-IB7grNni051BOxApWfYmRHJjJS0xfuKNSReDVDDz4+iH5SP9COCXGcegvJzvejedHZ2qXzs3y0RjSRBW9CZ+bA== +"@descope/sdk-helpers@0.1.60": + version "0.1.60" + resolved "https://registry.yarnpkg.com/@descope/sdk-helpers/-/sdk-helpers-0.1.60.tgz#e5dd377e88fd58de59c4ccbaa4b169f1363de019" + integrity sha512-fu0GSSaMJcEgpbu1wz3mDiVHDeIjROphv705K8XT5nPyvhzHSypJwP0rs8L7DZ992g6dcFzFnBGSi6cSzI8Z7g== dependencies: tslib "2.6.3" -"@descope/sdk-mixins@0.2.44": - version "0.2.44" - resolved "https://registry.yarnpkg.com/@descope/sdk-mixins/-/sdk-mixins-0.2.44.tgz#4d355afdf2900313a1c3668926b1b5bcde1b5d7b" - integrity sha512-BiyHgUGKmvhd/pZWW+bSs4STkpdSiN3lJTtcRuaKZnMVyJOJOwWz5gm6T6QVGEHSfSCIAj3ZiajABdrW8JOF8w== +"@descope/sdk-mixins@0.3.0": + version "0.3.0" + resolved "https://registry.yarnpkg.com/@descope/sdk-mixins/-/sdk-mixins-0.3.0.tgz#69d34a37b58765b65cb8beac45fbf6a4cde42f2a" + integrity sha512-XSA7LZkxigG73+80DyqPPILDMSvmK4LzeSrBAs5TPau0tDsCKzC5o3GK6YALRqqzbznxKLL/rzWXDgRlYkF1Bg== dependencies: - "@descope/sdk-component-drivers" "0.2.40" - "@descope/sdk-helpers" "0.1.59" + "@descope/sdk-component-drivers" "0.2.41" + "@descope/sdk-helpers" "0.1.60" tslib "2.6.3" -"@descope/user-management-widget@0.4.117": - version "0.4.117" - resolved "https://registry.yarnpkg.com/@descope/user-management-widget/-/user-management-widget-0.4.117.tgz#62ae726f8b908c91e7a79901d05a5f2d994edc69" - integrity sha512-9CJEmMuni5a0BLePIWvAdqGVt8JuskR/xgEFBt2rG4VimBRaTZwkcvIZjORKL7ALJm3HmwoAakJlrGXZNxJ6lQ== +"@descope/user-management-widget@0.4.119": + version "0.4.119" + resolved "https://registry.yarnpkg.com/@descope/user-management-widget/-/user-management-widget-0.4.119.tgz#cdd118ffde592439b60f464652879b3aa43d50a9" + integrity sha512-ykvWo1RpW9uyuInxgnURXX/AOxQ57XitMOmV/oL4duawYBmu3tc0CIL2DHSwhREGxL8oFLNcw5ES9tGONf27YQ== dependencies: - "@descope/sdk-component-drivers" "0.2.40" - "@descope/sdk-helpers" "0.1.59" - "@descope/sdk-mixins" "0.2.44" - "@descope/web-js-sdk" "1.16.1" + "@descope/sdk-component-drivers" "0.2.41" + "@descope/sdk-helpers" "0.1.60" + "@descope/sdk-mixins" "0.3.0" + "@descope/web-js-sdk" "1.16.3" "@reduxjs/toolkit" "^2.0.1" immer "^10.0.3" libphonenumber-js "1.11.4" @@ -1457,16 +1457,16 @@ reselect "5.1.1" tslib "2.6.3" -"@descope/user-profile-widget@0.0.97": - version "0.0.97" - resolved "https://registry.yarnpkg.com/@descope/user-profile-widget/-/user-profile-widget-0.0.97.tgz#cbe14bf1b86afa465d42a4de014caf4372338caf" - integrity sha512-LBpkq7JA/NS28SIvsDZHx8+3sw3M/WT/d8g9ib0SY0LpOHvaSFPw4GCPKphBuyx4wCyhs41o7cadv7gyz/D6kA== +"@descope/user-profile-widget@0.0.100": + version "0.0.100" + resolved "https://registry.yarnpkg.com/@descope/user-profile-widget/-/user-profile-widget-0.0.100.tgz#d7e2c2e95271dbb6267f181e710746537093d6de" + integrity sha512-Ap48dP010cRlpjY926VQvEmUoewlo6U+Q5aopUgx69zMZfWRo32Hs67fXUsmICCTw3ZfiEDg2c6gmX09/7oYeQ== dependencies: - "@descope/sdk-component-drivers" "0.2.40" - "@descope/sdk-helpers" "0.1.59" - "@descope/sdk-mixins" "0.2.44" - "@descope/web-component" "3.22.2" - "@descope/web-js-sdk" "1.16.1" + "@descope/sdk-component-drivers" "0.2.41" + "@descope/sdk-helpers" "0.1.60" + "@descope/sdk-mixins" "0.3.0" + "@descope/web-component" "3.23.2" + "@descope/web-js-sdk" "1.16.3" "@reduxjs/toolkit" "^2.0.1" immer "^10.0.3" redux "5.0.1" @@ -1474,23 +1474,25 @@ reselect "5.1.1" tslib "2.6.3" optionalDependencies: - "@descope/core-js-sdk" "2.24.1" + "@descope/core-js-sdk" "2.24.3" -"@descope/web-component@3.22.2": - version "3.22.2" - resolved "https://registry.yarnpkg.com/@descope/web-component/-/web-component-3.22.2.tgz#b4e788fb85b6c85a539bb4fbb17cf9bd5c6ca4ad" - integrity sha512-SUiFqUUcOr/P/b3QKtnuvNkSBnK8vEeR/OhSY2zpAs3P83K/uxZz0FkWs1urE7JfHXxTiVtNcJHAN4nyCDZG6w== +"@descope/web-component@3.23.2": + version "3.23.2" + resolved "https://registry.yarnpkg.com/@descope/web-component/-/web-component-3.23.2.tgz#0e9c14c6eae97db571737aa331dabc894d4f5e3c" + integrity sha512-4dzy1IBAB0EG74hHxbuuxbRPE6Tkyl3Ezm52pwkv88HZpnYEE3acvZXM2h6oXRAeZGwZ7EbRg+0Dj3ZEDFwmrQ== dependencies: - "@descope/web-js-sdk" "1.16.1" + "@descope/sdk-helpers" "0.1.60" + "@descope/sdk-mixins" "0.3.0" + "@descope/web-js-sdk" "1.16.3" "@fingerprintjs/fingerprintjs-pro" "3.9.9" tslib "2.6.3" -"@descope/web-js-sdk@1.16.1": - version "1.16.1" - resolved "https://registry.yarnpkg.com/@descope/web-js-sdk/-/web-js-sdk-1.16.1.tgz#3b2a3e819c232cfc3e2f0e4f8a5b047548037f6a" - integrity sha512-zvlre+5FIIx9urQCF/pPAAODndv/0I7L7aBJ17RahkyQ6q2pmdZxxywhBm7Zb8U1AmP5VmZdBTW509fBqG15xw== +"@descope/web-js-sdk@1.16.3": + version "1.16.3" + resolved "https://registry.yarnpkg.com/@descope/web-js-sdk/-/web-js-sdk-1.16.3.tgz#4d099459801f0a8188b3e9a94147e08584529596" + integrity sha512-jQL2CtPvIupNgD6nm8zKq3Fyqf6b8T9BBDQnpzvrKFx51iqtaUBI/qnot56Pyt4qtFp/nvajOZ+pOZ10s/nqEQ== dependencies: - "@descope/core-js-sdk" "2.24.1" + "@descope/core-js-sdk" "2.24.3" "@fingerprintjs/fingerprintjs-pro" "3.9.9" js-cookie "3.0.5" jwt-decode "3.1.2"