feat: add auth + google auth provider for web

[dinhlongviolin1]

Describe Your Changes

• Add auth for google (agnostic, can easily include more log in options in the future)
• Add UI for auth
• Make sure authentication is for web only, desktop does not use it for now

Fixes Issues

• Closes feat: support authentication + Google Auth (UI) jan-server#144

Self Checklist

• Added relevant comments, esp in complex areas
• Updated docs (for bug fixes / features)
• Created issues for follow-up changes or refactoring needed

---

Important

Add Google OAuth authentication to the web app with new UI components, routing, and localization support.

• Authentication:
  • Added JanAuthService in extensions-web/src/shared/auth/service.ts for handling OAuth flows.
  • Implemented Google OAuth provider in extensions-web/src/shared/auth/providers/google.ts.
  • Added AuthProvider component in web-app/src/providers/AuthProvider.tsx to initialize auth service.
  • Created AuthLoginButton and UserProfileMenu components for login/logout UI in web-app/src/containers/auth/.
  • Added useAuth hook in web-app/src/hooks/useAuth.ts for managing auth state.
• Routing:
  • Added /auth/google/callback route in web-app/src/routes/auth.google.callback.tsx for handling OAuth callbacks.
  • Updated routeTree.gen.ts to include new auth route.
• UI Components:
  • Added Avatar and Card components in web-app/src/components/ui/ for user profile display.
• Localization:
  • Updated localization files in web-app/src/locales/ to include auth-related strings.
• Configuration:
  • Updated PlatformFeatures in web-app/src/lib/platform/const.ts to enable authentication for web.
  • Added @radix-ui/react-avatar to web-app/package.json dependencies.

^{This description was created by for 02e3b8f. You can customize this summary. It will automatically update as commits are pushed.}

[ellipsis-dev]

Caution

Changes requested ❌

Reviewed everything up to 9872936 in 1 minute and 57 seconds. Click for details.

• Reviewed 2285 lines of code in 36 files
• Skipped 1 files when reviewing.
• Skipped posting 4 draft comments. View those below.
• Modify your settings and rules to customize what types of comments Ellipsis leaves. And don't forget to react with 👍 or 👎 to teach Ellipsis.

1. extensions-web/src/index.ts:12

• Draft comment:
  Re-exporting auth functionality and types enhances modularity. Ensure these new exports are documented in the package README for clarity.
• Reason this comment was not posted:
  Comment did not seem useful. Confidence is useful = 0% <= threshold 50% The comment is purely informative and suggests ensuring documentation, which violates the rules. It doesn't provide a specific code suggestion or highlight a potential issue with the code itself.

2. extensions-web/src/shared/auth/providers/google.ts:8

• Draft comment:
  GoogleAuthProvider implementation is straightforward. Consider future-proofing by handling potential API error cases or adding customization via environment variables if needed.
• Reason this comment was not posted:
  Decided after close inspection that this draft comment was likely wrong and/or not actionable: usefulness confidence = 10% vs. threshold = 50% The comment violates several rules: it's speculative ("consider future-proofing"), doesn't point to a clear issue requiring changes, and makes assumptions about future needs without evidence. The implementation follows what appears to be a standard pattern for auth providers. Error handling would likely be in BaseAuthProvider if needed. Perhaps there are legitimate concerns about error handling that I'm missing. Maybe environment configuration is a standard requirement for auth providers. Without seeing BaseAuthProvider or evidence that error handling or environment configuration is missing, these suggestions are speculative. The implementation matches the apparent pattern for auth providers. The comment should be deleted as it's speculative, doesn't point to clear issues, and suggests changes without strong evidence they're needed.

3. web-app/src/test/setup.ts:27

• Draft comment:
  Authentication is mocked as disabled in tests (authentication: false). Verify that tests not needing auth continue to pass, and consider adding separate tests for enabled auth scenarios.
• Reason this comment was not posted:
  Comment did not seem useful. Confidence is useful = 50% <= threshold 50% The comment suggests verifying that tests continue to pass and adding separate tests for enabled auth scenarios. It is asking the author to ensure tests pass, which violates the rule against asking the author to ensure behavior is intended or tested. However, the suggestion to add separate tests for enabled auth scenarios is specific and could be useful.

4. web-app/src/providers/AuthProvider.tsx:15

• Draft comment:
  AuthProvider correctly initializes the auth service asynchronously. Ensure error logging and fallback behavior are sufficient if initialization fails.
• Reason this comment was not posted:
  Comment did not seem useful. Confidence is useful = 0% <= threshold 50% The comment is asking the PR author to ensure that error logging and fallback behavior are sufficient, which violates the rule against asking the author to ensure things. It doesn't provide a specific suggestion or point out a specific issue with the code.

