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:27:02 +02:00
parent f8e2ab65db
commit c4315ae4e0
1 changed files with 15 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
OAuth2-Front-Approach.md
View File

@ -35,7 +35,9 @@ A way for the `user` to tell `google` to give an access token to `xorismesiti.gr
# 1. [Frontend] Request Authorization code # 1. Request Authorization code
### Frontend ⇢ Google ⇢ Frontend
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).
@ -100,7 +102,9 @@ const loginWithGoogle = () => {
# 2. [Frontend] Receive Authorization Code # 2. Use Authorization Code
### Frontend ⇢ Backend ⇢ Google ⇢ Backend ⇢ 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`, in order the backend to exchange the `code` for an `access_token` and optionally an `refresh_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`, in order the backend to exchange the `code` for an `access_token` and optionally an `refresh_token`
@ -182,7 +186,9 @@ export default Callback;
# 3. [Backend] Exchange Code with Token # 3. Exchange Code with Token
### Frontend ⇢ Backend ⇢ Google ⇢ Backend ⇢ Frontend
1. The backend **receives** the authorization `code` form frontend (Frontend POST at `xorismesiti.gr/api/auth/exchange-token`) 1. The backend **receives** the authorization `code` form frontend (Frontend POST at `xorismesiti.gr/api/auth/exchange-token`)
2. The backend **POST** Authorization `code` to Google API 2. The backend **POST** Authorization `code` to Google API
@ -287,7 +293,9 @@ app.listen(3000, () => {
# 4. [Frontend] Use the Token # 4. Use the Token
### Frontend ⇢ Google ⇢ Frontend
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
@ -363,7 +371,9 @@ const fetchUserData = async (accessToken) => {
<br><br><br> <br><br><br>
# 5. [Frontend] Refresh the Token # 5. Refresh the Token
### Frontend ⇢ Backend ⇢ Google ⇢ Backend ⇢ Frontend
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