Update OAuth2-Front-Approach.md

OAuth2-Front-Approach.md

@@ -143,6 +143,49 @@ Content-Type: application/json
 
 *Security: The backend never expose the client_secret to the frontend. This step should always be handled on the backend.*
 
+<br>
+
+<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>
+
 <details>
 <summary><h3>HTTP POST Request from Backend to Google</h3></summary>
 
@@ -233,50 +276,6 @@ app.listen(3000, () => {
 
 </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>