zoriya/Aeris
1
0
Fork 0
mirror of https://github.com/zoriya/Aeris.git synced 2026-06-05 03:30:21 +00:00
Code Issues Packages Projects Releases Wiki Activity

Aeris : feat/oauth-signin - Adding Sign In with Services

Browse Source
This commit is contained in:
0Nom4D
2022-03-05 22:35:04 +01:00
parent 9e71e1de0b
commit e3a94aa17f
13 changed files with 74 additions and 127 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web-app/src/components/Authorizations/AnilistAuth.tsx
-18
View File
@@ -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 />;
}
web-app/src/components/Authorizations/DiscordAuth.tsx
-19
View File
@@ -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 />;
}
web-app/src/components/Authorizations/GithubAuth.tsx
-18
View File
@@ -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 />;
}
web-app/src/components/Authorizations/ServiceAuth.tsx
+3 -2
View File
@@ -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);
})
}, []);
web-app/src/components/Authorizations/ServiceSignIn.tsx
+27
View File
@@ -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 />;
}
web-app/src/components/Authorizations/SpotifyAuth.tsx
-19
View File
@@ -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 />;
}
web-app/src/components/Authorizations/TwitterAuth.tsx
-19
View File
@@ -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 />;
}
web-app/src/components/Authorizations/YoutubeAuth.tsx
-19
View File
@@ -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 />;
}
web-app/src/index.tsx
+5 -10
View File
@@ -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>
web-app/src/pages/Login/LoginPage.tsx
+1 -1
View File
@@ -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" }}
>
web-app/src/utils/globals.tsx
+16 -2
View File
@@ -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,
},
];
web-app/src/utils/types.tsx
+2
View File
@@ -10,6 +10,8 @@ export interface AppServiceType {
uid: string;
logo: ImageProps;
urlAuth: string;
signinUrl: string;
signupUrl: string;
linked: boolean;
}
web-app/src/utils/utils.tsx
+20
View File
@@ -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]));
};