Workflow ID: wflow_l0syS6frHmgWYds1

^{You can customize by changing your verbosity settings, reacting with 👍 or 👎, replying to comments, or adding code review rules.}

[github-actions]

Barecheck - Code coverage report

Total: 32.7%

Your code coverage diff: -0.70% ▾

Uncovered files and lines

File	Lines
extensions-web/src/index.ts	8-10, 13, 42-46
extensions-web/src/shared/index.ts	1, 3
extensions-web/src/shared/auth/api.ts	7, 14-21, 23-26, 31-38, 40-44, 46-47, 52-59, 61-65, 67-68
extensions-web/src/shared/auth/broadcast.ts	6, 9-10, 12-14, 19-27, 32-41, 46-48, 53-55, 60-64, 67-70, 73-74, 79-81, 86-92
extensions-web/src/shared/auth/const.ts	7-9, 12-17, 20, 23, 26-29
extensions-web/src/shared/auth/index.ts	2-3, 10
extensions-web/src/shared/auth/registry.ts	6, 8-9, 11, 13-16, 18-20, 22-25
extensions-web/src/shared/auth/service.ts	8-9, 15-17, 20, 22-25, 27-28, 30-34, 39-44, 50-52, 54-56, 59-63, 68-69, 71-74, 76-82, 87-92, 94-97, 99, 101, 104-106, 108-113, 119-120, 122-132, 134, 136-138, 140-141, 143-145, 147-156, 161-162, 164-167, 169-171, 173-183, 185-186, 191-192, 194-195, 197-199, 201, 203, 205-212, 217-223, 228-230, 235-239, 241-242, 247-252, 257-258, 260-264, 269-273, 275-276, 278-286, 288-293, 295-300, 305-307, 312-316, 321-324, 326-327, 332-341, 343-345, 350-353, 358-361, 363-364, 366, 368-373, 378-380, 385-387, 392-399, 401-407, 419-424
extensions-web/src/shared/auth/types.ts	9-12
extensions-web/src/shared/auth/providers/api.ts	10-17, 19-23, 25-26, 28-40, 42-46, 48-49
extensions-web/src/shared/auth/providers/base.ts	7, 9, 17-18, 20, 23-28, 30-31, 33-39
extensions-web/src/shared/auth/providers/google.ts	6, 8-11, 13-15, 17-20
extensions-web/src/shared/auth/providers/index.ts	6-7, 10, 13
extensions-web/src/shared/auth/providers/types.ts	8
web-app/src/routeTree.gen.ts	13-33, 37-41, 43-47, 49-53, 55-59, 61-65, 67-71, 73-77, 79-83, 85-89, 91-95, 97-101, 103-107, 109-113, 115-119, 121-125, 127-131, 133-137, 139-143, 145-150, 152-156, 470-491, 493-495
web-app/src/components/ui/avatar.tsx	10-18, 25-30, 37-45
web-app/src/components/ui/card.tsx	1, 3, 5, 8-18, 20, 23-30, 32, 35-45, 47, 50-57, 59, 62-65, 67, 70-77
web-app/src/containers/LeftPanel.tsx	93-96, 108, 111-115, 118-129, 169, 185-187, 189-197, 207, 247-253, 255-256, 267, 272-278, 280-296, 298-299, 301, 306-334, 336-351, 353-354, 358-370, 372-383, 387-397, 431-434, 436, 438, 440, 447, 457
web-app/src/containers/auth/AuthLoginButton.tsx	20-22, 24, 26-36, 38-45, 47-49, 51-56, 58-70, 72-78, 80-82, 84
web-app/src/containers/auth/UserProfileMenu.tsx	23-25, 27-28, 30-40, 42-44, 46-52, 54-60, 62-65, 67-94, 96-102, 104
web-app/src/hooks/useAuth.ts	60-63, 68-73, 76-79, 81-82, 85-92, 94, 96-97, 100-103, 105-106, 109-112, 114, 117-121, 124-127, 129-140, 143-147, 149-150, 153, 156-177, 180-183, 185-191, 206-207, 214-215, 218-219, 225-226
web-app/src/lib/platform/const.ts	6-7, 13, 15, 18, 21, 24, 27, 30, 33, 36, 39, 42, 45, 48, 51, 54, 57-58
web-app/src/providers/AuthProvider.tsx	6-9, 15-16, 19-20, 22-26, 28-32, 34-35, 37-42, 44-45, 48-49, 51, 53-57, 60-61, 63-66, 68-69
web-app/src/routes/__root.tsx	1, 4-25, 30-37, 39-42, 44-52, 55, 58-61, 64-72, 75-79, 81-83, 86-90, 92, 94-96, 99-101, 103-108, 110-114, 116-118, 121-125, 128-132, 134-137, 140, 143-150, 152, 154, 157-161, 163-167, 169-171, 173, 175, 177-181, 183-190, 192, 194-195, 197-200, 202-215, 218-224, 226
web-app/src/routes/auth.google.callback.tsx	6-11, 13-17, 19, 21-23, 25-30, 33-35, 37-39, 42-43, 45-47, 52, 54, 57-59, 61-63, 66-68, 70-71, 73-78, 80-82, 84
web-app/src/test/setup.ts	46-48, 60-65, 67-70, 72-78, 130-133, 139-142, 151-154

