Run any Skill in Manus with one click

auth-flow

Stars0

Forks0

UpdatedMay 20, 2026 at 14:52

Use when working with authentication, identity, wallet, or sign-in/sign-out logic in the SPA. Covers the localStorage-based wallet hooks, identity resolution, signed mutations, and the no-Web3-providers boundary. Triggers on edits to `src/hooks/useWalletAddress.ts`, `src/hooks/useAuthIdentity.ts`, `src/utils/signedFetch.ts`, or any code touching `single-sign-on-*`, MetaMask `accountsChanged`, or sign-in/sign-out flows. Also on mentions of "auth", "identity", "wallet", "sign-in", "sign-out", "signedFetch", "SSO".

Installation

Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.

Run Skill in Manus

Source

decentraland

decentraland/sites

View GitHub Repository View Creator Repositories

Download

Run Skill in Manus

Related occupationsSOC

Based on SOC occupation classification

Software DevelopersComputer and Mathematical Occupations·SOC 15-1252

SKILL.md

readonly

name

auth-flow

description

auth-flow

This SPA has no Web3 providers (no wagmi, magic-sdk, core-web3, thirdweb). Authentication is entirely localStorage-based, which is what lets lightweight routes ship without ~580-780KB of crypto deps.

Wallet & identity hooks

useWalletAddress() (src/hooks/useWalletAddress.ts) — reads single-sign-on-* keys from localStorage. Subscribes to MetaMask accountsChanged and cross-tab storage events. Sync store pattern (useSyncExternalStore), safe on lightweight routes (no Redux needed).
useAuthIdentity() (src/hooks/useAuthIdentity.ts) — wraps useWalletAddress, returns { identity, hasValidIdentity, address }. Identity comes from localStorageGetIdentity() (@dcl/single-sign-on-client).

Sign-in / Sign-out

Sign-in: navbar button → redirects to the external /auth SSO dapp. On return, identity is in localStorage and the hooks pick it up automatically via the storage event.
Sign-out: navbar button → useWalletAddress.disconnect() clears these localStorage keys:
- single-sign-on-*
- wagmi*
- wc@2*
- dcl_magic_user_email
- dcl_thirdweb_user_email

Signed mutations

Routes that mutate data (whats-on create event, social communities, storage uploads, etc.) call signedFetch(url, identity) from src/utils/signedFetch.ts. The helper signs the request payload with the identity's ephemeral key — backend validates and authorizes.

Blog public endpoints don't need identity.

Boundary rule (lightweight tier)

useAuthIdentity and useWalletAddress are safe on lightweight routes. They don't import Redux or Web3 providers. The navbar (src/components/LandingNavbar/) consumes useWalletAddress directly and is part of the lightweight <Layout />.

Do NOT introduce wagmi, magic-sdk, core-web3, or thirdweb into this repo. The whole reason for the dual-shell architecture is that lightweight routes stay lean — see CLAUDE.md > Architecture > Dual Shell.

Pitfalls

Forgetting that useWalletAddress is reactive — components re-render when the user signs in/out from another tab. If you cache identity in useState, you'll show stale data.
Reaching for wagmi or magic-sdk because they're familiar — those would re-add the ~580KB of deps we deleted.
Calling signedFetch on a route that runs before useAuthIdentity settles → identity is undefined and the request 401s. Gate on hasValidIdentity.
OTP/Magic email sign-in maps to a stable on-chain wallet address. Sign-in pending snapshot logic must fingerprint the ephemeral payload, not just addresses.
/blog/sign-in uses a parallel redirect helper (blogAuthRedirect) that does NOT call markSignInPending — any wallet-switcher flow there will land on a stale wallet.

More from this repository

same repository

tracking-events

decentraland/sites

Reference and investigation playbook for analytics tracking in sites. Use when locating where an event is fired, understanding the deferred-analytics provider, adding/changing a Segment event, debugging missing events in the warehouse, or reasoning about download/onboarding/Click funnels. Triggers on "Segment", "analytics event", "tracking", "useTrackClick", "useDeferredTrack", "useAnalytics", "data-event", "download_started", "download_success", "download_failed", "Onboarding Checkpoint", "REELS_*", "GO_TO_EXPLORER", "page tracking", "where is X fired", "what tracks X", "anon_user_id", "dónde se manda evento", "utm", "campaign attribution", "partner attribution", "download_target".

2026-07-090

