Google Authentication - nicmart-dev/linguistnow GitHub Wiki

This design outlines how Google Authentication, as configured here is integrated into:

• the React application using the @react-oauth/google package, and Google OAuth2 authorization flow with both access and refresh tokens. Considering the limited time, that package was implemented, preferring a simpler, more streamlined approach to OAuth integration which suits React application.

  Show Pros/Cons

  google-auth-library:

  Pros:

  Broad Usage: google-auth-library is a general-purpose library for working with Google APIs. It's not tied to any specific framework, making it suitable for various use cases beyond React. Customization: Provides fine-grained control over the authentication flow and allows integration with any frontend or backend technology. Comprehensive Features: Offers a wide range of features for handling authentication, including support for multiple authentication flows, token management, and verification.

  Cons:

  More Complex: Implementing authentication with google-auth-library typically requires more manual configuration and coding, especially if integrating with a frontend framework like React. Requires Backend: Since it's a server-side library, it's primarily used for backend authentication flows. You would need to build your own frontend integration to handle user interactions and token exchange.

  @react-oauth/google:

  Pros:

  Specifically for React: @react-oauth/google is tailored for React applications, providing a more straightforward integration process for React developers. Pre-built Components: Offers pre-built React components (like GoogleOAuthProvider and useGoogleLogin) that abstract away much of the OAuth implementation complexity. Simplified Setup: Provides a more opinionated approach, reducing the amount of boilerplate code required to set up OAuth authentication in a React application.

  Cons:

  Limited Customization: While @react-oauth/google streamlines the OAuth integration process, it may offer less flexibility and customization compared to using a more general-purpose library like google-auth-library. Tied to React: Since it's specifically designed for React, it may not be suitable if you're working with other frontend frameworks or need to integrate authentication across multiple platforms.

  Which One to Choose?

  For React Projects: If you're building a React application and prefer a simpler, more streamlined approach to OAuth integration, @react-oauth/google may be a better choice. For Complex Requirements: If your project involves more complex authentication scenarios, requires integration with other frameworks or technologies, or needs fine-grained control over the authentication flow, google-auth-library may be more suitable. Ultimately, the best choice depends on your project's specific needs, your team's familiarity with the libraries, and your preferences regarding customization and flexibility. If you prioritize ease of use and React-specific integrations, @react-oauth/google may be a better fit. If you require more control and flexibility, especially for non-React components or complex authentication scenarios, google-auth-library may be the preferred option.

• the n8n workflow when checking for availability.

• Manages access and refresh OAuth tokens in userDetails state and route redirection.
• Uses GoogleOAuthProvider to wrap the app around Google client id stored in .env variable.
• Checks for existing access token in state for initial authentication.
• Implements PrivateRoute for protecting routes that require login (ie. account settings, and dashboard pages)

• Renders Google sign-in button and on click invoke useGoogleLogin of @react-oauth/google library.
• Handles successful and failed sign-in attempts.
• Get user info from Google
• Create/get matching user in Airtable and store user and access and refresh tokens there
• Stores tokens in userDetails parent state.

• Get list of linguists at page load from Airtable
• Check validity of access token for each user against Google API and use refresh token to get new one if needed
• For each linguist, check their availability using n8n workflow, sending Calendar IDs and access token stored in Airtable
• n8n workflow runs once for each linguist and uses access token given in Check when busy action node