add 2fa work great

containers/api/src/app.controller.ts

@@ -6,7 +6,7 @@
 /*   By: apommier <apommier@student.42.fr>          +#+  +:+       +#+        */
 /*                                                +#+#+#+#+#+   +#+           */
 /*   Created: 2023/06/17 01:00:00 by apommier          #+#    #+#             */
-/*   Updated: 2023/06/17 17:29:05 by apommier         ###   ########.fr       */
+/*   Updated: 2023/06/18 11:51:18 by apommier         ###   ########.fr       */
 /*                                                                            */
 /* ************************************************************************** */
 
@@ -353,6 +353,8 @@ export class AppController {
   {
 	const user = await this.userService.findOne(req.user.username);
 	const res = await VerifyOTP(user, data.token)
+	console.log('token in verify=', data.token)
+	console.log('res in verify=', res)
 	await this.userService.save(user);
 	return res
   }
@@ -367,6 +369,18 @@ export class AppController {
 	return res
   }
 
+  @UseGuards(JwtAuthGuard)
+  @Post('/deleteOtp')
+  async deleteOTP(@Request() req, @Body() data: any)
+  {
+	const user = await this.userService.findOne(req.user.username);
+	user.otp_verified = false;
+	await this.userService.save(user);
+	// const res = await ValidateOTP(user, data.token)
+	// await this.userService.save(user);
+	// return res
+  }
+
 //   @UseGuards(JwtAuthGuard)
 //   @Get('/QRcode')
 //   async createQrCode(@Request() req)
@@ -398,7 +412,7 @@ export class AppController {
 	///create conv and return it ? id?
 	console.log(`data post /conv= ${data}`);
 	console.log(`data post /conv= ${data.members}`);
-	console.log(`data post /conv= ${data.name}`);
+	// console.log(`data post /conv= ${data.name}`);
 
 	// const param = data;
 	const amIhere = data.members.includes(req.user.username);

containers/api/src/users/2fa.ts

@@ -85,12 +85,13 @@ export const generateOTP = async (user) => {
 
 	  if (delta === null) {
 		console.log("error verify token")
-		return ("error verify token")
+		return (0)
 	  }
 	  else
 	  {
 		user.otp_verified = true;
 		console.log("token verified")
+		return (1)
 	  }
 	} catch (error) {
 		console.log(error)
@@ -111,12 +112,13 @@ export const generateOTP = async (user) => {
 
 	  if (delta === null) {
 		console.log("error validate token")
-		return ("error validate token")
+		return (0);
 	  }
 	  else
 	  {
 		// user.otp_verified = true;
 		console.log("token validated")
+		return (1);
 	  }
 	} catch (error) {
 		console.log(error)

containers/react/src/components/Messages/Modal.jsx

@@ -84,7 +84,7 @@ const Modal = ({handleClose}) => {
 		//do db stuff here
 		const data = {
 			members: selectedOptions,
-			name: "prout"
+			// name: "prout"
 		}
 		try{
 			api.post("/conv", data);

containers/react/src/components/Sidebar/SidebarData.js

@@ -32,8 +32,8 @@ export const SidebarData = [
 		cName: 'nav-text'
 	},
 	{
-		title: 'Settings',
-		path: '/team',
+		title: 'Double Auth',
+		path: '/qr',
 		icon: <IoSettingsSharp />,
 		cName: 'nav-text'
 	},

containers/react/src/pages/QrCode.jsx

@@ -1,8 +1,13 @@
 import React, { useEffect, useRef, useState } from "react";
+// import { useHistory } from 'react';
+// import { redirect } from "react-router-dom";
+
 import "../styles/App.css";
+import api from '../script/axiosApi';
+
 import QRCodeStyling from "qr-code-styling";
 import { motion } from 'framer-motion'
-import api from '../script/axiosApi';
+
 
 
 const qrCode = new QRCodeStyling({
@@ -23,11 +28,41 @@ const qrCode = new QRCodeStyling({
     });
 
 function QrCode () {
-    const url = "https://www.youtube.com";
+    // const url = "https://www.youtube.com";
     const ref = useRef(null);
+	const [user, setUser] = useState(false);
+	const [url, setUrl] = useState(false);
+	const [secret, setSecret] = useState(false);
+	const [code, setCode] = useState('');
+	const [activated, setActivated] = useState(false);
+
+	// const history = useHistory();
 
     useEffect(() => {
         qrCode.append(ref.current);
+
+		const getUser = async ()=>{
+			try{
+				const tmpUser = await api.get("/profile");
+				setUser(tmpUser.data);
+				if (tmpUser.data.otp_verified)
+				{
+					setActivated(true);
+					return ;
+				}
+				const otpData = await api.post("/otp");
+				setUrl(otpData.data.otpauth_url);
+				setSecret(otpData.data.base32_secret);
+				// const tmpUser = await api.get("/profile")
+				// console.log("test")
+				// console.table(convs);
+			}
+			catch(err){
+				console.log(err);
+			}
+		};
+		getUser();
+
     }, []);
 
     useEffect(() => {
@@ -36,29 +71,110 @@ function QrCode () {
         });
     }, [url]);
 
-    const getConv = async ()=>{
+
+	const handleKeyPress = async (e)=>{
+		// console.log(`e in press= ${e.key}`)
+		if (e.key !== "Enter")
+			return ;
 		try{
-            const convs = await api.get("/user")
-            // const tmpUser = await api.get("/profile")
-            console.log("test")
-            console.table(convs);
+			console.log("code= ", code)
+			const res = await api.post("/verifyOtp", {token: code})
+			console.log("res= ", res.data)
+			console.log("res= ", res)
+			if (res.data === 1)
+			{
+				console.log("registered")
+				// history.push('/login')
+
+				const path = 'http://' + process.env.REACT_APP_BASE_URL + '/'; 
+				window.history.pushState({}, null, path);
+				window.location.reload(false);
+
+			}
+			else
+			{
+				console.log("bad code")
+				//alert ?? retry
+			}
+			// redirect('/test')
 		} 
 		catch(err){
+			 console.log(err)
+		}
+	}
+
+	const handleDesactivate = async () => {
+		try {
+			await api.post("/deleteOtp")
+			// const path = 'http://' + process.env.REACT_APP_BASE_URL + '/'; 
+			// window.history.pushState({}, null, path);
+			window.location.reload(false);
+		} catch(err) {
 			console.log(err);
 		}
     };
-    getConv();
+
     return (
-		<motion.div className="page"
+		// <motion.div className="page"
+		// initial={{opacity: -1}}
+		// animate={{opacity: 1}}
+		// exit={{opacity: -1}}>
+        //     <h1>QRcode</h1>
+        //     <h3>{secret}</h3>
+        //     <div ref={ref} />
+        //     <input type="text" className="qr" placeholder="Type The Code"/>
+        //     {}
+
+		// </motion.div>
+
+		<motion.div
+		className="page"
 		initial={{ opacity: -1 }}
 		animate={{ opacity: 1 }}
-		exit={{opacity: -1}}>
-            <h1>QrCode</h1>
-            <h3>Your code is: 231 31 31</h3>
+		exit={{ opacity: -1 }}
+	  >
+		{!activated && (
+		  <>
+			<h1>Enter The Secret</h1>
+			<h3>{secret}</h3>
+			<h1>Or Scan The QRCode</h1>
 			<div ref={ref} />
-            <input type="text" className="qr" placeholder="type the secret"/>
-            {}
+		  </>
+		)}
 
+<>
+      {!activated && localStorage.getItem('token') ? (
+        <>
+          <h1>Double Auth Validation</h1>
+          <input
+            onKeyDown={handleKeyPress}
+            type="text"
+            className="qr"
+            placeholder="6 Digits Code"
+            value={code}
+            onChange={(e) => setCode(e.target.value)}
+          />
+        </>
+      ) : (
+        <button onClick={handleDesactivate}>Desactivate 2FA</button>
+      )}
+    </>
+
+		{/* {!localStorage.getItem('token') && (
+		<>
+		  <h1>Double Auth</h1>
+		  <input onKeyDown={handleKeyPress}
+		  		type="text" 
+				className="qr" 
+				placeholder="6 Digits Code"
+				onChange={(e) => setCode(e.target.value)}
+		  />
+		</>
+		) : (<button onClick={ handleDesactivate }>Desactivate 2FA</button>)}
+		 */}
+		{/* {!activated && (
+		  <button onClick={() => setActivated(true)}>Activate</button>
+		)} */}
 	  </motion.div>
     )
 }

containers/react/src/script/axiosApi.js

@@ -12,13 +12,13 @@ function getToken() {
 console.log(`getToken = ${getToken()}`)
 console.log(`Bearer ${localStorage.getItem("token")}`)
 
-const test = "192.168.1.19"
+// const test = "192.168.1.19"
 // const url = 'http://' + process.env.REACT_APP_BASE_URL + '/api'
 // const url = 'http://' + test + '/api'
 
 // console.log("url= ", url)
-console.log("test= ", test)
-console.log("env= ", process.env.REACT_APP_BASE_URL)
+// console.log("test= ", test)
+// console.log("env= ", process.env.REACT_APP_BASE_URL)
 
 let api = axios.create({
 //   baseURL: 'http://localhost/api', 

containers/react/src/script/tokenSuccess.js

@@ -1,13 +1,247 @@
 import { useLocation } from 'react-router-dom';
+import { useState, useEffect } from 'react'
 import queryString from 'query-string';
+import api from "./axiosApi";
+import axios from 'axios';
 
 function SuccessToken() {
 	const location = useLocation();
 	const { data } = queryString.parse(location.search);
-  const cleanData = data.slice(1, -1);
+	const [code, setCode] = useState('');
+	const [user, setUser] = useState(false);
+  
+	useEffect(() => {
+	  if (!data) {
+		console.log("No data");
+		return;
+	  }
+  
+	  const cleanData = data.slice(1, -1); // Declare cleanData here
+  
+	  const getUser = async () => {
+		try {
+		  const tmpUser = await axios({
+			method: 'GET',
+			url: 'http://' + process.env.REACT_APP_BASE_URL + '/api/profile',
+			headers: {
+			  Authorization: `Bearer ${cleanData}`,
+			},
+			withCredentials: true,
+		  });
+		  setUser(tmpUser.data);
+		} catch (err) {
+		  console.log(err);
+		}
+	  };
+  
+	  getUser();
+	}, [data]);
+  
+	const handleKeyPress = async (e)=>{
+		// console.log(`e in press= ${e.key}`)
+		if (e.key !== "Enter")
+			return ;
+		try{
+			console.log("code= ", code)
+			// const res = await api.post("/verifyOtp", {token: code})
+
+
+			const res = await axios({
+				method: 'POST',
+				url: 'http://' + process.env.REACT_APP_BASE_URL + '/api/verifyOtp',
+				headers: {
+				  Authorization: `Bearer ${cleanData}`,
+				},
+				withCredentials: true,
+				data: { token: code }
+			  });
+
+			console.log("res= ", res.data)
+			console.log("res= ", res)
+			if (res.data === 1)
+			{
+				console.log("registered")
+				// history.push('/login')
+	
 				localStorage.setItem('token', `${cleanData}`);
-  console.log(`prout token2= ${localStorage.getItem('token')}`)
+				console.log(`prout token2= ${localStorage.getItem('token')}`);
 				window.location.replace("http://" + process.env.REACT_APP_BASE_URL + "/pong");
+
+				// const path = 'http://' + process.env.REACT_APP_BASE_URL + '/'; 
+				// window.history.pushState({}, null, path);
+				// window.location.reload(false);
+	
+			}
+			else
+			{
+				console.log("bad code")
+				//alert ?? retry
+			}
+			// redirect('/test')
+		} 
+		catch(err){
+			 console.log(err)
+		}
+	}
+
+
+  
+	if (!user) {
+	  // Render a loading indicator or return null while user is being fetched
+	  return <h1>Loading...</h1>;
+	}
+  
+	const cleanData = data.slice(1, -1); // Declare cleanData here as well
+  
+	if (!user.otp_verified) {
+	  console.log("false");
+	  localStorage.setItem('token', `${cleanData}`);
+	  console.log(`prout token2= ${localStorage.getItem('token')}`);
+	  window.location.replace("http://" + process.env.REACT_APP_BASE_URL + "/pong");
+	  return null; // or return a message or component indicating not verified
+	}
+  
+	return (
+		<>
+		  <h1>Double Auth</h1>
+		  <input
+			onKeyDown={handleKeyPress}
+			type="text"
+			className="qr"
+			placeholder="6 Digits Code"
+			value={code}
+			onChange={(e) => setCode(e.target.value)}
+		  />
+		</>
+	  );
 	}
 	
 	export default SuccessToken;
+
+// function SuccessToken() {
+
+//   const location = useLocation();
+//   const { data } = queryString.parse(location.search);
+
+//   if ( !data)
+//   {
+// 	console.log("no data")
+//   	return ;
+//   }
+//   const cleanData = data.slice(1, -1);
+
+
+//   const [code, setCode] = useState('');
+//   const [user, setUser] = useState(false);
+
+//   useEffect(()=> {
+
+// 	const getUser = async ()=>{
+// 		try {
+// 			// const tmpUser = await api.get("/profile");
+
+// 			const tmpUser = await axios({
+// 				method: 'GET',
+// 				url: 'http://' + process.env.REACT_APP_BASE_URL + '/api/profile',
+// 				headers: {
+// 				  Authorization: `Bearer ${cleanData}`,
+// 				},
+// 				withCredentials: true,
+// 			  });
+// 			  setUser(tmpUser.data);
+
+// 			// setUser(tmpUser.data);
+// 			// if (tmpUser.data.otp_verified)
+// 			// {
+// 			// 	console.log("true");
+// 			// 	return (
+// 			// 		<>
+// 			// 		<h1>Double Auth</h1>
+// 			// 		<input
+// 			// 		  onKeyDown={handleKeyPress}
+// 			// 		  type="text"
+// 			// 		  className="qr"
+// 			// 		  placeholder="6 Digits Code"
+// 			// 		  value={code}
+// 			// 		  onChange={(e) => setCode(e.target.value)}
+// 			// 		/>
+// 			// 	  </>
+// 			// 	)
+// 			// }
+// 			// else 
+// 			// {
+// 			// 	console.log("false");
+// 			// 	localStorage.setItem('token', `${cleanData}`);
+// 			// 	console.log(`prout token2= ${localStorage.getItem('token')}`)
+// 			// 	window.location.replace("http://" + process.env.REACT_APP_BASE_URL + "/pong");
+// 			// }
+// 		} catch(err) {
+// 			console.log(err)
+// 		}
+// 	}
+// 	getUser();
+//   }, []);
+
+//   const handleKeyPress = async (e)=>{
+// 	// console.log(`e in press= ${e.key}`)
+// 	if (e.key !== "Enter")
+// 		return ;
+// 	try{
+// 		console.log("code= ", code)
+// 		const res = await api.post("/verifyOtp", {token: code})
+// 		console.log("res= ", res.data)
+// 		console.log("res= ", res)
+// 		if (res.data === 1)
+// 		{
+// 			console.log("registered")
+// 			// history.push('/login')
+
+// 			const path = 'http://' + process.env.REACT_APP_BASE_URL + '/'; 
+// 			window.history.pushState({}, null, path);
+// 			window.location.reload(false);
+
+// 		}
+// 		else
+// 		{
+// 			console.log("bad code")
+// 			//alert ?? retry
+// 		}
+// 		// redirect('/test')
+// 	} 
+// 	catch(err){
+// 		 console.log(err)
+// 	}
+//   }
+
+
+//   console.log("start while...")
+//   while(user === false)
+//   	;
+//   console.log("end while")
+//   if (!user.otp_verified)
+//   {
+// 	console.log("false");
+// 	localStorage.setItem('token', `${cleanData}`);
+// 	console.log(`prout token2= ${localStorage.getItem('token')}`)
+// 	window.location.replace("http://" + process.env.REACT_APP_BASE_URL + "/pong");
+// 	return ;
+//   }
+  
+//   return (
+// 	  <>
+// 		<h1>Double Auth</h1>
+// 		<input
+// 		  onKeyDown={handleKeyPress}
+// 		  type="text"
+// 		  className="qr"
+// 		  placeholder="6 Digits Code"
+// 		  value={code}
+// 		  onChange={(e) => setCode(e.target.value)}
+// 		/>
+// 	  </>
+//   )
+
+
+// }
+
+// export default SuccessToken;