diff --git a/OAuth2-Backend-Approach.md b/OAuth2-Backend-Approach.md index 9ae9cf4..ad7ecea 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** @@ -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 ``` {