@medplum/react 1.0.6 → 2.0.0

package/dist/cjs/OperationOutcomeAlert/OperationOutcomeAlert.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import { OperationOutcomeIssue } from '@medplum/fhirtypes';
+export interface OperationOutcomeAlertProps {
+    issues?: OperationOutcomeIssue[];
+}
+export declare function OperationOutcomeAlert(props: OperationOutcomeAlertProps): JSX.Element | null;

package/dist/cjs/auth/AuthenticationForm.d.ts

@@ -1,10 +1,24 @@
 import { BaseLoginRequest, LoginAuthenticationResponse } from '@medplum/core';
 import React from 'react';
 export interface AuthenticationFormProps extends BaseLoginRequest {
-    readonly generatePkce?: boolean;
     readonly onForgotPassword?: () => void;
     readonly onRegister?: () => void;
     readonly handleAuthResponse: (response: LoginAuthenticationResponse) => void;
     readonly children?: React.ReactNode;
 }
 export declare function AuthenticationForm(props: AuthenticationFormProps): JSX.Element;
+export interface EmailFormProps extends BaseLoginRequest {
+    readonly generatePkce?: boolean;
+    readonly onRegister?: () => void;
+    readonly handleAuthResponse: (response: LoginAuthenticationResponse) => void;
+    readonly setEmail: (email: string) => void;
+    readonly children?: React.ReactNode;
+}
+export declare function EmailForm(props: EmailFormProps): JSX.Element;
+export interface PasswordFormProps extends BaseLoginRequest {
+    readonly email: string;
+    readonly onForgotPassword?: () => void;
+    readonly handleAuthResponse: (response: LoginAuthenticationResponse) => void;
+    readonly children?: React.ReactNode;
+}
+export declare function PasswordForm(props: PasswordFormProps): JSX.Element;

package/dist/cjs/auth/SignInForm.d.ts

@@ -1,6 +1,7 @@
 import { BaseLoginRequest } from '@medplum/core';
 import React from 'react';
 export interface SignInFormProps extends BaseLoginRequest {
+    readonly login?: string;
     readonly chooseScopes?: boolean;
     readonly onSuccess?: () => void;
     readonly onForgotPassword?: () => void;

package/dist/cjs/index.cjs

@@ -630,6 +630,13 @@
         return undefined;
     }
 
