diff --git a/OAuth2-Front-Approach.md b/OAuth2-Front-Approach.md index c74439b..035fd7d 100644 --- a/OAuth2-Front-Approach.md +++ b/OAuth2-Front-Approach.md @@ -39,6 +39,8 @@ A way for the `user` to tell `google` to give an access token to `xorismesiti.gr ### Frontend ⇢ Google ⇢ Frontend +
+ 1. A button "Login with Google" redirects the user to the Google's authorization endpoint `accounts.google.com/o/oauth2/v2/auth` 2. After the 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 redirect_uri `https://xorismesiti.gr/callback` with an authorization code `?code=` @@ -106,6 +108,8 @@ const loginWithGoogle = () => { ### Frontend ⇢ Backend ⇢ Google ⇢ Backend ⇢ Frontend +
+ #### 2.1 Frontend Now that the frontend has the Authorization `code` on th callback url https://xorismesiti.gr/api/auth/callback`?code=AAAABCX4XfWgyVyziyLg0QHHHHH` it can send it to the backend with POST to `xorismesiti.gr/api/auth/exchange-token` @@ -305,6 +309,8 @@ The frontend gets the tokens from the backend response, and saves them somewhere ### Frontend ⇢ Google ⇢ Frontend +
+ 1. The frontend receives the tokens from the Backend response, 2. Store them in the localStorage of the browser 3. Make authenticated requests directly to Google API @@ -383,6 +389,8 @@ const fetchUserData = async (accessToken) => { ### Frontend ⇢ Backend ⇢ Google ⇢ Backend ⇢ Frontend +
+ If the access token is expired, the frontend will receive an error response from Google when attempting to fetch user data