skills.rest
arborba100
arborba100COMMUNITY
Explore all skills by this author →
GitHub

auth-work

Implements login, protected routes, and member features using Wix Member Features.

Updated Mar 26, 2026
Search Tags:#authentication#React#login#protected routes#WiX#member features#usemembers
One-click install
npx skills add https://github.com/arborba100/command-hub --skill auth-work-arborba100
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: auth-work
Source: https://github.com/arborba100/command-hub/tree/main/.emdash/skills/auth-work
Command: npx skills add https://github.com/arborba100/command-hub --skill auth-work-arborba100

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @wix/member-features, react-router-dom.

What problem does it solve? Building authentication from scratch is error-prone and unnecessary on Wix. This Skill provides ready-made patterns for login pages, protected routes, and member-aware UI using Wix's managed member features, so you never hand-roll auth flows. ## Core Features & Use Cases - Protected Routes: Redirect unauthenticated visitors to /login with return-URL preservation and loading states. - Login Page Pattern: A single /login route that redirects already-authenticated users back to their intended destination. - Conditional Member UI: Show different navigation, avatars, and user menus based on login state via the useMembers hook. - Use Case: You need a members-only dashboard. Wrap the page in the protected route pattern, add a /login page with the SignIn component, and render a user menu in the header showing the member's avatar and email. ## Quick Start Add a protected dashboard page and a login page to my Wix Astro app using Wix member features.

Frequently Asked Questions about auth-work

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I protect a route in a Wix React app?▼

Use the useMembers hook from @wix/member-features to check loggedInMember, then redirect to /login with navigate('/login', { replace: true }) inside a useEffect when no member ID exists. Alternatively wrap the page in the MemberProtectedRoute component.

How to check if a user is logged in with Wix member features?▼

Call useMembers and inspect the returned member or loggedInMember object. If member?.id exists the user is authenticated; member.loginEmail and member.profile provide email, nickname, and photo for display.

Can I build a custom login form instead of Wix member features?▼

No. Authentication on Wix is fully managed, so you must not create custom auth flows, auth components, or manual token storage. Use the provided SignIn component on a single /login route and redirect other protected pages there.

How do I redirect back to the original page after Wix login?▼

When redirecting unauthenticated users, pass state: { from: location } to navigate('/login'). On the login page, read location.state.from.pathname and navigate there once loggedInMember?.id becomes available.

Why does my protected page flash content before redirecting to login?▼

The auth state needs a moment to settle. Add a brief isChecking state with a short timeout, render a skeleton or null while checking, and only render protected content after confirming loggedInMember?.id exists.

Related Skills

Explore More Software Engineering Skills→
ngocnhanvongocnhanvo

auth-work

Implement authentication and protected routes in Wix applications using Wix Member Features.

Community
Intermediate
mayankbisht689-codemayankbisht689-code

auth-work

Implement authenticated access and protected routes using Wix Member Features.

Community
Advanced
yuussn-stackyuussn-stack

auth-work

Implement Wix member login and protected routes with React components.

Community
Intermediate
Wahidul123Wahidul123

auth-work

Implement Wix member authentication for login, logout, and protected routes.

Community
Intermediate