From e3a94aa17f462049d328779e859accf0f818263b Mon Sep 17 00:00:00 2001
From: 0Nom4D <arthur.adam@epitech.eu>
Date: Sat, 5 Mar 2022 22:35:04 +0100
Subject: [PATCH] Aeris : feat/oauth-signin - Adding Sign In with Services

---
 .../components/Authorizations/AnilistAuth.tsx | 18 -------------
 .../components/Authorizations/DiscordAuth.tsx | 19 -------------
 .../components/Authorizations/GithubAuth.tsx  | 18 -------------
 .../components/Authorizations/ServiceAuth.tsx |  5 ++--
 .../Authorizations/ServiceSignIn.tsx          | 27 +++++++++++++++++++
 .../components/Authorizations/SpotifyAuth.tsx | 19 -------------
 .../components/Authorizations/TwitterAuth.tsx | 19 -------------
 .../components/Authorizations/YoutubeAuth.tsx | 19 -------------
 web-app/src/index.tsx                         | 15 ++++-------
 web-app/src/pages/Login/LoginPage.tsx         |  2 +-
 web-app/src/utils/globals.tsx                 | 18 +++++++++++--
 web-app/src/utils/types.tsx                   |  2 ++
 web-app/src/utils/utils.tsx                   | 20 ++++++++++++++
 13 files changed, 74 insertions(+), 127 deletions(-)
 delete mode 100644 web-app/src/components/Authorizations/AnilistAuth.tsx
 delete mode 100644 web-app/src/components/Authorizations/DiscordAuth.tsx
 delete mode 100644 web-app/src/components/Authorizations/GithubAuth.tsx
 create mode 100644 web-app/src/components/Authorizations/ServiceSignIn.tsx
 delete mode 100644 web-app/src/components/Authorizations/SpotifyAuth.tsx
 delete mode 100644 web-app/src/components/Authorizations/TwitterAuth.tsx
 delete mode 100644 web-app/src/components/Authorizations/YoutubeAuth.tsx

diff --git a/web-app/src/components/Authorizations/AnilistAuth.tsx b/web-app/src/components/Authorizations/AnilistAuth.tsx
deleted file mode 100644
index 278e038..0000000
--- a/web-app/src/components/Authorizations/AnilistAuth.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import { getCookie, sendServiceAuthToken } from "../../utils/utils";
-import { useNavigate, useSearchParams } from "react-router-dom";
-import React, { useEffect } from "react";
-import { API_ROUTE } from "../../utils/globals";
-
-export default function Anilist() {
-	const [searchParams, setSearchParams] = useSearchParams();
-	const navigate = useNavigate();
-	const authCode = searchParams.get("code") as string;
-
-	useEffect(() => {
-		sendServiceAuthToken(authCode, "/auth/anilist", `${window.location.origin}/authorization/anilist`).then((ok) => {
-			navigate('/pipelines');
-		});
-	}, []);
-
-	return <div />;
-}
diff --git a/web-app/src/components/Authorizations/DiscordAuth.tsx b/web-app/src/components/Authorizations/DiscordAuth.tsx
deleted file mode 100644
index c22fb17..0000000
--- a/web-app/src/components/Authorizations/DiscordAuth.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import { getCookie, sendServiceAuthToken } from "../../utils/utils";
-import { useNavigate, useSearchParams } from "react-router-dom";
-import { useEffect } from "react";
-import { API_ROUTE } from "../../utils/globals";
-
-export default function DiscordAuth() {
-	const [searchParams, setSearchParams] = useSearchParams();
-	const navigate = useNavigate();
-
-	const authToken = searchParams.get("code") as string;
-
-	useEffect(() => {
-		sendServiceAuthToken(authToken, "/auth/discord", `${window.location.origin}/authorization/discord`).then((ok) => {
-			navigate('/pipelines');
-		});
-	}, []);
-
-	return <div />;
-}
diff --git a/web-app/src/components/Authorizations/GithubAuth.tsx b/web-app/src/components/Authorizations/GithubAuth.tsx
deleted file mode 100644
index e9c2757..0000000
--- a/web-app/src/components/Authorizations/GithubAuth.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import { getCookie, sendServiceAuthToken } from "../../utils/utils";
-import { useNavigate, useSearchParams } from "react-router-dom";
-import { useEffect } from "react";
-import { API_ROUTE } from "../../utils/globals";
-
-export default function GithubAuth() {
-	const [searchParams, setSearchParams] = useSearchParams();
-	const navigate = useNavigate();
-	const authCode = searchParams.get("code") as string;
-
-	useEffect(() => {
-		sendServiceAuthToken(authCode, "/auth/github", `${window.location.origin}/authorization/github`).then((ok) => {
-			navigate('/pipelines');
-		});
-	}, []);
-
-	return <div />;
-}
diff --git a/web-app/src/components/Authorizations/ServiceAuth.tsx b/web-app/src/components/Authorizations/ServiceAuth.tsx
index 28eed19..04732d2 100644
--- a/web-app/src/components/Authorizations/ServiceAuth.tsx
+++ b/web-app/src/components/Authorizations/ServiceAuth.tsx
@@ -4,17 +4,18 @@ import { useEffect } from "react";
 
 interface ServiceAuthProps {
     service: string
+    endpoint: string
     redirect_uri: string
     navigate_to: string
 }
 
