Register using OAuth in front-end (#759)

CERT-Polska · Mar 14, 2023 · a3d149d · a3d149d
1 parent 4a4abba
commit a3d149d
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 4 deletions.
diff --git a/mwdb/web/src/components/OAuth.jsx b/mwdb/web/src/components/OAuth.jsx
@@ -5,7 +5,7 @@ import { api } from "@mwdb-web/commons/api";
 import { AuthContext } from "@mwdb-web/commons/auth";
 import { getErrorMessage } from "@mwdb-web/commons/ui";
 
-async function authenticate(provider, action, errorFunction) {
+export async function authenticate(provider, action, errorFunction) {
     try {
         const response = await api.oauthAuthenticate(provider);
         const expirationTime = Date.now() + 5 * 60 * 1000;
@@ -41,7 +41,7 @@ export function ProviderButton({ provider, color }) {
                 borderStyle: "none",
             }}
         >
-            Log in with {provider}
+            Log in with {chosenProvider}
         </button>
     );
 }
@@ -135,6 +135,7 @@ export function OAuthAuthorize() {
                 navigate("/login", {
                     state: {
                         error: getErrorMessage(e),
+                        attemptedProvider: provider,
                     },
                     replace: true,
                 });

diff --git a/mwdb/web/src/components/UserLogin.jsx b/mwdb/web/src/components/UserLogin.jsx
@@ -5,8 +5,8 @@ import { AuthContext } from "@mwdb-web/commons/auth";
 import { ConfigContext } from "@mwdb-web/commons/config";
 import { api } from "@mwdb-web/commons/api";
 import { Extension } from "@mwdb-web/commons/plugins";
-import { View, ShowIf } from "@mwdb-web/commons/ui";
-import { ProviderButton, ProvidersSelectList } from "./OAuth";
+import { View, ShowIf, ConfirmationModal } from "@mwdb-web/commons/ui";
+import { ProviderButton, ProvidersSelectList, authenticate } from "./OAuth";
 
 export default function UserLogin() {
     const auth = useContext(AuthContext);
@@ -18,6 +18,7 @@ export default function UserLogin() {
     const [password, setPassword] = useState("");
     const [loginError, setLoginError] = useState(null);
     const [providers, setProviders] = useState([]);
+    const [oAuthRegisterModalOpen, setOAuthRegisterModalOpen] = useState(false);
 
     const colorsList = ["#3c5799", "#01a0f6", "#d03f30", "#b4878b", "#444444"];
     const isOIDCEnabled = config.config["is_oidc_enabled"];
@@ -51,8 +52,44 @@ export default function UserLogin() {
 
     if (auth.isAuthenticated) return <Navigate to="/" />;
 
+    useEffect(() => {
+        if (location.state) {
+            if (
+                location.state.attemptedProvider &&
+                config.config["is_registration_enabled"]
+            ) {
+                setOAuthRegisterModalOpen(true);
+            }
+        }
+    }, []);
+
     return (
         <div className="user-login">
+            <ConfirmationModal
+                buttonStyle="btn-success"
+                isOpen={oAuthRegisterModalOpen}
+                onRequestClose={() => {
+                    setOAuthRegisterModalOpen(false);
+                    navigate("/login", {
+                        state: {
+                            error: location.state ? location.state.error : null,
+                        },
+                        replace: true,
+                    });
+                }}
+                onConfirm={() => {
+                    setOAuthRegisterModalOpen(false);
+                    authenticate(
+                        location.state.attemptedProvider,
+                        "register",
+                        setLoginError
+                    );
+                }}
+            >
+                We couldn't find an account associated with your oAuth identity.
+                Do you want to register using{" "}
+                {location.state ? location.state.attemptedProvider : ""}?
+            </ConfirmationModal>
             <div className="background" />
             <View fluid ident="userLogin" error={loginError}>
                 <h2 align="center">Welcome to MWDB</h2>