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

Update OAuth2-Backend-Approach.md

Browse Source
This commit is contained in:
Ste Vaidis 2025-01-08 10:39:17 +02:00
parent 3a9e7b03d9
commit a516fb899b
1 changed files with 17 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
OAuth2-Backend-Approach.md
View File

@ -17,18 +17,18 @@ A way for the `user` to tell `google` to give an access to `myapp` app
### Details:
1. Get Authorization Code
1. ⭐️ Get Authorization Code
1. Frontend **Navigate** to Google URL with a callback url
2. Google **Redirect** to Backend's callback url with the authorization code
2. Exchange Code with Token
2. ⭐️ Exchange Code with Token
1. Backend **POST** the `code` to Google
2. Google **Response** to Backend with an `access_token` and a `refresh token`
3. Backend **Redirect** to Frontend with the `access_token` in a `cookie`
3. Use Token
3. ⭐️ Use Token
1. Frontend **GET** profile data from Backend using the `cookie`
2. Backend **GET** profile data from Google using the `access_token`
@ -44,12 +44,12 @@ A way for the `user` to tell `google` to give an access to `myapp` app
# 1. Get Code
# 1. ⭐️ Get Code
1. Frontend **Navigate** to Google `https://accounts.google.com/o/oauth2` with a callback url
2. Google **Redirect** to Backend callback url `https://myapp/api/auth/callback` with authorization code
### 1. Front **GET** to Google
### 1. ⚙️ Front **GET** to Google
```sh
GET https://accounts.google.com/o/oauth2/v2/auth?
@ -60,7 +60,7 @@ GET https://accounts.google.com/o/oauth2/v2/auth?
state=xyz123 # A random string to protect against CSRF attacks.
```
### 2. Google **302** to Back
### 2. ⚙️ Google **302** to Back
```bash
HTTP/1.1 302 Found
@ -80,13 +80,13 @@ Content-Length: 0
# 2. Exchange Code with Token
# 2. ⭐️ Exchange Code with Token
1. Backend **POST** the `code` to Google `https://oauth2.googleapis.com/token`
2. Google **Response** to Backend with an `access_token` and a `refresh token`
3. Backend **Redirect** to Frontend with the `access_token` in a `cookie`
### 1. Backend **POST** the code to Google
### 1. ⚙️ Backend **POST** the code to Google
```sh
POST https://oauth2.googleapis.com/token
@ -99,7 +99,7 @@ client_secret=PASS1234&
redirect_uri=https://myapp/callback
```
### 2. Google **Response** to Backend
### 2. ⚙️ Google **Response** to Backend
```js
{
@ -111,7 +111,7 @@ redirect_uri=https://myapp/callback
}
```
### 3. Backend **Redirect** to Frontend success page
### 3. ⚙️ Backend **Redirect** to Frontend success page
This redirect will place a **cookie** in the browser that contains the **access token**
@ -123,7 +123,7 @@ Set-Cookie: access_token=ya29.a0AfH6SMC8Op6zkVX-VoA; HttpOnly; Secure; Max-Age=3
<br><br>
### Backend code
### 💾 Backend code
Implements the endpoint /auth/google/callback
@ -197,9 +197,9 @@ The `redirect_uri` in the token exchange `POST` request needs to match EXACTLY t
# 3. Use Token
# 3. ⭐️ Use Token
### 1. Frontend **GET** profile data from Backend
### 1. ⚙️ Frontend **GET** profile data from Backend
```bash
curl -X GET https://myapp/api/auth/profile \
@ -207,7 +207,7 @@ curl -X GET https://myapp/api/auth/profile \
-H "Accept: application/json"
```
### 2. Backend **GET** profile data from Google
### 2. ⚙️ Backend **GET** profile data from Google
```bash
curl -X GET "https://www.googleapis.com/oauth2/v3/userinfo" \
@ -215,7 +215,7 @@ curl -X GET "https://www.googleapis.com/oauth2/v3/userinfo" \
-H "Accept: application/json"
```
### 3. Google **response** to Backend with profile data
### 3. ⚙️ Google **response** to Backend with profile data
```
{
@ -243,7 +243,7 @@ curl -X GET "https://www.googleapis.com/oauth2/v3/userinfo" \
```
<br><br><br>
### Frontend Dashboard Code
### 💾 Frontend Dashboard Code
```js
import { useEffect, useState } from 'react';
@ -301,7 +301,7 @@ function DashboardPage() {
<br><br><br>
### Backend Dashboard
### 💾 Backend Dashboard
If the frontend token is valid, the backend will response to the request.