Function AuthModal

frontend/src/components/auth/AuthModal.tsx:15–104

({
  isOpen,
  onClose,
  defaultMode = 'signin',
  afterSignInUrl,
  afterSignUpUrl,
})

}

export const AuthModal: React.FC<AuthModalProps> = ({
  isOpen,
  onClose,
  defaultMode = 'signin',
  afterSignInUrl,
  afterSignUpUrl,
}) => {
  const [mode, setMode] = useState<'signin' | 'signup'>(defaultMode);
  const authProvider = useAuthProvider();

  const handleModeChange = (newMode: 'signin' | 'signup') => {
    setMode(newMode);
  };

  const handleClose = () => {
    onClose();
    // Reset mode when modal closes
    setMode(defaultMode);
  };

  const SignInComponent = authProvider.SignInComponent;
  const SignUpComponent = authProvider.SignUpComponent;

  return (
    <Dialog open={isOpen} onOpenChange={handleClose}>
      <DialogContent className="sm:max-w-[425px]">
        <DialogHeader>
          <DialogTitle className="text-center">
            {mode === 'signin' ? 'Welcome Back' : 'Create Account'}
          </DialogTitle>
        </DialogHeader>

        <Tabs
          value={mode}
          onValueChange={(value) => handleModeChange(value as 'signin' | 'signup')}
        >
          <TabsList className="grid w-full grid-cols-2">
            <TabsTrigger value="signin">Sign In</TabsTrigger>
            <TabsTrigger value="signup">Sign Up</TabsTrigger>
          </TabsList>

          <TabsContent value="signin" className="mt-6">
            <div className="space-y-4">
              {authProvider.name === 'clerk' ? (
                <SignInComponent afterSignInUrl={afterSignInUrl} />
              ) : (
                <div className="text-center py-8">
                  <p className="text-muted-foreground mb-4">
                    Sign in is not available with the current auth provider
                  </p>
                  <p className="text-sm text-muted-foreground">
                    Provider:{' '}
                    <code className="bg-muted px-2 py-1 rounded">{authProvider.name}</code>
                  </p>
                </div>
              )}
            </div>
          </TabsContent>