Oauth2 workflow:

1. Authorization Request

• User clicks the Log-In link:
  `<a href="https://toninichev.com/examples/oauth/oauth-service/sign-in.php?site=siteone&page=index.html">Log-In</a>`

  This link redirects the user to the authorization server:

  https://toninichev.com/examples/oauth/oauth-service/sign-in.php?site=siteone&page=index.html

  with query parameters indicating the target application and redirect page.

---

2. Authorization Grant

• The sign-in.php script initiates the OAuth2 process:
  • Redirects the user to the OAuth provider (e.g., Google, Facebook).
  • Handles scopes and client credentials as per the provider’s requirements.

---

3. Token Exchange

• After successful authorization by the user:
  • The OAuth provider redirects the user back to the callback.php or callback-google.php scripts, including an authorization code (or token) in the query string.example: https://toninichev.com/examples/oauth/oauth-service/callbacks/callback.php?provider=google&state=123&code=4%2F0AanRRruVnGL8TtqeJoQOuaQSPCW1lOGHA2Y15m_uva9M8Cj75Tb08Y81pPW2H147acXRaA&scope=email+profile+openid+https%3A%2F%2Fwww.googleapis.com%2Fauth%2Fuserinfo.email+https%3A%2F%2Fwww.googleapis.com%2Fauth%2Fuserinfo.profile&authuser=0&prompt=none
  • The scripts exchange the authorization code for an access token, typically using the POST method with the client secret.

---

4. Returning to the Application

 

• The token is returned to the frontend:
  • Via query parameters in the URL after the server-side processing.
  • Example: https://public.toni-develops.com/examples/oauth2/site-one/index.html?token=xxxxxxx&email=XXXXXX

---

5. Managing User Sessions

• The script.js handles the query parameters on the frontend:
  • initOnLoad extracts token and user information.
  • setCookie stores user data securely in the browser for session continuity.
  • setUserLoggedIn updates the UI to reflect the user’s logged-in state.

---

6. Token Usage

• The token (JWT) is used to:
  • Authenticate subsequent API calls.
  • Validate the user’s session on subsequent visits.

---

7. Logout

• The logOutUser function clears the user session and cookie data:
  user = null;
setCookie('user', null, 2);


---

Additional Features

• Pop-up Login Option: The showModalPopUp function demonstrates an alternative way to display the OAuth provider’s login page.
• Message Passing: receiveMessage listens for user data sent from the OAuth popup.

---

Future improvements and considerations:

1. Secure Cookie Handling:
   • Use Secure and HttpOnly flags for cookies to prevent XSS and CSRF.
2. Token Expiry:
   • Ensure the access token has an expiration mechanism.
   • Include token refresh logic to maintain seamless user sessions.
3. Redirect URL Validation:
   • Ensure the redirect URLs (site and page parameters) are validated server-side to avoid open redirect vulnerabilities.
4. CSRF Protection:
   • Use state parameters to mitigate CSRF attacks during the OAuth2 flow.

 

For the simplicity of this example we are not going to add this but it’s good to mention, and mandatory in production apps.

 

Example1: Using full redirect

This way after clicking on log-in button user is redirected to the sign-in page with all sign-in providers to choose from. Clicking on “continue with …” redirects to provider’s web ui and then redirects back to out web app.

Example2: Using new popup-browser window

This will open popup window form different domain, will handle the authentication and will use window messaging to send back the user token and data.

 Example3:Using iframe

Same as the Example2 but using idrame instead pop-up.