Feat(services): id not auth (#55)

next.config.js

@@ -12,6 +12,7 @@ const nextConfig = {
 		NEXT_PUBLIC_FRONT_APP_PORT: process.env.NEXT_PUBLIC_FRONT_APP_PORT,
 		NEXT_PUBLIC_IDNOT_AUTHORIZE_ENDPOINT: process.env.NEXT_PUBLIC_IDNOT_AUTHORIZE_ENDPOINT,
 		NEXT_PUBLIC_IDNOT_CLIENT_ID: process.env.NEXT_PUBLIC_IDNOT_CLIENT_ID,
+		NEXT_PUBLIC_IDNOT_BASE_URL: process.env.NEXT_PUBLIC_IDNOT_BASE_URL,
 	},
 	// webpack: config => {
 	// 	config.node = {

src/front/Api/Auth/IdNot/index.ts

@@ -1,5 +1,6 @@
 import BaseApiService from "@Front/Api/BaseApiService";
 import { FrontendVariables } from "@Front/Config/VariablesFront";
+//import User from "le-coffre-resources/dist/SuperAdmin";
 
 export default class Auth extends BaseApiService {
 	private static instance: Auth;
@@ -12,15 +13,40 @@ export default class Auth extends BaseApiService {
 		return (this.instance = this.instance ?? new this());
 	}
 
-	public async getIdnotJwt(autorizationCode: string | string[]): Promise<any> {
+	public async logOutWithIdNot() {
+		const variables = FrontendVariables.getInstance();
+		const url = new URL(`${variables.IDNOT_BASE_URL}/user/auth/logout?post_logout_redirect_uri=${variables.FRONT_APP_HOST}`);
+		console.log(url.toString())
+		try {
+			return await fetch(url);
+		} catch (err) {
+			console.log(err);
+			this.onError(err);
+			return Promise.reject(err);
+		}
+	}
+
+	public async loginWithIdNot() {
+		const variables = FrontendVariables.getInstance();
+		const url = new URL(`${variables.IDNOT_BASE_URL + variables.IDNOT_AUTHORIZE_ENDPOINT}?client_id=${variables.IDNOT_CLIENT_ID}&redirect_uri=${variables.FRONT_APP_HOST}/authorized-client&scope=openid,profile&response_type=code`);
+		try {
+			return await this.getRequest(url);
+		} catch	(err) {
+			this.onError(err);
+			return Promise.reject(err);
+		}
+	}
+
+	public async getIdnotJwt(autorizationCode: string | string[]): Promise<{accessToken: string, refreshToken: string}> {
 		const variables = FrontendVariables.getInstance();
 		const baseBackUrl = variables.BACK_API_PROTOCOL + variables.BACK_API_HOST;
-		const url = new URL(`${baseBackUrl}/api/v1/idnot-user/${autorizationCode}`);
+		const url = new URL(`${baseBackUrl}/api/v1/idnot/user/${autorizationCode}`);
 		try {
-			return await this.postRequest<any>(url);
+			return await this.postRequest<{accessToken: string, refreshToken: string}>(url);
 		} catch (err) {
 			this.onError(err);
 			return Promise.reject(err);
 		}
 	}
+	
 }

src/front/Components/DesignSystem/LogOutButton/index.tsx

@@ -3,21 +3,23 @@ import Image from "next/image";
 import DisconnectIcon from "@Assets/Icons/disconnect.svg";
 import classes from "./classes.module.scss";
 import Typography, { ITypo } from "../Typography";
+import { useRouter } from "next/router";
+import UserStore from "@Front/Stores/UserStore";
+import { FrontendVariables } from "@Front/Config/VariablesFront";
 
-type IProps = {};
+export default function LogOut() {
-type IState = {
+	const router = useRouter();
-	isLogged: boolean;
+	const variables = FrontendVariables.getInstance();
-};
 
-export default class LogOutButton extends React.Component<IProps, IState> {
+	const disconnect = async() => {
-	public override render(): JSX.Element {
+		await UserStore.instance.disconnect();
-		return (
+		router.push(`https://qual-connexion.idnot.fr/user/auth/logout?post_logout_redirect_uri=${variables.FRONT_APP_HOST}/login`);
-			<div className={classes["root"]} onClick={this.disconnect}>
+	};
-				<Typography typo={ITypo.NAV_HEADER_18}>Déconnexion</Typography>
-				<Image src={DisconnectIcon} className={classes["disconnect-icon"]} alt="disconnect" />
-			</div>
-		);
-	}
 
-	private disconnect() {}
+	return (
+		<div className={classes["root"]} onClick={disconnect}>
+			<Typography typo={ITypo.NAV_HEADER_18}>Déconnexion</Typography>
+			<Image src={DisconnectIcon} className={classes["disconnect-icon"]} alt="disconnect" />
+		</div>
+	);
 }

src/front/Components/Layouts/Login/index.tsx

@@ -12,25 +12,14 @@ import { useCallback } from "react";
 
 import classes from "./classes.module.scss";
 import LandingImage from "./landing-connect.jpeg";
+import { FrontendVariables } from "@Front/Config/VariablesFront";
 
 export default function Login() {
 	const router = useRouter();
 
 	const redirectUserOnConnection = useCallback(() => {
-		async function getUser() {
+		const variables = FrontendVariables.getInstance();
-			try {
+		router.push(`${variables.IDNOT_BASE_URL + variables.IDNOT_AUTHORIZE_ENDPOINT}?client_id=${variables.IDNOT_CLIENT_ID}&redirect_uri=${variables.FRONT_APP_HOST}/authorized-client&scope=openid,profile&response_type=code`);
-				// Super admin
-				await UserStore.instance.connect("jelkvelknvlkn");
-				// Notaire
-				// await UserStore.instance.connect("ljfeflecnmd");
-				await JwtService.getInstance().checkJwt();
-				router.push(Module.getInstance().get().modules.pages.Folder.props.path);
-			} catch (e) {
-				console.error(e);
-			}
-		}
-
-		getUser();
 	}, [router]);
 
 	const redirectCustomerOnConnection = useCallback(() => {

src/front/Components/Layouts/LoginCallback/classes.module.scss

@@ -1,12 +1,25 @@
+@import "@Themes/constants.scss";
+
 .root {
 	display: flex;
 	align-items: center;
 	justify-content: center;
 	flex-direction: column;
+	height: 100%;
+	max-width: 530px;
+	margin: auto;
 
 	.title {
 		margin: 32px 0;
 		text-align: center;
+		@media (max-width: $screen-s) {
+			font-family: 48px;
+		}
+	}
+
+	.loader {
+		width: 32px;
+		height: 32px;
 	}
 
 	.forget-password {

src/front/Components/Layouts/LoginCallback/index.tsx

@@ -1,90 +1,52 @@
-// import classes from "./classes.module.scss";
+import LandingImage from "../Login/landing-connect.jpeg";
-// import LandingImage from "../Login/landing-connect.png";
+import Image from "next/image";
-// import DefaultDoubleSidePage from "@Front/Components/LayoutTemplates/DefaultDoubleSidePage";
+import CoffreIcon from "@Assets/Icons/coffre.svg";
-// import Image from "next/image";
-// import CoffreIcon from "@Assets/Icons/coffre.svg";
-// import Button, { EButtonVariant } from "@Front/Components/DesignSystem/Button";
-// import Typography, { ITypo } from "@Front/Components/DesignSystem/Typography";
 import { useRouter } from "next/router";
+import React, { useEffect } from "react";
+import classes from "./classes.module.scss";
+import Module from "@Front/Config/Module";
+import Auth from "@Front/Api/Auth/IdNot";
+import DefaultDoubleSidePage from "@Front/Components/LayoutTemplates/DefaultDoubleSidePage";
+import Typography, { ITypo } from "@Front/Components/DesignSystem/Typography";
+import Button, { EButtonVariant } from "@Front/Components/DesignSystem/Button";
+import Loader from "@Front/Components/DesignSystem/Loader";
+import UserStore from "@Front/Stores/UserStore";
 
-//import React, { useEffect, useState } from "react";
+export default function LoginCallBack() {
-import React from "react";
-//import Loader from "@Front/Components/DesignSystem/Loader";
-//import Auth from "@Front/Api/Auth/IdNot";
-import Folder from "../Folder";
-import LoginClass from "../Login";
-
-type IPropsClass = {};
-
-// type IStateClass = {};
-
-// class LoginCallBackClass extends React.Component<IPropsClass, IStateClass> {
-//   public override render(): JSX.Element {
-//     return (
-//       <DefaultDoubleSidePage title={"Login"} image={LandingImage}>
-//         <div className={classes["root"]}>
-//           <Image alt="coffre" src={CoffreIcon} />
-//           <Typography typo={ITypo.H1}>
-//             <div className={classes["title"]}>
-//               Connexion espace professionnel
-//             </div>
-//           </Typography>
-//           <Loader />
-//           <Typography typo={ITypo.P_18}>
-//             <div className={classes["forget-password"]}>
-//               Vous n'arrivez pas à vous connecter ?
-//             </div>
-//           </Typography>
-//           <Button variant={EButtonVariant.LINE}>
-//             Contacter l'administrateur
-//           </Button>
-//         </div>
-//       </DefaultDoubleSidePage>
-//     );
-//   }
-// }
-
-// TODO: Refacto with functionnal component container of classcomponent
-// export default function LoginCallBack(props: IPropsClass) {
-//   const [user, setUser] = useState(null);
-//   const [isLoading, setIsLoading] = useState(false);
-//   const router = useRouter();
-//   const { code } = router.query;
-//   if (code) {
-//     useEffect(() => {
-//       const getIdNotJwt = async () => {
-// 		setIsLoading(true);
-//         try {
-//           const authService = Auth.getInstance();
-//           const fetchedUser = await authService.getIdnotJwt(code);
-//           setUser(fetchedUser);
-//         } catch (error) {
-//           console.error(error);
-//           // Router.push('/login');
-//         }
-//       };
-//       getIdNotJwt();
-//     }, []);
-//     if (isLoading) return <LoginCallBackClass {... props}/>
-// 	return <Folder {...props} />;
-//   }
-//   return <LoginClass {...props}/>
-// }
-
-export default function LoginCallBack(props: IPropsClass) {
 	const router = useRouter();
-	const { code } = router.query;
+
-	if (code) {
+	useEffect(() => {
-		// const getIdNotJwt = async () => {
+		async function getUser() {
-		// 	try {
+			const code = router.query["code"];
-		// 		const authService = Auth.getInstance();
+			if (!code) return;
-		// 		await authService.getIdnotJwt(code);
+			try {
-		// 	} catch (error) {
+				const token = await Auth.getInstance().getIdnotJwt(code as string);
-		// 		console.error(error);
+				await UserStore.instance.connect(token.accessToken, token.refreshToken);
-		// 	}
+				return router.push(Module.getInstance().get().modules.pages.Folder.props.path);
-		// };
+			} catch (e) {
-		//getIdNotJwt();
+				console.error(e);
-		return <Folder {...props} />;
+				return;
-	}
+			}
-	return <LoginClass {...props} />;
+		}
+		getUser();
+	}),
+		[router];
+
+	return (
+		<DefaultDoubleSidePage title={"Login"} image={LandingImage}>
+			<div className={classes["root"]}>
+				<Image alt="coffre" src={CoffreIcon} />
+				<Typography typo={ITypo.H1}>
+					<div className={classes["title"]}>Connexion espace professionnel</div>
+				</Typography>
+				<div className={classes["loader"]}>
+					<Loader />
+				</div>
+				<Typography typo={ITypo.P_18}>
+					<div className={classes["forget-password"]}>Vous n'arrivez pas à vous connecter ?</div>
+				</Typography>
+				<Button variant={EButtonVariant.LINE}>Contacter l'administrateur</Button>
+			</div>
+		</DefaultDoubleSidePage>
+	);
 }

src/front/Config/VariablesFront.ts

@@ -11,6 +11,8 @@ export class FrontendVariables {
 
 	public FRONT_APP_HOST!: string;
 
+	public IDNOT_BASE_URL!: string;
+
 	public IDNOT_AUTHORIZE_ENDPOINT!: string;
 
 	public IDNOT_CLIENT_ID!: string;

src/front/Stores/UserStore.ts

@@ -1,6 +1,5 @@
 "use client";
 
-import User from "@Front/Api/Auth/IdNot/User";
 import Customer from "@Front/Api/Auth/franceConnect/Customer";
 import CookieService from "@Front/Services/CookieService/CookieService";
 import EventEmitter from "@Front/Services/EventEmitter";
@@ -23,14 +22,11 @@ export default class UserStore {
 		return decodedPayload?.role;
 	}
 
-	public async connect(idnotUid: string) {
+	public async connect(accessToken: string, refreshToken: string) {
 		try {
-			//call connection function
-			const user: any = await User.getInstance().login(idnotUid);
-
 			//Save tokens in cookies
-			CookieService.getInstance().setCookie("leCoffreAccessToken", user.accessToken);
+			CookieService.getInstance().setCookie("leCoffreAccessToken", accessToken);
-			CookieService.getInstance().setCookie("leCoffreRefreshToken", user.refreshToken);
+			CookieService.getInstance().setCookie("leCoffreRefreshToken", refreshToken);
 
 			this.event.emit("connection", this.accessToken);
 		} catch (error) {

src/pages/_app.tsx

@@ -17,6 +17,7 @@ type AppPropsWithLayout = AppProps & {
 	backApiRootUrl: string;
 	backApiVersion: string;
 	frontAppHost: string;
+	idNotBaseUrl: string;
 	idNotAuthorizeEndpoint: string;
 	idNotClientId: string;
 	fcAuthorizeEndpoint: string;
@@ -31,6 +32,7 @@ const MyApp = (({
 	backApiRootUrl,
 	backApiVersion,
 	frontAppHost,
+	idNotBaseUrl,
 	idNotAuthorizeEndpoint,
 	idNotClientId,
 	fcAuthorizeEndpoint,
@@ -44,7 +46,8 @@ const MyApp = (({
 	instance.BACK_API_ROOT_URL = backApiRootUrl ?? "/api";
 	instance.BACK_API_VERSION = backApiVersion ?? "/v1";
 	instance.FRONT_APP_HOST = frontAppHost ?? "app.stg.lecoffre.smart-chain.fr";
-	instance.IDNOT_AUTHORIZE_ENDPOINT = idNotAuthorizeEndpoint ?? "https://qual-connexion.idnot.fr/IdPOAuth2/authorize/idnot_idp_v1";
+	instance.IDNOT_BASE_URL = idNotBaseUrl ?? "https://qual-connexion.idnot.fr";
+	instance.IDNOT_AUTHORIZE_ENDPOINT = idNotAuthorizeEndpoint ?? "/IdPOAuth2/authorize/idnot_idp_v1";
 	instance.IDNOT_CLIENT_ID = idNotClientId ?? "4501646203F3EF67";
 	instance.FC_AUTHORIZE_ENDPOINT= fcAuthorizeEndpoint ?? "https://fcp.integ01.dev-franceconnect.fr/api/v1/authorize";
 	instance.FC_CLIENT_ID = fcClientId ?? "211286433e39cce01db448d80181bdfd005554b19cd51b3fe7943f6b3b86ab6e";
@@ -60,6 +63,7 @@ MyApp.getInitialProps = async () => {
 		backApiVersion: process.env["NEXT_PUBLIC_BACK_API_VERSION"],
 		frontAppHost: process.env["NEXT_PUBLIC_FRONT_APP_HOST"],
 		frontAppPort: process.env["NEXT_PUBLIC_FRONT_APP_PORT"],
+		idNotBaseUrl: process.env["NEXT_PUBLIC_IDNOT_BASE_URL"],
 		idNotAuthorizeEndpoint: process.env["NEXT_PUBLIC_IDNOT_AUTHORIZE_ENDPOINT"],
 		idNotClientId: process.env["NEXT_PUBLIC_IDNOT_CLIENT_ID"],
 		fcAuthorizeEndpoint: process.env["NEXT_PUBLIC_FC_AUTHORIZE_ENDPOINT"],