38 lines
1.2 KiB
TypeScript
38 lines
1.2 KiB
TypeScript
import type { User } from 'navigraph/auth';
|
|
import { useEffect, useState } from 'react';
|
|
import { auth } from '../../lib/navigraph';
|
|
import { authContext } from './NavigraphAuthContext';
|
|
|
|
// Provider hook that creates auth object and handles state
|
|
function useProvideAuth() {
|
|
const [user, setUser] = useState<User | null>(null);
|
|
const [initialized, setinitialized] = useState(false);
|
|
|
|
// Subscribe to user on mount
|
|
// Because this sets state in the callback it will cause any
|
|
// component that utilizes this hook to re-render with the latest auth object.
|
|
useEffect(() => {
|
|
const unsubscribe = auth.onAuthStateChanged((u) => {
|
|
if (!initialized) setinitialized(true);
|
|
setUser(u);
|
|
});
|
|
// Cleanup subscription on unmount
|
|
return () => unsubscribe();
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
}, []);
|
|
|
|
return {
|
|
user,
|
|
initialized,
|
|
signIn: auth.signInWithDeviceFlow,
|
|
};
|
|
}
|
|
|
|
// Provider component that wraps your app and makes auth object
|
|
// available to any child component that calls useAuth().
|
|
export function NavigraphAuthProvider({ children }: { children: React.ReactNode }) {
|
|
const _auth = useProvideAuth();
|
|
return <authContext.Provider value={_auth}>{children}</authContext.Provider>;
|
|
}
|
|
|