[ellipsis-dev]

Important

Looks good to me! 👍

Reviewed 5c0845d in 2 minutes and 13 seconds. Click for details.

• Reviewed 176 lines of code in 4 files
• Skipped 0 files when reviewing.
• Skipped posting 7 draft comments. View those below.
• Modify your settings and rules to customize what types of comments Ellipsis leaves. And don't forget to react with 👍 or 👎 to teach Ellipsis.

1. extensions-web/src/index.ts:38

• Draft comment:
  Re-exporting ProviderType is clear. Ensure that its definition in './shared/auth' and downstream in providers remains consistent.
• Reason this comment was not posted:
  Confidence changes required: 0% <= threshold 50% None

2. extensions-web/src/shared/auth/index.ts:7

• Draft comment:
  Including ProviderType in type exports improves consistency. Verify that its implementation in './providers' aligns with its usage.
• Reason this comment was not posted:
  Confidence changes required: 0% <= threshold 50% None

3. web-app/src/hooks/useAuth.ts:75

• Draft comment:
  Switching loginWithProvider to accept ProviderType enhances type safety. Ensure that literal strings like 'google' conform to ProviderType’s definition.
• Reason this comment was not posted:
  Confidence changes required: 0% <= threshold 50% None

4. web-app/src/hooks/useAuth.ts:84

• Draft comment:
  handleProviderCallback now uses ProviderType. Confirm that the underlying authService.handleProviderCallback method properly accepts this type.
• Reason this comment was not posted:
  Confidence changes required: 0% <= threshold 50% None

5. web-app/src/hooks/useAuth.ts:99

• Draft comment:
  isAuthenticatedWithProvider now accepts ProviderType, ensuring consistent provider identification across methods.
• Reason this comment was not posted:
  Confidence changes required: 0% <= threshold 50% None

6. web-app/src/routes/auth.google.callback.tsx:25

• Draft comment:
  The async callback in useEffect is well-structured. Consider adding a cleanup mechanism or cancellation check to handle potential unmounts during async operations.
• Reason this comment was not posted:
  Confidence changes required: 33% <= threshold 50% None

7. web-app/src/routes/auth.google.callback.tsx:52

• Draft comment:
  Ensure that using the literal 'google' as the ProviderType is valid per the provider registry's definitions.
• Reason this comment was not posted:
  Confidence changes required: 0% <= threshold 50% None

Workflow ID: wflow_gj9gqUbODppUxmfJ

^{You can customize by changing your verbosity settings, reacting with 👍 or 👎, replying to comments, or adding code review rules.}

[ellipsis-dev]

Important

Looks good to me! 👍

Reviewed f1939f8 in 1 minute and 23 seconds. Click for details.

• Reviewed 30 lines of code in 1 files
• Skipped 0 files when reviewing.
• Skipped posting 3 draft comments. View those below.
• Modify your settings and rules to customize what types of comments Ellipsis leaves. And don't forget to react with 👍 or 👎 to teach Ellipsis.

1. web-app/src/containers/auth/AuthLoginButton.tsx:11

• Draft comment:
  Importing ProviderType is appropriate for type checking. Ensure that the module provides the expected type shape.
• Reason this comment was not posted:
  Confidence changes required: 20% <= threshold 50% None

2. web-app/src/containers/auth/AuthLoginButton.tsx:26

• Draft comment:
  Changing the parameter type from string to ProviderType is good. Verify that getEnabledProviders returns an object with an id matching ProviderType to avoid unnecessary casts.
• Reason this comment was not posted:
  Confidence changes required: 30% <= threshold 50% None

3. web-app/src/containers/auth/AuthLoginButton.tsx:68

• Draft comment:
  Casting provider.id to ProviderType works, but consider refining the provider type so that an explicit cast isn't needed.
• Reason this comment was not posted:
  Confidence changes required: 30% <= threshold 50% None

Workflow ID: wflow_Ydx4mMlLywapoIAL

^{You can customize by changing your verbosity settings, reacting with 👍 or 👎, replying to comments, or adding code review rules.}

[ellipsis-dev]

Important

Looks good to me! 👍

Reviewed bf009b1 in 1 minute and 54 seconds. Click for details.

