brandxtech/frontend
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

getting user in app

Browse source
This commit is contained in:
Carter 2024-10-24 12:21:52 -06:00
parent 90fd2905fb
commit 28b8578605
6 changed files with 62 additions and 25 deletions
Download patch file Download diff file Expand all files Collapse all files

2
.env
View file

@ -1,3 +1,5 @@
VITE_APP_API_URL=https://api.brandxtech.ca/v1
#Auth0 #Auth0
VITE_AUTH0_CLIENT_DOMAIN=brandxtech.auth0.com VITE_AUTH0_CLIENT_DOMAIN=brandxtech.auth0.com
VITE_AUTH0_AUDIENCE=pond.brandxtech.ca VITE_AUTH0_AUDIENCE=pond.brandxtech.ca

9
package.json
View file

@ -4,13 +4,14 @@
"version": "0.0.0", "version": "0.0.0",
"type": "module", "type": "module",
"scripts": { "scripts": {
"dev": "vite", "start": "vite",
"start-local": "VITE_APP_API_URL=http://localhost:50052/v1 VITE_APP_WS_URL=ws://localhost:50052/v1/live VITE_APP_BILLING_URL=http://localhost:50053/v1 VITE_APP_RECLUSE_URL=http://localhost:50054/v1 VITE_APP_GITLAB_URL=http://localhost:50055/v1 vite",
"build": "tsc -b && vite build", "build": "tsc -b && vite build",
"lint": "eslint .", "lint": "eslint .",
"preview": "vite preview", "preview": "vite preview",
"build:staging": "NODE_OPTIONS=--max_old_space_size=4096 REACT_APP_GOOGLE_API_KEY=${GOOGLE_API_KEY} REACT_APP_STRIPE_PUBLIC_KEY=${STRIPE_PUBLIC_KEY_STAGING} REACT_APP_MAPBOX_ACCESS_TOKEN=${MAPBOX_ACCESS_TOKEN} REACT_APP_CNHI_CLIENT_ID=${CNHI_CLIENT_ID} REACT_APP_CNHI_AUTHORIZE_URL=${CNHI_AUTHORIZE_URL} REACT_APP_CNHI_REDIRECT_URI=${CNHI_REDIRECT_URI} REACT_APP_CNHI_SCOPES=${CNHI_SCOPES} REACT_APP_CNHI_CONNECTION=${CNHI_CONNECTION} REACT_APP_CNHI_AUDIENCE=${CNHI_AUDIENCE} REACT_APP_IMAGE4IO_USERNAME=${IMAGE4IO_USERNAME} REACT_APP_IMAGE4IO_PASSWORD=${IMAGE4IO_PASSWORD} REACT_APP_JD_CLIENT_ID=${JD_CLIENT_ID} REACT_APP_JD_AUTHORIZE_URL=${JD_AUTHORIZE_URL} REACT_APP_JD_REDIRECT_URI=${JD_REDIRECT_URI} REACT_APP_JD_SCOPES=${JD_SCOPES} REACT_APP_JD_STATE=${JD_STATE} vite build", "build:staging": "NODE_OPTIONS=--max_old_space_size=4096 VITE_APP_GOOGLE_API_KEY=${GOOGLE_API_KEY} VITE_APP_STRIPE_PUBLIC_KEY=${STRIPE_PUBLIC_KEY_STAGING} VITE_APP_MAPBOX_ACCESS_TOKEN=${MAPBOX_ACCESS_TOKEN} VITE_APP_CNHI_CLIENT_ID=${CNHI_CLIENT_ID} VITE_APP_CNHI_AUTHORIZE_URL=${CNHI_AUTHORIZE_URL} VITE_APP_CNHI_REDIRECT_URI=${CNHI_REDIRECT_URI} VITE_APP_CNHI_SCOPES=${CNHI_SCOPES} VITE_APP_CNHI_CONNECTION=${CNHI_CONNECTION} VITE_APP_CNHI_AUDIENCE=${CNHI_AUDIENCE} VITE_APP_IMAGE4IO_USERNAME=${IMAGE4IO_USERNAME} VITE_APP_IMAGE4IO_PASSWORD=${IMAGE4IO_PASSWORD} VITE_APP_JD_CLIENT_ID=${JD_CLIENT_ID} VITE_APP_JD_AUTHORIZE_URL=${JD_AUTHORIZE_URL} VITE_APP_JD_REDIRECT_URI=${JD_REDIRECT_URI} VITE_APP_JD_SCOPES=${JD_SCOPES} VITE_APP_JD_STATE=${JD_STATE} vite build",
"build:development": "NODE_OPTIONS=--max_old_space_size=4096 REACT_APP_GOOGLE_API_KEY=${GOOGLE_API_KEY} REACT_APP_STRIPE_PUBLIC_KEY=${STRIPE_PUBLIC_KEY_DEVELOPMENT} REACT_APP_MAPBOX_ACCESS_TOKEN=${MAPBOX_ACCESS_TOKEN} REACT_APP_CNHI_CLIENT_ID=${CNHI_CLIENT_ID} REACT_APP_CNHI_AUTHORIZE_URL=${CNHI_AUTHORIZE_URL} REACT_APP_CNHI_REDIRECT_URI=${CNHI_REDIRECT_URI} REACT_APP_CNHI_SCOPES=${CNHI_SCOPES} REACT_APP_CNHI_CONNECTION=${CNHI_CONNECTION} REACT_APP_CNHI_AUDIENCE=${CNHI_AUDIENCE} REACT_APP_IMAGE4IO_USERNAME=${IMAGE4IO_USERNAME} REACT_APP_IMAGE4IO_PASSWORD=${IMAGE4IO_PASSWORD} REACT_APP_JD_CLIENT_ID=${JD_CLIENT_ID} REACT_APP_JD_AUTHORIZE_URL=${JD_AUTHORIZE_URL} REACT_APP_JD_REDIRECT_URI=${JD_REDIRECT_URI} REACT_APP_JD_SCOPES=${JD_SCOPES} REACT_APP_JD_STATE=${JD_STATE} vite build", "build:development": "NODE_OPTIONS=--max_old_space_size=4096 VITE_APP_GOOGLE_API_KEY=${GOOGLE_API_KEY} VITE_APP_STRIPE_PUBLIC_KEY=${STRIPE_PUBLIC_KEY_DEVELOPMENT} VITE_APP_MAPBOX_ACCESS_TOKEN=${MAPBOX_ACCESS_TOKEN} VITE_APP_CNHI_CLIENT_ID=${CNHI_CLIENT_ID} VITE_APP_CNHI_AUTHORIZE_URL=${CNHI_AUTHORIZE_URL} VITE_APP_CNHI_REDIRECT_URI=${CNHI_REDIRECT_URI} VITE_APP_CNHI_SCOPES=${CNHI_SCOPES} VITE_APP_CNHI_CONNECTION=${CNHI_CONNECTION} VITE_APP_CNHI_AUDIENCE=${CNHI_AUDIENCE} VITE_APP_IMAGE4IO_USERNAME=${IMAGE4IO_USERNAME} VITE_APP_IMAGE4IO_PASSWORD=${IMAGE4IO_PASSWORD} VITE_APP_JD_CLIENT_ID=${JD_CLIENT_ID} VITE_APP_JD_AUTHORIZE_URL=${JD_AUTHORIZE_URL} VITE_APP_JD_REDIRECT_URI=${JD_REDIRECT_URI} VITE_APP_JD_SCOPES=${JD_SCOPES} VITE_APP_JD_STATE=${JD_STATE} vite build",
"build:production": "NODE_OPTIONS=--max_old_space_size=4096 REACT_APP_GOOGLE_API_KEY=${GOOGLE_API_KEY} REACT_APP_STRIPE_PUBLIC_KEY=${STRIPE_PUBLIC_KEY_PRODUCTION} REACT_APP_MAPBOX_ACCESS_TOKEN=${MAPBOX_ACCESS_TOKEN} REACT_APP_CNHI_CLIENT_ID=${CNHI_CLIENT_ID} REACT_APP_CNHI_AUTHORIZE_URL=${CNHI_AUTHORIZE_URL} REACT_APP_CNHI_REDIRECT_URI=${CNHI_REDIRECT_URI} REACT_APP_CNHI_SCOPES=${CNHI_SCOPES} REACT_APP_CNHI_CONNECTION=${CNHI_CONNECTION} REACT_APP_CNHI_AUDIENCE=${CNHI_AUDIENCE} REACT_APP_IMAGE4IO_USERNAME=${IMAGE4IO_USERNAME} REACT_APP_IMAGE4IO_PASSWORD=${IMAGE4IO_PASSWORD} REACT_APP_JD_CLIENT_ID=${JD_CLIENT_ID} REACT_APP_JD_AUTHORIZE_URL=${JD_AUTHORIZE_URL} REACT_APP_JD_REDIRECT_URI=${JD_REDIRECT_URI} REACT_APP_JD_SCOPES=${JD_SCOPES} REACT_APP_JD_STATE=${JD_STATE} vite build", "build:production": "NODE_OPTIONS=--max_old_space_size=4096 VITE_APP_GOOGLE_API_KEY=${GOOGLE_API_KEY} VITE_APP_STRIPE_PUBLIC_KEY=${STRIPE_PUBLIC_KEY_PRODUCTION} VITE_APP_MAPBOX_ACCESS_TOKEN=${MAPBOX_ACCESS_TOKEN} VITE_APP_CNHI_CLIENT_ID=${CNHI_CLIENT_ID} VITE_APP_CNHI_AUTHORIZE_URL=${CNHI_AUTHORIZE_URL} VITE_APP_CNHI_REDIRECT_URI=${CNHI_REDIRECT_URI} VITE_APP_CNHI_SCOPES=${CNHI_SCOPES} VITE_APP_CNHI_CONNECTION=${CNHI_CONNECTION} VITE_APP_CNHI_AUDIENCE=${CNHI_AUDIENCE} VITE_APP_IMAGE4IO_USERNAME=${IMAGE4IO_USERNAME} VITE_APP_IMAGE4IO_PASSWORD=${IMAGE4IO_PASSWORD} VITE_APP_JD_CLIENT_ID=${JD_CLIENT_ID} VITE_APP_JD_AUTHORIZE_URL=${JD_AUTHORIZE_URL} VITE_APP_JD_REDIRECT_URI=${JD_REDIRECT_URI} VITE_APP_JD_SCOPES=${JD_SCOPES} VITE_APP_JD_STATE=${JD_STATE} vite build",
"build:offline": "npx env-cmd offline,whitelabel npm run build", "build:offline": "npx env-cmd offline,whitelabel npm run build",
"test": "vitest" "test": "vitest"
}, },

