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>
<details>
<summary><h3>HTTP GET Request from Frontend to Google</h3></summary>
<summary><h2>HTTP GET Request from Frontend to Google</h2></summary>
```sh
GET https://accounts.google.com/o/oauth2/v2/auth?
@ -70,7 +70,7 @@ GET https://accounts.google.com/o/oauth2/v2/auth?
</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
HTTP/1.1 302 Found
@ -82,7 +82,7 @@ Content-Length: 0
</details>
<details>
<summary><h3>Frontend Code</h3></summary>
<summary><h2>Frontend Code</h2></summary>
```js
// 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
<details>
<summary><h3>HTTP POST Request from Frontend to Backend</h3></summary>
<summary><h2>HTTP POST Request from Frontend to Backend</h2></summary>
```bash
POST https://xorismesiti.gr/api/auth/exchange-token
@ -132,7 +132,7 @@ Content-Type: application/json
<details>
<summary><h3>Frontend Code</h3></summary>
<summary><h2>Frontend Code</h2></summary>
```js
// On the backend callback URL, the frontend receives the authorization code
@ -186,7 +186,7 @@ export default Callback;
<br>
<details>
<summary><h3>HTTP POST Request from Backend to Google</h3></summary>
<summary><h2>HTTP POST Request from Backend to Google</h2></summary>
```sh
POST https://oauth2.googleapis.com/token
@ -213,7 +213,7 @@ client_secret=PASS1234
</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
{
@ -228,7 +228,7 @@ client_secret=PASS1234
</details>
<details>
<summary><h3>Backend Code:</h3></summary>
<summary><h2>Backend Code:</h2></summary>
```js
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
<details>
<summary><h3>HTTP Response from Backend to Frontend</h3></summary>
<summary><h2>HTTP Response from Backend to Frontend</h2></summary>
```json
{
@ -303,7 +303,7 @@ Now its ready to use the tokens to get the user data from Google
<details>
<summary><h3>Frontend Code:</h3></summary>
<summary><h2>Frontend Code:</h2></summary>
```js
// Set an HTTP-only, Secure cookie on the backend
@ -334,7 +334,7 @@ res.cookie('access_token', accessToken, {
<br>
<details>
<summary><h3>HTTP GET Request from Frontend to Backend</h3></summary>
<summary><h2>HTTP GET Request from Frontend to Backend</h2></summary>
```bash
GET https://www.googleapis.com/oauth2/v3/userinfo
@ -344,7 +344,7 @@ Authorization: Bearer ACCESSTOKEN6zXZkHi2XITkDoOVACCESSTOKEN
</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
{
@ -363,7 +363,7 @@ Authorization: Bearer ACCESSTOKEN6zXZkHi2XITkDoOVACCESSTOKEN
</details>
<details>
<summary><h3>Frontend Code</h3></summary>
<summary><h2>Frontend Code</h2></summary>
```js
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
<details>
<summary><h3>HTTP GET Request from Frontend to Google</h3></summary>
<summary><h2>HTTP GET Request from Frontend to Google</h2></summary>
```bash
GET https://www.googleapis.com/oauth2/v3/userinfo
@ -422,7 +422,7 @@ Authorization: Bearer ACCESSTOKEN6zXZkHi2XITkDoOVACCESSTOKEN
</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
{
@ -435,7 +435,7 @@ Authorization: Bearer ACCESSTOKEN6zXZkHi2XITkDoOVACCESSTOKEN
<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
@ -444,7 +444,7 @@ Authorization: Bearer ACCESSTOKEN6zXZkHi2XITkDoOVACCESSTOKEN
</details>
<details>
<summary><h3>Frontend Code</h3></summary>
<summary><h2>Frontend Code</h2></summary>
```js
const refreshAccessToken = async (refreshToken) => {
@ -473,7 +473,7 @@ const refreshAccessToken = async (refreshToken) => {
<details>
<summary><h3>Frontend Code</h3></summary>
<summary><h2>Frontend Code</h2></summary>
```js
const response = await fetch('https://oauth2.googleapis.com/token', {