@logora/debate 0.1.0

package/src/components/auth/sso_form/SSOForm.test.jsx

@@ -0,0 +1,83 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { DefaultSSOForm, SSOFormWithRedirect, SSOFormWithEmailConsent, SSOFormWithError, SSOFormWithoutActions } from './SSOForm.stories';
+
+describe('SSOForm', () => {
+    it('should render with correct defaults', () => {
+        const component = render(
+            <DefaultSSOForm />
+        )
+
+        const signupButton = screen.getByTestId('signup-button');
+        const signinLink = screen.getByTestId('signin-link');
+
+        expect(signupButton).toBeTruthy();
+        expect(signinLink).toBeTruthy();
+        expect(signinLink.href).toContain("https://example.com/login?client_id=client-id");
+        expect(signinLink.href).toContain("response_type=code");
+        expect(signinLink.href).toContain("state=");
+        expect(signupButton.href).toContain("https://example.com/signup?client_id=client-id");
+        expect(signupButton.href).toContain("response_type=code");
+        expect(signupButton.href).toContain("state=");
+        expect(screen.getByText('Already have an account ?')).toBeTruthy();
+        expect(screen.getByText("Debate now !")).toBeTruthy();
+        expect(screen.getByText("Sign up right now and receive alerts by email.")).toBeTruthy();
+        expect(screen.queryByRole("input")).toBeNull();
+        expect(screen.queryByText("An error occurred during sign in. Please try again in a few moments.")).toBeNull();
+    });
+
+    it('should render with correct links if not OAuth2', () => {
+        const component = render(
+            <SSOFormWithRedirect />
+        )
+
+        const signupButton = screen.getByTestId('signup-button');
+        const signinLink = screen.getByTestId('signin-link');
+
+        expect(signupButton).toBeTruthy();
+        expect(signinLink).toBeTruthy();
+        expect(signinLink.href).toContain("https://example.com/login?logora_redirect=");
+        expect(signupButton.href).toContain("https://example.com/signup?logora_redirect=");
+        expect(decodeURIComponent(signinLink.href)).toContain(window.location.origin);
+        expect(decodeURIComponent(signupButton.href)).toContain(window.location.origin);
+        expect(screen.getByText('Already have an account ?')).toBeTruthy();
+        expect(screen.getByText("Sign up right now and receive alerts by email.")).toBeTruthy();
+        expect(screen.queryByRole("input")).toBeNull();
+        expect(screen.queryByText("An error occurred during sign in. Please try again in a few moments.")).toBeNull();
+    });
+
+    it('should render with consent toggle when showEmailConsent is true', () => {
+        const component = render(
+            <SSOFormWithEmailConsent />
+        )
+
+        const toggle = screen.queryByTestId("accepts-email-input");
+        expect(toggle).toBeTruthy();
+    });
+
+    it('should not render consent toggle when showEmailConsent is false', () => {
+        const component = render(
+            <DefaultSSOForm />
+        )
+
+        const toggle = screen.queryByTestId("accepts-email-input");
+        expect(toggle).toBeNull();
+    });
+
+    it('should render with error', () => {
+        render(
+            <SSOFormWithError />
+        )
+
+        expect(screen.getByText("An error occurred during sign in. Please try again in a few moments.")).toBeTruthy();
+    });
+
+    it('should render without actions if prop passed', () => {
+        render(
+            <SSOFormWithoutActions />
+        )
+
+        expect(screen.queryByTestId('signup-button')).toBeNull();
+        expect(screen.queryByTestId('signin-link')).toBeNull();
+    });
+});

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

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

package/src/components/auth/use_auth/AuthContext.js

@@ -0,0 +1,3 @@
+import { createContext } from 'react';
+
+export const AuthContext = createContext();

package/src/components/auth/use_auth/AuthProvider.jsx

