59 lines
1.8 KiB
TypeScript
59 lines
1.8 KiB
TypeScript
import { Auth0Provider } from '@auth0/auth0-react'
|
|
import { or } from '../utils/types'
|
|
import AuthWrapper from '../providers/auth'
|
|
import HTTPProvider from '../providers/http'
|
|
import { useState } from 'react'
|
|
import LoadingScreen from './LoadingScreen'
|
|
import UserWrapper from './UserWrapper'
|
|
import { Theme, ThemeProvider } from '@mui/material'
|
|
import { CreateTheme } from '../theme/theme'
|
|
import { getThemeType, setThemeType } from '../theme/themeType'
|
|
|
|
function AuthHTTPWrapper() {
|
|
const [token, setToken] = useState<string | undefined>(undefined)
|
|
const [palette, setPalette] = useState<Theme>(CreateTheme(getThemeType()));
|
|
|
|
let url: string | undefined = import.meta.env.VITE_AUTH0_CLIENT_DOMAIN;
|
|
let audience: string | undefined = import.meta.env.VITE_AUTH0_AUDIENCE;
|
|
|
|
let client_id = import.meta.env.VITE_AUTH0_DEV_CLIENT_ID;
|
|
|
|
const toggleTheme = () => {
|
|
if (getThemeType() === "light") {
|
|
setPalette(CreateTheme("dark"));
|
|
setThemeType("dark");
|
|
} else {
|
|
setPalette(CreateTheme("light"));
|
|
setThemeType("light");
|
|
}
|
|
};
|
|
|
|
return (
|
|
<Auth0Provider
|
|
domain={or(url, "")}
|
|
clientId={or(client_id, "")}
|
|
authorizationParams={{
|
|
audience: or(audience, ""),
|
|
redirect_uri: window.location.origin + "/callback"
|
|
}}
|
|
useRefreshTokens={true}
|
|
cacheLocation='localstorage'
|
|
>
|
|
<ThemeProvider theme={palette}>
|
|
<AuthWrapper setToken={setToken}>
|
|
{ token ?
|
|
<HTTPProvider token={token}>
|
|
<UserWrapper toggleTheme={toggleTheme}/>
|
|
</HTTPProvider>
|
|
:
|
|
<LoadingScreen
|
|
message='Loading user profile'
|
|
/>
|
|
}
|
|
</AuthWrapper>
|
|
</ThemeProvider>
|
|
</Auth0Provider>
|
|
)
|
|
}
|
|
|
|
export default AuthHTTPWrapper
|