import { signInWithPopup } from 'firebase/auth';
import { useCallback, useState } from 'react';
import { useFirebaseAuth } from '../contexts/FirebaseAuthProvider';
import { Banner } from './Banner';
import { Button, type ButtonProps } from './Button';
export const UtahIdLogin = ({
size = 'medium',
errorRenderer = (error) => {
return {error};
},
}: {
size?: ButtonProps['size'];
errorRenderer?: (error: string) => React.ReactNode;
}) => {
const [signInError, setSignInError] = useState(null);
const { auth, provider } = useFirebaseAuth() || {};
const handlePress = useCallback(async () => {
if (!auth || !provider) {
console.warn(
'You must initialize Firebase Auth with an identity provider before using this component',
);
return;
}
// @see https://firebase.google.com/docs/auth/web/google-signin
try {
await signInWithPopup(auth, provider);
} catch (error) {
// Check if the error is a typical Firebase error
if (error && typeof error === 'object' && 'code' in error) {
const errorWithCode = error as { code: string; message: string };
const match = /\{.*\}/.exec(errorWithCode.message);
if (match?.length) {
try {
const response = JSON.parse(match[0]);
setSignInError(response.error.message);
} catch {
setSignInError(errorWithCode.message ?? 'Unknown error');
}
} else {
setSignInError(errorWithCode.message ?? 'Unknown error');
}
} else {
setSignInError('Unknown login error');
}
}
}, [auth, provider]);
let height = 'h-6';
if (size === 'extraSmall') {
height = 'h-4';
} else if (size === 'small') {
height = 'h-5';
} else if (size === 'medium') {
height = 'h-6';
} else if (size === 'large') {
height = 'h-7';
} else if (size === 'extraLarge') {
height = 'h-9';
}
return (
<>
continue with
<>{signInError && errorRenderer(signInError)}
);
};