-export default function ServiceAuth({ service, redirect_uri, navigate_to }: ServiceAuthProps) {
+export default function ServiceAuth({ service, endpoint, redirect_uri, navigate_to }: ServiceAuthProps) {
     const [searchParams] = useSearchParams();
     const navigate = useNavigate();
     const authCode = searchParams.get("code") as string;
 
     useEffect(() => {
-        sendServiceAuthToken(authCode, "/auth/" + service, `${window.location.origin}/${redirect_uri}`).then((ok) => {
+        sendServiceAuthToken(authCode, "/auth/" + service + endpoint, `${window.location.origin}/${redirect_uri}`).then((ok) => {
             navigate(navigate_to);
         })
     }, []);
diff --git a/web-app/src/components/Authorizations/ServiceSignIn.tsx b/web-app/src/components/Authorizations/ServiceSignIn.tsx
new file mode 100644
index 0000000..b82f243
--- /dev/null
+++ b/web-app/src/components/Authorizations/ServiceSignIn.tsx
@@ -0,0 +1,27 @@
+import { useNavigate, useSearchParams } from "react-router-dom";
+import {sendServiceAuthToken, setCookie, signInService} from "../../utils/utils";
+import { useEffect } from "react";
+
+interface ServiceAuthProps {
+    service: string
+    endpoint: string
+    redirect_uri: string
+    navigate_to: string
+}
+
+export default function ServiceSignIn({ service, endpoint, redirect_uri, navigate_to }: ServiceAuthProps) {
+    const [searchParams] = useSearchParams();
+    const navigate = useNavigate();
+    const authCode = searchParams.get("code") as string;
+
+    useEffect(() => {
+        signInService(authCode, "/auth/" + service + endpoint, `${window.location.origin}/${redirect_uri}`).then((ok) => {
+            if (ok)
+                navigate(navigate_to);
+            else
+                console.warn('An error occurred when signing in with a service.');
+        })
+    }, []);
+
+    return <div />;
+}
\ No newline at end of file
diff --git a/web-app/src/components/Authorizations/SpotifyAuth.tsx b/web-app/src/components/Authorizations/SpotifyAuth.tsx
deleted file mode 100644
index 69ce0d7..0000000
--- a/web-app/src/components/Authorizations/SpotifyAuth.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import { getCookie, sendServiceAuthToken } from "../../utils/utils";
-import { useNavigate, useSearchParams } from "react-router-dom";
-import { useEffect } from "react";
-import { API_ROUTE } from "../../utils/globals";
-
-export default function SpotifyAuth() {
-	const [searchParams, setSearchParams] = useSearchParams();
-	const navigate = useNavigate();
-
-	const authCode = searchParams.get("code") as string;
-
-	useEffect(() => {
-		sendServiceAuthToken(authCode, "/auth/spotify", `${window.location.origin}/authorization/spotify`).then((ok) => {
-			navigate('/pipelines');
-		});
-	}, []);
-
-	return <div />;
-}
diff --git a/web-app/src/components/Authorizations/TwitterAuth.tsx b/web-app/src/components/Authorizations/TwitterAuth.tsx
deleted file mode 100644
index c606adf..0000000
--- a/web-app/src/components/Authorizations/TwitterAuth.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import { getCookie, sendServiceAuthToken } from "../../utils/utils";
-import { useNavigate, useSearchParams } from "react-router-dom";
-import { useEffect } from "react";
-import { API_ROUTE } from "../../utils/globals";
-
-export default function TwitterAuth() {
-	const [searchParams, setSearchParams] = useSearchParams();
-	const navigate = useNavigate();
-
-	const authCode = searchParams.get("code") as string;
-
-	useEffect(() => {
-		sendServiceAuthToken(authCode, "/auth/twitter", `${window.location.origin}/authorization/twitter`).then((ok) => {
-			navigate('/pipelines');
-		});
-	}, []);
-
-	return <div />;
-}
diff --git a/web-app/src/components/Authorizations/YoutubeAuth.tsx b/web-app/src/components/Authorizations/YoutubeAuth.tsx
deleted file mode 100644
index e81da32..0000000
--- a/web-app/src/components/Authorizations/YoutubeAuth.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import { getCookie, sendServiceAuthToken } from "../../utils/utils";
-import { useNavigate, useSearchParams } from "react-router-dom";
-import { useEffect } from "react";
-import { API_ROUTE } from "../../utils/globals";
-
-export default function GoogleAuth() {
-	const [searchParams, setSearchParams] = useSearchParams();
-	const navigate = useNavigate();
-
-	const authCode = searchParams.get("code") as string;
-
-	useEffect(() => {
-		sendServiceAuthToken(authCode, "/auth/google", `${window.location.origin}/authorization/google`).then((ok) => {
-			navigate('/pipelines');
-		});
-	}, []);
-
-	return <div />;
-}
diff --git a/web-app/src/index.tsx b/web-app/src/index.tsx
index ddf7bc1..eb57d37 100644
--- a/web-app/src/index.tsx
+++ b/web-app/src/index.tsx
@@ -4,12 +4,6 @@ import "./App.css";
 
 import App from "./App";
 import ServiceAuth from "./components/Authorizations/ServiceAuth";
-import GithubAuth from "./components/Authorizations/GithubAuth";
-import SpotifyAuth from "./components/Authorizations/SpotifyAuth";
-import GoogleAuth from "./components/Authorizations/YoutubeAuth";
-import TwitterAuth from "./components/Authorizations/TwitterAuth";
-import DiscordAuth from "./components/Authorizations/DiscordAuth";
-import AnilistAuth from "./components/Authorizations/AnilistAuth";
 import { BrowserRouter, Routes, Route } from "react-router-dom";
 import AuthComponent from "./pages/Login/LoginPage";
 import PipelinePage from "./pages/HomePage";
@@ -18,6 +12,7 @@ import { ThemeProvider } from "@mui/material";
 import theme from "./Aeris.theme";
 import {AppServices} from "./utils/globals";
 import {AppServiceType} from "./utils/types";
+import ServiceSignIn from "./components/Authorizations/ServiceSignIn";
 
 /**
  * Creates the routing tree.
@@ -35,11 +30,11 @@ function AerisRouter() {
 							<Route path="/auth" element={<AuthComponent />} />
 							<Route path="/pipelines" element={<PipelinePage />} />
 							{possibleServices.map((elem, index) => {
-								return (<Route path={`/authorization/${elem.uid}`} element={<ServiceAuth service={elem.uid} navigate_to="/pipelines" redirect_uri={`authorization/${elem.uid}`}/>} />);
+								return (<Route path={`/authorization/${elem.uid}`} element={<ServiceAuth service={elem.uid} endpoint="" navigate_to="/pipelines" redirect_uri={`authorization/${elem.uid}`}/>} />);
+							})}
+							{possibleServices.map((elem, index) => {
+								return (<Route path={`/signin/${elem.uid}`} element={<ServiceSignIn service={elem.uid} endpoint="/signin" navigate_to="/pipelines" redirect_uri={`singin/${elem.uid}`}/>} />);
 							})}
-							{/*{possibleServices.map((elem, index) => {*/}
-							{/*	return (<Route path={`/signin/${elem.uid}`} element={<ServiceAuth service={elem.uid} navigate_to="/pipelines" redirect_uri={`singin/${elem.uid}`}/>} />);*/}
-							{/*})}*/}
 						</Routes>
 					</BrowserRouter>
 				</header>
diff --git a/web-app/src/pages/Login/LoginPage.tsx b/web-app/src/pages/Login/LoginPage.tsx
index 07e08fc..03935e2 100644
--- a/web-app/src/pages/Login/LoginPage.tsx
+++ b/web-app/src/pages/Login/LoginPage.tsx
@@ -265,7 +265,7 @@ export default function AuthComponent() {
 								return (<div/>);
 							return (
 								<Button
-									onClick={() => (window.location.href = elem.urlAuth)}
+									onClick={() => (window.location.href = elem.signinUrl)}
 									variant="text"
 									style={{ borderRadius: "20px", width: "20px", height: "20px" }}
 								>
diff --git a/web-app/src/utils/globals.tsx b/web-app/src/utils/globals.tsx
index ebea226..83b12c9 100644
--- a/web-app/src/utils/globals.tsx
+++ b/web-app/src/utils/globals.tsx
@@ -41,8 +41,8 @@ export const AppServicesLogos: { [key: string]: ImageProps } = {
 	},
 };
 
-const getServiceUrl = (service: string) =>
-	`${API_ROUTE}/auth/${service}/url?redirect_uri=${window.location.origin}/authorization/${service}`;
+const getServiceUrl = (service: string, method: string = "authorization") =>
+	`${API_ROUTE}/auth/${service}/url?redirect_uri=${window.location.origin}/${method}/${service}`;
 
 export const AppServices: Array<AppServiceType> = [
 	{
@@ -50,6 +50,8 @@ export const AppServices: Array<AppServiceType> = [
 		uid: "google",
 		logo: AppServicesLogos["youtube"],
 		urlAuth: getServiceUrl("google"),
+		signinUrl: getServiceUrl("google", "signin"),
+		signupUrl: getServiceUrl("google", "signup"),
 		linked: false,
 	},
 	{
@@ -57,6 +59,8 @@ export const AppServices: Array<AppServiceType> = [
 		uid: "spotify",
 		logo: AppServicesLogos["spotify"],
 		urlAuth: getServiceUrl("spotify"),
+		signinUrl: getServiceUrl("spotify", "signin"),
+		signupUrl: getServiceUrl("spotify", "signup"),
 		linked: false,
 	},
 	{
@@ -64,6 +68,8 @@ export const AppServices: Array<AppServiceType> = [
 		uid: "github",
 		logo: AppServicesLogos["github"],
 		urlAuth: getServiceUrl("github"),
+		signinUrl: getServiceUrl("github", "signin"),
+		signupUrl: getServiceUrl("github", "signup"),
 		linked: false,
 	},
 	{
@@ -71,6 +77,8 @@ export const AppServices: Array<AppServiceType> = [
 		uid: "twitter",
 		logo: AppServicesLogos["twitter"],
 		urlAuth: getServiceUrl("twitter"),
+		signinUrl: getServiceUrl("twitter", "signin"),
+		signupUrl: getServiceUrl("twitter", "signup"),
 		linked: false,
 	},
 	{
@@ -78,6 +86,8 @@ export const AppServices: Array<AppServiceType> = [
 		uid: "discord",
 		logo: AppServicesLogos["discord"],
 		urlAuth: getServiceUrl("discord"),
+		signinUrl: getServiceUrl("discord", "signin"),
+		signupUrl: getServiceUrl("discord", "signup"),
 		linked: false,
 	},
 	{
@@ -85,6 +95,8 @@ export const AppServices: Array<AppServiceType> = [
 		uid: "anilist",
 		logo: AppServicesLogos["anilist"],
 		urlAuth: getServiceUrl("anilist"),
+		signinUrl: getServiceUrl("anilist", "signin"),
+		signupUrl: getServiceUrl("anilist", "signup"),
 		linked: false,
 	},
 	{
@@ -92,6 +104,8 @@ export const AppServices: Array<AppServiceType> = [
 		uid: "utils",
 		logo: AppServicesLogos["utils"],
 		urlAuth: "",
+		signinUrl: "",
+		signupUrl: "",
 		linked: false,
 	},
 ];
diff --git a/web-app/src/utils/types.tsx b/web-app/src/utils/types.tsx
index ac2dfdf..1806e39 100644
--- a/web-app/src/utils/types.tsx
+++ b/web-app/src/utils/types.tsx
@@ -10,6 +10,8 @@ export interface AppServiceType {
 	uid: string;
 	logo: ImageProps;
 	urlAuth: string;
+	signinUrl: string;
+	signupUrl: string;
 	linked: boolean;
 }
 
diff --git a/web-app/src/utils/utils.tsx b/web-app/src/utils/utils.tsx
index f46aab8..4bdc692 100644
--- a/web-app/src/utils/utils.tsx
+++ b/web-app/src/utils/utils.tsx
@@ -38,6 +38,26 @@ export const sendServiceAuthToken = async (
 	return response.ok;
 };
 
+export const signInService = async (
+	authToken: string,
+	serviceEndpoint: string,
+	redirectUri: string
+): Promise<boolean> => {
+	const response = await fetch(`${API_ROUTE}${serviceEndpoint}?code=${authToken}&redirect_uri=${redirectUri}`, {
+		method: "POST",
+		headers: {
+			Accept: 'application/json',
+			"Content-Type": "application/json",
+			Authorization: "Bearer " + getCookie("aeris_jwt")
+		}
+	});
+
+	if (!response.ok) return false;
+	let json = await response.json();
+	setCookie("aeris_jwt", json['jwt'], 365);
+	return response.ok;
+};
+
 export const PipelineParamsToApiParam = (pipelineParams: { [key: string]: ParamsType }) => {
 	return Object.fromEntries(Object.entries(pipelineParams).map((el) => [el[0], el[1].value]));
 };