From 5b8f45b7c45aab2c08e47f27472bddc642036f5e Mon Sep 17 00:00:00 2001
From: Ste Vaidis <ste.vaidis@gmail.com>
Date: Sun, 15 Dec 2024 12:26:34 +0200
Subject: [PATCH] Update OAuth2.md

---
 OAuth2.md | 63 ++++++++++++++++++++++++++++++++++++++++++-------------
 1 file changed, 49 insertions(+), 14 deletions(-)

diff --git a/OAuth2.md b/OAuth2.md
index 3cfc585..1015254 100644
--- a/OAuth2.md
+++ b/OAuth2.md
@@ -2,6 +2,10 @@
 
 A way for the `user` to tell `google` to give an access token to `xorismesiti.gr` app
 
+<br><br><br>
+
+
+
 ### OAuth2 Standar Flow:
 
 1. **User clicks** "Login with Google" on your platform `xorismesiti.gr`
@@ -25,13 +29,12 @@ A way for the `user` to tell `google` to give an access token to `xorismesiti.gr
 3. **Store** the `tokens` securely (in session or a database).
 4. **Refresh** the `access_token` if it expires.
 
+<br><br><br>
 
 
 
 # 1. [Frontend] Request Authorization code
 
-Redirect the user to Google's OAuth Authorization Endpoint
-
 1. The use clicks a "Login with Google" button with a URL to Google's OAuth 2.0 authorization endpoint and redirects the user there.
 2. After this 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 specified redirect_uri with an authorization code.
@@ -75,16 +78,15 @@ const loginWithGoogle = () => {
 
 </details>
 
+<br><br><br>
+
 
 
 # 2. [Frontend] Receive Authorization Code
 
-And send it to the Backend
-
-1. Once the user grants permission,
-2. Google will redirect the user to the `redirect_uri` you specified in the previous step (`https://xorismesiti.gr/api/auth/callback`)
-
-The frontend must not directly exchange the `code` for an `access_token`. Instead, it sends the `code` to the backend via an API request.
+1. User grants permission
+2. Google redirect the user to the `redirect_uri` you specified in the previous request (`https://xorismesiti.gr/api/auth/callback`)
+3. The frontend must not directly exchange the `code` for an `access_token`. Instead, it sends the `code` to the backend via an API request.
 
 <details>
 <summary><h3>Frontend Code</h3></summary>
@@ -127,7 +129,7 @@ export default Callback;
 
 </details>
 
-
+<br><br><br>
 
 
 
@@ -213,17 +215,46 @@ app.listen(3000, () => {
 
 </details>
 
+<br><br><br>
 
 
 
+# 4. [Frontend] Use the Access Token
+
+Once the backend exchanges the `code` for the `access_token`, 
+
+the frontend can use it to make authenticated requests to the backend or Google APIs
+
+<details>
+<summary><h3>Example Frontend Code:</h3></summary>
+
+```js
+// After receiving the token, store it in the frontend (e.g., localStorage or context)
+localStorage.setItem('access_token', response.access_token);
+
+// Use it to make authenticated API requests to the backend
+fetch('/api/user-profile', {
+  headers: {
+    'Authorization': `Bearer ${localStorage.getItem('access_token')}`,
+  },
+})
+  .then(response => response.json())
+  .then(data => {
+    // Handle user data
+  })
+  .catch(error => {
+    console.error('Error fetching user profile:', error);
+  });
+```
+
+</details>
 
 
 
-# 5. [Backend] Fetch User Data (Optional)
+# 5. [Backend] Fetch User Data
 
 If you want to fetch the user profile data (e.g., from Google), your backend can use the `access_token` to request it from Google’s user info endpoint.
 
-
 <details>
 <summary><h3>Example Backend Code:</h3></summary>
 
@@ -249,9 +280,7 @@ app.get('/api/user-profile', async (req, res) => {
 
 </details>
 
-
-
-
+<br><br><br>
 
 
 
@@ -288,6 +317,12 @@ app.post('/api/auth/refresh-token', async (req, res) => {
 
 
 
+
+
+
+
+
+
 ```sh
 GET https://xorismesiti.gr/callback?
     code=4/0AX4XfWgNmGZVbV7Kdr8Q9yVyzIYBnbbBdLfX39ZaE8m0w8zT8jKRLl7w-uT8k7WiyLg0Q&