stevaidis/dev
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Update OAuth2-Front-Approach.md

Browse Source
This commit is contained in:
Ste Vaidis 2024-12-15 18:50:20 +02:00
parent 38a747d044
commit 393a22345d
1 changed files with 11 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
OAuth2-Front-Approach.md
View File

@ -50,7 +50,7 @@ A way for the `user` to tell `google` to give an access token to `xorismesiti.gr
<br> <br>
<details> <details>
<summary><h3>Frontend HTTP GET Request to Google</h3></summary> <summary><h3>HTTP GET Request from Frontend to Google</h3></summary>
```sh ```sh
GET https://accounts.google.com/o/oauth2/v2/auth? GET https://accounts.google.com/o/oauth2/v2/auth?
@ -70,7 +70,7 @@ GET https://accounts.google.com/o/oauth2/v2/auth?
</details> </details>
<details> <details>
<summary><h3>Google HTTP Response to Frontend </h3></summary> <summary><h3>HTTP GET Response from Google to Frontend </h3></summary>
```bash ```bash
HTTP/1.1 302 Found HTTP/1.1 302 Found
@ -117,7 +117,7 @@ const loginWithGoogle = () => {
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` 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`
<details> <details>
<summary><h3>Frontend HTTP POST Request to Backend</h3></summary> <summary><h3>HTTP POST Request from Frontend to Backend</h3></summary>
```bash ```bash
POST https://xorismesiti.gr/api/auth/exchange-token POST https://xorismesiti.gr/api/auth/exchange-token
@ -144,7 +144,7 @@ Content-Type: application/json
*Security: The backend never expose the client_secret to the frontend. This step should always be handled on the backend.* *Security: The backend never expose the client_secret to the frontend. This step should always be handled on the backend.*
<details> <details>
<summary><h3>Backend HTTP POST Request to Google</h3></summary> <summary><h3>HTTP POST Request from Backend to Google</h3></summary>
```sh ```sh
POST https://oauth2.googleapis.com/token POST https://oauth2.googleapis.com/token
@ -171,7 +171,7 @@ client_secret=PASS1234
</details> </details>
<details> <details>
<summary><h3>Google HTTP Response Backend</h3></summary> <summary><h3>HTTP POST Response from Google to Backend</h3></summary>
```json ```json
{ {
@ -288,7 +288,7 @@ export default Callback;
The frontend gets the tokens from the backend response, and saves them somewhere secure. Now its ready to use the tokens to get the user data from Google The frontend gets the tokens from the backend response, and saves them somewhere secure. Now its ready to use the tokens to get the user data from Google
<details> <details>
<summary><h3>Backend HTTP Response to Frontend</h3></summary> <summary><h3>HTTP Response from Backend to Frontend</h3></summary>
```json ```json
{ {
@ -318,7 +318,7 @@ The frontend gets the tokens from the backend response, and saves them somewhere
3. Make authenticated requests directly to Google API 3. Make authenticated requests directly to Google API
<details> <details>
<summary><h3>Frontend HTTP GET Request to Backend</h3></summary> <summary><h3>HTTP GET Request from Frontend to Backend</h3></summary>
```bash ```bash
GET https://www.googleapis.com/oauth2/v3/userinfo GET https://www.googleapis.com/oauth2/v3/userinfo
@ -328,7 +328,7 @@ Authorization: Bearer ACCESSTOKEN6zXZkHi2XITkDoOVACCESSTOKEN
</details> </details>
<details> <details>
<summary><h3>Backedn HTTP Response to Frontend</h3></summary> <summary><h3>HTTP GET Response from Backend to Frontend</h3></summary>
```json ```json
{ {
@ -396,7 +396,7 @@ const fetchUserData = async (accessToken) => {
If the access token is expired, the frontend will receive an error response from Google when attempting to fetch user data If the access token is expired, the frontend will receive an error response from Google when attempting to fetch user data
<details> <details>
<summary><h3>Frontend HTTP GET Request to Google</h3></summary> <summary><h3>HTTP GET Request from Frontend to Google</h3></summary>
```bash ```bash
GET https://www.googleapis.com/oauth2/v3/userinfo GET https://www.googleapis.com/oauth2/v3/userinfo
@ -406,7 +406,7 @@ Authorization: Bearer ACCESSTOKEN6zXZkHi2XITkDoOVACCESSTOKEN
</details> </details>
<details> <details>
<summary><h3>Google HTTP Response to Frontend</h3></summary> <summary><h3>HTTP GET Response from Google to Frontend</h3></summary>
```json ```json
{ {
@ -419,7 +419,7 @@ Authorization: Bearer ACCESSTOKEN6zXZkHi2XITkDoOVACCESSTOKEN
<details> <details>
<summary><h3>Frontend HTTP POST Refresh token to Backend</h3></summary> <summary><h3>HTTP POST Refresh token from Frontend to Backend</h3></summary>
```bash ```bash