@@ -0,0 +1,21 @@
+import React, { useState } from 'react';
+import { AuthContext } from './AuthContext';
+
+export const AuthProvider = (props) => {
+    const [currentUser, setCurrentUser] = useState({});
+    const [isLoggedIn, setIsLoggedIn] = useState(false);
+    const [isLoggingIn, setIsLoggingIn] = useState(true);
+    const [authError, setAuthError] = useState(false);
+
+    return (
+        <AuthContext.Provider value={{ currentUser, setCurrentUser, isLoggedIn, setIsLoggedIn, isLoggingIn, setIsLoggingIn, authError, setAuthError }}>
+            { props.children }
+        </AuthContext.Provider>
+    );
+}
+
+export const withAuth = Component => props => (
+  <AuthContext.Consumer>
+    { context => <Component {...props} {...context} /> }
+  </AuthContext.Consumer>
+)

package/src/components/auth/use_auth/AuthProvider.test.jsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { AuthProvider } from './AuthProvider';
+import { useAuth } from './useAuth';
+
+const ComponentWithAuth = () => {
+	const { isLoggingIn } = useAuth();
+
+	return (
+        <div>
+            { isLoggingIn ? "is logging in" : "is not logging in" }
+        </div>
+    )
+}
+
+describe('AuthProvider', () => {
+	it('should render component with auth', () => {
+		const container = render(
+			<AuthProvider>
+				<ComponentWithAuth />
+			</AuthProvider>
+		);
+
+		expect(container.getByText(/is logging in/i)).toBeTruthy()
+	});
+});

package/src/components/auth/use_auth/AuthStorage.js

@@ -0,0 +1,33 @@
+export function makeStorage(tokenKey) {
+    const storageBackend = (typeof window !== 'undefined') && (window.localStorage || window.sessionStorage || null);
+
+    const getToken = () => {
+        try {
+            return JSON.parse(storageBackend.getItem(tokenKey));
+        } catch(e) {
+            return false;
+        }
+    }
+
+    const setToken = (token) => {
+        try {
+            storageBackend.setItem(tokenKey, JSON.stringify(token));
+        } catch(e) {
+            return false;
+        }
+    }
+
+    const removeToken = () => {
+        try {
+            storageBackend.removeItem(tokenKey);
+        } catch(e) {
+            return false;
+        }
+    }
+
+    return {
+        getToken,
+        setToken,
+        removeToken
+    }
+}

package/src/components/auth/use_auth/AuthStorage.test.jsx

