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 19:12:25 +02:00
parent 26e6566b01
commit 8ac0535586
1 changed files with 18 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
OAuth2-Front-Approach.md
View File

@ -50,7 +50,7 @@ A way for the `user` to tell `google` to give an access token to `xorismesiti.gr
<br> <br>
<details> <details>
<summary><h3>HTTP GET Request from Frontend to Google</h3></summary> <summary><h2>HTTP GET Request from Frontend to Google</h2></summary>
```sh ```sh
GET https://accounts.google.com/o/oauth2/v2/auth? GET https://accounts.google.com/o/oauth2/v2/auth?
@ -70,7 +70,7 @@ GET https://accounts.google.com/o/oauth2/v2/auth?
</details> </details>
<details> <details>
<summary><h3>HTTP GET Response from Google to Frontend </h3></summary> <summary><h2>HTTP GET Response from Google to Frontend </h2></summary>
```bash ```bash
HTTP/1.1 302 Found HTTP/1.1 302 Found
@ -82,7 +82,7 @@ Content-Length: 0
</details> </details>
<details> <details>
<summary><h3>Frontend Code</h3></summary> <summary><h2>Frontend Code</h2></summary>
```js ```js
// Redirect to Google's OAuth 2.0 endpoint when user clicks login // Redirect to Google's OAuth 2.0 endpoint when user clicks login
@ -117,7 +117,7 @@ const loginWithGoogle = () => {
Now that the frontend has the Authorization `code` on the callback url, it can send it to the backend Now that the frontend has the Authorization `code` on the callback url, it can send it to the backend
<details> <details>
<summary><h3>HTTP POST Request from Frontend to Backend</h3></summary> <summary><h2>HTTP POST Request from Frontend to Backend</h2></summary>
```bash ```bash
POST https://xorismesiti.gr/api/auth/exchange-token POST https://xorismesiti.gr/api/auth/exchange-token
@ -132,7 +132,7 @@ Content-Type: application/json
<details> <details>
<summary><h3>Frontend Code</h3></summary> <summary><h2>Frontend Code</h2></summary>
```js ```js
// On the backend callback URL, the frontend receives the authorization code // On the backend callback URL, the frontend receives the authorization code
@ -186,7 +186,7 @@ export default Callback;
<br> <br>
<details> <details>
<summary><h3>HTTP POST Request from Backend to Google</h3></summary> <summary><h2>HTTP POST Request from Backend to Google</h2></summary>
```sh ```sh
POST https://oauth2.googleapis.com/token POST https://oauth2.googleapis.com/token
@ -213,7 +213,7 @@ client_secret=PASS1234
</details> </details>
<details> <details>
<summary><h3>HTTP POST Response from Google to Backend</h3></summary> <summary><h2>HTTP POST Response from Google to Backend</h2></summary>
```json ```json
{ {
@ -228,7 +228,7 @@ client_secret=PASS1234
</details> </details>
<details> <details>
<summary><h3>Backend Code:</h3></summary> <summary><h2>Backend Code:</h2></summary>
```js ```js
const express = require('express'); const express = require('express');
@ -286,7 +286,7 @@ and saves them in a cookie marked as `HTTP-only` and `Secure`
Now its ready to use the tokens to get the user data from Google Now its ready to use the tokens to get the user data from Google
<details> <details>
<summary><h3>HTTP Response from Backend to Frontend</h3></summary> <summary><h2>HTTP Response from Backend to Frontend</h2></summary>
```json ```json
{ {
@ -303,7 +303,7 @@ Now its ready to use the tokens to get the user data from Google
<details> <details>
<summary><h3>Frontend Code:</h3></summary> <summary><h2>Frontend Code:</h2></summary>
```js ```js
// Set an HTTP-only, Secure cookie on the backend // Set an HTTP-only, Secure cookie on the backend
@ -334,7 +334,7 @@ res.cookie('access_token', accessToken, {
<br> <br>
<details> <details>
<summary><h3>HTTP GET Request from Frontend to Backend</h3></summary> <summary><h2>HTTP GET Request from Frontend to Backend</h2></summary>
```bash ```bash
GET https://www.googleapis.com/oauth2/v3/userinfo GET https://www.googleapis.com/oauth2/v3/userinfo
@ -344,7 +344,7 @@ Authorization: Bearer ACCESSTOKEN6zXZkHi2XITkDoOVACCESSTOKEN
</details> </details>
<details> <details>
<summary><h3>HTTP GET Response from Backend to Frontend</h3></summary> <summary><h2>HTTP GET Response from Backend to Frontend</h2></summary>
```json ```json
{ {
@ -363,7 +363,7 @@ Authorization: Bearer ACCESSTOKEN6zXZkHi2XITkDoOVACCESSTOKEN
</details> </details>
<details> <details>
<summary><h3>Frontend Code</h3></summary> <summary><h2>Frontend Code</h2></summary>
```js ```js
const fetchUserData = async (accessToken) => { const fetchUserData = async (accessToken) => {
@ -412,7 +412,7 @@ const fetchUserData = async (accessToken) => {
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>
<summary><h3>HTTP GET Request from Frontend to Google</h3></summary> <summary><h2>HTTP GET Request from Frontend to Google</h2></summary>
```bash ```bash
GET https://www.googleapis.com/oauth2/v3/userinfo GET https://www.googleapis.com/oauth2/v3/userinfo
@ -422,7 +422,7 @@ Authorization: Bearer ACCESSTOKEN6zXZkHi2XITkDoOVACCESSTOKEN
</details> </details>
<details> <details>
<summary><h3>HTTP GET Response from Google to Frontend</h3></summary> <summary><h2>HTTP GET Response from Google to Frontend</h2></summary>
```json ```json
{ {
@ -435,7 +435,7 @@ Authorization: Bearer ACCESSTOKEN6zXZkHi2XITkDoOVACCESSTOKEN
<details> <details>
<summary><h3>HTTP POST Refresh token from Frontend to Backend</h3></summary> <summary><h2>HTTP POST Refresh token from Frontend to Backend</h2></summary>
```bash ```bash
@ -444,7 +444,7 @@ Authorization: Bearer ACCESSTOKEN6zXZkHi2XITkDoOVACCESSTOKEN
</details> </details>
<details> <details>
<summary><h3>Frontend Code</h3></summary> <summary><h2>Frontend Code</h2></summary>
```js ```js
const refreshAccessToken = async (refreshToken) => { const refreshAccessToken = async (refreshToken) => {
@ -473,7 +473,7 @@ const refreshAccessToken = async (refreshToken) => {
<details> <details>
<summary><h3>Frontend Code</h3></summary> <summary><h2>Frontend Code</h2></summary>
```js ```js
const response = await fetch('https://oauth2.googleapis.com/token', { const response = await fetch('https://oauth2.googleapis.com/token', {