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

---
 OAuth2-Front-Approach.md | 136 ++++++++++++++++++++-------------------
 1 file changed, 70 insertions(+), 66 deletions(-)

diff --git a/OAuth2-Front-Approach.md b/OAuth2-Front-Approach.md
index 7900726..b401b65 100644
--- a/OAuth2-Front-Approach.md
+++ b/OAuth2-Front-Approach.md
@@ -102,10 +102,12 @@ const loginWithGoogle = () => {
 
 
 
-# 2. Use Authorization Code
+# 2. Exchange Code with Token
 
 ### Frontend ⇢ Backend ⇢ Google ⇢ Backend ⇢ Frontend
 
+#### 2.1 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`
 
 <details>
@@ -122,73 +124,14 @@ Content-Type: application/json
 
 </details>
 
-#### Step 3 takes place here, Backend exchanges the Code with the Tokens
-
-<details>
-<summary><h3>Backend HTTP Response to Frontend</h3></summary>
-
-```json
-{
-  "access_token": "ya29.a0AfH6SMC8Op6zXZkHi2XITkDoOVzYXt3hTY6sny54UlWlxrnKlX5Xv78is7BEHekVX-VoA",
-  "token_type": "Bearer",
-  "expires_in": 3600,
-  "refresh_token": "1//04d5XHqmn6Hdy3wTf5OYDP1SyBa74zEFURjddQ2A1cFw78PY13pQyWhlD2A6XhDQtKlrjAqU4kS3vGdMvckw",
-  "scope": "email profile"
-}
-```
-
-</details>
-
-<details>
-<summary><h3>Frontend Code</h3></summary>
-
-```js
-// On the backend callback URL, the frontend receives the authorization code
-import { useEffect } from 'react';
-import { useRouter } from 'next/router';
-
-const Callback = () => {
-  const router = useRouter();
-  
-  useEffect(() => {
-    const { code, state } = router.query;
-    
-    // Send the authorization code to the backend for token exchange
-    fetch('/api/auth/exchange-token', {
-      method: 'POST',
-      body: JSON.stringify({ code }),
-      headers: {
-        'Content-Type': 'application/json',
-      },
-    })
-    .then(response => response.json())
-    .then(data => {
-      // Handle success (store token, update UI, etc.)
-      console.log(data);  // Typically, you'll store the access token here or manage the user session.
-      router.push('/dashboard');  // Redirect the user to their dashboard or home page.
-    })
-    .catch(error => {
-      console.error('Error exchanging token:', error);
-    });
-  }, []);
-  
-  return <div>Loading...</div>;
-};
-
-export default Callback;
-```
-
-</details>
-
-<br><br><br>
 
 
 
+<br><br>
 
 
-# 3. Exchange Code with Token 
 
-### Frontend ⇢ Backend ⇢ Google ⇢ Backend ⇢ Frontend
+#### 2.2 Backend
 
 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,12 +230,73 @@ app.listen(3000, () => {
 
 </details>
 
+
+<details>
+<summary><h3>Backend HTTP Response to Frontend</h3></summary>
+
+```json
+{
+  "access_token": "ya29.a0AfH6SMC8Op6zXZkHi2XITkDoOVzYXt3hTY6sny54UlWlxrnKlX5Xv78is7BEHekVX-VoA",
+  "token_type": "Bearer",
+  "expires_in": 3600,
+  "refresh_token": "1//04d5XHqmn6Hdy3wTf5OYDP1SyBa74zEFURjddQ2A1cFw78PY13pQyWhlD2A6XhDQtKlrjAqU4kS3vGdMvckw",
+  "scope": "email profile"
+}
+```
+
+</details>
+
+<details>
+<summary><h3>Frontend Code</h3></summary>
+
+```js
+// On the backend callback URL, the frontend receives the authorization code
+import { useEffect } from 'react';
+import { useRouter } from 'next/router';
+
+const Callback = () => {
+  const router = useRouter();
+  
+  useEffect(() => {
+    const { code, state } = router.query;
+    
+    // Send the authorization code to the backend for token exchange
+    fetch('/api/auth/exchange-token', {
+      method: 'POST',
+      body: JSON.stringify({ code }),
+      headers: {
+        'Content-Type': 'application/json',
+      },
+    })
+    .then(response => response.json())
+    .then(data => {
+      // Handle success (store token, update UI, etc.)
+      console.log(data);  // Typically, you'll store the access token here or manage the user session.
+      router.push('/dashboard');  // Redirect the user to their dashboard or home page.
+    })
+    .catch(error => {
+      console.error('Error exchanging token:', error);
+    });
+  }, []);
+  
+  return <div>Loading...</div>;
+};
+
+export default Callback;
+```
+
+</details>
+
+<br><br>
+
+#### 2.3 Front
+
+
+
+
+
 <br><br><br>
 
-
-
-
-
 # 4. Use the Token
 
 ### Frontend ⇢ Google ⇢ Frontend