@@ -0,0 +1,165 @@
+import { makeStorage } from "./AuthStorage";
+
+const localStorageMock = (function() {
+    let store = {}
+  
+    return {
+        name: "localStorage",
+        getItem: function(key) {
+            return store[key] || null
+        },
+        setItem: function(key, value) {
+            store[key] = value.toString()
+        },
+        removeItem: function(key) {
+            delete store[key]
+        },
+        clear: function() {
+            store = {}
+        }
+    }
+})()
+
+const sessionStorageMock = (function() {
+    let store = {}
+  
+    return {
+        name: "sessionStorage",
+        getItem: function(key) {
+            return store[key] || null
+        },
+        setItem: function(key, value) {
+            store[key] = value.toString()
+        },
+        removeItem: function(key) {
+            delete store[key]
+        },
+        clear: function() {
+            store = {}
+        }
+    }
+})()
+
+describe('AuthStorage', () => {
+    describe('when window is undefined', () => {
+        const { window } = global;
+
+        beforeAll(() => {
+            delete global.window;
+        });
+
+        afterAll(() => {
+            global.window = window;
+        });
+        
+        it('should run without error', () => {
+            expect(typeof global.window).toBe('undefined');
+
+            const storage = makeStorage('token-key');
+            expect(storage).toBeTruthy();
+        });
+    });
+
+    describe('setToken', () => {
+        beforeEach(() => {
+            delete window.localStorage;
+            delete window.sessionStorage;
+        });
+
+        it('should store token in localStorage', () => {
+            Object.defineProperty(window, 'localStorage', {
+                configurable: true,
+                value: localStorageMock
+            })
+
+            const tokenKey = "token-key";
+            const { setToken } = makeStorage(tokenKey);
+    
+            const token = { access_token: "my-token"};
+            setToken(token);
+            expect(localStorage.getItem(tokenKey)).toBe(JSON.stringify(token));
+        });
+
+        it('should store token in sessionStorage', () => {
+            Object.defineProperty(window, 'sessionStorage', {
+                configurable: true,
+                value: sessionStorageMock
+            })
+
+            const tokenKey = "token-key";
+            const { setToken } = makeStorage(tokenKey);
+    
+            const token = { access_token: "another-token"};
+            setToken(token);
+            expect(sessionStorage.getItem(tokenKey)).toBe(JSON.stringify(token));
+        });
+
+        it('should store nothing if no storage defined', () => {
+            const tokenKey = "token-key";
+            const { getToken, setToken } = makeStorage(tokenKey);
+    
+            const token = { access_token: "random-token"};
+            setToken(token);
+            expect(getToken()).toBe(false);
+        });
+    });
+
+    describe('getToken', () => {
+        beforeEach(() => {
+            delete window.localStorage;
+            delete window.sessionStorage;
+        });
+
+        it('should get correct token', () => {
+            Object.defineProperty(window, 'localStorage', {
+                configurable: true,
+                value: localStorageMock
+            })
+
+            const tokenKey = "token-key";
+            const { getToken, setToken, removeToken } = makeStorage(tokenKey);
+    
+            const token = { access_token: "a-super-token"};
+            setToken(token);
+            expect(getToken()).toStrictEqual(token);
+
+            removeToken();
+        });
+
+        it('should get null if no token set', () => {
+            Object.defineProperty(window, 'localStorage', {
+                configurable: true,
+                value: localStorageMock
+            })
+
+            const tokenKey = "token-key";
+            const { getToken } = makeStorage(tokenKey);
+    
+            expect(getToken()).toBeNull();
+        });
+    });
+
+    describe('removeToken', () => {
+        beforeEach(() => {
+            delete window.localStorage;
+            delete window.sessionStorage;
+        });
+
+        it('should remove token', () => {
+            Object.defineProperty(window, 'localStorage', {
+                configurable: true,
+                value: localStorageMock
+            })
+
+            const tokenKey = "token-key";
+            const { getToken, setToken, removeToken } = makeStorage(tokenKey);
+    
+            const token = { access_token: "great-token"};
+            setToken(token);
+            expect(getToken()).toStrictEqual(token);
+
+            removeToken();
+            expect(getToken()).toBeNull();
+        });
+    });
+})

package/src/components/auth/use_auth/authTokenHandler.js

@@ -0,0 +1,67 @@
+import { makeStorage } from "./AuthStorage";
+
+export const authTokenHandler = (httpClient, authUrl, tokenKey) => {
+    const storage = makeStorage(tokenKey);
+
+    const getToken = () => {
+        return storage.getToken();
+    }
+
+    const removeToken = () => {
+        storage.removeToken();
+    }
+
+    const setToken = (token, sessionId) => {
+        const tokenObject = {
+            ...token,
+            expires_at: token.created_at + token.expires_in,
+            session_id: sessionId
+        };
+        storage.setToken(tokenObject);
+    }
+
+    const fetchToken = (authParams) => {
+        const sessionId = authParams.session_id;
+        return new Promise((resolve, reject) => {
+            return httpClient.post(authUrl, authParams).then(response => {
+                if(response.data.access_token) {
+                    const token = response.data;
+                    setToken(token, sessionId);
+                    resolve(response);
+                } else {
+                    reject(response);
+                }
+            }).catch(error => {
+                reject(error);
+            });
+        });
+    }
+
+    const refreshToken = () => {
+        const tokenObject = getToken();
+        const data = {
+            grant_type: 'refresh_token',
+            refresh_token: tokenObject.refresh_token,
+        };
+        return new Promise((resolve, reject) => {
+            return httpClient.post(authUrl, data).then(response => {
+                if(response.data.access_token) {
+                    const token = response.data;
+                    setToken(token, tokenObject.session_id);
+                    resolve(token.access_token);
+                } else {
+                    reject(response);
+                }
+            }).catch(error => {
+                reject(error);
+            });
+        });
+    }
+
+    return {
+        getToken,
+        removeToken,
+        fetchToken,
+        refreshToken
+    }
+}

