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

Update OAuth2.md

Browse Source
This commit is contained in:
Ste Vaidis 2024-12-15 14:39:52 +02:00
parent d2cd1ba068
commit 49c05063b2
1 changed files with 13 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
OAuth2.md
View File

@ -37,7 +37,7 @@ A way for the `user` to tell `google` to give an access token to `xorismesiti.gr
# 1. [Frontend] Request Authorization code # 1. [Frontend] Request Authorization code
1. A link button "Login with Google" redirects the user to the Google's OAuth 2.0 authorization endpoint. 1. A button "Login with Google" redirects the user to the Google's authorization endpoint `accounts.google.com/o/oauth2/v2/auth`
2. After the redirection, the user will log in to Google and grant permissions (if they haven’t already). 2. After the redirection, the user will log in to Google and grant permissions (if they haven’t already).
3. Google will redirect the user back to your redirect_uri `https://xorismesiti.gr/callback` with an authorization code `?code=` 3. Google will redirect the user back to your redirect_uri `https://xorismesiti.gr/callback` with an authorization code `?code=`
@ -100,10 +100,7 @@ const loginWithGoogle = () => {
# 2. [Frontend] Receive Authorization Code # 2. [Frontend] Receive Authorization Code
1. User grants permission Now that the frontend have the Authorization Code `https://xorismesiti.gr/api/auth/callback?code=AAAABCX4XfWgyVyziyLg0QHHHHH` it can send it to the backend with POST to `xorismesiti.gr/api/auth/exchange-token`, in order the backend to exchange the `code` for an `access_token` and optionally an `refresh_token`
2. Google redirect the user to the `redirect_uri` you specified in the previous request (`https://xorismesiti.gr/api/auth/callback`)
3. The frontend must not directly exchange the `code` for an `access_token`. Instead, it sends the `code` to the backend via an API request.
<details> <details>
<summary><h3>Frontend HTTP POST Request to Backend</h3></summary> <summary><h3>Frontend HTTP POST Request to Backend</h3></summary>
@ -113,7 +110,7 @@ POST https://xorismesiti.gr/api/auth/exchange-token
Content-Type: application/json Content-Type: application/json
{ {
"code": "authorization-code-from-google" "code": "AAAABCX4XfWgyVyziyLg0QHHHHH"
} }
``` ```
@ -183,10 +180,12 @@ export default Callback;
# 3. [Backend] Exchange Code with Token # 3. [Backend] Exchange Code with Token
1. The backend receives the authorization `code` from the frontend, 1. The backend **receives** the `code` from the frontend (a POST on `xorismesiti.gr/api/auth/exchange-token` with the authorization `code`)
2. The backend makes a `POST` request to Google token endpoint, to exchange the authorization `code` for the `access_token` and optionally a `refresh token` 2. The backend **sends** `code` to Google (makes a `POST` request to Google token endpoint to send the authorization `code`)
3. The backend ensures to never expose the client_secret to the frontend. This step should always be handled on the backend. 3. The Google API responses to POST with tokens `access_token` and `refresh_token`
4. The backend will exchange the `code` for an `access_token` and `refresh_token`, which are sent back to the frontend or stored securely for subsequent API calls. 4. The backend **sends** tokens to frontend (at POST respond on `xorismesiti.gr/api/auth/exchange-token`)
*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>Backend HTTP POST Request to Google</h3></summary>
@ -207,16 +206,16 @@ POST https://oauth2.googleapis.com/token
Content-Type: application/x-www-form-urlencoded Content-Type: application/x-www-form-urlencoded
grant_type=authorization_code& grant_type=authorization_code&
code=4/0AX4XfWgNmGZVbV7Kdr8Q9yVyzIYBnbbBdLfX39ZaE8m0w8zT8jKRLl7w-uT8k7WiyLg0Q& code=AAAABCX4XfWgyVyziyLg0QHHHHH&
redirect_uri=https://xorismesiti.gr/callback& redirect_uri=https://xorismesiti.gr/callback&
client_id=YOUR_GOOGLE_CLIENT_ID& client_id=ABC34JHS9D&
client_secret=YOUR_GOOGLE_CLIENT_SECRET client_secret=PASS1234
``` ```
</details> </details>
<details> <details>
<summary><h3>Google HTTP Response Backend and Backend response to Frontend</h3></summary> <summary><h3>Google HTTP Response Backend</h3></summary>
```json ```json
{ {