Update OAuth2.md

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. User grants permission
-
+2. Google redirect the user to the `redirect_uri` you specified in the previous request (`https://xorismesiti.gr/api/auth/callback`)
-1. Once the user grants permission,
+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.
-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.
 
 <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&