feat: optimize social auto-login and open explorer via deep link after callback#371
Closed
LautaroPetaccio wants to merge 13 commits into
Closed
feat: optimize social auto-login and open explorer via deep link after callback#371LautaroPetaccio wants to merge 13 commits into
LautaroPetaccio wants to merge 13 commits into
Conversation
…on callback When loginMethod is a social provider (Google, Discord, Apple, X), skip rendering the full login page UI and redirect to OAuth immediately via a lightweight component. On the callback page, when the OPEN_EXPLORER_AFTER_LOGIN feature flag is enabled, post the identity to the auth server and open the explorer via a deep link instead of redirecting to the redirectTo URL.
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
- Add error handling to SocialAutoLoginRedirect: catch connectToSocialProvider failures and reload the page so the user sees the full login UI to retry - Replace inline styles with reusable Container/Wrapper styled components - Memoize loginMethod detection in LoginPage to avoid re-parsing on every render - Call markReturningUser before setting identityId in the deep link branch so the user isn't treated as new if the deep link fails - Log warning when identity is missing from localStorage despite the OPEN_EXPLORER_AFTER_LOGIN flag being enabled - Log warning when ENVIRONMENT config doesn't map to a known dclenv value
When the callback URL has an explicit redirectTo (e.g. /marketplace), redirect there after login as usual, even with OPEN_EXPLORER_AFTER_LOGIN enabled. The deep link flow only activates when no destination was specified (redirectTo defaults to home).
- SocialAutoLoginRedirect: on error, navigate to /auth/login (without loginMethod) instead of window.location.reload(), which would loop because the URL still contains the loginMethod param - LoginPage: move socialAutoLoginType computation before useAutoLogin and pass isReady: false when social auto-login is active, preventing useAutoLogin from firing a duplicate connectToSocialProvider call - CallbackPage: simplify hasExplicitRedirect check — the redirectTo comparison with locations.home() was always true since redirectTo is a full URL while home() returns "/"
Use real modules for shared/errors (pure type guards), ConnectionLayout.type (enum), @dcl/schemas (ProviderType enum), and shared/locations (pure functions) instead of mocking them.
- CallbackPage: renderWithProviders now accepts { flags, redirectUrl }
so each test call site shows the full context instead of relying on
hidden beforeEach mutations of module-level variables
- SocialAutoLoginRedirect: extract renderComponent helper, remove
unnecessary shared/locations mock (pure function)
Move the deep link + countdown logic from DesktopAuthSuccess (inline in CallbackPage) into a new /auth/open-explorer page. The page reads the identityId from the URL search params, so any login flow (social, wallet, email) can navigate there after posting the identity. CallbackPage now navigates to the new page with history replace instead of rendering the success UI inline.
OpenExplorerPage now reads the account from ConnectionProvider, gets the identity from localStorage, and posts it to the auth server itself. No more identityId in the URL — the page encapsulates the full flow from identity posting to deep link launch. CallbackPage just navigates to /open-explorer after login when the flag is enabled, without needing to know about identities or the auth server client.
When the explorer deep link fails (user dismisses the browser prompt or app not installed), show two options instead of just "try again": - Retry: re-attempts the deep link with a fresh countdown - Go back to login: navigates to /login for a different login method The postIdentity error state only shows "go back to login" since there is no deep link to retry.
Add LoginRouteGuard at the route level that checks the loginMethod query param synchronously. For social providers (google, discord, apple, x), it renders SocialAutoLoginRedirect directly without ever mounting LoginPage. For all other cases, LoginPage is lazy-loaded via React.lazy + Suspense. This avoids initializing LoginPage's 24+ hooks and waiting for feature flags when the only action is to redirect to an OAuth provider.
SocialAutoLoginRedirect now waits for FeatureFlagsContext to be initialized before calling connectToSocialProvider. Without this, the MAGIC_TEST flag was always read as undefined because the component mounted before flags finished loading — causing the production Magic API key to be used even when testing was enabled.
- SocialAutoLoginRedirect: test that connectToSocialProvider is not called when feature flags are not yet initialized - OpenExplorerPage: test that navigating to login occurs when identity is not found in localStorage
Collaborator
Author
|
Closing PR as it has been divided into two smaller ones: |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Two improvements to the auth login/callback flow:
1. Faster social provider auto-login on
/auth/loginWhen
/auth/login?loginMethod=google(or discord, apple, x) is requested, the full login page used to render — 6 background images, all connection options, modals — only to immediately redirect to the OAuth provider. This added unnecessary load time while the user sat on a page they'd never interact with.Now, after feature flags initialize, if
loginMethodmaps to a social provider,LoginPagereturns a lightweightSocialAutoLoginRedirectcomponent instead. This component renders only the animated background with a "Redirecting to Google..." message and a spinner, then immediately callsconnectToSocialProvider— no heavy UI, no 100ms delay fromuseAutoLogin.Non-social login methods (email, metamask, walletconnect, etc.) are unaffected and still render the full login page.
2. Open explorer via deep link after OAuth callback
When the new
OPEN_EXPLORER_AFTER_LOGIN(dapps-open-explorer-after-login) feature flag is enabled, the desktop callback page changes its post-login behavior:redirectToURL, it posts the freshly created identity to the auth server's/identitiesendpoint viapostIdentityidentityIdto construct a deep link:decentraland://?dclenv={env}&signin={identityId}whereenviszone/today/orgfor dev/stg/prodDesktopAuthSuccessview (using the existing desktop callback styling withAnimatedBackground) with a 3-second countdown, then attempts to launch the deep linkThis mirrors the existing
MobileCallbackPagepattern (which already posts identity and launches a deep link) but adapted for desktop with desktop-specific styling and the environment-aware deep link format.When the flag is disabled, behavior is unchanged — the normal redirect flow proceeds as before.
Test plan
/auth/login?loginMethod=google— should show animated background + "Redirecting to Google..." spinner, then redirect to Google OAuth (no full login page flash)/auth/login?loginMethod=metamask— should render the full login page as usual (non-social methods unaffected)OPEN_EXPLORER_AFTER_LOGINflag enabled: complete a Google OAuth login — callback should show countdown and attempt deep link to explorerOPEN_EXPLORER_AFTER_LOGINflag disabled: complete a Google OAuth login — callback should redirect toredirectToURL as beforedclenvparameter for the environment