Skip to content

Commit

Permalink
feat(styling and theme): Added Parameter for Styling and Theme (#581)
Browse files Browse the repository at this point in the history 
* 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
  • Loading branch information
@gaokevin1
gaokevin1 authored Sep 3, 2024
1 parent 67d045b commit 7f0869c
Show file tree
Hide file tree
Showing 5 changed files with 104 additions and 88 deletions.
1 change: 1 addition & 0 deletions .env.example
View file
Original file line number Diff line number Diff line change
@@ -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
Expand Down
4 changes: 4 additions & 0 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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`.
Expand Down
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
9 changes: 9 additions & 0 deletions src/App.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 =
Expand All @@ -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) {
Expand Down
176 changes: 89 additions & 87 deletions yarn.lock
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1347,108 +1347,108 @@
normalize-package-data "^3||^4||^5||^6"
xmlbuilder2 "^3.0.2"

"@descope/[email protected].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/[email protected].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"
redux-thunk "3.1.0"
reselect "5.1.1"
tslib "2.6.3"

"@descope/[email protected].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/[email protected].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"
redux-thunk "3.1.0"
reselect "5.1.1"
tslib "2.6.3"

"@descope/[email protected].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/[email protected].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/[email protected].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/[email protected].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/[email protected].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/[email protected].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"
redux-thunk "3.1.0"
reselect "5.1.1"
tslib "2.6.3"

"@descope/[email protected].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/[email protected].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/[email protected].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/[email protected].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/[email protected].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/[email protected].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"
Expand All @@ -1457,40 +1457,42 @@
reselect "5.1.1"
tslib "2.6.3"

"@descope/[email protected].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/[email protected].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"
redux-thunk "3.1.0"
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/[email protected].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/[email protected].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"
Expand Down

0 comments on commit 7f0869c

Please sign in to comment.