Fix: avoid login or logged in issues (#1037)

* create two components

* fix

.vscode/extensions.json

@@ -1,7 +1,7 @@
 {
-  "recommendations": [
-    "dbaeumer.vscode-eslint",
-    "esbenp.prettier-vscode",
-    "firsttris.vscode-jest-runner"
-  ]
+	"recommendations": [
+		"dbaeumer.vscode-eslint",
+		"esbenp.prettier-vscode",
+		"firsttris.vscode-jest-runner"
+	]
 }

.vscode/settings.json

@@ -1,18 +1,18 @@
 {
-    "workbench.colorCustomizations": {
-        "activityBar.background": "#65c89b",
-        "activityBar.activeBorder": "#945bc4",
-        "activityBar.foreground": "#15202b",
-        "activityBar.inactiveForeground": "#15202b99",
-        "activityBarBadge.background": "#945bc4",
-        "activityBarBadge.foreground": "#e7e7e7",
-        "titleBar.activeBackground": "#42b883",
-        "titleBar.inactiveBackground": "#42b88399",
-        "titleBar.activeForeground": "#15202b",
-        "titleBar.inactiveForeground": "#15202b99",
-        "statusBar.background": "#42b883",
-        "statusBarItem.hoverBackground": "#359268",
-        "statusBar.foreground": "#15202b"
-    },
-    "peacock.color": "#42b883"
-}
+	"workbench.colorCustomizations": {
+		"activityBar.background": "#65c89b",
+		"activityBar.activeBorder": "#945bc4",
+		"activityBar.foreground": "#15202b",
+		"activityBar.inactiveForeground": "#15202b99",
+		"activityBarBadge.background": "#945bc4",
+		"activityBarBadge.foreground": "#e7e7e7",
+		"titleBar.activeBackground": "#42b883",
+		"titleBar.inactiveBackground": "#42b88399",
+		"titleBar.activeForeground": "#15202b",
+		"titleBar.inactiveForeground": "#15202b99",
+		"statusBar.background": "#42b883",
+		"statusBarItem.hoverBackground": "#359268",
+		"statusBar.foreground": "#15202b"
+	},
+	"peacock.color": "#42b883"
+}

Dockerfile

@@ -22,13 +22,13 @@ ENV NGINX_GROUP=nginx
 
 USER $NGINX_USER_ID
 
-# Add build to nginx root file
+# Add build to nginx root webapp
 COPY --from=builder --chown=$NGINX_USER:$NGINX_GROUP /bauhaus/build /usr/share/nginx/html
 
 # Copy nginx configuration
 RUN rm /etc/nginx/conf.d/default.conf
 COPY --from=builder --chown=$NGINX_USER:$NGINX_GROUP /bauhaus/nginx.conf /etc/nginx/conf.d/nginx.conf
 
-# Add entrypoint
+# Add entrypoint and start nginx server
 RUN chmod 755 /usr/share/nginx/html/vite-envs.sh
 ENTRYPOINT sh -c "/usr/share/nginx/html/vite-envs.sh && nginx -g 'daemon off;'"

src/packages/auth/hoc.tsx

@@ -1,9 +1,12 @@
 import { connect } from 'react-redux';
 import LoginNoAuth from './no-auth/login';
-import LoginOidcComponent from './open-id-connect-auth/use-oidc';
+import LoggedInWrapper, {
+	LoginComponent,
+} from './open-id-connect-auth/use-oidc';
 import { NO_AUTH, OPEN_ID_CONNECT_AUTH } from './constants';
 import { getPermission } from '../redux/selectors';
 import { ReduxModel } from '../redux/model';
+import { useOidc } from './create-oidc';
 
 const auth = (WrappedComponent: any) => {
 	const AuthComponent = ({
@@ -13,8 +16,11 @@ const auth = (WrappedComponent: any) => {
 		authType: string;
 		roles: string[] | null;
 	}) => {
-		if (authType === OPEN_ID_CONNECT_AUTH)
-			return <LoginOidcComponent WrappedComponent={WrappedComponent} />;
+		const { isUserLoggedIn } = useOidc();
+		if (authType === OPEN_ID_CONNECT_AUTH) {
+			if (!isUserLoggedIn) return <LoginComponent />;
+			else return <LoggedInWrapper WrappedComponent={WrappedComponent} />;
+		}
 
 		if (roles) return <WrappedComponent />;
 

src/packages/auth/open-id-connect-auth/use-oidc.tsx

@@ -5,40 +5,44 @@ import { storeToken } from './token-utils';
 import { useEffect, useState } from 'react';
 import { UsersApi } from '../../sdk/users-api';
 
-type LoginOidcComponentTypes = {
+type OidcWrapperTypes = {
 	WrappedComponent: any;
 	saveUserProps: ({ roles, stamp }: { roles: string[]; stamp: string }) => void;
 };
 
-const LoginOidcComponent = ({
-	WrappedComponent,
-	saveUserProps,
-}: LoginOidcComponentTypes) => {
-	const { isUserLoggedIn, login, oidcTokens } = useOidc({
+export const LoginComponent = () => {
+	const { isUserLoggedIn, login } = useOidc({
 		assertUserLoggedIn: false,
 	});
-	const { renewTokens } = useOidc({ assertUserLoggedIn: true });
-	const [userInformationLoaded, setUserInformationLoaded] = useState(false);
 
 	if (!isUserLoggedIn) {
 		login({
 			doesCurrentHrefRequiresAuth: true,
 		});
-		return null;
 	}
 
+	return null;
+};
+
+const LoggedInWrapper = ({
+	WrappedComponent,
+	saveUserProps,
+}: OidcWrapperTypes) => {
+	const { oidcTokens, renewTokens } = useOidc({
+		assertUserLoggedIn: true,
+	});
+	const [userInformationLoaded, setUserInformationLoaded] = useState(false);
+
 	useEffect(() => {
-		if (isUserLoggedIn) {
-			storeToken(oidcTokens?.accessToken);
-			UsersApi.getStamp().then(({ stamp }: { stamp: string }) => {
-				const roles = (oidcTokens?.decodedIdToken.realm_access as any).roles;
-				saveUserProps({ roles, stamp });
-				setUserInformationLoaded(true);
-			});
-			setInterval(() => {
-				renewTokens();
-			}, 120000);
-		}
+		storeToken(oidcTokens?.accessToken);
+		UsersApi.getStamp().then(({ stamp }: { stamp: string }) => {
+			const roles = (oidcTokens?.decodedIdToken.realm_access as any).roles;
+			saveUserProps({ roles, stamp });
+			setUserInformationLoaded(true);
+		});
+		setInterval(() => {
+			renewTokens();
+		}, 120000);
 	}, []);
 
 	useEffect(() => {
@@ -56,4 +60,4 @@ const mapDispatchToProps = {
 	saveUserProps,
 };
 
-export default connect(undefined, mapDispatchToProps)(LoginOidcComponent);
+export default connect(undefined, mapDispatchToProps)(LoggedInWrapper);

src/vite-env.d.ts

@@ -12,7 +12,6 @@ type ImportMetaEnv = {
   VITE_CONCEPTS_DOCUMENTATION: string
   VITE_OPERATIONS_DOCUMENTATION: string
   VITE_DEV_TOOLS_ENABLED: string
-  VITE_INSEE: string
   VITE_NAME: string
   VITE_VERSION: string
   BASE_URL: string