fix(setup): fix Plex login not proceeding after authentication

[fallenbagel]

Description

During initial setup, after completing Plex OAuth, the wizard gets stuck on step 2 and requires a manual page reload to proceed.

This is because the auth effect checks response.data?.email to determine if login succeeded, but the Plex auth endpoint doesn't return an email, so revalidate() never gets called. The login page correctly checks .id instead. Also when revalidation is triggered, a bare revalidate() relies on SWR to refetch /api/v1/auth/me in the background, but useUser disables all automatic revalidation on setup pages, making this unreliable.

The PR adds a fix to explicitly fetch the user after auth and injects it directly into the SWR cache with revalidate(user, false). This should match the pattern used in the login page.

• Fixes Setup - need to reload after logging in to Plex #2585

How Has This Been Tested?

• Choose login plex in setup page
• Login
• Observe it automatically proceeding to next step

Screenshots / Logs (if applicable)

Checklist:

• I have read and followed the contribution guidelines.
• Disclosed any use of AI (see our policy)
• I have updated the documentation accordingly.
• All new and existing tests passed.
• Successful build pnpm build
• Translation keys pnpm i18n:extract
• Database migration (if required)

Summary by CodeRabbit

• Bug Fixes
  • Improved Plex sign-in validation for more reliable success detection.
  • Ensures current user info is refreshed immediately after successful sign-in.
  • Fails silently on authentication errors to avoid disrupting the user and allow retries.

[coderabbitai]

📝 Walkthrough

Walkthrough

Wrapped Plex auth POST in try/catch, changed success check to response.data?.id, fetches current user from GET /api/v1/auth/me on success, and calls revalidate(user, false); errors are handled silently to allow retries without UI disruption.

Changes

Cohort / File(s)	Summary
Setup Plex Login src/components/Setup/SetupLogin.tsx	Added try/catch around Plex auth POST; success detection now uses response.data?.id; on success issues GET /api/v1/auth/me and calls revalidate(user, false); silent error handling on failure.
LoginWithPlex flow src/components/Setup/LoginWithPlex.tsx	Mirrors SetupLogin changes: wraps Plex auth flow in try/catch, performs POST then GET /api/v1/auth/me only on success, and calls revalidate(user, false); failures are caught and suppressed to allow retry.

Sequence Diagram(s)

sequenceDiagram
    participant Client as Client (browser)
    participant API as Server `/api/v1/auth/plex`
    participant Me as Server `/api/v1/auth/me`
    participant Reval as revalidate()

    Client->>API: POST /api/v1/auth/plex (credentials)
    alt POST succeeds and returns id
        API-->>Client: 200 { id, ... }
        Client->>Me: GET /api/v1/auth/me
        Me-->>Client: 200 { user }
        Client->>Reval: revalidate(user, false)
        Reval-->>Client: UI updated
    else POST fails or throws
        API-->>Client: error
        Client->>Client: catch error (silent)
        Client-->>Client: allow user to retry
    end

Loading

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~8 minutes

Suggested reviewers

• gauthier-th
• 0xSysR3ll

Poem

🐰 A tiny hop to mend the flow,
Plex handshakes, then the user show—
A fetched profile, a gentle nudge,
No reloads now, just seamlessudge 🥕✨

🚥 Pre-merge checks | ✅ 4

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly and specifically describes the main fix: addressing Plex login not proceeding after authentication during setup.
Linked Issues check	✅ Passed	The PR implements the core fix for issue #2585 by explicitly fetching user after Plex auth and updating SWR cache, enabling automatic wizard progression without manual reload.
Out of Scope Changes check	✅ Passed	All changes in both modified files are directly related to fixing the Plex login flow and automatic user revalidation during setup, with no unrelated modifications detected.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[Copilot]

Pull request overview

Fixes the setup wizard getting stuck after successful Plex OAuth by using a more reliable success signal and explicitly populating the authenticated user into SWR cache so the setup flow can advance without requiring an automatic revalidation.

Changes:

• Switch Plex auth success check from response.data?.email to response.data?.id.
• After Plex auth, fetch /api/v1/auth/me and inject the user into SWR via revalidate(user, false) to avoid relying on disabled auto-revalidation.

Comments suppressed due to low confidence (2)

src/components/Setup/SetupLogin.tsx:52

• login() performs two awaited requests (/api/v1/auth/plex then /api/v1/auth/me) but there’s no try/catch around them. If either call fails, the promise rejection from login() will be unhandled and the setup wizard can remain stuck with no feedback. Consider wrapping the body in try/catch and surfacing the error (or resetting authToken to allow retry) so failures don’t silently block progression.

    const login = async () => {
      const response = await axios.post('/api/v1/auth/plex', {
        authToken: authToken,
      });

      if (response.data?.id) {
        const { data: user } = await axios.get('/api/v1/auth/me');
        revalidate(user, false);
      }
    };

src/components/Setup/SetupLogin.tsx:50

