Update OAuth2-Backend-Approach.md

This commit is contained in:
Ste Vaidis 2025-01-08 10:05:09 +02:00
parent 99d9ead65a
commit 47bfbb6316

View File

@ -46,8 +46,8 @@ A way for the `user` to tell `google` to give an access to `myapp` app
# 1. Get Code # 1. Get Code
1. Frontend **GET** to Google `https://accounts.google.com/o/oauth2` with callback url 1. Frontend **Navigate** to Google `https://accounts.google.com/o/oauth2` with a callback url
2. Google **302** to Backend `https://myapp/api/auth/callback` with authorization code 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
@ -83,10 +83,10 @@ 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` 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` 2. Google **Response** to Backend with an `access_token` and a `refresh token`
3. Backend **response** to Frontend with the `access_token` in a `cookie` 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 ```sh
POST https://oauth2.googleapis.com/token POST https://oauth2.googleapis.com/token
@ -99,8 +99,7 @@ client_secret=PASS1234&
redirect_uri=https://myapp/callback redirect_uri=https://myapp/callback
``` ```
### 2. Google **response** to Backend ### 2. Google **Response** to Backend
```js ```js
{ {
@ -114,7 +113,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 This redirect will place a **cookie** in the browser that contains the **access token**
```bash ```bash
HTTP/1.1 302 Found HTTP/1.1 302 Found
@ -124,7 +123,6 @@ Set-Cookie: access_token=ya29.a0AfH6SMC8Op6zkVX-VoA; HttpOnly; Secure; Max-Age=3
<details> <details>
<summary> <summary>
<h4>Backend code</h4> <h4>Backend code</h4>
<br><br> <br><br>
Implements the endpoint /auth/google/callback Implements the endpoint /auth/google/callback
@ -133,7 +131,6 @@ Set-Cookie: access_token=ya29.a0AfH6SMC8Op6zkVX-VoA; HttpOnly; Secure; Max-Age=3
<p>2. POST send the authorization code to https://oauth2.googleapis.com/token</p><br> <p>2. POST send the authorization code to https://oauth2.googleapis.com/token</p><br>
<p>3. POST response the access & refresh tokens</p><br> <p>3. POST response the access & refresh tokens</p><br>
<p>4. Redirect to Fronend success page with a cookie contains the access token</p><br> <p>4. Redirect to Fronend success page with a cookie contains the access token</p><br>
</summary> </summary>
<br><br> <br><br>
@ -187,6 +184,8 @@ app.get('/callback', async (req, res) => {
}); });
``` ```
The `redirect_uri` in the token exchange `POST` request needs to match EXACTLY the same `redirect_uri` that was used in the initial authorization request to Google. It's part of OAuth2 security verification.
</details> </details>
<br><br><br> <br><br><br>