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; */
 }