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 12:26:34 +02:00
parent 02aa0aeeff
commit 5b8f45b7c4
1 changed files with 49 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

63
OAuth2.md
View File

@ -2,6 +2,10 @@
A way for the `user` to tell `google` to give an access token to `xorismesiti.gr` app
<br><br><br>
### OAuth2 Standar Flow:
1. **User clicks** "Login with Google" on your platform `xorismesiti.gr`
@ -25,13 +29,12 @@ A way for the `user` to tell `google` to give an access token to `xorismesiti.gr
3. **Store** the `tokens` securely (in session or a database).
4. **Refresh** the `access_token` if it expires.
<br><br><br>
# 1. [Frontend] Request Authorization code
Redirect the user to Google's OAuth Authorization Endpoint
1. The use clicks a "Login with Google" button with a URL to Google's OAuth 2.0 authorization endpoint and redirects the user there.
2. After this 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 specified redirect_uri with an authorization code.
@ -75,16 +78,15 @@ const loginWithGoogle = () => {
</details>
<br><br><br>
# 2. [Frontend] Receive Authorization Code
And send it to the Backend
1. Once the user grants permission,
2. Google will redirect the user to the `redirect_uri` you specified in the previous step (`https://xorismesiti.gr/api/auth/callback`)
The frontend must not directly exchange the `code` for an `access_token`. Instead, it sends the `code` to the backend via an API request.
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.
<details>
<summary><h3>Frontend Code</h3></summary>
@ -127,7 +129,7 @@ export default Callback;
</details>
<br><br><br>
@ -213,17 +215,46 @@ app.listen(3000, () => {
</details>
<br><br><br>
# 4. [Frontend] Use the Access Token
Once the backend exchanges the `code` for the `access_token`,
the frontend can use it to make authenticated requests to the backend or Google APIs
<details>
<summary><h3>Example Frontend Code:</h3></summary>
```js
// After receiving the token, store it in the frontend (e.g., localStorage or context)
localStorage.setItem('access_token', response.access_token);
// Use it to make authenticated API requests to the backend
fetch('/api/user-profile', {
headers: {
'Authorization': `Bearer ${localStorage.getItem('access_token')}`,
},
})
.then(response => response.json())
.then(data => {
// Handle user data
})
.catch(error => {
console.error('Error fetching user profile:', error);
});
```
</details>
# 5. [Backend] Fetch User Data (Optional)
# 5. [Backend] Fetch User Data
If you want to fetch the user profile data (e.g., from Google), your backend can use the `access_token` to request it from Google’s user info endpoint.
<details>
<summary><h3>Example Backend Code:</h3></summary>
@ -249,9 +280,7 @@ app.get('/api/user-profile', async (req, res) => {
</details>
<br><br><br>
@ -288,6 +317,12 @@ app.post('/api/auth/refresh-token', async (req, res) => {
```sh
GET https://xorismesiti.gr/callback?
code=4/0AX4XfWgNmGZVbV7Kdr8Q9yVyzIYBnbbBdLfX39ZaE8m0w8zT8jKRLl7w-uT8k7WiyLg0Q&