• Reviewed 125 lines of code in 8 files
• Skipped 0 files when reviewing.
• Skipped posting 3 draft comments. View those below.
• Modify your settings and rules to customize what types of comments Ellipsis leaves. And don't forget to react with 👍 or 👎 to teach Ellipsis.

1. web-app/src/containers/auth/UserProfileMenu.tsx:76

• Draft comment:
  Updated DropdownMenuContent props: using side='right' and align='start'. Verify that this change meets the intended UI positioning across device sizes.
• Reason this comment was not posted:
  Comment did not seem useful. Confidence is useful = 0% <= threshold 50% The comment is asking the PR author to verify the UI positioning across device sizes, which falls under the rule of not asking the author to ensure behavior is intended or to double-check things. This is not a specific code suggestion or a request for a test to be written, so it should be removed.

2. web-app/src/locales/en/common.json:30

• Draft comment:
  New auth-related localization keys (logout, loggingOut, loggedOut, logoutFailed, profile) have been added. Confirm these keys are consistently referenced in the UI and that similar updates across other locale files remain in sync.
• Reason this comment was not posted:
  Comment did not seem useful. Confidence is useful = 0% <= threshold 50% The comment is asking the PR author to confirm that the new localization keys are consistently referenced and that updates across locale files are in sync. This falls under asking the author to double-check things, which is against the rules.

3. web-app/src/locales/de-DE/common.json:34

• Draft comment:
  Typographical suggestion: The text for "loggingOut" is currently "Melde ab...". For consistency with the imperative tone used in "login" ("Anmelden") and "logout" ("Abmelden"), consider changing it to "Abmelden...".
• Reason this comment was not posted:
  Decided after close inspection that this draft comment was likely wrong and/or not actionable: usefulness confidence = 0% vs. threshold = 50% This is a translation file and the comment points out an actual inconsistency in the German translations. The suggestion would make the translations more consistent in their grammatical form. However, this is primarily a UI/translation issue rather than a logic issue. Per the rules, we should not comment on pure UI changes as we should assume the author made UI choices correctly. While the comment identifies a real inconsistency, it's fundamentally about UI text and translation choices, which the rules explicitly tell us to stay out of. Even though the suggestion is technically correct, we must follow the rule about not commenting on UI changes. Translation choices should be left to the PR author. Delete this comment since it relates to UI text/translation choices, which we're instructed not to comment on.

Workflow ID: wflow_uaUOpqCe2bqAmKU6

^{You can customize by changing your verbosity settings, reacting with 👍 or 👎, replying to comments, or adding code review rules.}

[jjchen01]

LGTM

[dinhlongviolin1]

@jjchen01 thanks for helping me test it!

[ellipsis-dev]

Important

Looks good to me! 👍

Reviewed 02e3b8f in 1 minute and 37 seconds. Click for details.

• Reviewed 39 lines of code in 2 files
• Skipped 0 files when reviewing.
• Skipped posting 2 draft comments. View those below.
• Modify your settings and rules to customize what types of comments Ellipsis leaves. And don't forget to react with 👍 or 👎 to teach Ellipsis.

1. web-app/src/containers/auth/AuthLoginButton.tsx:21

• Draft comment:
  Renamed getEnabledProviders to getAllProviders. For consistency, consider renaming the local variable 'enabledProviders' on line 24 to 'providers'.
• Reason this comment was not posted:
  Decided after close inspection that this draft comment was likely wrong and/or not actionable: usefulness confidence = 20% vs. threshold = 50% While the comment is technically correct about the inconsistency, variable naming suggestions like this are very minor and don't impact functionality. The current variable name enabledProviders is still semantically meaningful, as it presumably stores providers that are enabled/available for use. The comment doesn't point out any actual issues with the code's behavior or structure. The variable name inconsistency could potentially cause confusion for future developers about whether there's a meaningful difference between "all" providers and "enabled" providers. However, this is a very minor stylistic issue. If there was a meaningful distinction between "all" and "enabled" providers, it would be caught during testing or code review of the actual functionality. This comment should be deleted as it addresses a minor naming inconsistency that doesn't impact code functionality or maintainability significantly.

2. web-app/src/hooks/useAuth.ts:25

• Draft comment:
  Updated the provider function name to getAllProviders; ensure related comments/documentation are updated accordingly.
• Reason this comment was not posted:
  Comment did not seem useful. Confidence is useful = 0% <= threshold 50% The comment is asking the PR author to ensure that related comments/documentation are updated, which violates the rule against asking the author to ensure things. It doesn't provide a specific suggestion or point out a specific issue with the code.

Workflow ID: wflow_qEVXJGDeVrXB5oFZ

^{You can customize by changing your verbosity settings, reacting with 👍 or 👎, replying to comments, or adding code review rules.}