+    function OperationOutcomeAlert(props) {
+        if (!props.issues) {
+            return null;
+        }
+        return (React.createElement(core$1.Alert, { icon: React.createElement(icons.IconAlertCircle, { size: 16 }), color: "red" }, props.issues.map((issue) => (React.createElement("div", { "data-testid": "text-field-error", key: issue.details?.text }, issue.details?.text)))));
+    }
+
     /**
      * Dynamically loads the recaptcha script.
      * We do not want to load the script on page load unless the user needs it.
@@ -684,12 +691,11 @@
                 }
             } },
             React.createElement(core$1.Center, { sx: { flexDirection: 'column' } }, props.children),
-            issues && (React.createElement(core$1.Alert, { icon: React.createElement(icons.IconAlertCircle, { size: 16 }), color: "red" }, issues.map((issue) => (React.createElement("div", { "data-testid": "text-field-error", key: issue.details?.text }, issue.details?.text))))),
+            React.createElement(OperationOutcomeAlert, { issues: issues }),
             googleClientId && (React.createElement(React.Fragment, null,
                 React.createElement(core$1.Group, { position: "center", p: "xl", style: { height: 70 } },
                     React.createElement(GoogleButton, { googleClientId: googleClientId, handleGoogleCredential: async (response) => {
                             try {
-                                await medplum.startPkce();
                                 props.handleAuthResponse(await medplum.startGoogleLogin({
                                     googleClientId: response.clientId,
                                     googleCredential: response.credential,
@@ -757,47 +763,79 @@
     }
 
     function AuthenticationForm(props) {
-        const { generatePkce, onForgotPassword, onRegister, handleAuthResponse, children, ...baseLoginRequest } = props;
+        const [email, setEmail] = React.useState();
+        if (!email) {
+            return React.createElement(EmailForm, { setEmail: setEmail, ...props });
+        }
+        else {
+            return React.createElement(PasswordForm, { email: email, ...props });
+        }
+    }
+    function EmailForm(props) {
+        const { setEmail, onRegister, handleAuthResponse, children, ...baseLoginRequest } = props;
         const medplum = useMedplum();
         const googleClientId = getGoogleClientId(props.googleClientId);
-        const [outcome, setOutcome] = React.useState();
-        const issues = getIssuesForExpression(outcome, undefined);
-        async function startPkce() {
-            if (generatePkce) {
-                await medplum.startPkce();
+        const isExternalAuth = React.useCallback(async (authMethod) => {
+            if (!authMethod.authorizeUrl) {
+                return false;
             }
-        }
-        return (React.createElement(Form, { style: { maxWidth: 400 }, onSubmit: (formData) => {
-                startPkce()
-                    .then(() => medplum.startLogin({
-                    ...baseLoginRequest,
-                    email: formData.email,
-                    password: formData.password,
-                    remember: formData.remember === 'on',
-                }))
-                    .then(handleAuthResponse)
-                    .catch(setOutcome);
-            } },
+            const state = JSON.stringify({
+                ...(await medplum.ensureCodeChallenge(baseLoginRequest)),
+                domain: authMethod.domain,
+            });
+            const url = new URL(authMethod.authorizeUrl);
+            url.searchParams.set('state', state);
+            window.location.assign(url.toString());
+            return true;
+        }, [medplum, baseLoginRequest]);
+        const handleSubmit = React.useCallback(async (formData) => {
+            const authMethod = await medplum.post('auth/method', { email: formData.email });
+            if (!(await isExternalAuth(authMethod))) {
+                setEmail(formData.email);
+            }
+        }, [medplum, isExternalAuth, setEmail]);
+        const handleGoogleCredential = React.useCallback(async (response) => {
+            const authResponse = await medplum.startGoogleLogin({
+                ...baseLoginRequest,
+                googleCredential: response.credential,
+            });
+            if (!(await isExternalAuth(authResponse))) {
+                handleAuthResponse(authResponse);
+            }
+        }, [medplum, baseLoginRequest, isExternalAuth, handleAuthResponse]);
+        return (React.createElement(Form, { style: { maxWidth: 400 }, onSubmit: handleSubmit },
             React.createElement(core$1.Center, { sx: { flexDirection: 'column' } }, children),
-            issues && (React.createElement(core$1.Alert, { icon: React.createElement(icons.IconAlertCircle, { size: 16 }), color: "red" }, issues.map((issue) => (React.createElement("div", { "data-testid": "text-field-error", key: issue.details?.text }, issue.details?.text))))),
             googleClientId && (React.createElement(React.Fragment, null,
                 React.createElement(core$1.Group, { position: "center", p: "xl", style: { height: 70 } },
-                    React.createElement(GoogleButton, { googleClientId: googleClientId, handleGoogleCredential: (response) => {
-                            startPkce()
-                                .then(() => medplum.startGoogleLogin({
-                                ...baseLoginRequest,
-                                googleCredential: response.credential,
-                            }))
-                                .then(props.handleAuthResponse)
-                                .catch(setOutcome);
-                        } })),
+                    React.createElement(GoogleButton, { googleClientId: googleClientId, handleGoogleCredential: handleGoogleCredential })),
                 React.createElement(core$1.Divider, { label: "or", labelPosition: "center", my: "lg" }))),
+            React.createElement(core$1.TextInput, { name: "email", type: "email", label: "Email", placeholder: "name@domain.com", required: true, autoFocus: true }),
+            React.createElement(core$1.Group, { position: "apart", mt: "xl", spacing: 0, noWrap: true },
+                onRegister && (React.createElement(core$1.Anchor, { component: "button", type: "button", color: "dimmed", onClick: onRegister, size: "xs" }, "Register")),
+                React.createElement(core$1.Button, { type: "submit" }, "Next"))));
+    }
+    function PasswordForm(props) {
+        const { onForgotPassword, handleAuthResponse, children, ...baseLoginRequest } = props;
+        const medplum = useMedplum();
+        const [outcome, setOutcome] = React.useState();
+        const issues = getIssuesForExpression(outcome, undefined);
+        const handleSubmit = React.useCallback((formData) => {
+            medplum
+                .startLogin({
+                ...baseLoginRequest,
+                password: formData.password,
+                remember: formData.remember === 'on',
+            })
+                .then(handleAuthResponse)
+                .catch(setOutcome);
+        }, [medplum, baseLoginRequest, handleAuthResponse]);
+        return (React.createElement(Form, { style: { maxWidth: 400 }, onSubmit: handleSubmit },
+            React.createElement(core$1.Center, { sx: { flexDirection: 'column' } }, children),
+            React.createElement(OperationOutcomeAlert, { issues: issues }),
             React.createElement(core$1.Stack, { spacing: "xl" },
-                React.createElement(core$1.TextInput, { name: "email", type: "email", label: "Email", placeholder: "name@domain.com", required: true, autoFocus: true, error: getErrorsForInput(outcome, 'email') }),
                 React.createElement(core$1.PasswordInput, { name: "password", type: "password", label: "Password", autoComplete: "off", required: true, error: getErrorsForInput(outcome, 'password') })),
             React.createElement(core$1.Group, { position: "apart", mt: "xl", spacing: 0, noWrap: true },
                 onForgotPassword && (React.createElement(core$1.Anchor, { component: "button", type: "button", color: "dimmed", onClick: onForgotPassword, size: "xs" }, "Forgot password")),
-                onRegister && (React.createElement(core$1.Anchor, { component: "button", type: "button", color: "dimmed", onClick: onRegister, size: "xs" }, "Register")),
                 React.createElement(core$1.Checkbox, { id: "remember", name: "remember", label: "Remember me", size: "xs", sx: { lineHeight: 1 } }),
                 React.createElement(core$1.Button, { type: "submit" }, "Sign in"))));
     }
@@ -884,7 +922,22 @@
         const [login, setLogin] = React.useState(undefined);
         const [mfaRequired, setAuthenticatorRequired] = React.useState(false);
         const [memberships, setMemberships] = React.useState(undefined);
-        function handleAuthResponse(response) {
+        const handleCode = React.useCallback((code) => {
+            if (onCode) {
+                onCode(code);
+            }
+            else {
+                medplum
+                    .processCode(code)
+                    .then(() => {
+                    if (onSuccess) {
+                        onSuccess();
+                    }
+                })
+                    .catch(console.log);
+            }
+        }, [medplum, onCode, onSuccess]);
+        const handleAuthResponse = React.useCallback((response) => {
             setAuthenticatorRequired(!!response.mfaRequired);
             if (response.login) {
                 setLogin(response.login);
@@ -900,28 +953,21 @@
                     handleCode(response.code);
                 }
             }
-        }
-        function handleScopeResponse(response) {
+        }, [chooseScopes, handleCode]);
+        const handleScopeResponse = React.useCallback((response) => {
             handleCode(response.code);
-        }
-        function handleCode(code) {
-            if (onCode) {
-                onCode(code);
-            }
-            else {
+        }, [handleCode]);
+        React.useEffect(() => {
+            if (props.login) {
                 medplum
-                    .processCode(code)
-                    .then(() => {
-                    if (onSuccess) {
-                        onSuccess();
-                    }
-                })
-                    .catch(console.log);
+                    .get('auth/login/' + props.login)
+                    .then(handleAuthResponse)
+                    .catch(console.error);
             }
-        }
+        }, [medplum, props, handleAuthResponse]);
         return (React.createElement(Document, { width: 450 }, (() => {
             if (!login) {
-                return (React.createElement(AuthenticationForm, { generatePkce: !onCode, onForgotPassword: onForgotPassword, onRegister: onRegister, handleAuthResponse: handleAuthResponse, ...baseLoginRequest }, props.children));
+                return (React.createElement(AuthenticationForm, { onForgotPassword: onForgotPassword, onRegister: onRegister, handleAuthResponse: handleAuthResponse, ...baseLoginRequest }, props.children));
             }
             else if (mfaRequired) {
                 return React.createElement(MfaForm, { login: login, handleAuthResponse: handleAuthResponse });