@truedat/auth 7.5.9 → 7.5.10

package/src/sessions/components/Auth0Callback.js

@@ -1,8 +1,9 @@
 import _ from "lodash/fp";
-import React, { useEffect } from "react";
+import { useEffect } from "react";
 import PropTypes from "prop-types";
 import { connect } from "react-redux";
-import { useLocation, Redirect } from "react-router-dom";
+import { useLocation } from "react-router";
+import { Navigate } from "react-router";
 import auth0 from "auth0-js";
 import { Loading } from "@truedat/core/components";
 import queryString from "query-string";
@@ -41,9 +42,9 @@ export const CallbackOrRedirect = ({
   }, [token, auth0Config, auth0Login, location.hash]);
 
   if (token) {
-    return <Redirect to={to} />;
+    return <Navigate to={to} />;
   } else if (authRedirect) {
-    return <Redirect to={authRedirect} />;
+    return <Navigate to={authRedirect} />;
   } else {
     return <Loading size="massive" />;
   }

package/src/sessions/components/Auth0LoginButton.js

@@ -1,11 +1,11 @@
 import _ from "lodash/fp";
-import React from "react";
+import { Component } from "react";
 import auth0 from "auth0-js";
 import PropTypes from "prop-types";
 import { connect } from "react-redux";
 import { FormattedMessage } from "react-intl";
 
