import type { AppState } from '@auth0/auth0-react';
import { Auth0Provider, useAuth0 } from '@auth0/auth0-react';
import { useCallback, useEffect, useMemo, useState } from 'react';
import { CONFIG } from 'src/global-config';
import axios from 'src/lib/axios';
import { AuthContext } from '../auth-context';
// ----------------------------------------------------------------------
type Props = {
children: React.ReactNode;
};
export function AuthProvider({ children }: Props) {
const { domain, clientId, callbackUrl } = CONFIG.auth0;
const onRedirectCallback = useCallback((appState?: AppState) => {
window.location.replace(appState?.returnTo || window.location.pathname);
}, []);
if (!(domain && clientId && callbackUrl)) {
return null;
}
return (
{children}
);
}
// ----------------------------------------------------------------------
function AuthProviderContainer({ children }: Props) {
const { user, isLoading, isAuthenticated, getAccessTokenSilently } = useAuth0();
const [accessToken, setAccessToken] = useState(null);
const getAccessToken = useCallback(async () => {
try {
if (isAuthenticated) {
const token = await getAccessTokenSilently();
setAccessToken(token);
axios.defaults.headers.common.Authorization = `Bearer ${token}`;
} else {
setAccessToken(null);
delete axios.defaults.headers.common.Authorization;
}
} catch (error) {
console.error(error);
}
}, [getAccessTokenSilently, isAuthenticated]);
useEffect(() => {
getAccessToken();
}, [getAccessToken]);
// ----------------------------------------------------------------------
const checkAuthenticated = isAuthenticated ? 'authenticated' : 'unauthenticated';
const status = isLoading ? 'loading' : checkAuthenticated;
const memoizedValue = useMemo(
() => ({
user: user
? {
...user,
id: user?.sub,
accessToken,
displayName: user?.name,
photoURL: user?.picture,
role: user?.role ?? 'admin',
}
: null,
loading: status === 'loading',
authenticated: status === 'authenticated',
unauthenticated: status === 'unauthenticated',
}),
[accessToken, status, user]
);
return {children};
}