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
-### 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" \
```
-### Frontend Dashboard Code
+### 💾 Frontend Dashboard Code
```js
import { useEffect, useState } from 'react';
@@ -301,7 +301,7 @@ function DashboardPage() {
-### Backend Dashboard
+### 💾 Backend Dashboard
If the frontend token is valid, the backend will response to the request.