Force service worker uninstall

.github/workflows/build_and_push.yml

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

.gitignore

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

docker/init_react_envs.sh

@@ -1,39 +1,19 @@
 #!/bin/bash
 set -e
 
-if [[ -z "${AUTH_AUTHORITY}" ]]; then
-    if [[ -z "${AUTH0_DOMAIN}" ]]; then
-        echo "AUTH_AUTHORITY or AUTH0_DOMAIN environment variable must be set"
-        exit 1
-    fi
+if [[ -z "${AUTH0_DOMAIN}" ]]; then
+    echo "AUTH0_DOMAIN environment variable must be set"
+    exit 1
 fi
 
-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
+if [[ -z "${AUTH0_CLIENT_ID}" ]]; then
+    echo "AUTH0_CLIENT_ID environment variable must be set"
+    exit 1
 fi
 
-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
+if [[ -z "${AUTH0_AUDIENCE}" ]]; then
+    echo "AUTH0_AUDIENCE environment variable must be set"
+    exit 1
 fi
 
 if [[ -z "${NETBIRD_MGMT_API_ENDPOINT}" ]]; then
@@ -41,14 +21,11 @@ if [[ -z "${NETBIRD_MGMT_API_ENDPOINT}" ]]; then
     exit 1
 fi
 
-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}
+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}
 
 REPO="https://github.com/netbirdio/netbird/"
 # this command will fetch the latest release e.g. v0.6.3
@@ -56,10 +33,11 @@ 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="\$\$USE_AUTH0 \$\$AUTH_AUDIENCE \$\$AUTH_AUTHORITY \$\$AUTH_CLIENT_ID \$\$AUTH_SUPPORTED_SCOPES \$\$NETBIRD_MGMT_API_ENDPOINT \$\$NETBIRD_MGMT_GRPC_API_ENDPOINT \$\$NETBIRD_LATEST_VERSION"
+ENV_STR="\$\$AUTH0_DOMAIN \$\$AUTH0_CLIENT_ID \$\$AUTH0_AUDIENCE \$\$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"
-envsubst "$ENV_STR" < "$OIDC_TRUSTED_DOMAINS".tmpl > "$OIDC_TRUSTED_DOMAINS"
-rm "$MAIN_JS".copy
+rm "$MAIN_JS".copy
+
+
+

package.json

@@ -4,7 +4,7 @@
   "private": true,
   "dependencies": {
     "@ant-design/icons": "^4.7.0",
-    "@axa-fr/react-oidc": "^5.14.0",
+    "@auth0/auth0-react": "^1.6.0",
     "@headlessui/react": "^1.5.0",
     "@heroicons/react": "^1.0.4",
     "@testing-library/jest-dom": "^5.11.4",
@@ -21,20 +21,18 @@
     "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",
-    "rc-overflow": "^1.2.8",
-    "react": "^18.2.0",
+    "react": "^18.1.0",
     "react-dom": "^18.1.0",
+    "react-highlight": "^0.14.0",
     "react-redux": "^8.0.2",
-    "react-router-dom": "^5.3.3",
+    "react-router-dom": "^5.2.0",
     "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",
@@ -46,8 +44,6 @@
     "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",
@@ -72,6 +68,6 @@
     ]
   },
   "devDependencies": {
-    "@types/react-syntax-highlighter": "^15.5.3"
+    "@types/react-highlight": "^0.12.5"
   }
 }

public/OidcTrustedDomains.js.tmpl

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

public/local/OidcTrustedDomains.js

@@ -1,6 +0,0 @@
-
-// 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

@@ -1,18 +0,0 @@
-#!/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

@@ -1,16 +0,0 @@
-#!/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

@@ -1,18 +0,0 @@
-#!/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,25 +1,40 @@
 import React, {useEffect, useState} from 'react';
 import {Provider} from "react-redux";
-import {Redirect, Route, Switch} from 'react-router-dom';
+import {Link, Redirect, Route, Switch} from 'react-router-dom';
+import {useAuth0} from "@auth0/auth0-react";
 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 { Col, Layout, Row} from 'antd';
+
+import {Button, Col, Layout, Result, 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) {
@@ -35,10 +50,41 @@ 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",
@@ -64,15 +110,17 @@ function App() {
                                     )
                                 }}
                             />
-                            <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)}/>
+                            <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}/>
                         </Switch>
                     </Content>
                     <FooterComponent/>
                 </Layout>
+            }
         </Provider>
     );
 }

