Rename getSilentAccessToken to accessToken for clarity

Cleans up config.json providing generic OIDC properties.
This allows for using other IDP providers besides Auth0.
The change is backward compatible with the previous versions.

.github/workflows/build_and_push.yml

@@ -5,6 +5,7 @@ on:
       - main
     tags:
       - "**"
+  pull_request:
 
 jobs:
   build_n_push:

.gitignore

@@ -2,6 +2,7 @@
 
 # dependencies
 /node_modules
+/node_modules.bkp
 /.pnp
 .pnp.js
 
@@ -26,3 +27,5 @@ src/auth_config.json
 .idea
 .eslintcache
 src/.local-config.json
+/public/OidcServiceWorker.js
+/public/OidcTrustedDomains.js

docker/init_react_envs.sh

@@ -1,19 +1,39 @@
 #!/bin/bash
 set -e
 
-if [[ -z "${AUTH0_DOMAIN}" ]]; then
-    echo "AUTH0_DOMAIN environment variable must be set"
-    exit 1
+if [[ -z "${AUTH_AUTHORITY}" ]]; then
+    if [[ -z "${AUTH0_DOMAIN}" ]]; then
+        echo "AUTH_AUTHORITY or AUTH0_DOMAIN environment variable must be set"
+        exit 1
+    fi
 fi
 
-if [[ -z "${AUTH0_CLIENT_ID}" ]]; then
-    echo "AUTH0_CLIENT_ID environment variable must be set"
-    exit 1
+if [[ -z "${AUTH_CLIENT_ID}" ]]; then
+    if [[ -z "${AUTH0_CLIENT_ID}" ]]; then
+        echo "AUTH_CLIENT_ID or AUTH0_CLIENT_ID environment variable must be set"
+        exit 1
+    fi
 fi
 
-if [[ -z "${AUTH0_AUDIENCE}" ]]; then
-    echo "AUTH0_AUDIENCE environment variable must be set"
-    exit 1
+if [[ -z "${AUTH_AUDIENCE}" ]]; then
+    if [[ -z "${AUTH0_AUDIENCE}" ]]; then
+        echo "AUTH_AUDIENCE or AUTH0_AUDIENCE environment variable must be set"
+        exit 1
+    fi
+fi
+
+if [[ -z "${AUTH_SUPPORTED_SCOPES}" ]]; then
+    if [[ -z "${AUTH0_DOMAIN}" ]]; then
+        echo "AUTH_SUPPORTED_SCOPES environment variable must be set"
+        exit 1
+    fi
+fi
+
+if [[ -z "${USE_AUTH0}" ]]; then
+    if [[ -z "${AUTH0_DOMAIN}" ]]; then
+        echo "USE_AUTH0 environment variable must be set"
+        exit 1
+    fi
 fi
 
 if [[ -z "${NETBIRD_MGMT_API_ENDPOINT}" ]]; then
@@ -21,11 +41,14 @@ if [[ -z "${NETBIRD_MGMT_API_ENDPOINT}" ]]; then
     exit 1
 fi
 
