diff --git a/OAuth2-Front-Approach.md b/OAuth2-Front-Approach.md index 66f3aca..17622ef 100644 --- a/OAuth2-Front-Approach.md +++ b/OAuth2-Front-Approach.md @@ -50,7 +50,7 @@ A way for the `user` to tell `google` to give an access token to `xorismesiti.gr
-

HTTP GET Request from Frontend to Google

+

HTTP GET Request from Frontend to Google

```sh GET https://accounts.google.com/o/oauth2/v2/auth? @@ -70,7 +70,7 @@ GET https://accounts.google.com/o/oauth2/v2/auth?
-

HTTP GET Response from Google to Frontend

+

HTTP GET Response from Google to Frontend

```bash HTTP/1.1 302 Found @@ -82,7 +82,7 @@ Content-Length: 0
-

Frontend Code

+

Frontend Code

```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
-

HTTP POST Request from Frontend to Backend

+

HTTP POST Request from Frontend to Backend

```bash POST https://xorismesiti.gr/api/auth/exchange-token @@ -132,7 +132,7 @@ Content-Type: application/json
-

Frontend Code

+

Frontend Code

```js // On the backend callback URL, the frontend receives the authorization code @@ -186,7 +186,7 @@ export default Callback;
-

HTTP POST Request from Backend to Google

+

HTTP POST Request from Backend to Google

```sh POST https://oauth2.googleapis.com/token @@ -213,7 +213,7 @@ client_secret=PASS1234
-

HTTP POST Response from Google to Backend

+

HTTP POST Response from Google to Backend

```json { @@ -228,7 +228,7 @@ client_secret=PASS1234
-

Backend Code:

+

Backend Code:

```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
-

HTTP Response from Backend to Frontend

+

HTTP Response from Backend to Frontend

```json { @@ -303,7 +303,7 @@ Now its ready to use the tokens to get the user data from Google
-

Frontend Code:

+

Frontend Code:

```js // Set an HTTP-only, Secure cookie on the backend @@ -334,7 +334,7 @@ res.cookie('access_token', accessToken, {
-

HTTP GET Request from Frontend to Backend

+

HTTP GET Request from Frontend to Backend

```bash GET https://www.googleapis.com/oauth2/v3/userinfo @@ -344,7 +344,7 @@ Authorization: Bearer ACCESSTOKEN6zXZkHi2XITkDoOVACCESSTOKEN
-

HTTP GET Response from Backend to Frontend

+

HTTP GET Response from Backend to Frontend

```json { @@ -363,7 +363,7 @@ Authorization: Bearer ACCESSTOKEN6zXZkHi2XITkDoOVACCESSTOKEN
-

Frontend Code

+

Frontend Code

```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
-

HTTP GET Request from Frontend to Google

+

HTTP GET Request from Frontend to Google

```bash GET https://www.googleapis.com/oauth2/v3/userinfo @@ -422,7 +422,7 @@ Authorization: Bearer ACCESSTOKEN6zXZkHi2XITkDoOVACCESSTOKEN
-

HTTP GET Response from Google to Frontend

+

HTTP GET Response from Google to Frontend

```json { @@ -435,7 +435,7 @@ Authorization: Bearer ACCESSTOKEN6zXZkHi2XITkDoOVACCESSTOKEN
-

HTTP POST Refresh token from Frontend to Backend

+

HTTP POST Refresh token from Frontend to Backend

```bash @@ -444,7 +444,7 @@ Authorization: Bearer ACCESSTOKEN6zXZkHi2XITkDoOVACCESSTOKEN
-

Frontend Code

+

Frontend Code

```js const refreshAccessToken = async (refreshToken) => { @@ -473,7 +473,7 @@ const refreshAccessToken = async (refreshToken) => {
-

Frontend Code

+

Frontend Code

```js const response = await fetch('https://oauth2.googleapis.com/token', {