Fix login sequence (#41)

* Fix login sequence

* Remove invalid logic

* Frontend auth refactor.

---------

Co-authored-by: Pavel <[email protected]>

code/frontend/config.json

@@ -1,4 +1,6 @@
 {
+    "redirectUri": "http://localhost:5000",
     "backend": "http://localhost:5001",
-    "auth": "http://localhost:5002"
+    "auth": "http://localhost:5002",
+    "clientId": "fake"
 }

code/frontend/src/Auth/AuthApi.ts

@@ -0,0 +1,21 @@
+export class AuthApi {
+  constructor(private clientId: string, private redirectUri: string, private authUrl: string) {}
+
+  exchangeCode = async (code: string | null): Promise<string | null> => {
+    if (!code) return null;
+
+    const body = `grant_type=authorization_code&client_id=${this.clientId}&code=${code}&redirect_uri=${this.redirectUri}`;
+
+    const response = await fetch(`${this.authUrl}/oauth2/token`, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
+      },
+      body
+    });
+
+    const responseBody = await response.json();
+
+    return responseBody.id_token;
+  };
+}

code/frontend/src/Auth/AuthProvider.tsx

@@ -17,22 +17,25 @@ export function AuthProvider({ authenticator, children }: AuthProviderProps) {
 
   useEffect(() => {
     (async () => {
-      const newToken = await authenticator.getToken();
+      const storedToken = await authenticator.getStoredToken();
+      if (!storedToken) return;
 
-      setToken(newToken);
-      setLogedIn(Boolean(setToken));
+      setToken(storedToken);
+      setLogedIn(Boolean(storedToken));
 
-      if (newToken) navigate('/passwords');
+      navigate('/passwords');
     })();
   }, []);
 
   const signIn = async () => {
     const newToken = await authenticator.signIn();
 
-    setToken(newToken);
-    setLogedIn(Boolean(setToken));
+    if (newToken) {
+      setToken(newToken);
+      setLogedIn(Boolean(newToken));
 
-    if (newToken) navigate('/passwords');
+      navigate('/passwords');
+    }
   };
 
   const signOut = async () => {

code/frontend/src/Auth/Authenticator.ts

@@ -1,38 +1,46 @@
+import { AuthApi } from './AuthApi';
 import {
   getTokenFromStorage,
-  getTokenFromUrl,
+  getCodeFromUrl,
   putTokenToStorage,
   removeTokenFromStorage,
   redirectToAuthPage
 } from './tools';
 
 export class Authenticator {
-  constructor(private authUrl: string) {}
+  constructor(private authUrl: string, private redirectUri: string, private api: AuthApi) {}
 
-  getToken = () => {
-    let token = getTokenFromStorage();
+  getStoredToken = (): Promise<string | null> => {
+    return this.getToken();
+  };
+
+  signIn = async (): Promise<string | null> => {
+    const token = await this.getToken();
 
     if (!token) {
-      token = getTokenFromUrl();
-      if (token) putTokenToStorage(token);
+      redirectToAuthPage(this.authUrl, this.redirectUri);
+      return null;
     }
 
     return token;
   };
 
-  autoSignIn = async () => {
-    const token = getTokenFromStorage() ?? getTokenFromUrl();
+  signOut = (): void => removeTokenFromStorage();
 
-    return token;
-  };
-
-  signIn = async () => {
-    const token = this.getToken();
+  private getToken = async (): Promise<string | null> => {
+    let token = getTokenFromStorage();
+    if (token) return token;
 
-    if (!token) redirectToAuthPage(this.authUrl);
+    token = await this.getTokenFromCode();
+    if (token) putTokenToStorage(token);
 
     return token;
   };
 
-  signOut = async () => removeTokenFromStorage();
+  private getTokenFromCode = async (): Promise<string | null> => {
+    const code = getCodeFromUrl();
+    if (!code) return null;
+
+    return this.api.exchangeCode(code);
+  };
 }

code/frontend/src/Auth/tools/redirectToAuthPage.ts

@@ -1,3 +1,3 @@
-export function redirectToAuthPage(authUrl: string) {
-  window.location.replace(`${authUrl}/login?redirect_uri=${window.location.href}&response_type=code&scope=openid`);
+export function redirectToAuthPage(authUrl: string, redirectUri: string) {
+  window.location.replace(`${authUrl}/login?redirect_uri=${redirectUri}&response_type=code&scope=openid`);
 }

code/frontend/src/Auth/tools/token.ts

@@ -1,4 +1,4 @@
-export function getTokenFromUrl(): string | null {
+export function getCodeFromUrl(): string | null {
   const urlParams = new URLSearchParams(window.location.search);
 
   return urlParams.get('code');

code/frontend/src/DependeciesInjection/hooks/useConfig.ts

@@ -5,8 +5,10 @@ import { Config } from '../types';
 
 export const useConfig = () => {
   const [config, setConfig] = useState<Config>({
+    redirectUri: '',
+    backend: '',
     auth: '',
-    backend: ''
+    clientId: ''
   });
   const [loadingConfig, setLoading] = useState(true);
 

code/frontend/src/DependeciesInjection/hooks/useDependencies.ts

@@ -1,6 +1,7 @@
 import { useMemo } from 'react';
 
 import { Authenticator } from '~/Auth';
+import { AuthApi } from '~/Auth/AuthApi';
 import { PasswordsApi } from '~/Passwords';
 
 import { useConfig } from './useConfig';
@@ -9,8 +10,9 @@ export const useDependencies = () => {
   const { config, loadingConfig } = useConfig();
 
   const { devAuthenticator, passwordsApi } = useMemo(() => {
+    const authApi = new AuthApi(config.clientId, config.redirectUri, config.auth);
     return {
-      devAuthenticator: new Authenticator(config.auth),
+      devAuthenticator: new Authenticator(config.auth, config.redirectUri, authApi),
       passwordsApi: new PasswordsApi(config.backend)
     };
   }, [config]);

code/frontend/src/DependeciesInjection/types.ts

@@ -1,4 +1,6 @@
 export interface Config {
   backend: string;
   auth: string;
+  redirectUri: string;
+  clientId: string;
 }