-AUTH0_DOMAIN=${AUTH0_DOMAIN}
-AUTH0_CLIENT_ID=${AUTH0_CLIENT_ID}
-AUTH0_AUDIENCE=${AUTH0_AUDIENCE}
-NETBIRD_MGMT_API_ENDPOINT=${NETBIRD_MGMT_API_ENDPOINT}
-NETBIRD_MGMT_GRPC_API_ENDPOINT=${NETBIRD_MGMT_GRPC_API_ENDPOINT}
+export AUTH_AUTHORITY=${AUTH_AUTHORITY:-https://$AUTH0_DOMAIN}
+export AUTH_CLIENT_ID=${AUTH_CLIENT_ID:-$AUTH0_CLIENT_ID}
+export AUTH_AUDIENCE=${AUTH_AUDIENCE:-$AUTH0_AUDIENCE}
+export USE_AUTH0=${USE_AUTH0:-true}
+export AUTH_SUPPORTED_SCOPES=${AUTH_SUPPORTED_SCOPES:-openid profile email api offline_access email_verified}
+
+export NETBIRD_MGMT_API_ENDPOINT=$(echo $NETBIRD_MGMT_API_ENDPOINT | sed -E 's/(:80|:443)$//')
+export NETBIRD_MGMT_GRPC_API_ENDPOINT=${NETBIRD_MGMT_GRPC_API_ENDPOINT}
 
 REPO="https://github.com/netbirdio/netbird/"
 # this command will fetch the latest release e.g. v0.6.3
@@ -33,11 +56,10 @@ export NETBIRD_LATEST_VERSION=$(basename $(curl -fs -o/dev/null -w %{redirect_ur
 echo "NetBird latest version: ${NETBIRD_LATEST_VERSION}"
 
 # replace ENVs in the config
-ENV_STR="\$\$AUTH0_DOMAIN \$\$AUTH0_CLIENT_ID \$\$AUTH0_AUDIENCE \$\$NETBIRD_MGMT_API_ENDPOINT \$\$NETBIRD_MGMT_GRPC_API_ENDPOINT \$\$NETBIRD_LATEST_VERSION"
+ENV_STR="\$\$USE_AUTH0 \$\$AUTH_AUDIENCE \$\$AUTH_AUTHORITY \$\$AUTH_CLIENT_ID \$\$AUTH_SUPPORTED_SCOPES \$\$NETBIRD_MGMT_API_ENDPOINT \$\$NETBIRD_MGMT_GRPC_API_ENDPOINT \$\$NETBIRD_LATEST_VERSION"
 MAIN_JS=$(find /usr/share/nginx/html/static/js/main.*js)
+OIDC_TRUSTED_DOMAINS="/usr/share/nginx/html/OidcTrustedDomains.js"
 cp "$MAIN_JS" "$MAIN_JS".copy
 envsubst "$ENV_STR" < "$MAIN_JS".copy > "$MAIN_JS"
-rm "$MAIN_JS".copy
-
-
-
+envsubst "$ENV_STR" < "$OIDC_TRUSTED_DOMAINS".tmpl > "$OIDC_TRUSTED_DOMAINS"
+rm "$MAIN_JS".copy

package.json

@@ -4,7 +4,7 @@
   "private": true,
   "dependencies": {
     "@ant-design/icons": "^4.7.0",
-    "@auth0/auth0-react": "^1.6.0",
+    "@axa-fr/react-oidc": "^5.14.0",
     "@headlessui/react": "^1.5.0",
     "@heroicons/react": "^1.0.4",
     "@testing-library/jest-dom": "^5.11.4",
@@ -21,18 +21,20 @@
     "antd": "^4.20.6",
     "autoprefixer": "^10.4.4",
     "axios": "^0.27.2",
+    "copyfiles": "^2.4.1",
     "heroicons": "^1.0.6",
     "highlight.js": "^11.2.0",
     "history": "^5.0.1",
     "lodash": "^4.17.21",
     "postcss": "^8.4.12",
     "prop-types": "^15.7.2",
-    "react": "^18.1.0",
+    "rc-overflow": "^1.2.8",
+    "react": "^18.2.0",
     "react-dom": "^18.1.0",
-    "react-highlight": "^0.14.0",
     "react-redux": "^8.0.2",
-    "react-router-dom": "^5.2.0",
+    "react-router-dom": "^5.3.3",
     "react-scripts": "^5.0.1",
+    "react-syntax-highlighter": "^15.5.0",
     "react-table": "^7.7.0",
     "redux": "^4.2.0",
     "redux-devtools-extension": "^2.13.9",
@@ -44,6 +46,8 @@
     "web-vitals": "^2.1.4"
   },
   "scripts": {
+    "copy": "copyfiles -f ./node_modules/@axa-fr/react-oidc/dist/OidcServiceWorker.js ./public",
+    "copytrusted": "copyfiles -f ./public/local/OidcTrustedDomains.js ./public",
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
@@ -68,6 +72,6 @@
     ]
   },
   "devDependencies": {
-    "@types/react-highlight": "^0.12.5"
+    "@types/react-syntax-highlighter": "^15.5.3"
   }
 }

public/OidcTrustedDomains.js.tmpl

@@ -0,0 +1,6 @@
+
+// Add here trusted domains, access tokens will be send to 
+const trustedDomains = {
+    default:["$NETBIRD_MGMT_API_ENDPOINT"],
+    auth0:[]
+};  

public/local/OidcTrustedDomains.js

@@ -0,0 +1,6 @@
+
+// Add here trusted domains, access tokens will be send to 
+const trustedDomains = {
+    default:["http://localhost:3001","http://127.0.0.1:3001", "http://0.0.0.0:33071"],
+    auth0:[]
+};  

run-local-keycloak.sh

@@ -0,0 +1,18 @@
+#!/bin/bash
+
+MGMT_PORT=$1
+
+npm run build
+docker build -f docker/Dockerfile -t netbird/dashboard-local:latest .
+
+docker rm -f netbird-dashboard
+docker run -d --name netbird-dashboard  \
+  -p 3000:80 -p 443:443 \
+  -e AUTH_AUDIENCE=netbird-client  \
+  -e AUTH_AUTHORITY=http://localhost:8080/realms/netbird  \
+  -e AUTH_CLIENT_ID=netbird-client \
+  -e USE_AUTH0=false  \
+  -e AUTH_SUPPORTED_SCOPES='openid profile email api offline_access' \
+  -e NETBIRD_MGMT_API_ENDPOINT=http://localhost:$MGMT_PORT  \
+  -e NETBIRD_MGMT_GRPC_API_ENDPOINT=http://localhost:$MGMT_PORT \
+  netbird/dashboard-local:latest

run-local-legacy.sh

@@ -0,0 +1,16 @@
+#!/bin/bash
+
+MGMT_PORT=$1
+
+npm run build
+docker build -f docker/Dockerfile -t netbird/dashboard-local:latest .
+
+docker rm -f netbird-dashboard
+docker run -d --name netbird-dashboard  \
+ -p 3000:80 -p 443:443  \
+ -e AUTH0_AUDIENCE=http://localhost:3000/ \
+ -e AUTH0_DOMAIN=netbird-localdev.eu.auth0.com  \
+ -e AUTH0_CLIENT_ID=kBRMAOqIZ7hvpVCaypQLCJvTzkYYIXVt  \
+ -e NETBIRD_MGMT_API_ENDPOINT=http://localhost:$MGMT_PORT  \
+ -e NETBIRD_MGMT_GRPC_API_ENDPOINT=http://localhost:$MGMT_PORT  \
+ netbird/dashboard-local:latest

run-local.sh

@@ -0,0 +1,18 @@
+#!/bin/bash
+
+MGMT_PORT=$1
+
+npm run build
+docker build -f docker/Dockerfile -t netbird/dashboard-local:latest .
+
+docker rm -f netbird-dashboard
+docker run -d --name netbird-dashboard  \
+  -p 3000:80 -p 443:443 \
+  -e AUTH_AUDIENCE=http://localhost:3000/ \
+  -e AUTH_AUTHORITY=https://netbird-localdev.eu.auth0.com \
+  -e AUTH_CLIENT_ID=kBRMAOqIZ7hvpVCaypQLCJvTzkYYIXVt  \
+  -e USE_AUTH0=true \
+  -e AUTH_SUPPORTED_SCOPES='openid profile email api offline_access email_verified' \
+  -e NETBIRD_MGMT_API_ENDPOINT=http://localhost:$MGMT_PORT  \
+  -e NETBIRD_MGMT_GRPC_API_ENDPOINT=http://localhost:$MGMT_PORT \
+  netbird/dashboard-local:latest

src/App.tsx

@@ -1,40 +1,25 @@
 import React, {useEffect, useState} from 'react';
 import {Provider} from "react-redux";
-import {Link, Redirect, Route, Switch} from 'react-router-dom';
-import {useAuth0} from "@auth0/auth0-react";
+import {Redirect, Route, Switch} from 'react-router-dom';
 import Navbar from './components/Navbar';
 import Peers from './views/Peers';
 import FooterComponent from './components/FooterComponent';
-import Loading from "./components/Loading";
 import SetupKeys from "./views/SetupKeys";
 import AddPeer from "./views/AddPeer";
 import Users from './views/Users';
 import AccessControl from './views/AccessControl';
-// import Activity from './views/Activity';
 import Banner from "./components/Banner";
 import {store} from "./store";
-
-import {Button, Col, Layout, Result, Row} from 'antd';
+import { Col, Layout, Row} from 'antd';
 import {Container} from "./components/Container";
+import {withOidcSecure} from '@axa-fr/react-oidc';
 
 const {Header, Content} = Layout;
 
 function App() {
 
-    const {
-        isLoading,
-        isAuthenticated,
-        loginWithRedirect,
-        logout,
-        error
-    } = useAuth0();
-
     const [isOpen, setIsOpen] = useState(false);
 
-    const toggle = () => {
-        setIsOpen(!isOpen);
-    };
-
     useEffect(() => {
         const hideMenu = () => {
             if (window.innerWidth > 768 && isOpen) {
@@ -50,41 +35,10 @@ function App() {
         };
     });
 
-    if (error) {
-        return <Result
-            status="warning"
-            title={error.message}
-            extra={<>
-                <a href={window.location.origin}>
-                    <Button type="primary">
-                        Try again
-                    </Button>
-                </a>
-                <Button type="primary" onClick={function () {
-                    logout({
-                        returnTo: window.location.origin,
-                    })
-                }}>
-                    Log out
-                </Button>
-            </>
-            }
-        />
-    }
-
-    if (isLoading) {
-        return <Loading padding="3em" width="50px" height="50px"/>;
-    }
-
-    if (!isAuthenticated) {
-        loginWithRedirect({})
-    }
-
     return (
         <Provider store={store}>
-            {isAuthenticated &&
                 <Layout>
-                    <Banner/>
+                    {/*<Banner/>*/}
                     <Header className="header" style={{
                         display: "flex",
                         flexDirection: "column",
@@ -110,17 +64,15 @@ function App() {
                                     )
                                 }}
                             />
-                            <Route path='/peers' exact component={Peers}/>
-                            <Route path="/add-peer" component={AddPeer}/>
-                            <Route path="/setup-keys" component={SetupKeys}/>
-                            <Route path="/acls" component={AccessControl}/>
-                            {/*<Route path="/activity" component={Activity}/>*/}
-                            <Route path="/users" component={Users}/>
+                            <Route path='/peers' exact component={withOidcSecure(Peers)}/>
+                            <Route path="/add-peer" component={withOidcSecure(AddPeer)}/>
+                            <Route path="/setup-keys" component={withOidcSecure(SetupKeys)}/>
+                            <Route path="/acls" component={withOidcSecure(AccessControl)}/>
+                            <Route path="/users" component={withOidcSecure(Users)}/>
                         </Switch>
                     </Content>
                     <FooterComponent/>
                 </Layout>
-            }
         </Provider>
     );
 }

src/components/AccessControlModalGroups.tsx

@@ -1,8 +1,4 @@
 import React, {useEffect, useState} from 'react';
-import {useDispatch, useSelector} from "react-redux";
-import {RootState} from "typesafe-actions";
-import { actions as ruleActions } from '../store/rule';
-import {string} from "prop-types";
 import {Avatar, List, Modal} from "antd";
 import {Group} from "../store/group/types";
 

src/components/AccessControlNew.tsx

@@ -14,10 +14,10 @@ import {
 import {ArrowRightOutlined, CheckOutlined, CloseOutlined, FlagFilled, QuestionCircleFilled} from "@ant-design/icons";
 import type { CustomTagProps } from 'rc-select/lib/BaseSelect'
 import {Rule, RuleToSave} from "../store/rule/types";
-import {useAuth0} from "@auth0/auth0-react";
 import { uniq } from "lodash"
 import {Header} from "antd/es/layout/layout";
 import {RuleObject} from "antd/lib/form";
+import {useOidcAccessToken} from "@axa-fr/react-oidc";
 
 const { Paragraph } = Typography;
 const { Option } = Select;
@@ -28,7 +28,7 @@ interface FormRule extends Rule {
 }
 
 const AccessControlNew = () => {
-    const { getAccessTokenSilently } = useAuth0()
+    const {accessToken} = useOidcAccessToken()
     const dispatch = useDispatch()
     const setupNewRuleVisible = useSelector((state: RootState) => state.rule.setupNewRuleVisible)
     const groups =  useSelector((state: RootState) => state.group.data)
@@ -96,7 +96,7 @@ const AccessControlNew = () => {
         form.validateFields()
             .then((values) => {
                 const ruleToSave = createRuleToSave()
-                dispatch(ruleActions.saveRule.request({getAccessTokenSilently, payload: ruleToSave}))
+                dispatch(ruleActions.saveRule.request({accessToken:accessToken, payload: ruleToSave}))
             })
             .catch((errorInfo) => {
                 console.log('errorInfo', errorInfo)
@@ -210,7 +210,7 @@ const AccessControlNew = () => {
 
     // const testDeleteGroup = () => {
     //     groups.forEach(g => {
-    //         dispatch(groupsActions.deleteGroup.request({getAccessTokenSilently, payload: g.ID || ''}))
+    //         dispatch(groupsActions.deleteGroup.request({accessToken, payload: g.ID || ''}))
     //     })
     // }
 

src/components/LoginError.tsx

@@ -0,0 +1,35 @@
+import {OidcUserStatus, useOidc, useOidcUser} from "@axa-fr/react-oidc";
+import {Button, Result} from "antd";
+import React from "react";
+import {getConfig} from "../config";
+
+function LoginError() {
+    const { logout } = useOidc();
+    const config = getConfig();
+    const { oidcUserLoadingState } = useOidcUser();
+    const queryString = window.location.search;
+    const urlParams = new URLSearchParams(queryString);
+
+    if (urlParams.get("error") === "access_denied") {
+        return <Result
+            status="warning"
+            title={urlParams.get("error_description")}
+            extra={<>
+                <a href={window.location.origin}>
+                    <Button type="primary">
+                        Try again
+                    </Button>
+                </a>
+                <Button type="primary" onClick={function () {
+                    logout("",{client_id:config.clientId})
+                }}>
+                    Log out
+                </Button>
+            </>
+            }
+        />
+    }
+    return <div>{"Login Error: User state: "+oidcUserLoadingState}</div>
+}
+
+export default LoginError;

src/components/Navbar.tsx

@@ -1,23 +1,26 @@
 import React, {useEffect, useState} from 'react';
 import {Link} from 'react-router-dom';
 import logo from "../assets/logo.png";
-import {useAuth0} from "@auth0/auth0-react";
 import {useLocation} from 'react-router-dom';
 import {Menu, Row, Col, Grid, Dropdown, Avatar, Button, Typography, Space} from 'antd'
 import {ItemType} from "antd/lib/menu/hooks/useItems";
 import {AvatarSize} from "antd/es/avatar/SizeContext";
 import { UserOutlined } from '@ant-design/icons';
-
+import { useOidc,useOidcUser } from '@axa-fr/react-oidc';
+import {getConfig} from "../config";
 const { Text } = Typography
 const { useBreakpoint } = Grid;
 
 const Navbar = () => {
     let location = useLocation();
+    const config = getConfig();
     const {
-        user,
         isAuthenticated,
         logout,
-    } = useAuth0();
+    } = useOidc();
+
+    const { oidcUser } = useOidcUser();
+    const user = oidcUser;
 
     const screens = useBreakpoint();
 
@@ -31,10 +34,10 @@ const Navbar = () => {
         { label: (<Link  to="/add-peer">Add Peer</Link>), key: '/add-peer' },
         { label: (<Link  to="/setup-keys">Setup Keys</Link>), key: '/setup-keys' },
         { label: (<Link  to="/acls">Access Control</Link>), key: '/acls' },
-        // { label: (<Link  to="/activity">Activity</Link>), key: '/activity' },
         { label: (<Link  to="/users">Users</Link>), key: '/users' }
     ] as ItemType[])
-
+    const logoutWithRedirect = () =>
+        logout("/",{client_id:config.clientId});
     useEffect(() => {
         const fs = menuItems.filter(m => m?.key !== userEmailKey && m?.key !== userLogoutKey && m?.key !== userDividerKey)
         if (screens.xs === true) {
@@ -63,21 +66,13 @@ const Navbar = () => {
                     key: '0',
                 },
                 {
-                    label: <a onClick={e => {
-                        logoutWithRedirect()
-                        e.preventDefault()}
-                    }>Logout</a>,
+                    label: (<Link  to="/logout" onClick={logoutWithRedirect}>Logout</Link>),
                     key: '1',
                 }
             ]}
         />
     );
 
-    const logoutWithRedirect = () =>
-        logout({
-            returnTo: window.location.origin,
-        });
-
     const createAvatar = (size:AvatarSize) => {
         return user?.picture ? (
             <Avatar size={size} src={user?.picture} icon={<UserOutlined />} />

src/components/PeerUpdate.tsx

@@ -5,17 +5,16 @@ import {actions as peerActions} from '../store/peer';
 import {Button, Col, Divider, Drawer, Form, Input, Row, Select, Space, Tag, Typography} from "antd";
 import {Header} from "antd/es/layout/layout";
 import type {CustomTagProps} from 'rc-select/lib/BaseSelect'
-import {useAuth0} from "@auth0/auth0-react";
 import {Peer, PeerGroupsToSave} from "../store/peer/types";
 import {Group, GroupPeer} from "../store/group/types";
 import {CloseOutlined, EditOutlined, FlagFilled} from "@ant-design/icons";
 import {RuleObject} from 'antd/lib/form';
-
+import { useOidcAccessToken } from '@axa-fr/react-oidc';
 const { Paragraph } = Typography;
 const { Option } = Select;
 
 const PeerUpdate = () => {
-    const { getAccessTokenSilently } = useAuth0()
+    const { accessToken } = useOidcAccessToken()
     const dispatch = useDispatch()
     const groups =  useSelector((state: RootState) => state.group.data)
     const peer =   useSelector((state: RootState) => state.peer.peer)
@@ -214,11 +213,11 @@ const PeerUpdate = () => {
                 if (!noUpdateToName()) {
                     const peerUpdate = createPeerToSave()
                     setCallingPeerAPI(true)
-                    dispatch(peerActions.updatePeer.request({getAccessTokenSilently, payload: peerUpdate}))
+                    dispatch(peerActions.updatePeer.request({accessToken:accessToken, payload: peerUpdate}))
                 }
                 if (peerGroupsToSave.groupsToRemove.length || peerGroupsToSave.groupsToAdd.length || peerGroupsToSave.groupsNoId.length) {
                     setCallingGroupAPI(true)
-                    dispatch(peerActions.saveGroups.request({getAccessTokenSilently, payload: peerGroupsToSave}))
+                    dispatch(peerActions.saveGroups.request({accessToken:accessToken, payload: peerGroupsToSave}))
                 }
             })
             .catch((errorInfo) => {

src/components/SetupKeyNew.tsx

@@ -13,11 +13,11 @@ import {
 import {RootState} from "typesafe-actions";
 import {QuestionCircleFilled} from "@ant-design/icons";
 import {SetupKey} from "../store/setup-key/types";
-import {useAuth0} from "@auth0/auth0-react";
+import {useOidcAccessToken} from "@axa-fr/react-oidc";
 const { Text } = Typography;
 
 const SetupKeyNew = () => {
-    const { getAccessTokenSilently } = useAuth0()
+    const {accessToken} = useOidcAccessToken()
     const dispatch = useDispatch()
     const setupNewKeyVisible = useSelector((state: RootState) => state.setupKey.setupNewKeyVisible)
     const setupKey =  useSelector((state: RootState) => state.setupKey.setupKey)
@@ -34,7 +34,7 @@ const SetupKeyNew = () => {
     const handleFormSubmit = () => {
         form.validateFields()
             .then((values) => {
-                dispatch(setupKeyActions.createSetupKey.request({getAccessTokenSilently, payload: formSetupKey}))
+                dispatch(setupKeyActions.createSetupKey.request({accessToken:accessToken, payload: formSetupKey}))
             })
             .catch((errorInfo) => {
                 console.log('errorInfo', errorInfo)

src/components/addpeer/TabSteps.tsx

@@ -1,9 +1,8 @@
-import {useDispatch, useSelector} from "react-redux";
-import Highlight from 'react-highlight';
 import "highlight.js/styles/mono-blue.css";
 import "highlight.js/lib/languages/bash";
 import { StepCommand } from './types'
-
+import SyntaxHighlighter from 'react-syntax-highlighter';
+import { monoBlue } from 'react-syntax-highlighter/dist/esm/styles/hljs';
 import {
     Typography,
     Space,
@@ -12,8 +11,6 @@ import {
 import {copyToClipboard} from "../../utils/common";
 import {CheckOutlined, CopyOutlined} from "@ant-design/icons";
 import React, {useEffect, useState} from "react";
-
-const { Title, Text } = Typography;
 const { Step } = Steps;
 
 type Props = {
@@ -48,10 +45,10 @@ const TabSteps:React.FC<Props> = ({stepsItems}) => {
                     title={c.title}
                     description={
                         <Space className="nb-code" direction="vertical" size="small" style={{display: "flex"}}>
-                            { (c.commands && (typeof c.commands === 'string' || c.commands instanceof String)) ? (
-                            <Highlight className='bash'>
+                            { (c.commands && (typeof c.commands === 'string')) ? (
+                            <SyntaxHighlighter language="bash" style={monoBlue}>
                                 {c.commands}
-                            </Highlight>
+                            </SyntaxHighlighter>
                             ) : (
                                 c.commands
                             )}

src/config.json

@@ -1,7 +1,10 @@
 {
-  "domain": "$AUTH0_DOMAIN",
-  "clientId": "$AUTH0_CLIENT_ID",
-  "audience": "$AUTH0_AUDIENCE",
+  "auth0Auth": "$USE_AUTH0",
+  "authAuthority": "$AUTH_AUTHORITY",
+  "authClientId": "$AUTH_CLIENT_ID",
+  "authScopesSupported": "$AUTH_SUPPORTED_SCOPES",
+  "authAudience": "$AUTH_AUDIENCE",
+
   "apiOrigin": "$NETBIRD_MGMT_API_ENDPOINT",
   "grpcApiOrigin": "$NETBIRD_MGMT_GRPC_API_ENDPOINT",
   "latestVersion": "$NETBIRD_LATEST_VERSION"

src/config.ts

@@ -8,23 +8,15 @@ if (process.env.NODE_ENV !== 'production') {
 }
 
 export function getConfig() {
-  // Configure the audience here. By default, it will take whatever is in the config
-  // (specified by the `audience` key) unless it's the default value of "YOUR_API_IDENTIFIER" (which
-  // is what you get sometimes by using the Auth0 sample download tool from the quickstart page, if you
-  // don't have an API).
-  // If this resolves to `null`, the API page changes to show some helpful info about what to do
-  // with the audience.
-  const audience =
-    configJson.audience && configJson.audience !== "YOUR_API_IDENTIFIER"
-      ? configJson.audience
-      : null;
 
   return {
-    domain: configJson.domain,
-    clientId: configJson.clientId,
+    auth0Auth: configJson.auth0Auth == "true", //due to substitution we can't use boolean in the config
+    authority: configJson.authAuthority,
+    clientId: configJson.authClientId,
+    scopesSupported: configJson.authScopesSupported,
     apiOrigin: configJson.apiOrigin,
     grpcApiOrigin: configJson.grpcApiOrigin,
     latestVersion: configJson.latestVersion,
-    ...(audience ? { audience } : null),
+    audience: configJson.authAudience,
   };
 }