• The const { data: user } = await axios.get('/api/v1/auth/me'); local variable name shadows the user from useUser(), which makes the flow harder to follow. Renaming the response (e.g., me/currentUser) and typing the request (e.g., axios.get<User>(...)) would improve readability and keep this from becoming any.

        const { data: user } = await axios.get('/api/v1/auth/me');
        revalidate(user, false);

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[coderabbitai]

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@src/components/Setup/SetupLogin.tsx`:
- Around line 48-50: Wrap the axios.get('/api/v1/auth/me') call in a try/catch
inside SetupLogin.tsx so failures don't leave setup stuck: inside the existing
if (response.data?.id) block, try to fetch const { data: user } = await
axios.get('/api/v1/auth/me') and call revalidate(user, false) on success; in the
catch log the error and call revalidate(null, false) (or another safe fallback)
so the setup flow can continue even if the /api/v1/auth/me request fails.

---

ℹ️ Review info

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 5c34c91 and e0ba2a0.

📒 Files selected for processing (1)

• src/components/Setup/SetupLogin.tsx

[Copilot]

Pull request overview

Copilot reviewed 1 out of 1 changed files in this pull request and generated no new comments.

Comments suppressed due to low confidence (2)

src/components/Setup/SetupLogin.tsx:50

• The login() effect can throw (either the /auth/plex POST or the new /auth/me GET), and because login() is invoked without await/.catch() inside useEffect, any failure becomes an unhandled promise rejection and leaves the setup flow stuck. Please wrap the body in a try/catch (and handle/reset state or show a toast) or call login().catch(...) to handle errors explicitly.

    const login = async () => {
      const response = await axios.post('/api/v1/auth/plex', {
        authToken: authToken,
      });

      if (response.data?.id) {
        const { data: user } = await axios.get('/api/v1/auth/me');
        revalidate(user, false);

src/components/Setup/SetupLogin.tsx:50

• The const { data: user } = await axios.get('/api/v1/auth/me') shadows the outer user from useUser(), which makes the effect harder to read and increases the chance of accidentally using the wrong variable. Consider renaming the fetched value to something like fetchedUser/me to avoid shadowing.

        const { data: user } = await axios.get('/api/v1/auth/me');
        revalidate(user, false);

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[coderabbitai]

♻️ Duplicate comments (2)

src/components/Setup/SetupLogin.tsx (1)

50-55: ⚠️ Potential issue | 🟠 Major

Handle /api/v1/auth/me failure with a fallback path.

If Line 50 fails, Line 53 swallows the error and user state is never updated, so setup can still stall. Add a fallback recovery step in this branch.

Suggested hardening

-      try {
-        const response = await axios.post('/api/v1/auth/plex', {
-          authToken: authToken,
-        });
-
-        if (response.data?.id) {
-          const { data: user } = await axios.get('/api/v1/auth/me');
-          revalidate(user, false);
-        }
-      } catch {
-        // auth failed silently and user can attempt again
-      }
+      try {
+        const response = await axios.post('/api/v1/auth/plex', { authToken });
+        if (!response.data?.id) {
+          return;
+        }
+
+        try {
+          const { data: user } = await axios.get('/api/v1/auth/me');
+          await revalidate(user, false);
+        } catch {
+          await revalidate();
+        }
+      } catch {
+        // auth failed silently and user can attempt again
+      }

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@src/components/Setup/SetupLogin.tsx` around lines 50 - 55, The catch block
for the axios.get('/api/v1/auth/me') call in SetupLogin.tsx currently swallows
errors and never updates user state; change the catch to capture the error, log
it, and trigger a fallback revalidation so setup can continue (for example call
revalidate(null, true) or otherwise set the unauthenticated/fallback state), and
optionally surface a retryable UI flag; update the catch to accept (err) and
call console.error(err) (or the app logger) and revalidate(null, true) so the
app does not stall.

src/components/Setup/LoginWithPlex.tsx (1)

31-36: ⚠️ Potential issue | 🟠 Major

Add recovery behavior when /api/v1/auth/me fails.

When Line 31 throws, Line 34 silently exits and the flow may remain stuck without advancing. Add a fallback revalidation/retry path in this catch branch too.

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@src/components/Setup/LoginWithPlex.tsx` around lines 31 - 36, When the
axios.get('/api/v1/auth/me') call fails, the catch currently swallows the error
and leaves the flow stalled; update the catch block to perform a recovery
revalidation and a retry trigger by calling the existing revalidate(...) helper
with a fallback value (e.g., revalidate(null, true) or revalidate(undefined,
true)) and optionally schedule a short retry of axios.get('/api/v1/auth/me')
(using setTimeout) so the UI advances and the auth flow can recover; reference
axios.get('/api/v1/auth/me') and the revalidate function to implement this
behavior.

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Duplicate comments:
In `@src/components/Setup/LoginWithPlex.tsx`:
- Around line 31-36: When the axios.get('/api/v1/auth/me') call fails, the catch
currently swallows the error and leaves the flow stalled; update the catch block
to perform a recovery revalidation and a retry trigger by calling the existing
revalidate(...) helper with a fallback value (e.g., revalidate(null, true) or
revalidate(undefined, true)) and optionally schedule a short retry of
axios.get('/api/v1/auth/me') (using setTimeout) so the UI advances and the auth
flow can recover; reference axios.get('/api/v1/auth/me') and the revalidate
function to implement this behavior.

In `@src/components/Setup/SetupLogin.tsx`:
- Around line 50-55: The catch block for the axios.get('/api/v1/auth/me') call
in SetupLogin.tsx currently swallows errors and never updates user state; change
the catch to capture the error, log it, and trigger a fallback revalidation so
setup can continue (for example call revalidate(null, true) or otherwise set the
unauthenticated/fallback state), and optionally surface a retryable UI flag;
update the catch to accept (err) and call console.error(err) (or the app logger)
and revalidate(null, true) so the app does not stall.

---

ℹ️ Review info

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between e0ba2a0 and eb938ac.

📒 Files selected for processing (2)

• src/components/Setup/LoginWithPlex.tsx
• src/components/Setup/SetupLogin.tsx

[0xSysR3ll]

LGTM!