src/components/AccessControlModalGroups.tsx

@@ -1,4 +1,8 @@
 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 {accessToken} = useOidcAccessToken()
+    const { getAccessTokenSilently } = useAuth0()
     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({accessToken:accessToken, payload: ruleToSave}))
+                dispatch(ruleActions.saveRule.request({getAccessTokenSilently, payload: ruleToSave}))
             })
             .catch((errorInfo) => {
                 console.log('errorInfo', errorInfo)
@@ -210,7 +210,7 @@ const AccessControlNew = () => {
 
     // const testDeleteGroup = () => {
     //     groups.forEach(g => {
-    //         dispatch(groupsActions.deleteGroup.request({accessToken, payload: g.ID || ''}))
+    //         dispatch(groupsActions.deleteGroup.request({getAccessTokenSilently, payload: g.ID || ''}))
     //     })
     // }
 

src/components/LoginError.tsx

@@ -1,35 +0,0 @@
-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,26 +1,23 @@
 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,
-    } = useOidc();
-
-    const { oidcUser } = useOidcUser();
-    const user = oidcUser;
+    } = useAuth0();
 
     const screens = useBreakpoint();
 
@@ -34,10 +31,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) {
@@ -66,13 +63,21 @@ const Navbar = () => {
                     key: '0',
                 },
                 {
-                    label: (<Link  to="/logout" onClick={logoutWithRedirect}>Logout</Link>),
+                    label: <a onClick={e => {
+                        logoutWithRedirect()
+                        e.preventDefault()}
+                    }>Logout</a>,
                     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,16 +5,17 @@ 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 { accessToken } = useOidcAccessToken()
+    const { getAccessTokenSilently } = useAuth0()
     const dispatch = useDispatch()
     const groups =  useSelector((state: RootState) => state.group.data)
     const peer =   useSelector((state: RootState) => state.peer.peer)
@@ -213,11 +214,11 @@ const PeerUpdate = () => {
                 if (!noUpdateToName()) {
                     const peerUpdate = createPeerToSave()
                     setCallingPeerAPI(true)
-                    dispatch(peerActions.updatePeer.request({accessToken:accessToken, payload: peerUpdate}))
+                    dispatch(peerActions.updatePeer.request({getAccessTokenSilently, payload: peerUpdate}))
                 }
                 if (peerGroupsToSave.groupsToRemove.length || peerGroupsToSave.groupsToAdd.length || peerGroupsToSave.groupsNoId.length) {
                     setCallingGroupAPI(true)
-                    dispatch(peerActions.saveGroups.request({accessToken:accessToken, payload: peerGroupsToSave}))
+                    dispatch(peerActions.saveGroups.request({getAccessTokenSilently, 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 {useOidcAccessToken} from "@axa-fr/react-oidc";
+import {useAuth0} from "@auth0/auth0-react";
 const { Text } = Typography;
 
 const SetupKeyNew = () => {
-    const {accessToken} = useOidcAccessToken()
+    const { getAccessTokenSilently } = useAuth0()
     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({accessToken:accessToken, payload: formSetupKey}))
+                dispatch(setupKeyActions.createSetupKey.request({getAccessTokenSilently, payload: formSetupKey}))
             })
             .catch((errorInfo) => {
                 console.log('errorInfo', errorInfo)

src/components/addpeer/TabSteps.tsx

@@ -1,8 +1,9 @@
+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,
@@ -11,6 +12,8 @@ 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 = {
@@ -45,10 +48,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')) ? (
-                            <SyntaxHighlighter language="bash" style={monoBlue}>
+                            { (c.commands && (typeof c.commands === 'string' || c.commands instanceof String)) ? (
+                            <Highlight className='bash'>
                                 {c.commands}
-                            </SyntaxHighlighter>
+                            </Highlight>
                             ) : (
                                 c.commands
                             )}

src/config.json

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

src/config.ts

@@ -8,15 +8,23 @@ 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 {
-    auth0Auth: configJson.auth0Auth == "true", //due to substitution we can't use boolean in the config
-    authority: configJson.authAuthority,
-    clientId: configJson.authClientId,
-    scopesSupported: configJson.authScopesSupported,
+    domain: configJson.domain,
+    clientId: configJson.clientId,
     apiOrigin: configJson.apiOrigin,
     grpcApiOrigin: configJson.grpcApiOrigin,
     latestVersion: configJson.latestVersion,
-    audience: configJson.authAudience,
+    ...(audience ? { audience } : null),
   };
 }