From a516fb899be07efbd6f96269345555053b5a2790 Mon Sep 17 00:00:00 2001
From: Ste Vaidis <ste.vaidis@gmail.com>
Date: Wed, 8 Jan 2025 10:39:17 +0200
Subject: [PATCH] Update OAuth2-Backend-Approach.md

---
 OAuth2-Backend-Approach.md | 34 +++++++++++++++++-----------------
 1 file changed, 17 insertions(+), 17 deletions(-)

diff --git a/OAuth2-Backend-Approach.md b/OAuth2-Backend-Approach.md
index e9996db..9ae9cf4 100644
--- a/OAuth2-Backend-Approach.md
+++ b/OAuth2-Backend-Approach.md
@@ -17,18 +17,18 @@ A way for the `user` to tell `google` to give an access to `myapp` app
 
 ### Details:
 
-1. Get Authorization Code
+1. ⭐️ Get Authorization Code
 
     1. Frontend **Navigate** to Google URL with a callback url
     2. Google **Redirect** to Backend's callback url with the authorization code
 
-2. Exchange Code with Token
+2. ⭐️ Exchange Code with Token
 
     1. Backend **POST** the `code` to Google
     2. Google **Response** to Backend with an `access_token` and a `refresh token`
     3. Backend **Redirect** to Frontend with the `access_token` in a `cookie`
 
-3. Use Token
+3. ⭐️ Use Token
 
     1. Frontend **GET** profile data from Backend using the `cookie`
     2. Backend **GET** profile data from Google using the `access_token`
@@ -44,12 +44,12 @@ A way for the `user` to tell `google` to give an access to `myapp` app
 
 
 
-# 1. Get Code
+# 1. ⭐️ Get Code
 
 1. Frontend **Navigate** to Google `https://accounts.google.com/o/oauth2` with a callback url
 2. Google **Redirect** to Backend callback url `https://myapp/api/auth/callback` with authorization code
 
-### 1. Front **GET** to Google
+### 1. ⚙️ Front **GET** to Google
 
 ```sh
 GET https://accounts.google.com/o/oauth2/v2/auth?
@@ -60,7 +60,7 @@ GET https://accounts.google.com/o/oauth2/v2/auth?
     state=xyz123                                    # A random string to protect against CSRF attacks.
 ```
 
-### 2. Google **302** to Back
+### 2. ⚙️ Google **302** to Back
 
 ```bash
 HTTP/1.1 302 Found
@@ -80,13 +80,13 @@ Content-Length: 0
 
 
 
-# 2. Exchange Code with Token
+# 2. ⭐️ Exchange Code with Token
 
 1. Backend **POST** the `code` to Google `https://oauth2.googleapis.com/token`
 2. Google **Response** to Backend with an `access_token` and a `refresh token`
 3. Backend **Redirect** to Frontend with the `access_token` in a `cookie`
 
-### 1. Backend **POST** the code to Google
+### 1. ⚙️ Backend **POST** the code to Google
 
 ```sh
 POST https://oauth2.googleapis.com/token
@@ -99,7 +99,7 @@ client_secret=PASS1234&
 redirect_uri=https://myapp/callback
 ```
 
-### 2. Google **Response** to Backend
+### 2. ⚙️ Google **Response** to Backend
 
 ```js
 {
@@ -111,7 +111,7 @@ redirect_uri=https://myapp/callback
 }
 ```
 
-### 3. Backend **Redirect** to Frontend success page
+### 3. ⚙️ Backend **Redirect** to Frontend success page
 
 This redirect will place a **cookie** in the browser that contains the **access token**
 
@@ -123,7 +123,7 @@ Set-Cookie: access_token=ya29.a0AfH6SMC8Op6zkVX-VoA; HttpOnly; Secure; Max-Age=3
 
 <br><br>
 
-### Backend code
+### 💾 Backend code
 
 Implements the endpoint /auth/google/callback
 
@@ -197,9 +197,9 @@ The `redirect_uri` in the token exchange `POST` request needs to match EXACTLY t
 
 
 
-# 3. Use Token
+# 3. ⭐️ Use Token
 
-### 1. Frontend **GET** profile data from Backend
+### 1. ⚙️ Frontend **GET** profile data from Backend
 
 ```bash
 curl -X GET https://myapp/api/auth/profile \
@@ -207,7 +207,7 @@ curl -X GET https://myapp/api/auth/profile \
   -H "Accept: application/json"
 ```
 
-### 2. Backend **GET** profile data from Google
+### 2. ⚙️ Backend **GET** profile data from Google
 
 ```bash
 curl -X GET "https://www.googleapis.com/oauth2/v3/userinfo" \
@@ -215,7 +215,7 @@ curl -X GET "https://www.googleapis.com/oauth2/v3/userinfo" \
   -H "Accept: application/json"
 ```
 
-### 3. Google **response** to Backend with profile data
+### 3. ⚙️ Google **response** to Backend with profile data
 
 ```
 {
@@ -243,7 +243,7 @@ curl -X GET "https://www.googleapis.com/oauth2/v3/userinfo" \
 ```
 <br><br><br>
 
-### Frontend Dashboard Code
+### 💾 Frontend Dashboard Code
 
 ```js
 import { useEffect, useState } from 'react';
@@ -301,7 +301,7 @@ function DashboardPage() {
 
 <br><br><br>
 
-### Backend Dashboard
+### 💾 Backend Dashboard
 
 If the frontend token is valid, the backend will response to the request.