Files
HKSingleParty/03_source/frontend/src/auth/context/supabase/auth-provider.tsx
louiscklaw b7cd25b614 build ok,
2025-06-15 11:28:24 +08:00

83 lines
2.4 KiB
TypeScript

import { useSetState } from 'minimal-shared/hooks';
import { useCallback, useEffect, useMemo } from 'react';
import axios from 'src/lib/axios';
import { supabase } from 'src/lib/supabase';
import type { AuthState } from '../../types';
import { AuthContext } from '../auth-context';
// ----------------------------------------------------------------------
/**
* NOTE:
* We only build demo at basic level.
* Customer will need to do some extra handling yourself if you want to extend the logic and other features...
*/
type Props = {
children: React.ReactNode;
};
export function AuthProvider({ children }: Props) {
const { state, setState } = useSetState<AuthState>({ user: null, loading: true });
const checkUserSession = useCallback(async () => {
try {
const {
data: { session },
error,
} = await supabase.auth.getSession();
if (error) {
setState({ user: null, loading: false });
console.error(error);
throw error;
}
if (session) {
const accessToken = session?.access_token;
setState({ user: { ...session, ...session?.user }, loading: false });
axios.defaults.headers.common.Authorization = `Bearer ${accessToken}`;
} else {
setState({ user: null, loading: false });
delete axios.defaults.headers.common.Authorization;
}
} catch (error) {
console.error(error);
setState({ user: null, loading: false });
}
}, [setState]);
useEffect(() => {
checkUserSession();
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
// ----------------------------------------------------------------------
const checkAuthenticated = state.user ? 'authenticated' : 'unauthenticated';
const status = state.loading ? 'loading' : checkAuthenticated;
const memoizedValue = useMemo(
() => ({
user: state.user
? {
...state.user,
id: state.user?.id,
accessToken: state.user?.access_token,
displayName: state.user?.user_metadata.display_name,
role: state.user?.role ?? 'admin',
}
: null,
checkUserSession,
loading: status === 'loading',
authenticated: status === 'authenticated',
unauthenticated: status === 'unauthenticated',
}),
[checkUserSession, state.user, status]
);
return <AuthContext value={memoizedValue}>{children}</AuthContext>;
}