Use Member

1// React binding for the member store. Works in any React root — Astro islands (several on
2// one page share the same session) and SPAs alike. SSR-friendly: pass a server-resolved
3// member as `initialMember` (Astro island props) and no client re-fetch happens.
4import { useRef, useSyncExternalStore } from "react";
5import {
6  getMemberState,
7  hydrateMember,
8  login,
9  register,
10  logout,
11  refreshMember,
12  subscribeMember,
13  verifyEmail,
14  type MemberState,
15} from "../../wix/members/member-store";
16import type { LoginOptions, LoginResult } from "../../wix/members/auth";
17import type { CurrentMember } from "../../wix/members/types";
18
19export interface UseMemberOptions {
20  /** Server-resolved member (null = a known-anonymous visitor); omit to resolve client-side. */
21  initialMember?: CurrentMember | null;
22}
23
24export interface UseMember extends MemberState {
25  /** Submit the shipped in-app credential form; `returnTo` is where a SUCCESS lands. */
26  login: (email: string, password: string, options?: LoginOptions) => Promise<LoginResult>;
27  register: (
28    email: string,
29    password: string,
30    profile?: { firstName?: string; lastName?: string },
31    options?: LoginOptions,
32  ) => Promise<LoginResult>;
33  verifyEmail: (code: string) => Promise<LoginResult>;
34  /** Log out through the Wix logout flow; navigates away. */
35  logout: (returnTo?: string) => Promise<void>;
36  refresh: () => Promise<void>;
37}
38
39export function useMember({ initialMember }: UseMemberOptions = {}): UseMember {
40  // Adopt SSR props into the shared store before the first subscription (a no-op once any
41  // island has settled the session).
42  if (typeof window !== "undefined" && initialMember !== undefined)
43    hydrateMember(initialMember);
44  const server = useRef<MemberState | null>(null);
45  server.current ??=
46    initialMember !== undefined
47      ? {
48          member: initialMember,
49          loggedIn: initialMember !== null,
50          loading: false,
51          error: null,
52        }
53      : getMemberState();
54  const state = useSyncExternalStore(
55    subscribeMember,
56    getMemberState,
57    () => server.current as MemberState,
58  );
59  return {
60    ...state,
61    login,
62    register,
63    verifyEmail,
64    logout,
65    refresh: refreshMember,
66  };
67}