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:45:47 +02:00
parent 8fd6160666
commit 866d8daf24
1 changed files with 8 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
OAuth2-Front-Approach.md
View File

@ -39,6 +39,8 @@ A way for the `user` to tell `google` to give an access token to `xorismesiti.gr
### Frontend ⇢ Google ⇢ Frontend ### Frontend ⇢ Google ⇢ Frontend
<br>
1. A button "Login with Google" redirects the user to the Google's authorization endpoint `accounts.google.com/o/oauth2/v2/auth` 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=`
@ -106,6 +108,8 @@ const loginWithGoogle = () => {
### Frontend ⇢ Backend ⇢ Google ⇢ Backend ⇢ Frontend ### Frontend ⇢ Backend ⇢ Google ⇢ Backend ⇢ Frontend
<br>
#### 2.1 Frontend #### 2.1 Frontend
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`
@ -305,6 +309,8 @@ The frontend gets the tokens from the backend response, and saves them somewhere
### Frontend ⇢ Google ⇢ Frontend ### Frontend ⇢ Google ⇢ Frontend
<br>
1. The frontend receives the tokens from the Backend response, 1. The frontend receives the tokens from the Backend response,
2. Store them in the localStorage of the browser 2. Store them in the localStorage of the browser
3. Make authenticated requests directly to Google API 3. Make authenticated requests directly to Google API
@ -383,6 +389,8 @@ const fetchUserData = async (accessToken) => {
### Frontend ⇢ Backend ⇢ Google ⇢ Backend ⇢ Frontend ### Frontend ⇢ Backend ⇢ Google ⇢ Backend ⇢ Frontend
<br>
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>