add-route

decentraland/sites

Use when adding a new route/page to the SPA. Decides Layout-less vs lightweight vs heavy (DappsShell) tier, enforces the dual-shell boundary, and adds the navbar clearance that fixed-position layout requires. Triggers on "new page", "new route", "add route", "create page", or edits to src/App.tsx.

2026-06-120

coverage-guard

decentraland/sites

Run on demand to check the coverage floor (>=95% statements / lines / functions per CLAUDE.md rule 6). Reports current totals plus the 10 worst files by uncovered statements, and dispatches the coverage-keeper agent on them when the floor is breached. Triggers on /coverage-guard, "check coverage", "coverage floor", "verify coverage", or before opening a PR that adds non-trivial src changes.

2026-06-120

migrate-dapp

decentraland/sites

Use when absorbing a standalone Decentraland dapp (whats-on, blog, jump, social, cast, storage, reels, report) into the sites SPA as a heavy DappsShell route (or, for reels, a Layout-less lightweight route). Triggers on "migrate dapp", "absorb <dapp> into sites", "port <dapp>". Captures path/auth/i18n/sign-in decisions, files to touch, the Web3-drop pattern, and the Jest/ts-jest gotchas you'd otherwise re-discover by trial.

2026-06-120

perf-tier

decentraland/sites

Use when changing the build config, lazy-loading, manual chunks, hero prerender, or any code that affects Lighthouse scores / LCP / bundle size. Covers the dual-shell lazy boundaries, manual chunks setup (including the CSS gotcha), hero prerender, and deferred analytics. Triggers on edits to `vite.config.ts`, `scripts/prerender-hero.mjs`, `src/modules/DeferredAnalyticsProvider.tsx`, `src/modules/deferredThirdParty.ts`, `src/App.tsx` (lazy imports). Also on mentions of "LCP", "Lighthouse", "manualChunks", "modulePreload", "hero prerender", "lazy loading", "deferred analytics", "Core Web Vitals", "bundle size", "render-blocking".

2026-06-120

rtk-query-split

decentraland/sites

Use when adding or editing RTK Query base clients (`src/services/<name>Client.ts`) or endpoint files (`src/features/<domain>/*.client.ts`, including `*.admin.client.ts` and `*.search.client.ts`). Covers the services/features split rationale plus Pre-PR rule 17 (no direct store imports in endpoint files) and rule 18 (no internal RTK Query cache state access via `as any`). Triggers on edits to those paths or mentions of "RTK Query", "injectEndpoints", "transformResponse", "onQueryStarted", "base client", "endpoint injection", "reducerPath".

2026-06-120

name

auth-flow

description

auth-flow

Wallet & identity hooks

useWalletAddress() (src/hooks/useWalletAddress.ts) — reads single-sign-on-* keys from localStorage. Subscribes to MetaMask accountsChanged and cross-tab storage events. Sync store pattern (useSyncExternalStore), safe on lightweight routes (no Redux needed).
useAuthIdentity() (src/hooks/useAuthIdentity.ts) — wraps useWalletAddress, returns { identity, hasValidIdentity, address }. Identity comes from localStorageGetIdentity() (@dcl/single-sign-on-client).

Sign-in / Sign-out

Sign-in: navbar button → redirects to the external /auth SSO dapp. On return, identity is in localStorage and the hooks pick it up automatically via the storage event.
Sign-out: navbar button → useWalletAddress.disconnect() clears these localStorage keys:
- single-sign-on-*
- wagmi*
- wc@2*
- dcl_magic_user_email
- dcl_thirdweb_user_email

Signed mutations

Blog public endpoints don't need identity.

Boundary rule (lightweight tier)

Pitfalls

Forgetting that useWalletAddress is reactive — components re-render when the user signs in/out from another tab. If you cache identity in useState, you'll show stale data.
Reaching for wagmi or magic-sdk because they're familiar — those would re-add the ~580KB of deps we deleted.
Calling signedFetch on a route that runs before useAuthIdentity settles → identity is undefined and the request 401s. Gate on hasValidIdentity.
OTP/Magic email sign-in maps to a stable on-chain wallet address. Sign-in pending snapshot logic must fingerprint the ephemeral payload, not just addresses.
/blog/sign-in uses a parallel redirect helper (blogAuthRedirect) that does NOT call markSignInPending — any wallet-switcher flow there will land on a stale wallet.