From d82e0c9db4e172da696285b585af452c70b55709 Mon Sep 17 00:00:00 2001
From: Ste Vaidis <ste.vaidis@gmail.com>
Date: Tue, 7 Jan 2025 13:10:14 +0200
Subject: [PATCH] Update OAuth2-Backend-Approach.md

---
 OAuth2-Backend-Approach.md | 100 +++++++++++++------------------------
 1 file changed, 35 insertions(+), 65 deletions(-)

diff --git a/OAuth2-Backend-Approach.md b/OAuth2-Backend-Approach.md
index 7f9b9db..27ea843 100644
--- a/OAuth2-Backend-Approach.md
+++ b/OAuth2-Backend-Approach.md
@@ -7,13 +7,14 @@ A way for the `user` to tell `google` to give an access to `xorismesiti.gr` app
 ### OAuth2 Frontend/Backend Flow:
 
 |  When | What                     | How                                              |
-|-------|--------------------------|:------------------------------------------------:|
-| 1     | Get Code                 | Front ⇢ Google ⇢ Front                           |  
-| 2     | Exchange Code with Token | Front ⇢ Back ⇢ Google ⇢ Back ⇢ Front             |
-| 4     | Use Token                | Front ⇢ Back ⇢ Google ⇢ Back ⇢ Front             |
+|-------|--------------------------|--------------------------------------------------|
+| 1     | Get Code                 | `          Front  ⇢  Google  ⇢  Back            `|  
+| 2     | Exchange Code with Token | `           Back  ⇢  Google  ⇢  Back  ⇢  Front  `|
+| 4     | Use Token                | ` Front  ⇢  Back  ⇢  Google  ⇢  Back  ⇢  Front  `|
 
 <br>
 
+
 ### OAuth2 Frontend/Backend Flow Details:
 
 1. Get Code
@@ -39,72 +40,20 @@ A way for the `user` to tell `google` to give an access to `xorismesiti.gr` app
 
 
 
+# 1. Get Code
 
-
-
-
-
-### OAuth2 Standar Flow:
-
-1. **User** clicks button "Login with Google" on your platform `xorismesiti.gr`
-2. **Authorization Request**: Button redirects user to Google's authorization endpoint `accounts.google.com/o/oauth2`
-3. **User Login and Consent**: User login to Google and grants permissions.
-4. **Authorization Code Response**: Google redirects user back to your app `xorismesiti.gr/callback` with an authorization `code`.
-5. **Access Token Request**: App exchanges the authorization `code` for an `access_token`.
-6. **Access Protected Resources**: App uses the `access_token` to fetch the user's Google profile and email from `googleapis.com/oauth2`
-7. **Token Refresh** (Optional): If the `access_token` expires, app uses the `refresh token` to get a new `access_token`.
-
-<br><br><br>
-
-### OAuth2 Frontend/Backend Flow:
-
-**Frontend**
-1. **Redirect** the user to Google's OAuth authorization endpoint `accounts.google.com/o/oauth2`
-2. **Get** the authorization `code` after Google redirects back to the frontend `xorismesiti.gr/callback`
-3. **Send** the authorization `code` to the backend for `token` exchange.
-
-**Backend**
-1. **exchange** the authorization `code` for an `access_token` and `refresh token`
-2. **fetch** user profile data from from `googleapis.com/oauth2` using the `access_token` 
-3. **Store** the `tokens` securely in session (front) or a database (back)
-4. **Refresh** the `access_token` if it expires
-
-<br><br><br>
-
-
-
-
-
-# 1. [Frontend] Request Authorization code
-
-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).
-3. Google will redirect the user back to your redirect_uri `https://xorismesiti.gr/callback` with an authorization code `?code=`
-
-*Security: the state string should be validated upon receiving the response from Google, as it ensures that the response corresponds to the request.*
-
-<details>
-<summary><h3>Frontend HTTP GET Request to Google</h3></summary>
+### Front **GET** to Google
 
 ```sh
 GET https://accounts.google.com/o/oauth2/v2/auth?
-    response_type=code&
-    client_id=ABC34JHS9D&
-    redirect_uri=https://xorismesiti.gr/callback&
-    scope=email%20profile&
-    state=xyz123
+    response_type=code&                            # This indicates you're using the "authorization code" flow.
+    client_id=ABC34JHS9D&                          # Your Google API client ID created on the google API console.
+    redirect_uri=https://xorismesiti.gr/callback&  # The URI Google will redirect to after the user consents.
+    scope=email%20profile&                         # The permissions you're requesting (e.g., email, profile).
+    state=xyz123                                   # A random string to protect against CSRF attacks.
 ```
 
-- `response_type=code`: This indicates you're using the "authorization code" flow.
-- `client_id`: Your Google API client ID. Created by the developers of the `xorismesiti.gr` on the google API console.
-- `redirect_uri`: The URI Google will redirect to after the user consents.
-- `scope`: The permissions you're requesting (e.g., email, profile).
-- `state`: A random string to protect against CSRF attacks.
-
-</details>
-
-<details>
-<summary><h3>Google HTTP Response to Frontend </h3></summary>
+### Google **302** to Front
 
 ```bash
 HTTP/1.1 302 Found
@@ -113,7 +62,28 @@ Content-Type: text/html; charset=UTF-8
 Content-Length: 0
 ```
 
-</details>
+*Security: the state string should be validated upon receiving the response from Google, as it ensures that the response corresponds to the request.*
+
+2. Exchange Code with Token
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
 
 <details>
 <summary><h3>Frontend Code</h3></summary>