gave auth0 provider

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;
+  }
+