From c4315ae4e0dcb2ad8c1a6cffe8fe3bd35a09d333 Mon Sep 17 00:00:00 2001
From: Ste Vaidis <ste.vaidis@gmail.com>
Date: Sun, 15 Dec 2024 18:27:02 +0200
Subject: [PATCH] Update OAuth2-Front-Approach.md

---
 OAuth2-Front-Approach.md | 20 +++++++++++++++-----
 1 file changed, 15 insertions(+), 5 deletions(-)

diff --git a/OAuth2-Front-Approach.md b/OAuth2-Front-Approach.md
index 04b551a..7900726 100644
--- a/OAuth2-Front-Approach.md
+++ b/OAuth2-Front-Approach.md
@@ -35,7 +35,9 @@ A way for the `user` to tell `google` to give an access token to `xorismesiti.gr
 
 
 
-# 1. [Frontend] Request Authorization code
+# 1. Request Authorization code
+
+### Frontend ⇢ Google ⇢ Frontend
 
 1. A button "Login with Google" redirects the user to the Google's authorization endpoint `accounts.google.com/o/oauth2/v2/auth`
 2. After the redirection, the user will log in to Google and grant permissions (if they haven’t already).
@@ -100,7 +102,9 @@ const loginWithGoogle = () => {
 
 
 
-# 2. [Frontend] Receive Authorization Code
+# 2. Use Authorization Code
+
+### Frontend ⇢ Backend ⇢ Google ⇢ Backend ⇢ Frontend
 
 Now that the frontend has the Authorization `code` on th callback url https://xorismesiti.gr/api/auth/callback`?code=AAAABCX4XfWgyVyziyLg0QHHHHH` it can send it to the backend with POST to `xorismesiti.gr/api/auth/exchange-token`, in order the backend to exchange the `code` for an `access_token` and optionally an `refresh_token`
 
@@ -182,7 +186,9 @@ export default Callback;
 
 
 
-# 3. [Backend] Exchange Code with Token 
+# 3. Exchange Code with Token 
+
+### Frontend ⇢ Backend ⇢ Google ⇢ Backend ⇢ Frontend
 
 1. The backend **receives** the authorization `code` form frontend (Frontend POST at `xorismesiti.gr/api/auth/exchange-token`)
 2. The backend **POST** Authorization `code` to Google API
@@ -287,7 +293,9 @@ app.listen(3000, () => {
 
 
 
-# 4. [Frontend] Use the Token
+# 4. Use the Token
+
+### Frontend ⇢ Google ⇢ Frontend
 
 1. The frontend receives the tokens from the Backend response,
 2. Store them in the localStorage of the browser
@@ -363,7 +371,9 @@ const fetchUserData = async (accessToken) => {
 <br><br><br>
 
 
-# 5. [Frontend] Refresh the Token
+# 5. Refresh the Token
+
+### Frontend ⇢ Backend ⇢ Google ⇢ Backend ⇢ Frontend
 
 If the access token is expired, the frontend will receive an error response from Google when attempting to fetch user data