gave auth0 provider

.env

@@ -0,0 +1,4 @@
+#Auth0
+VITE_AUTH0_CLIENT_DOMAIN=brandxtech.auth0.com
+VITE_AUTH0_AUDIENCE=pond.brandxtech.ca
+VITE_AUTH0_BXT_CLIENT_ID=sLnqOu40uWfQT1lYSDYj2wYmlLEHRB74

package-lock.json

@@ -8,6 +8,7 @@
       "name": "my-react-app",
       "version": "0.0.0",
       "dependencies": {
+        "@auth0/auth0-react": "^2.2.4",
         "react": "^18.3.1",
         "react-dom": "^18.3.1"
       },
@@ -41,6 +42,25 @@
         "node": ">=6.0.0"
       }
     },
+    "node_modules/@auth0/auth0-react": {
+      "version": "2.2.4",
+      "resolved": "https://registry.npmjs.org/@auth0/auth0-react/-/auth0-react-2.2.4.tgz",
+      "integrity": "sha512-l29PQC0WdgkCoOc6WeMAY26gsy/yXJICW0jHfj0nz8rZZphYKrLNqTRWFFCMJY+sagza9tSgB1kG/UvQYgGh9A==",
+      "license": "MIT",
+      "dependencies": {
+        "@auth0/auth0-spa-js": "^2.1.3"
+      },
+      "peerDependencies": {
+        "react": "^16.11.0 || ^17 || ^18",
+        "react-dom": "^16.11.0 || ^17 || ^18"
+      }
+    },
+    "node_modules/@auth0/auth0-spa-js": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/@auth0/auth0-spa-js/-/auth0-spa-js-2.1.3.tgz",
+      "integrity": "sha512-NMTBNuuG4g3rame1aCnNS5qFYIzsTUV5qTFPRfTyYFS1feS6jsCBR+eTq9YkxCp1yuoM2UIcjunPaoPl77U9xQ==",
+      "license": "MIT"
+    },
     "node_modules/@babel/code-frame": {
       "version": "7.25.7",
       "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.25.7.tgz",
@@ -1304,6 +1324,18 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@types/node": {
+      "version": "22.7.8",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-22.7.8.tgz",
+      "integrity": "sha512-a922jJy31vqR5sk+kAdIENJjHblqcZ4RmERviFsER4WJcEONqxKcjNOlk0q7OUfrF5sddT+vng070cdfMlrPLg==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "peer": true,
+      "dependencies": {
+        "undici-types": "~6.19.2"
+      }
+    },
     "node_modules/@types/prop-types": {
       "version": "15.7.13",
       "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.13.tgz",
@@ -3398,6 +3430,15 @@
         }
       }
     },
+    "node_modules/undici-types": {
+      "version": "6.19.8",
+      "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.19.8.tgz",
+      "integrity": "sha512-ve2KP6f/JnbPBFyobGHuerC9g1FYGn/F8n1LWTwNxCEzd6IfqTwUQcNXgEtmmQ6DlRrC1hrSrBnCZPokRrDHjw==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "peer": true
+    },
     "node_modules/update-browserslist-db": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.1.1.tgz",

package.json

@@ -15,6 +15,7 @@
     "test": "vitest"
   },
   "dependencies": {
+    "@auth0/auth0-react": "^2.2.4",
     "react": "^18.3.1",
     "react-dom": "^18.3.1"
   },

src/app/App.tsx

@@ -2,12 +2,33 @@ import { useState } from 'react'
 import reactLogo from '../assets/react.svg'
 import viteLogo from '/vite.svg'
 import './App.css'
+import { Auth0Provider } from '@auth0/auth0-react'
+import { or } from '../utils/types'
 
 function App() {
   const [count, setCount] = useState(0)
 
+  let url: string | undefined = window.location.origin;
+  let audience: string | undefined;
+  if (window.location.origin === "https://staging.brandxtech.ca") {
+    url = import.meta.env.VITE_AUTH0_CLIENT_STAGING_DOMAIN;
+    audience = import.meta.env.REACT_APP_AUTH0_STAGING_AUDIENCE;
+  } else {
+    url = import.meta.env.REACT_APP_AUTH0_CLIENT_DOMAIN;
+    audience = import.meta.env.REACT_APP_AUTH0_AUDIENCE;
+  }
+
+  let client_id = import.meta.env.REACT_APP_AUTH0_BXT_CLIENT_ID;
+
   return (
-    <>
+    <Auth0Provider
+      domain={or(url, "")}
+      clientId={or(client_id, "")}
+      authorizationParams={{
+        audience: or(audience, ""),
+        redirect_uri: window.location.origin + "/callback"
+      }}
+    >
       <div>
         <a href="https://vitejs.dev" target="_blank">
           <img src={viteLogo} className="logo" alt="Vite logo" />
@@ -28,7 +49,7 @@ function App() {
       <p className="read-the-docs">
         Coming soon
       </p>
-    </>
+    </Auth0Provider>
   )
 }
 

src/app/index.css

@@ -10,7 +10,7 @@
   font-synthesis: none;
   text-rendering: optimizeLegibility;
   -webkit-font-smoothing: antialiased;
-  /* Give declaration dropped warning */
+  /* Gives declaration dropped warning */
   /* -moz-osx-font-smoothing: grayscale; */
 }
 

src/utils/types.ts

@@ -0,0 +1,58 @@
+export function nonnull<T>(something: T): T | undefined {
+    return something === null ? undefined : something;
+  }
+  
+  export function notNull<T>(something: T): boolean {
+    return something !== null && typeof something !== "undefined" && something !== undefined;
+  }
+  
+  export function or<T>(something: T | null | undefined, somethingElse: any): T {
+    return something ? something : (somethingElse as T);
+  }
+  
+  export function coalesce<T>(first: T, ...other: T[]): T {
+    if (first) return first;
+    other.forEach(thing => {
+      if (thing) return thing;
+    });
+    return first;
+  }
+  
+  export function extract<T>(obj: Object, hierarchy: string, otherwise: T): T {
+    if (!notNull(obj) || !notNull(hierarchy)) {
+      return otherwise;
+    }
+    let path = hierarchy.split(".");
+    let last = obj;
+    for (let i = 0; i < path.length; i++) {
+      let next = path[i];
+      if (last.hasOwnProperty(next)) {
+        last = last[next as keyof Object];
+      } else {
+        return otherwise;
+      }
+    }
+    return last as T;
+  }
+  
+  export function has(obj: Object, hierarchy: string): boolean {
+    if (!notNull(obj) || !notNull(hierarchy)) {
+      return false;
+    }
+    let path = hierarchy.split(".");
+    let last = obj;
+    for (let i = 0; i < path.length; i++) {
+      let next = path[i];
+      if (last.hasOwnProperty(next)) {
+        last = last[next as keyof Object];
+      } else {
+        return false;
+      }
+    }
+    return true;
+  }
+  
+  export function hasAny<T>(list?: T[] | null): boolean {
+    return or(list, []).length > 0;
+  }
+