-export class Auth0LoginButton extends React.Component {
+export class Auth0LoginButton extends Component {
   static propTypes = {
     icon: PropTypes.string,
   };

package/src/sessions/components/AuthMethodsLoader.js

@@ -1,25 +1,16 @@
 import _ from "lodash/fp";
-import React from "react";
-import PropTypes from "prop-types";
-import { connect } from "react-redux";
-import { withRouter } from "react-router-dom";
+import { useEffect } from "react";
+import { useDispatch } from "react-redux";
+import { useLocation } from "react-router";
 import { fetchAuthMethods } from "../routines";
 
-export class AuthMethodsLoader extends React.Component {
-  static propTypes = {
-    fetchAuthMethods: PropTypes.func,
-  };
+export default function AuthMethodsLoader() {
+  const location = useLocation();
+  const dispatch = useDispatch();
 
-  componentDidMount() {
-    const { fetchAuthMethods, location } = this.props;
-    if (fetchAuthMethods) {
-      fetchAuthMethods(location);
-    }
-  }
+  useEffect(() => {
+    dispatch(fetchAuthMethods(location));
+  }, [dispatch, location]);
 
-  render = () => null;
+  return null;
 }
-
-export default connect(() => ({}), { fetchAuthMethods })(
-  withRouter(AuthMethodsLoader)
-);

package/src/sessions/components/LoginButtons.js

@@ -1,5 +1,5 @@
 import _ from "lodash/fp";
-import React from "react";
+import { Component } from "react";
 import PropTypes from "prop-types";
 import { connect } from "react-redux";
 import { FormattedMessage } from "react-intl";
@@ -16,7 +16,7 @@ const toButton = ([method, url], i) => (
   </a>
 );
 
-export class LoginButtons extends React.Component {
+export class LoginButtons extends Component {
   render() {
     const { authMethods } = this.props;
     return _.isEmpty(authMethods)
@@ -26,11 +26,11 @@ export class LoginButtons extends React.Component {
 }
 
 LoginButtons.propTypes = {
-  authMethods: PropTypes.object
+  authMethods: PropTypes.object,
 };
 
 const mapStateToProps = ({ authMethods }) => ({
-  authMethods
+  authMethods,
 });
 
 export default connect(mapStateToProps)(LoginButtons);

package/src/sessions/components/NonceCallback.js

@@ -1,49 +1,32 @@
-import React from "react";
+import { useEffect } from "react";
 import PropTypes from "prop-types";
-import { compose } from "redux";
-import { connect } from "react-redux";
-import { withRouter, Redirect } from "react-router-dom";
+import { useLocation, Navigate } from "react-router";
+import { useDispatch, useSelector } from "react-redux";
 import queryString from "query-string";
 import { Loading } from "@truedat/core/components";
 import { nonceLogin } from "../routines";
 
-export class NonceCallback extends React.Component {
-  static propTypes = {
-    authMethod: PropTypes.string,
-    authentication: PropTypes.object,
-    authRedirect: PropTypes.string,
-    location: PropTypes.object,
-    nonceLogin: PropTypes.func,
-  };
+export default function NonceCallback({ authMethod }) {
+  const dispatch = useDispatch();
+  const location = useLocation();
+  const authentication = useSelector((state) => state.authentication);
+  const authRedirect = useSelector((state) => state.authRedirect);
 
-  componentDidMount() {
-    const {
-      location: { hash },
-      nonceLogin,
-      authMethod,
-    } = this.props;
+  useEffect(() => {
+    const { hash } = location;
     const opts = queryString.parse(hash);
-    nonceLogin({ ...opts, auth_realm: authMethod });
-  }
+    dispatch(nonceLogin({ ...opts, auth_realm: authMethod }));
+  }, [location, dispatch, authMethod]);
 
-  render() {
-    const { authentication, authRedirect } = this.props;
-    if (authentication?.token) {
-      return <Redirect to="/" />;
-    } else if (authRedirect) {
-      return <Redirect to={authRedirect} />;
-    } else {
-      return <Loading size="massive" />;
-    }
+  if (authentication?.token) {
+    return <Navigate to="/" />;
+  } else if (authRedirect) {
+    return <Navigate to={authRedirect} />;
+  } else {
+    return <Loading size="massive" />;
   }
 }
 
-const mapStateToProps = ({ authentication, authRedirect }) => ({
-  authentication,
-  authRedirect,
-});
-
-export default compose(
-  withRouter,
-  connect(mapStateToProps, { nonceLogin })
-)(NonceCallback);
+NonceCallback.propTypes = {
+  authMethod: PropTypes.string,
+};

package/src/sessions/components/OidcLoginButton.js

@@ -1,4 +1,3 @@
-import React from "react";
 import PropTypes from "prop-types";
 import { connect } from "react-redux";
 import { FormattedMessage } from "react-intl";

package/src/sessions/components/OpenIDConnect.js

@@ -1,9 +1,10 @@
 import _ from "lodash/fp";
-import React, { useEffect } from "react";
+import { useEffect } from "react";
 import PropTypes from "prop-types";
 import queryString from "query-string";
 import { connect } from "react-redux";
-import { Redirect, useLocation } from "react-router-dom";
+import { useLocation } from "react-router";
+import { Navigate } from "react-router";
 import { Loading } from "@truedat/core/components";
 import { SEARCH } from "@truedat/core/routes";
 import { openIdLogin } from "../routines";
@@ -27,9 +28,9 @@ export const OpenIDConnect = ({
   }, [authentication, openIdLogin, opts]);
 
   if (authentication?.token) {
-    return <Redirect to={to} />;
+    return <Navigate to={to} />;
   } else if (authRedirect) {
-    return <Redirect to={authRedirect} />;
+    return <Navigate to={authRedirect} />;
   } else {
     return <Loading size="massive" />;
   }

package/src/sessions/components/PrivateRoute.js

@@ -1,69 +1,37 @@
 import _ from "lodash/fp";
-import React from "react";
+import React, { useEffect } from "react";
 import PropTypes from "prop-types";
-import { compose } from "redux";
-import { connect } from "react-redux";
-import { Route, Redirect, withRouter } from "react-router-dom";
+import { useLocation } from "react-router";
+import { useDispatch, useSelector } from "react-redux";
+import { Navigate } from "react-router";
 import { LOGIN, UNAUTHORIZED } from "@truedat/core/routes";
 import { retrieveToken } from "../routines";
 
-class PrivateRoute extends React.Component {
-  static propTypes = {
-    token: PropTypes.string,
-    component: PropTypes.func,
-    hasPermissions: PropTypes.bool,
-    location: PropTypes.object,
-    retrieveToken: PropTypes.func,
-  };
+function PrivateRoute({ component: Component }) {
+  const dispatch = useDispatch();
+  const location = useLocation();
+  const { token, hasPermissions } = useSelector(({ authentication }) => ({
+    token: authentication.token,
+    hasPermissions: !_.isEmpty(authentication.entitlements),
+  }));
 
-  componentDidMount() {
-    const { token, retrieveToken } = this.props;
+  useEffect(() => {
     if (token === undefined) {
-      retrieveToken();
+      dispatch(retrieveToken());
     }
-  }
+  }, [token, dispatch]);
 
-  render() {
-    const {
-      component: Component,
-      token,
-      hasPermissions,
-      location,
-      ...rest
-    } = this.props;
-
-    return (
-      <Route
-        {...rest}
-        render={(props) => {
-          if (token && !hasPermissions) {
-            return (
-              <Redirect
-                to={{
-                  pathname: UNAUTHORIZED,
-                  state: { from: location },
-                }}
-              />
-            );
-          } else if (token) {
-            return <Component {...props} />;
-          } else {
-            return (
-              <Redirect to={{ pathname: LOGIN, state: { from: location } }} />
-            );
-          }
-        }}
-      />
-    );
-  }
+  return token && !hasPermissions ? (
+    <Navigate to={{ pathname: UNAUTHORIZED }} state={{ from: location }} />
+  ) : token ? (
+    <Component />
+  ) : (
+    <Navigate to={{ pathname: LOGIN }} state={{ from: location }} />
+  );
 }
 
-const mapStateToProps = ({ authentication }) => ({
-  token: authentication.token,
-  hasPermissions: !_.isEmpty(authentication.entitlements),
-});
+PrivateRoute.propTypes = {
+  component: PropTypes.func,
+};
 
-export default compose(
-  withRouter,
-  connect(mapStateToProps, { retrieveToken })
-)(PrivateRoute);
+export default PrivateRoute;

package/src/sessions/components/ProxyLoginCallback.js

@@ -1,5 +1,3 @@
-import React from "react";
-
 import NonceCallback from "./NonceCallback";
 
 export const ProxyLoginCallback = () => (

package/src/sessions/components/SamlCallback.js

@@ -1,5 +1,3 @@
-import React from "react";
-
 import NonceCallback from "./NonceCallback";
 
 export const SamlCallback = () => <NonceCallback authMethod="saml" />;

package/src/sessions/components/UnauthorizedRoute.js

@@ -1,45 +1,42 @@
 import _ from "lodash/fp";
-import React from "react";
+import React, { useEffect } from "react";
 import PropTypes from "prop-types";
-import { connect } from "react-redux";
-import { Route, Redirect } from "react-router-dom";
+import { useDispatch, useSelector } from "react-redux";
+import { Routes, Route, Navigate } from "react-router";
 import { LOGIN } from "@truedat/core/routes";
 import { retrieveToken } from "../routines";
 
-class UnauthorizedRoute extends React.Component {
-  static propTypes = {
-    token: PropTypes.string,
-    component: PropTypes.func,
-    retrieveToken: PropTypes.func,
-    hasPermissions: PropTypes.bool,
-  };
+function UnauthorizedRoute({ component: Component, path = "/" }) {
+  const dispatch = useDispatch();
+  const { token, hasPermissions } = useSelector(({ authentication }) => ({
+    token: authentication.token,
+    hasPermissions: !_.isEmpty(authentication.entitlements),
+  }));
 
-  componentDidMount() {
-    const { token, retrieveToken } = this.props;
+  useEffect(() => {
     if (token === undefined) {
-      retrieveToken();
+      dispatch(retrieveToken());
     }
-  }
+  }, [token, dispatch]);
 
-  render() {
-    const { component: Component, token, hasPermissions, ...rest } = this.props;
-    return (
+  return (
+    <Routes>
       <Route
-        {...rest}
-        render={(props) => {
-          if (token && !hasPermissions) {
-            return <Component {...props} />;
-          }
-          return <Redirect to={{ pathname: LOGIN }} />;
-        }}
+        path={path}
+        element={
+          token && !hasPermissions ? (
+            <Component />
+          ) : (
+            <Navigate to={{ pathname: LOGIN }} />
+          )
+        }
       />
-    );
-  }
+    </Routes>
+  );
 }
 
-const mapStateToProps = ({ authentication }) => ({
-  token: authentication.token,
-  hasPermissions: !_.isEmpty(authentication.entitlements),
-});
+UnauthorizedRoute.propTypes = {
+  component: PropTypes.func,
+};
 
-export default connect(mapStateToProps, { retrieveToken })(UnauthorizedRoute);
+export default UnauthorizedRoute;

package/src/sessions/components/__tests__/Auth0LoginButton.spec.js

@@ -1,25 +1,25 @@
-import React from "react";
-import { shallow } from "enzyme";
+import { render } from "@truedat/test/render";
 import { Auth0LoginButton } from "../Auth0LoginButton";
 
 describe("<Auth0LoginButton />", () => {
   const auth0_config = {
-    domain: "0"
+    domain: "0",
   };
-  const invalid_auth0_config = {};
   const icon = "user icon";
 
-  it("matches the latest snapshot", () => {
+  it("matches the latest snapshot with custom icon", async () => {
     const props = { auth0_config, icon };
-    const wrapper = shallow(<Auth0LoginButton {...props} />);
-    expect(wrapper).toMatchSnapshot();
-    expect(wrapper.find("i.user.icon").length).toBe(1);
+    const rendered = render(<Auth0LoginButton {...props} />);
+    expect(rendered.container).toMatchSnapshot();
+    expect(rendered.container.querySelector("i.user.icon")).toBeInTheDocument();
   });
 
-  it("matches the latest snapshot with a default icon", () => {
+  it("matches the latest snapshot with a default icon", async () => {
     const props = { auth0_config };
-    const wrapper = shallow(<Auth0LoginButton {...props} />);
-    expect(wrapper).toMatchSnapshot();
-    expect(wrapper.find("i.sign-in.icon").length).toBe(1);
+    const rendered = render(<Auth0LoginButton {...props} />);
+    expect(rendered.container).toMatchSnapshot();
+    expect(
+      rendered.container.querySelector("i.sign-in.icon")
+    ).toBeInTheDocument();
   });
 });

package/src/sessions/components/__tests__/AuthMethodsLoader.spec.js

@@ -1,16 +1,19 @@
-import React from "react";
-import { shallow } from "enzyme";
-import { AuthMethodsLoader } from "../AuthMethodsLoader";
+import { render } from "@truedat/test/render";
+import AuthMethodsLoader from "../AuthMethodsLoader";
+
+jest.mock("react-router", () => ({
+  ...jest.requireActual("react-router"),
+  useLocation: jest.fn().mockReturnValue({}),
+}));
 
 describe("<AuthMethodsLoader />", () => {
-  it("triggers fetchAuthMethods on mount", () => {
-    const fetchAuthMethods = jest.fn();
-    const props = { fetchAuthMethods };
-    jest.spyOn(AuthMethodsLoader.prototype, "componentDidMount");
-    shallow(<AuthMethodsLoader {...props} />);
-    expect(
-      AuthMethodsLoader.prototype.componentDidMount.mock.calls.length
-    ).toBe(1);
-    expect(fetchAuthMethods.mock.calls.length).toBe(1);
+  it("triggers fetchAuthMethods on mount", async () => {
+    const dispatch = jest.fn();
+    const rendered = render(<AuthMethodsLoader />, {
+      dispatch,
+      fallback: false,
+    });
+
+    expect(dispatch).toHaveBeenCalledTimes(1);
   });
 });

package/src/sessions/components/__tests__/NonceCallback.spec.js

@@ -0,0 +1,84 @@
+import React from "react";
+import { render, waitForLoad } from "@truedat/test/render";
+import queryString from "query-string";
+import NonceCallback from "../NonceCallback";
+import { nonceLogin } from "../../routines";
+
+jest.mock("react-router", () => ({
+  ...jest.requireActual("react-router"),
+  useLocation: jest.fn().mockReturnValue({ hash: "#token=test-token" }),
+  Navigate: jest
+    .fn()
+    .mockImplementation(({ to }) => <div>Navigate to {to}</div>),
+}));
+
+jest.mock("query-string", () => ({
+  parse: jest.fn().mockReturnValue({ token: "test-token" }),
+}));
+
+describe("<NonceCallback />", () => {
+  it("matches the latest snapshot", async () => {
+    const rendered = render(<NonceCallback authMethod="test-method" />, {
+      state: {
+        authentication: {
+          token: "valid-token",
+        },
+      },
+    });
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
+  });
+
+  it("dispatches nonceLogin with parsed hash and auth method", async () => {
+    const mockDispatch = jest.fn();
+    const rendered = render(<NonceCallback authMethod="test-method" />, {
+      dispatch: mockDispatch,
+    });
+
+    expect(queryString.parse).toHaveBeenCalledWith("#token=test-token");
+    expect(mockDispatch).toHaveBeenCalledWith(
+      nonceLogin({ token: "test-token", auth_realm: "test-method" })
+    );
+  });
+
+  it("navigates to root when token exists", async () => {
+    const rendered = render(<NonceCallback authMethod="test-method" />, {
+      state: {
+        authentication: {
+          token: "valid-token",
+        },
+      },
+    });
+    await waitForLoad(rendered);
+
+    expect(rendered.getByText(/navigate to \//i)).toBeInTheDocument();
+  });
+
+  it("navigates to authRedirect when it exists", async () => {
+    const rendered = render(<NonceCallback authMethod="test-method" />, {
+      state: {
+        authentication: {
+          token: null,
+        },
+        authRedirect: "/redirect-path",
+      },
+    });
+    await waitForLoad(rendered);
+
+    expect(
+      rendered.getByText(/navigate to \/redirect-path/i)
+    ).toBeInTheDocument();
+  });
+
+  it("shows loading when no token or redirect exists", async () => {
+    const rendered = render(<NonceCallback authMethod="test-method" />, {
+      state: {
+        authentication: {
+          token: null,
+        },
+      },
+    });
+
+    expect(rendered.container).toMatchSnapshot();
+  });
+});

package/src/sessions/components/__tests__/OidcLoginButton.spec.js

@@ -1,20 +1,20 @@
-import React from "react";
-import { shallow } from "enzyme";
+import { render } from "@truedat/test/render";
 import { OidcLoginButton } from "../OidcLoginButton";
 
 describe("<OidcLoginButton />", () => {
   const url = "https://auth.oidc.org/authorize?foo=bar";
-  const icon = "google icon";
 
-  it("matches the latest snapshot", () => {
-    const props = { url, icon };
-    const wrapper = shallow(<OidcLoginButton {...props} />);
-    expect(wrapper).toMatchSnapshot();
+  it("matches the latest snapshot with custom icon", async () => {
+    const props = { url };
+    const rendered = render(<OidcLoginButton {...props} />);
+    expect(rendered.container).toMatchSnapshot();
   });
 
-  it("matches the latest snapshot with a default icon", () => {
+  it("matches the latest snapshot with a default icon", async () => {
     const props = { url };
-    const wrapper = shallow(<OidcLoginButton {...props} />);
-    expect(wrapper).toMatchSnapshot();
+    const rendered = render(<OidcLoginButton {...props} />);
+    expect(rendered.container).toMatchSnapshot();
+
+    expect(rendered.container.querySelector("a")).toBeInTheDocument();
   });
 });

package/src/sessions/components/__tests__/OpenIDConnect.spec.js

@@ -1,4 +1,3 @@
-import React from "react";
 import { render } from "@truedat/test/render";
 import { waitFor } from "@testing-library/react";
 import OpenIDConnect from "../OpenIDConnect";
@@ -6,27 +5,27 @@ import OpenIDConnect from "../OpenIDConnect";
 const landingUrl = "/landingUrl";
 const authentication = { token: "token" };
 
-jest.mock("react-router-dom", () => ({
-  ...jest.requireActual("react-router-dom"),
-  Redirect: jest.fn(({ to }) => `Redirect to ${to}`),
+jest.mock("react-router", () => ({
+  ...jest.requireActual("react-router"),
+  Navigate: jest.fn(({ to }) => `Navigate to ${to}`),
 }));
 
 describe("<OpenIDConnect />", () => {
-  it("redirects to the defined landing URL", async () => {
+  it("Navigates to the defined landing URL", async () => {
     const state = { landingUrl, authentication };
     const renderOpts = { state };
     const { getByText } = render(<OpenIDConnect />, renderOpts);
     await waitFor(() =>
-      expect(getByText("Redirect to /landingUrl")).not.toBeNull()
+      expect(getByText("Navigate to /landingUrl")).not.toBeNull()
     );
   });
 
-  it("redirects to /search if landingUrl is not defined", async () => {
+  it("Navigates to /search if landingUrl is not defined", async () => {
     const state = { authentication };
     const renderOpts = { state };
     const { getByText } = render(<OpenIDConnect />, renderOpts);
     await waitFor(() =>
-      expect(getByText("Redirect to /search")).not.toBeNull()
+      expect(getByText("Navigate to /search")).not.toBeNull()
     );
   });
 });