36 lines
1.3 KiB
TypeScript
36 lines
1.3 KiB
TypeScript
import React, { useEffect } from 'react';
|
|
import { AuthenticatedTemplate, UnauthenticatedTemplate, useMsal } from '@azure/msal-react';
|
|
import { InteractionStatus } from '@azure/msal-browser';
|
|
import { Compass } from 'lucide-react';
|
|
import LoginPage from './LoginPage';
|
|
|
|
const AuthGuard: React.FC<{ children: React.ReactNode }> = ({ children }) => {
|
|
const { instance, inProgress } = useMsal();
|
|
|
|
useEffect(() => {
|
|
// Handle redirect response on app load
|
|
instance.handleRedirectPromise().catch(console.error);
|
|
}, [instance]);
|
|
|
|
if (inProgress === InteractionStatus.Startup || inProgress === InteractionStatus.HandleRedirect) {
|
|
return (
|
|
<div className="min-h-screen bg-white flex items-center justify-center">
|
|
<div className="flex flex-col items-center gap-4">
|
|
<div className="relative flex items-center justify-center w-12 h-12 bg-black rounded-xl shadow-lg animate-pulse">
|
|
<Compass size={24} className="text-[#FFD700]" />
|
|
</div>
|
|
<p className="text-[10px] font-black uppercase tracking-[0.3em] text-black/30">Authenticating...</p>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<AuthenticatedTemplate>{children}</AuthenticatedTemplate>
|
|
<UnauthenticatedTemplate><LoginPage /></UnauthenticatedTemplate>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default AuthGuard;
|