17
src/app/App.tsx
View file

@ -1,4 +1,4 @@
import { useState } from 'react' import { useEffect, useState } from 'react'
import reactLogo from '../assets/react.svg' import reactLogo from '../assets/react.svg'
import viteLogo from '/vite.svg' import viteLogo from '/vite.svg'
import './App.css' import './App.css'
@ -8,15 +8,28 @@ import { or } from '../utils/types'
function App() { function App() {
const [count, setCount] = useState(0) const [count, setCount] = useState(0)
const [loading, setLoading] = useState(false)
const userAPI = useUserAPI(); const userAPI = useUserAPI();
const useAuth = useAuth0(); const useAuth = useAuth0();
let user_id = or(useAuth.user?.sub, "") let user_id = or(useAuth.user?.sub, "")
// console.log("User ID: ", user_id) // console.log("User ID: ", user_id)
if (user_id.length > 1) userAPI.getUser(user_id).then(resp => { // if (user_id.length > 1) {
// userAPI.getUser(user_id).then(resp => {
// console.log(resp)
// })
// }
useEffect(() => {
if (loading) return;
setLoading(true)
userAPI.getUser(user_id).then(resp => {
console.log(resp) console.log(resp)
}).finally(() => {
setLoading(false)
}) })
}, [])
return ( return (
<><div> <><div>

8
src/app/AuthHTTPWrapper.tsx
View file

@ -3,8 +3,10 @@ import { or } from '../utils/types'
import AuthWrapper from '../providers/auth' import AuthWrapper from '../providers/auth'
import HTTPProvider from '../providers/http' import HTTPProvider from '../providers/http'
import App from './App' import App from './App'
import { useState } from 'react'
function AuthHTTPWrapper() { function AuthHTTPWrapper() {
const [gotToken, setGotToken] = useState(false)
let url: string | undefined = window.location.origin; let url: string | undefined = window.location.origin;
let audience: string | undefined; let audience: string | undefined;
@ -30,8 +32,12 @@ function AuthHTTPWrapper() {
cacheLocation='localstorage' cacheLocation='localstorage'
> >
<AuthWrapper> <AuthWrapper>
<HTTPProvider> <HTTPProvider setGotToken={setGotToken}>
{gotToken ?
<App/> <App/>
:
<p>hi</p>
}
</HTTPProvider> </HTTPProvider>
</AuthWrapper> </AuthWrapper>
</Auth0Provider> </Auth0Provider>

42
src/providers/http.tsx
View file

@ -24,38 +24,52 @@ interface IHTTPContext {
options: (demo?: boolean) => AxiosRequestConfig; options: (demo?: boolean) => AxiosRequestConfig;
} }
interface Props extends PropsWithChildren<any>{
setGotToken: React.Dispatch<React.SetStateAction<boolean>>;
}
export const HTTPContext = createContext<IHTTPContext>({} as IHTTPContext); export const HTTPContext = createContext<IHTTPContext>({} as IHTTPContext);
export default function HTTPProvider(props: PropsWithChildren<any>) { export default function HTTPProvider(props: Props) {
const { children } = props; const { children, setGotToken } = props;
const { isAuthenticated, /*token,*/ getAccessTokenSilently } = useAuth0(); const { isAuthenticated, /*token,*/ getAccessTokenSilently } = useAuth0();
const [token, setToken] = useState(""); const [token, setToken] = useState("");
useEffect(() => { useEffect(() => {
if (isAuthenticated) getAccessTokenSilently().then(t => { if (isAuthenticated) getAccessTokenSilently().then(t => {
setToken(t) setToken(t)
}).finally(() => {
setGotToken(true)
}) })
}, [setToken, isAuthenticated]) }, [setToken, isAuthenticated])
const defaultOptions = (demo: boolean = false) => { const defaultOptions = (demo: boolean = false) => {
if (demo || !isAuthenticated || !token) { // if (demo || !isAuthenticated || !token) {
return { // console.log("demo: ", demo)
// console.log("Authenticated: ", isAuthenticated)
// console.log("token: ", token)
// return {
// headers: {
// "Content-Type": "application/json"
// }
// };
// }
// console.log("Getting options with Bearer")
// console.log(token)
const config = {
headers: { headers: {
Authorization: `Bearer ${token}`,
"Content-Type": "application/json" "Content-Type": "application/json"
} }
}; };
} return config;
return {
headers: {
Authorization: "Bearer " + token,
"Content-Type": "application/json"
}
};
}; };
function get<T>(url: string, spreadOptions?: AxiosRequestConfig): Promise<AxiosResponse<T>> { function get<T>(url: string): Promise<AxiosResponse<T>> {
return axios.get(url, { ...defaultOptions(), ...spreadOptions }); console.log(defaultOptions())
return axios.get(url, {...defaultOptions()});
} }
function put<T>( function put<T>(

3
src/providers/pond/pond.tsx
View file

@ -2,7 +2,8 @@ import { PropsWithChildren } from "react";
import UserProvider, { useUserAPI } from "./userAPI"; import UserProvider, { useUserAPI } from "./userAPI";
export const pondURL = (partial: string, demo: boolean = false): string => { export const pondURL = (partial: string, demo: boolean = false): string => {
let url = import.meta.env.REACT_APP_API_URL + (demo ? "/demo" : "") + partial; let url = import.meta.env.VITE_APP_API_URL + (demo ? "/demo" : "") + partial;
console.log(url)
// if (isStaging()) url = process.env.REACT_APP_STAGING_API_URL + (demo ? "/demo" : "") + partial; // if (isStaging()) url = process.env.REACT_APP_STAGING_API_URL + (demo ? "/demo" : "") + partial;
return url; return url;
}; };