package/src/components/auth/use_auth/authTokenHandler.test.jsx

@@ -0,0 +1,117 @@
+import { authTokenHandler } from "./authTokenHandler";
+import { makeStorage } from './AuthStorage';
+
+const localStorageMock = (function() {
+    let store = {}
+  
+    return {
+        name: "localStorage",
+        getItem: function(key) {
+            return store[key] || null
+        },
+        setItem: function(key, value) {
+            store[key] = value.toString()
+        },
+        removeItem: function(key) {
+            delete store[key]
+        },
+        clear: function() {
+            store = {}
+        }
+    }
+})()
+
+const httpClient = {
+    get: vi.fn(),
+    post: vi.fn(),
+    patch: vi.fn()
+};
+
+beforeEach(() => {
+    httpClient.get.mockClear();
+    httpClient.post.mockClear();
+    httpClient.patch.mockClear();
+});
+
+describe('authTokenHandler', () => {
+    describe('getToken', () => {
+        beforeEach(() => {
+            delete window.localStorage;
+        });
+
+        it('should get null if no token set', () => {
+            Object.defineProperty(window, 'localStorage', {
+                configurable: true,
+                value: localStorageMock
+            })
+
+            const tokenKey = "token-key";
+            const { getToken } = authTokenHandler(httpClient, 'https://example.com/auth', tokenKey);
+    
+            expect(getToken()).toBeNull();
+        });
+
+        it('should get correct token', () => {
+            Object.defineProperty(window, 'localStorage', {
+                configurable: true,
+                value: localStorageMock
+            })
+
+            const tokenKey = "token-key";
+            const { setToken } = makeStorage(tokenKey);
+            const { getToken } = authTokenHandler(httpClient, 'https://example.com/auth', tokenKey);
+    
+            const token = { access_token: "a-super-token"};
+            setToken(token);
+            expect(getToken()).toStrictEqual(token);
+        });
+    });
+
+    describe('removeToken', () => {
+        beforeEach(() => {
+            delete window.localStorage;
+        });
+
+        it('should remove token', () => {
+            Object.defineProperty(window, 'localStorage', {
+                configurable: true,
+                value: localStorageMock
+            })
+
+            const tokenKey = "token-key";
+            const { setToken } = makeStorage(tokenKey);
+            const { getToken, removeToken } = authTokenHandler(httpClient, 'https://example.com/auth', tokenKey);
+    
+            const token = { access_token: "great-token"};
+            setToken(token);
+            expect(getToken()).toStrictEqual(token);
+
+            removeToken();
+            expect(getToken()).toBeNull();
+        });
+    });
+
+    /*
+    describe('fetchToken', () => {
+        beforeEach(() => {
+            delete window.localStorage;
+        });
+
+        it('should fetch token and store it', () => {
+            httpClient.post.mockResolvedValue({ status: 200, data: {
+                    success: true,
+                    data: { access_token: "random-token", expires_at: 123456789 }
+                }
+            });
+
+            const authParams = { session_id: "session_id" }
+            const tokenKey = "token-key";
+            const { fetchToken, getToken } = authTokenHandler(httpClient, 'https://example.com/auth', tokenKey);
+
+            fetchToken(authParams).then(response => {
+                console.log(response);
+            });
+        })
+    });
+    */
+})

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

@@ -0,0 +1,7 @@
+export { makeStorage } from './AuthStorage';
+export { AuthProvider, withAuth } from './AuthProvider';
+export { useAuth } from './useAuth';
+export { authTokenHandler } from './authTokenHandler';
+export { useAuthActions, EMAIL_CONSENT_STORAGE_KEY } from './useAuthActions';
+export { useAuthInterceptor } from './useAuthInterceptor';
+export { AuthContext } from './AuthContext';

package/src/components/auth/use_auth/useAuth.docs.mdx

