@logora/debate 0.1.0

package/src/components/auth/login_form/LoginForm.stories.jsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import { MemoryRouter } from "react-router-dom";
+import { IntlProvider } from 'react-intl';
+import { LoginForm } from './LoginForm';
+
+const noop = () => false;
+
+export default {
+    title: 'Auth/Login Form',
+    component: LoginForm,
+    args: {
+        forgotPasswordUrl: 'http://example.com/forgot_password',
+        error: false,
+        onSubmit: noop
+    },
+    argTypes: {
+        forgotPasswordUrl: {
+            control: 'text'
+        },
+        error: {
+            control: 'boolean'
+        },
+        onSubmit: {
+            control: false
+        }
+    },
+    render: (args) => (
+        <MemoryRouter>
+            <IntlProvider locale="en">
+                <LoginForm {...args} />
+            </IntlProvider>
+        </MemoryRouter>
+    )
+};
+
+export const DefaultLoginForm = {};
+
+export const LoginFormWithError = {
+    args: {
+        error: true
+    }
+};

package/src/components/auth/login_form/LoginForm.test.jsx

@@ -0,0 +1,94 @@
+import React from 'react';
+import { MemoryRouter } from 'react-router-dom';
+import { IntlProvider } from 'react-intl';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { LoginForm } from './LoginForm';
+
+describe('LoginForm', () => {
+    it('should render form with correct inputs', () => {
+        const forgotPasswordUrl = "http://example.com/forgot_password";
+
+        render(
+            <IntlProvider locale="en">
+                <MemoryRouter>
+                    <LoginForm 
+                        onSubmit={(email, password) => false }
+                        forgotPasswordUrl={forgotPasswordUrl}
+                        error={false}
+                    />
+                </MemoryRouter>
+            </IntlProvider>
+        );
+
+        expect(screen.getAllByRole("button")).toHaveLength(1);
+        expect(screen.getAllByRole("link")).toHaveLength(1);
+
+        const emailInput = screen.getByTestId("email-input");
+        expect(emailInput.tagName).toBe("INPUT");
+        expect(emailInput.name).toBe("email");
+        expect(emailInput.required).toBeTruthy();
+
+        const passwordInput = screen.getByTestId("password-input");
+        expect(passwordInput.tagName).toBe("INPUT");
+        expect(passwordInput.name).toBe("password");
+        expect(passwordInput.required).toBeTruthy();
+
+        const forgotPasswordLink = screen.getByRole("link");
+        expect(forgotPasswordLink.href).toContain("http://example.com/forgot_password?redirect_url=")
+        expect(forgotPasswordLink.href).toContain(encodeURIComponent(encodeURIComponent(window.location.origin + "/")));
+        expect(forgotPasswordLink.target).toBe("_blank");
+    });
+
+    it('should render form with error', () => {
+        const forgotPasswordUrl = "http://example.com/forgot_password";
+
+        const loginForm = render(
+            <IntlProvider locale="en">
+                <MemoryRouter>
+                    <LoginForm 
+                        onSubmit={(email, password) => false }
+                        forgotPasswordUrl={forgotPasswordUrl}
+                        error={true}
+                    />
+                </MemoryRouter>
+            </IntlProvider>
+        );
+        expect(screen.getAllByRole("button")).toHaveLength(1);
+        expect(screen.getAllByRole("link")).toHaveLength(1);
+
+        expect(screen.getByText("An error occurred while signing in, please try again")).toBeTruthy();
+    });
+
+    it('should trigger callback when submitting function', async () => {
+        const forgotPasswordUrl = "http://example.com/forgot_password";
+        const email = "test@test.com";
+        const password = "password";
+        const onSubmitCallback = vi.fn();
+
+        const loginForm = render(
+            <IntlProvider locale="en">
+                <MemoryRouter>
+                    <LoginForm 
+                        onSubmit={onSubmitCallback}
+                        forgotPasswordUrl={forgotPasswordUrl}
+                        error={false}
+                    />
+                </MemoryRouter>
+            </IntlProvider>
+        );
+
+        const submitButton = screen.getByRole("button");
+        const emailInput = screen.getByTestId("email-input");
+        const passwordInput = screen.getByTestId("password-input");
+
+        await userEvent.type(emailInput, email);
+        await userEvent.type(passwordInput, password);
+
+        expect(submitButton).toBeTruthy();
+
+        await userEvent.click(submitButton);
+        expect(onSubmitCallback).toHaveBeenCalledTimes(1);
+        expect(onSubmitCallback).toHaveBeenCalledWith(email, password);
+    });
+});

package/src/components/auth/login_form/index.js

