From 49c05063b2677c91ee49666b050ef0ee5732dc60 Mon Sep 17 00:00:00 2001 From: Ste Vaidis Date: Sun, 15 Dec 2024 14:39:52 +0200 Subject: [PATCH] Update OAuth2.md --- OAuth2.md | 27 +++++++++++++-------------- 1 file changed, 13 insertions(+), 14 deletions(-) diff --git a/OAuth2.md b/OAuth2.md index b8edfe3..857580f 100644 --- a/OAuth2.md +++ b/OAuth2.md @@ -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. 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). 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 -1. User grants permission -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. - +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`

Frontend HTTP POST Request to Backend

@@ -113,7 +110,7 @@ POST https://xorismesiti.gr/api/auth/exchange-token Content-Type: application/json { - "code": "authorization-code-from-google" + "code": "AAAABCX4XfWgyVyziyLg0QHHHHH" } ``` @@ -183,10 +180,12 @@ export default Callback; # 3. [Backend] Exchange Code with Token -1. The backend receives the authorization `code` from the frontend, -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` -3. The backend ensures to never expose the client_secret to the frontend. This step should always be handled on the backend. -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. +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 **sends** `code` to Google (makes a `POST` request to Google token endpoint to send the authorization `code`) +3. The Google API responses to POST with tokens `access_token` and `refresh_token` +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.*

Backend HTTP POST Request to Google

@@ -207,16 +206,16 @@ POST https://oauth2.googleapis.com/token Content-Type: application/x-www-form-urlencoded grant_type=authorization_code& -code=4/0AX4XfWgNmGZVbV7Kdr8Q9yVyzIYBnbbBdLfX39ZaE8m0w8zT8jKRLl7w-uT8k7WiyLg0Q& +code=AAAABCX4XfWgyVyziyLg0QHHHHH& redirect_uri=https://xorismesiti.gr/callback& -client_id=YOUR_GOOGLE_CLIENT_ID& -client_secret=YOUR_GOOGLE_CLIENT_SECRET +client_id=ABC34JHS9D& +client_secret=PASS1234 ```
-

Google HTTP Response Backend and Backend response to Frontend

+

Google HTTP Response Backend

```json {