@@ -0,0 +1,34 @@
+---
+description: A library to manage authentication.
+labels: ['auth', 'token', 'useAuth']
+---
+
+This library contains several hooks and classes to manage user authentication.
+It manages user login, token storage and user logout.
+
+Here are the different classes available and hooks :
+
+- `AuthContext`: a context to store current user and login state.
+
+- `AuthProvider`: a provider to use the context in your app, with the following variables :
+    - `currentUser`, `setCurrentUser`: current logged in user object
+    - `isLoggedIn`, `setIsLoggedIn`: boolean to define if user is logged in
+    - `isLoggingIn` , `setIsLoggingIn`: boolean to define is user is currently logging in
+    - `authError`, `setAuthError`: authentication error, empty if auth was successful
+
+- `useAuth`: a hook to get the AuthContext.
+
+- `AuthStorage`: manages token storage. It uses local storage by default or session storage if local storage is not available.
+
+- `useAuthActions`: exports three functions :
+    - `loginUser`: fetches user token from API
+    - `logoutUser`: logs out user and removes token
+    - `fetchUser`: fetches user profile and stores it in context
+
+- `authTokenHandler`: manages tokens retrieval and refresh from API.
+
+- `useAuthInterceptor`: a hook that adds an interceptor to the httpClient (typically axios) to refresh token when expired.
+
+
+
+

package/src/components/auth/use_auth/useAuth.js

@@ -0,0 +1,8 @@
+import { useContext } from "react";
+import { AuthContext } from "./AuthContext";
+
+export const useAuth = () => {
+    const authState = useContext(AuthContext);
+
+    return authState;
+}

package/src/components/auth/use_auth/useAuthActions.js

@@ -0,0 +1,77 @@
+import { useAuth } from "./useAuth";
+import { authTokenHandler } from "./authTokenHandler";
+import { useDataProvider } from '@logora/debate/data/data_provider';
+
+export const EMAIL_CONSENT_STORAGE_KEY = "logora:emailConsent";
+
+export const useAuthActions = (httpClient, authUrl, tokenKey) => {
+    const { removeToken, fetchToken } = authTokenHandler(httpClient, authUrl, tokenKey);
+    const { setCurrentUser, setIsLoggedIn, setIsLoggingIn, setAuthError } = useAuth();
+    const api = useDataProvider();
+
+    const loginUser = (authParams) => {
+        fetchToken(authParams).then(response => {
+            fetchUser();
+        }).catch(error => {
+            setAuthError(error);
+        });
+    }
+
+    const logoutUser = () => {
+        setIsLoggedIn(false);
+        setIsLoggingIn(false);
+        setCurrentUser({});
+        removeToken();
+        dispatchLogoutEvent();
+    }
+
+    const fetchUser = () => {
+        api.getOneWithToken('me', '').then(response => {
+            if (response.data.success) {
+                const currentUser = response.data.data.resource;
+                setCurrentUser(currentUser);
+                setIsLoggedIn(true);
+                setIsLoggingIn(false);
+                dispatchLoginEvent(currentUser);
+            } else {
+                setAuthError(true);
+                setIsLoggedIn(false);
+                setIsLoggingIn(false);
+                setCurrentUser({});
+                removeToken();
+            }
+        }).catch(error => {
+            setAuthError(true);
+            setIsLoggedIn(false);
+            setIsLoggingIn(false);
+            setCurrentUser({});
+            removeToken();
+        });
+    }
+
+    const dispatchLoginEvent = (currentUser) => {
+        if (typeof window !== "undefined") {
+            window.dispatchEvent(
+                new CustomEvent("logora:authentication:success", {
+                    detail: {
+                        user: currentUser
+                    }
+                })
+            );
+        }
+    }
+
+    const dispatchLogoutEvent = () => {
+        if (typeof window !== "undefined") {
+            window.dispatchEvent(
+                new CustomEvent("logora:authentication:logout")
+            );
+        }
+    }
+
+    return {
+        loginUser,
+        logoutUser,
+        fetchUser
+    };
+}