@@ -0,0 +1 @@
+export { LoginForm } from './LoginForm';

package/src/components/auth/oauth2_button/OAuth2Button.docs.mdx

@@ -0,0 +1,32 @@
+---
+description: A button to login with the OAuth2 protocol.
+labels: ['react', 'auth', 'oauth2']
+---
+
+A button component to login to an OAuth2 provider. It uses [react-oauth-popup](https://www.npmjs.com/package/react-oauth-popup) under the hood.
+
+When clicking on the button, a popup will appear containing the auth form passed with _authDialogUrl_. User can the provide credentials and will be
+redirected to _redirectUri_ afterwards.
+
+### Component usage
+
+```js
+import { OAuth2Button } from '@logora/debate.auth.oauth2_button';
+```
+
+```js
+    <MemoryRouter>
+        <OAuth2Button 
+            authDialogUrl={"https://www.facebook.com/v9.0/dialog/oauth"}
+            clientId={"facebook-client-id"}
+            scope={"email,public_profile"}
+            provider={"facebook"}
+            redirectUri={"https://auth.redirect/"}
+            onCode={(code) => console.log(code)}
+            onClose={closeCallbackFunction}
+            className={"extraClassName"}
+        >
+            Click here to login !
+        </OAuth2Button>
+    </MemoryRouter>
+```

package/src/components/auth/oauth2_button/OAuth2Button.jsx

@@ -0,0 +1,79 @@
+import React from "react";
+import { useLocation } from "react-router-dom";
+import OauthPopup from "react-oauth-popup";
+import styles from "./OAuth2Button.module.scss";
+import classnames from "classnames";
+
+export const OAuth2Button = ({
+  provider,
+  authDialogUrl,
+  clientId,
+  redirectUri,
+  scope,
+  responseType,
+  accessType = "",
+  forceAuth = false,
+  onCode,
+  onClose,
+  popup = true,
+  children,
+  className,
+  state = "",
+}) => {
+  const location = useLocation();
+
+  const handleOnCode = (code, params) => {
+    onCode(code, provider);
+  };
+
+  const handleOnClose = () => {
+    if (onClose) {
+      onClose();
+    }
+  };
+
+  const getDialogUrl = () => {
+    let baseUrl = new URL(authDialogUrl);
+    baseUrl.searchParams.append("client_id", clientId);
+    baseUrl.searchParams.append("redirect_uri", redirectUri);
+    baseUrl.searchParams.append("scope", scope);
+
+    if (forceAuth) {
+      baseUrl.searchParams.append("force_authentication", "1");
+    }
+
+    if (responseType) {
+      baseUrl.searchParams.append("response_type", responseType);
+    }
+    if (accessType) {
+      baseUrl.searchParams.append("access_type", accessType);
+    }
+
+    if (typeof window !== "undefined") {
+      baseUrl.searchParams.append(
+        "state",
+        state ? window.btoa(state) : window.btoa(window.location.href)
+      );
+    }
+    return baseUrl.href;
+  };
+
+  return (
+    <div
+      data-testid="container"
+      className={classnames(styles.oauthButtonContainer, className)}
+    >
+      {popup ? (
+        <OauthPopup
+          url={getDialogUrl()}
+          onCode={handleOnCode}
+          onClose={handleOnClose}
+        >
+          <div className={styles.oauthPopupContainer}>{children}</div>
+        </OauthPopup>
+      ) : (
+        <a href={getDialogUrl()}>{children}</a>
+      )}
+    </div>
+  );
+};

package/src/components/auth/oauth2_button/OAuth2Button.module.scss

@@ -0,0 +1,10 @@
+.oauthButtonContainer {
+  display: flex !important;
+  justify-content: center !important;
+  width: 100%;
+  align-items: center !important;
+}
+
+.oauthPopupContainer {
+  display: flex;
+}

package/src/components/auth/oauth2_button/OAuth2Button.stories.jsx

@@ -0,0 +1,48 @@
+import React from "react";
+import { MemoryRouter } from "react-router-dom";
+import { OAuth2Button } from "./OAuth2Button";
+
+export default {
+    title: 'Auth/Oauth2 Button',
+    component: OAuth2Button,
+    args: {
+        authDialogUrl: 'https://www.example.com/dialog/oauth',
+        clientId: 'client-id',
+        scope: 'email,profile',
+        provider: 'my-oauth2-provider',
+        redirectUri: 'https://auth.redirect/uri',
+        popup: true,
+        children: 'Click here to login !'
+    },
+    argTypes: {
+        authDialogUrl: {
+            control: 'text'
+        },
+        clientId: {
+            control: 'text'
+        },
+        scope: {
+            control: 'text'
+        },
+        provider: {
+            control: 'text'
+        },
+        redirectUri: {
+            control: 'text'
+        },
+        popup: {
+            control: 'boolean'
+        },
+        children: {
+            control: 'text'
+        }
+    },
+    render: ({ children, ...args }) => (
+        <MemoryRouter>
+            <OAuth2Button {...args}>{children}</OAuth2Button>
+        </MemoryRouter>
+    )
+};
+
+export const DefaultOAuth2Button = {};
+

package/src/components/auth/oauth2_button/OAuth2Button.test.jsx

@@ -0,0 +1,306 @@
+import React from "react";
+import { MemoryRouter } from "react-router-dom";
+import { render, screen } from "@testing-library/react";
+import { OAuth2Button } from "./OAuth2Button";
+import userEvent from "@testing-library/user-event";
+
+const spyWindowOpen = vi.spyOn(window, "open");
+spyWindowOpen.mockImplementation(vi.fn());
+
+describe("OAuth2Button", () => {
+  it("should render button with the correct text", () => {
+    const oauth2Button = render(
+      <MemoryRouter>
+        <OAuth2Button
+          authDialogUrl={"https://www.example.com/dialog/oauth"}
+          clientId={"client-id"}
+          scope={"email,profile"}
+          provider={"my-oauth2-provider"}
+          redirectUri={"https://auth.redirect/uri"}
+        >
+          Click here to login !
+        </OAuth2Button>
+      </MemoryRouter>
+    );
+    const renderedButton = oauth2Button.getByText(/Click here to login !/i);
+    expect(renderedButton).toBeTruthy();
+  });
+
+  it("should open popup with correct link on click", async () => {
+    Object.defineProperty(window, "location", {
+      value: {
+        href: "http://example.fr/path-name/",
+      },
+      writable: true,
+    });
+
+    spyWindowOpen.mockClear();
+
+    const authDialogUrl = "https://www.example.com/dialog/oauth";
+    const clientId = "client-id";
+    const scope = "email,profile";
+    const redirectUri = "https://auth.redirect/uri";
+
+    const oauth2Button = render(
+      <MemoryRouter initialEntries={["/path-name/"]}>
+        <OAuth2Button
+          authDialogUrl={authDialogUrl}
+          clientId={clientId}
+          scope={scope}
+          provider={"my-oauth2-provider"}
+          redirectUri={redirectUri}
+        >
+          Click here to login !
+        </OAuth2Button>
+      </MemoryRouter>
+    );
+    const renderedButton = screen.getByText(/Click here to login !/i);
+    expect(renderedButton).toBeTruthy();
+
+    let expectedUrl = new URL(authDialogUrl);
+    expectedUrl.searchParams.append("client_id", clientId);
+    expectedUrl.searchParams.append("redirect_uri", redirectUri);
+    expectedUrl.searchParams.append("scope", scope);
+    expectedUrl.searchParams.append(
+      "state",
+      window.btoa("http://example.fr/path-name/")
+    );
+
+    await userEvent.click(renderedButton);
+    expect(spyWindowOpen).toHaveBeenCalledTimes(1);
+    expect(spyWindowOpen).toHaveBeenLastCalledWith(
+      expectedUrl.href,
+      "",
+      "width=500,height=500,left=262,top=107.2"
+    );
+  });
+
+  it("should open popup with correct link with response type on click", async () => {
+    Object.defineProperty(window, "location", {
+      value: {
+        href: "http://example.fr/path-name",
+      },
+      writable: true,
+    });
+
+    spyWindowOpen.mockClear();
+
+    const authDialogUrl = "https://www.example.com/dialog/oauth";
+    const clientId = "client-id";
+    const scope = "email,profile";
+    const redirectUri = "https://auth.redirect/uri";
+    const responseType = "code";
+
+    const oauth2Button = render(
+      <MemoryRouter initialEntries={["/path-name"]}>
+        <OAuth2Button
+          authDialogUrl={authDialogUrl}
+          clientId={clientId}
+          scope={scope}
+          provider={"my-oauth2-provider"}
+          redirectUri={redirectUri}
+          responseType={responseType}
+        >
+          Click here to login !
+        </OAuth2Button>
+      </MemoryRouter>
+    );
+    const renderedButton = screen.getByText(/Click here to login !/i);
+    expect(renderedButton).toBeTruthy();
+
+    let expectedUrl = new URL(authDialogUrl);
+    expectedUrl.searchParams.append("client_id", clientId);
+    expectedUrl.searchParams.append("redirect_uri", redirectUri);
+    expectedUrl.searchParams.append("scope", scope);
+    expectedUrl.searchParams.append("response_type", responseType);
+    expectedUrl.searchParams.append(
+      "state",
+      window.btoa("http://example.fr/path-name")
+    );
+
+    await userEvent.click(renderedButton);
+    expect(spyWindowOpen).toHaveBeenCalledTimes(1);
+    expect(spyWindowOpen).toHaveBeenLastCalledWith(
+      expectedUrl.href,
+      "",
+      "width=500,height=500,left=262,top=107.2"
+    );
+  });
+
+  it("should render button with the correct extra className", () => {
+    const oauth2Button = render(
+      <MemoryRouter>
+        <OAuth2Button
+          authDialogUrl={"https://www.example.com/dialog/oauth"}
+          clientId={"client-id"}
+          scope={"email,profile"}
+          provider={"my-oauth2-provider"}
+          redirectUri={"https://auth.redirect/uri"}
+          className={"extraClassName"}
+        >
+          Click here to login !
+        </OAuth2Button>
+      </MemoryRouter>
+    );
+    const renderedButton = oauth2Button.getByText(/Click here to login !/i);
+    expect(renderedButton).toBeTruthy();
+    expect(screen.getByTestId("container")).toHaveClass("extraClassName");
+  });
+
+  describe("when state is provided", () => {
+    it("should open popup with correct link with state on click", async () => {
+      spyWindowOpen.mockClear();
+
+      const authDialogUrl = "https://www.example.com/dialog/oauth";
+      const clientId = "client-id";
+      const scope = "email,profile";
+      const redirectUri = "https://auth.redirect/uri";
+      const state = "my-state";
+
+      const oauth2Button = render(
+        <MemoryRouter initialEntries={["/path-name/"]}>
+          <OAuth2Button
+            authDialogUrl={authDialogUrl}
+            clientId={clientId}
+            scope={scope}
+            provider={"my-oauth2-provider"}
+            redirectUri={redirectUri}
+            state={state}
+          >
+            Click here to login !
+          </OAuth2Button>
+        </MemoryRouter>
+      );
+      const renderedButton = screen.getByText(/Click here to login !/i);
+      expect(renderedButton).toBeTruthy();
+
+      let expectedUrl = new URL(authDialogUrl);
+      expectedUrl.searchParams.append("client_id", clientId);
+      expectedUrl.searchParams.append("redirect_uri", redirectUri);
+      expectedUrl.searchParams.append("scope", scope);
+      expectedUrl.searchParams.append("state", window.btoa(state));
+
+      await userEvent.click(renderedButton);
+      expect(spyWindowOpen).toHaveBeenCalledTimes(1);
+      expect(spyWindowOpen).toHaveBeenLastCalledWith(
+        expectedUrl.href,
+        "",
+        "width=500,height=500,left=262,top=107.2"
+      );
+    });
+  });
+
+  describe("when popup is false", () => {
+    it("should render the button as a link with the correct href", () => {
+      Object.defineProperty(window, "location", {
+        value: {
+          href: "http://example.fr/path-name",
+        },
+        writable: true,
+      });
+
+      const authDialogUrl = "https://www.example.com/dialog/oauth";
+      const clientId = "client-id";
+      const scope = "email,profile";
+      const redirectUri = "https://auth.redirect/uri";
+      const responseType = "code";
+
+      const oauth2Button = render(
+        <MemoryRouter initialEntries={["/path-name"]}>
+          <OAuth2Button
+            authDialogUrl={authDialogUrl}
+            clientId={clientId}
+            scope={scope}
+            provider={"my-oauth2-provider"}
+            redirectUri={redirectUri}
+            responseType={responseType}
+            popup={false}
+          >
+            Click here to login !
+          </OAuth2Button>
+        </MemoryRouter>
+      );
+
+      let expectedUrl = new URL(authDialogUrl);
+      expectedUrl.searchParams.append("client_id", clientId);
+      expectedUrl.searchParams.append("redirect_uri", redirectUri);
+      expectedUrl.searchParams.append("scope", scope);
+      expectedUrl.searchParams.append("response_type", responseType);
+      expectedUrl.searchParams.append(
+        "state",
+        window.btoa("http://example.fr/path-name")
+      );
+
+      const renderedButton = oauth2Button.getByRole("link");
+      expect(renderedButton).toBeTruthy();
+      expect(renderedButton).toHaveAttribute("href", expectedUrl.href);
+    });
+
+    it("should not open popup", async () => {
+      spyWindowOpen.mockClear();
+
+      const authDialogUrl = "https://www.example.com/dialog/oauth";
+      const clientId = "client-id";
+      const scope = "email,profile";
+      const redirectUri = "https://auth.redirect/uri";
+
+      const oauth2Button = render(
+        <MemoryRouter>
+          <OAuth2Button
+            authDialogUrl={authDialogUrl}
+            clientId={clientId}
+            scope={scope}
+            provider={"my-oauth2-provider"}
+            redirectUri={redirectUri}
+            popup={false}
+          >
+            Click here to login !
+          </OAuth2Button>
+        </MemoryRouter>
+      );
+      const renderedButton = oauth2Button.getByText(/Click here to login !/i);
+
+      await userEvent.click(renderedButton);
+      expect(spyWindowOpen).toHaveBeenCalledTimes(0);
+    });
+
+    describe("when state is provided", () => {
+      it("should render the button as a link with the correct href", async () => {
+        const authDialogUrl = "https://www.example.com/dialog/oauth";
+        const clientId = "client-id";
+        const scope = "email,profile";
+        const redirectUri = "https://auth.redirect/uri";
+        const responseType = "code";
+        const state = "my-state";
+
+        const oauth2Button = render(
+          <MemoryRouter initialEntries={["/path-name"]}>
+            <OAuth2Button
+              authDialogUrl={authDialogUrl}
+              clientId={clientId}
+              scope={scope}
+              provider={"my-oauth2-provider"}
+              redirectUri={redirectUri}
+              responseType={responseType}
+              popup={false}
+              state={state}
+            >
+              Click here to login !
+            </OAuth2Button>
+          </MemoryRouter>
+        );
+
+        let expectedUrl = new URL(authDialogUrl);
+        expectedUrl.searchParams.append("client_id", clientId);
+        expectedUrl.searchParams.append("redirect_uri", redirectUri);
+        expectedUrl.searchParams.append("scope", scope);
+        expectedUrl.searchParams.append("response_type", responseType);
+        expectedUrl.searchParams.append("state", window.btoa(state));
+
+        const renderedButton = oauth2Button.getByRole("link");
+        expect(renderedButton).toBeTruthy();
+        expect(renderedButton).toHaveAttribute("href", expectedUrl.href);
+      });
+    });
+  });
+});

package/src/components/auth/oauth2_button/index.js

@@ -0,0 +1 @@
+export { OAuth2Button } from './OAuth2Button';

package/src/components/auth/providers/AuthProvider.docs.mdx

@@ -0,0 +1,35 @@
+---
+description: A collection of providers with a factory to help with Single Sign-on (SSO) authentication.
+labels: ['auth', 'sso', 'oauth2', 'provider', 'jwt']
+---
+
+import { AuthProviderFactory } from './AuthProviderFactory';
+
+A collection of classes that help manage Single Sign-On (SSO) authentication with different providers.
+A provider class extends base class _AuthProvider_ and exposes four functions by default :
+- _shouldInitAuth()_ : returns a boolean to show if the provider should start the authentication flow
+- _isSameUser(sessionId)_ : returns _true_ if current user is the same as the one attempting to authenticate
+- _getSessionId()_ : returns a unique session identifier
+- _getAuthorizationParams()_ : returns an object with parameters that will be used to authenticate with the provider
+
+There are five provider classes available in this library :
+- _PasswordAuth_ : username/password authentication
+- _FormAuth_ : sign up form authentication
+- _OAuth2ServerAuth_ : OAuth2 providers flow (OAuth2 server, Google, Facebook...)
+- _JWTAuth_ : JWT token authentication
+
+Use the _AuthProviderFactory_ to instantiate a provider class. See examples below :
+
+### Component usage
+
+```js
+import AuthProviderFactory from '@logora/debate.auth.providers';
+```
+
+```js
+    authProvider = AuthProviderFactory.create("social", "my-provider", "my-assertion", "my-social-provider");
+
+    authProviderSignatureJWT = AuthProviderFactory.create("jwt", "my-provider", "jwt-token");
+
+    authProviderFacebook = AuthProviderFactory.create("oauth2_server", "my-provider", "facebook-authorization-code", "facebook");
+```

package/src/components/auth/providers/AuthProvider.js

@@ -0,0 +1,23 @@
+export class AuthProvider {
+    constructor() {
+        if(this.constructor == AuthProvider) {
+            throw new Error("Object of Abstract Class cannot be created");
+        }
+    }
+
+    getAuthorizationParams() {
+        throw new Error("Abstract Method has no implementation");
+    }
+
+    shouldInitAuth() {
+        throw new Error("Abstract Method has no implementation");
+    }
+
+    isSameUser() {
+        throw new Error("Abstract Method has no implementation");
+    }
+
+    getSessionId() {
+        throw new Error("Abstract Method has no implementation");
+    }
+}