{"id":502820,"date":"2026-11-11T20:27:30","date_gmt":"2026-11-11T17:27:30","guid":{"rendered":"https:\/\/savepearlharbor.com\/?p=502820"},"modified":"2026-11-11T20:27:30","modified_gmt":"2026-11-11T17:27:30","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=502820","title":{"rendered":"\u041e\u0442 localStorage Next.js \u043a cloud favorites, Supabase Auth, RLS \u0438 \u043c\u0438\u0433\u0440\u0430\u0446\u0438\u044f \u0431\u0435\u0437 \u043f\u043e\u0442\u0435\u0440\u0438 \u0433\u043e\u0441\u0442\u0435\u0432\u043e\u0433\u043e UX"},"content":{"rendered":"
\n

\u0418\u0437\u0431\u0440\u0430\u043d\u043d\u043e\u0435 \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u043c\u0435\u0441\u0442\u0438\u0442\u044c \u0432\u00a0localStorage<\/code>. \u041f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u043d\u0430\u0436\u0438\u043c\u0430\u0435\u0442 \u043a\u043d\u043e\u043f\u043a\u0443, \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u0435\u0442 ID \u0437\u0430\u043f\u0438\u0441\u0438 \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435, \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0439 backend \u0434\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043d\u0435 \u043d\u0443\u0436\u0435\u043d. \u041f\u0440\u043e\u0431\u043b\u0435\u043c\u0430 \u043f\u043e\u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043f\u043e\u0441\u043b\u0435 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0430\u043a\u043a\u0430\u0443\u043d\u0442\u043e\u0432.\u00a0localStorage<\/code>\u00a0\u043f\u0440\u0438\u0432\u044f\u0437\u0430\u043d \u043a \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u043e\u043c\u0443 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0443. \u041f\u043e\u0441\u043b\u0435 \u0432\u0445\u043e\u0434\u0430 \u0441 \u0434\u0440\u0443\u0433\u043e\u0433\u043e \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u0430 \u0441\u043e\u0445\u0440\u0430\u043d\u0451\u043d\u043d\u043e\u0433\u043e \u0441\u043f\u0438\u0441\u043a\u0430 \u0442\u0430\u043c \u043d\u0435\u0442. \u041f\u0440\u043e\u0441\u0442\u0430\u044f \u0437\u0430\u043c\u0435\u043d\u0430\u00a0localStorage<\/code>\u00a0\u043d\u0430 \u043e\u0431\u043b\u0430\u0447\u043d\u0443\u044e \u0442\u0430\u0431\u043b\u0438\u0446\u0443 \u0442\u043e\u0436\u0435 \u043c\u0435\u043d\u044f\u0435\u0442 \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u0435 \u043f\u0440\u043e\u0434\u0443\u043a\u0442\u0430, \u0442\u0435\u043f\u0435\u0440\u044c \u0434\u043b\u044f \u043a\u043d\u043e\u043f\u043a\u0438 \u00ab\u0412 \u0438\u0437\u0431\u0440\u0430\u043d\u043d\u043e\u0435\u00bb \u043f\u0440\u0438\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u0441\u043d\u0430\u0447\u0430\u043b\u0430 \u0442\u0440\u0435\u0431\u043e\u0432\u0430\u0442\u044c \u0430\u0432\u0442\u043e\u0440\u0438\u0437\u0430\u0446\u0438\u044e. \u0415\u0441\u043b\u0438 \u0433\u043e\u0441\u0442\u0435\u0432\u043e\u0439 \u0440\u0435\u0436\u0438\u043c \u0443\u0436\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442, \u043b\u043e\u0433\u0438\u0447\u043d\u0435\u0435 \u0441\u043e\u0445\u0440\u0430\u043d\u0438\u0442\u044c \u0435\u0433\u043e \u0438 \u043f\u0435\u0440\u0435\u043a\u043b\u044e\u0447\u0430\u0442\u044c \u0438\u0441\u0442\u043e\u0447\u043d\u0438\u043a \u0434\u0430\u043d\u043d\u044b\u0445 \u043f\u043e\u0441\u043b\u0435 \u0432\u0445\u043e\u0434\u0430.
\u0412\u00a0EventMap<\/a>\u00a0\u0441\u0445\u0435\u043c\u0430 \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0442\u0430\u043a:<\/p>\n

guest  \u2193localStorageauthenticated user  \u2193Supabase Auth  \u2193public.favorites  \u2193RLSfirst sign in  \u2193copy local favorites to cloud<\/code>
<\/span><\/a><\/div><\/pre>\n
\u0421\u043d\u0430\u0447\u0430\u043b\u0430 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u043c \u0434\u0432\u0430 \u0440\u0435\u0436\u0438\u043c\u0430<\/h3>\n
\u0414\u043b\u044f \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430 \u0438\u0437\u0431\u0440\u0430\u043d\u043d\u043e\u0435 \u043e\u0441\u0442\u0430\u0451\u0442\u0441\u044f \u043e\u0434\u043d\u043e\u0439 \u0444\u0443\u043d\u043a\u0446\u0438\u0435\u0439. \u0418\u0441\u0442\u043e\u0447\u043d\u0438\u043a \u0434\u0430\u043d\u043d\u044b\u0445 \u0437\u0430\u0432\u0438\u0441\u0438\u0442 \u043e\u0442 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u0430\u0432\u0442\u043e\u0440\u0438\u0437\u0430\u0446\u0438\u0438. \u0414\u043b\u044f \u0433\u043e\u0441\u0442\u044f:<\/p>\n
FavoriteButton  \u2193useFavoritesCloud  \u2193useFavorites  \u2193localStorage<\/code>
<\/span><\/a><\/div><\/pre>\n
\u0414\u043b\u044f \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f:<\/p>\n
FavoriteButton  \u2193useFavoritesCloud  \u2193Supabase browser client  \u2193public.favorites<\/code>
<\/span><\/a><\/div><\/pre>\n
\u041a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u043a\u043d\u043e\u043f\u043a\u0438 \u043d\u0435 \u0434\u043e\u043b\u0436\u0435\u043d \u0437\u043d\u0430\u0442\u044c, \u043a\u0443\u0434\u0430 \u0438\u043c\u0435\u043d\u043d\u043e \u0437\u0430\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0441\u043e\u0431\u044b\u0442\u0438\u0435. \u0412 \u043f\u0440\u043e\u0435\u043a\u0442\u0435 \u043e\u043d \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 \u043e\u0434\u0438\u043d hook:<\/p>\n
const {  isFavorite,  isHydrated,  removeFavorite,  toggleFavoriteEvent,} = useFavoritesCloud();<\/code>
<\/span><\/a><\/div><\/pre>\n
\u041f\u0435\u0440\u0435\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435 \u043c\u0435\u0436\u0434\u0443 browser storage \u0438 Supabase \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u043d\u0438\u0436\u0435 \u044d\u0442\u043e\u0433\u043e \u0443\u0440\u043e\u0432\u043d\u044f.<\/p>\n
\u0427\u0442\u043e \u043e\u0441\u0442\u0430\u0451\u0442\u0441\u044f \u0432 localStorage<\/h3>\n
\u0413\u043e\u0441\u0442\u0435\u0432\u043e\u0439 \u0440\u0435\u0436\u0438\u043c \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u043e\u0432\u0430\u043b \u0434\u043e \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u044f Supabase. \u0414\u043b\u044f \u043d\u0435\u0433\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f \u0434\u0432\u0430 \u043a\u043b\u044e\u0447\u0430:<\/p>\n
export const FAVORITES_STORAGE_KEY =  \"eventmap:favorites\";export const FAVORITE_EVENTS_STORAGE_KEY =  \"eventmap:favorite-events\";<\/code>
<\/span><\/a><\/div><\/pre>\n
\u041f\u0435\u0440\u0432\u044b\u0439 \u0445\u0440\u0430\u043d\u0438\u0442 IDs:<\/p>\n
[  \"london-music-night\",  \"berlin-jazz-evening\"]<\/code>
<\/span><\/a><\/div><\/pre>\n
\u0412\u0442\u043e\u0440\u043e\u0439 \u0445\u0440\u0430\u043d\u0438\u0442 snapshots \u043a\u0430\u0440\u0442\u043e\u0447\u0435\u043a:<\/p>\n
type FavoriteEventsMap =  Record<string, EventCardData>;<\/code>
<\/span><\/a><\/div><\/pre>\n
Snapshot \u043d\u0443\u0436\u0435\u043d \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435 \u0438\u0437\u0431\u0440\u0430\u043d\u043d\u043e\u0433\u043e. \u041e\u043d\u0430 \u043c\u043e\u0436\u0435\u0442 \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u044c \u0441\u043e\u0445\u0440\u0430\u043d\u0451\u043d\u043d\u0443\u044e \u043a\u0430\u0440\u0442\u043e\u0447\u043a\u0443 \u0431\u0435\u0437 \u043f\u043e\u0432\u0442\u043e\u0440\u043d\u043e\u0433\u043e \u0437\u0430\u043f\u0440\u043e\u0441\u0430 \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u0441\u043e\u0431\u044b\u0442\u0438\u044f \u0441\u0440\u0430\u0437\u0443 \u043f\u043e\u0441\u043b\u0435 \u0447\u0442\u0435\u043d\u0438\u044f\u00a0localStorage<\/code>.
\u0414\u0430\u043d\u043d\u044b\u0435 \u0438\u0437 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430 \u043d\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f \u0431\u0435\u0437 \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0438. IDs \u043f\u0440\u043e\u0445\u043e\u0434\u044f\u0442 \u0447\u0435\u0440\u0435\u0437 \u043d\u043e\u0440\u043c\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044e:<\/p>\n
export function normaliseFavoriteIds(  value: unknown): string[] {  if (!Array.isArray(value)) {    return [];  }  const ids = value    .filter(      (item): item is string =>        typeof item === \"string\"    )    .map((item) => item.trim())    .filter(Boolean);  return Array.from(new Set(ids));}<\/code>
<\/span><\/a><\/div><\/pre>\n
\u0414\u043b\u044f snapshots \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u0442\u0441\u044f \u0444\u043e\u0440\u043c\u0430\u00a0EventCardData<\/code>.
\u042d\u0442\u043e \u043d\u0435 \u043f\u043e\u043b\u043d\u043e\u0446\u0435\u043d\u043d\u0430\u044f runtime schema \u0432\u0440\u043e\u0434\u0435 Zod, \u043d\u043e \u043f\u043e\u0432\u0440\u0435\u0436\u0434\u0451\u043d\u043d\u044b\u0439 JSON \u0438\u043b\u0438 \u043e\u0431\u044a\u0435\u043a\u0442 \u043d\u0435\u043e\u0436\u0438\u0434\u0430\u043d\u043d\u043e\u0439 \u0444\u043e\u0440\u043c\u044b \u043d\u0435 \u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u0441\u044f \u043a\u0430\u0440\u0442\u043e\u0447\u043a\u043e\u0439 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438.<\/p>\n
\u041f\u043e\u0447\u0435\u043c\u0443 hydration \u0437\u0434\u0435\u0441\u044c \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u0430\u044f \u0447\u0430\u0441\u0442\u044c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f<\/h3>\n
localStorage<\/code>\u00a0\u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u0435\u0442 \u0442\u043e\u043b\u044c\u043a\u043e \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u0438\u0439 hook \u0441\u043d\u0430\u0447\u0430\u043b\u0430 \u0434\u043e\u043b\u0436\u0435\u043d \u043f\u043e\u043d\u044f\u0442\u044c, \u043f\u0440\u043e\u0447\u0438\u0442\u0430\u043d\u044b \u043b\u0438 \u0434\u0430\u043d\u043d\u044b\u0435:<\/p>\n
let isStoreHydrated = false;<\/code>
<\/span><\/a><\/div><\/pre>\n
\u041f\u043e\u0441\u043b\u0435 \u0447\u0442\u0435\u043d\u0438\u044f storage:<\/p>\n
function readStoreFromBrowser() {  favoriteIdsStore = parseFavoriteIds(    window.localStorage.getItem(      FAVORITES_STORAGE_KEY    )  );  favoriteEventsStore =    parseFavoriteEvents(      window.localStorage.getItem(        FAVORITE_EVENTS_STORAGE_KEY      )    );  isStoreHydrated = true;  notifyListeners();}<\/code>
<\/span><\/a><\/div><\/pre>\n
\u041f\u043e\u043a\u0430 \u044d\u0442\u043e\u0442 \u044d\u0442\u0430\u043f \u043d\u0435 \u0437\u0430\u043a\u043e\u043d\u0447\u0435\u043d, \u043a\u043d\u043e\u043f\u043a\u0430 \u043d\u0435 \u0434\u043e\u043b\u0436\u043d\u0430 \u0441\u0447\u0438\u0442\u0430\u0442\u044c \u043f\u0443\u0441\u0442\u043e\u0439 \u043c\u0430\u0441\u0441\u0438\u0432 \u0440\u0435\u0430\u043b\u044c\u043d\u044b\u043c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435\u043c \u0438\u0437\u0431\u0440\u0430\u043d\u043d\u043e\u0433\u043e. \u0422\u0430 \u0436\u0435 \u0433\u0440\u0430\u043d\u0438\u0446\u0430 \u043f\u043e\u0442\u043e\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u043f\u0440\u0438 \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0438 \u043e\u0431\u043b\u0430\u0447\u043d\u043e\u0433\u043e \u0440\u0435\u0436\u0438\u043c\u0430. \u0421\u043d\u0430\u0447\u0430\u043b\u0430 \u0433\u0438\u0434\u0440\u0430\u0442\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u044b\u0439 store, \u0437\u0430\u0442\u0435\u043c \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442\u0441\u044f \u0442\u0435\u043a\u0443\u0449\u0438\u0439 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c.<\/p>\n
Supabase client \u0434\u043b\u044f \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430 \u0438 \u0441\u0435\u0440\u0432\u0435\u0440\u0430<\/h3>\n
\u0412 \u043f\u0440\u043e\u0435\u043a\u0442\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f\u00a0@supabase\/supabase-js<\/code>\u00a0\u0438\u00a0@supabase\/ssr<\/code>. \u041a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u044f \u0441\u043e\u0441\u0442\u043e\u0438\u0442 \u0438\u0437 \u0434\u0432\u0443\u0445 \u043f\u0443\u0431\u043b\u0438\u0447\u043d\u044b\u0445 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445:<\/p>\n
NEXT_PUBLIC_SUPABASE_URL=NEXT_PUBLIC_SUPABASE_PUBLISHABLE_KEY=<\/code>
<\/span><\/a><\/div><\/pre>\n
Browser client \u0441\u043e\u0437\u0434\u0430\u0451\u0442\u0441\u044f \u0442\u0430\u043a:<\/p>\n
import { createBrowserClient }  from \"@supabase\/ssr\";export function createSupabaseBrowserClient() {  const config = getSupabaseConfig();  if (!config) {    return null;  }  return createBrowserClient(    config.url,    config.publishableKey  );}<\/code>
<\/span><\/a><\/div><\/pre>\n
\u0414\u043b\u044f server context \u0435\u0441\u0442\u044c \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0439 \u043a\u043b\u0438\u0435\u043d\u0442:<\/p>\n
import { createServerClient }  from \"@supabase\/ssr\";import { cookies } from \"next\/headers\";export async functioncreateSupabaseServerClient() {  const config = getSupabaseConfig();  if (!config) {    return null;  }  const cookieStore = await cookies();  return createServerClient(    config.url,    config.publishableKey,    {      cookies: {        getAll() {          return cookieStore.getAll();        },        setAll(cookiesToSet) {          try {            cookiesToSet.forEach(              ({ name, options, value }) => {                cookieStore.set(                  name,                  value,                  options                );              }            );          } catch {            \/\/ Context cannot write cookies.          }        },      },    }  );}<\/code>
<\/span><\/a><\/div><\/pre>\n
Publishable key \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u0432 \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u043e\u043c bundle \u043f\u043e \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u044e. \u041e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u0438\u0435 \u0434\u043e\u0441\u0442\u0443\u043f\u0430 \u043a \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u043c \u0441\u0442\u0440\u043e\u043a\u0430\u043c \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043d\u0435\u043b\u044c\u0437\u044f \u0441\u0442\u0440\u043e\u0438\u0442\u044c \u0432\u043e\u043a\u0440\u0443\u0433 \u0438\u0434\u0435\u0438 \u00ab\u0441\u043f\u0440\u044f\u0447\u0435\u043c \u043a\u043b\u044e\u0447\u00bb.
\u0414\u043b\u044f \u0442\u0430\u0431\u043b\u0438\u0446\u044b\u00a0favorites<\/code>\u00a0\u044d\u0442\u0443 \u0437\u0430\u0434\u0430\u0447\u0443 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u0442 RLS. Service-role \u0438\u043b\u0438 \u0434\u0440\u0443\u0433\u043e\u0439 \u043f\u0440\u0438\u0432\u0438\u043b\u0435\u0433\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0439 \u043a\u043b\u044e\u0447 \u0432 frontend \u043d\u0435 \u043f\u0435\u0440\u0435\u0434\u0430\u0451\u0442\u0441\u044f.<\/p>\n
\u0422\u0430\u0431\u043b\u0438\u0446\u0430 cloud favorites<\/h3>\n
\u0412 \u043f\u0440\u043e\u0435\u043a\u0442\u0435 \u0441\u0442\u0440\u043e\u043a\u0430 \u0438\u0437\u0431\u0440\u0430\u043d\u043d\u043e\u0433\u043e \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f, ID \u0441\u043e\u0431\u044b\u0442\u0438\u044f \u0438 snapshot:<\/p>\n
create table if not exists public.favorites (  user_id uuid not null    references auth.users(id)    on delete cascade,  event_id text not null,  event_snapshot jsonb not null,  created_at timestamptz    not null default now(),  updated_at timestamptz    not null default now(),  primary key (user_id, event_id));<\/code>
<\/span><\/a><\/div><\/pre>\n
\u0421\u043e\u0441\u0442\u0430\u0432\u043d\u043e\u0439 primary key \u0440\u0435\u0448\u0430\u0435\u0442 \u0435\u0449\u0451 \u043e\u0434\u043d\u0443 \u0437\u0430\u0434\u0430\u0447\u0443, \u043e\u0434\u0438\u043d \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u043d\u0435 \u043c\u043e\u0436\u0435\u0442 \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0434\u0432\u0435 \u0441\u0442\u0440\u043e\u043a\u0438 \u0434\u043b\u044f \u043e\u0434\u043d\u043e\u0433\u043e\u00a0event_id<\/code>. \u041f\u0440\u0438 \u044d\u0442\u043e\u043c \u0434\u0440\u0443\u0433\u043e\u0439 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u043c\u043e\u0436\u0435\u0442 \u0441\u043e\u0445\u0440\u0430\u043d\u0438\u0442\u044c \u0442\u043e \u0436\u0435 \u0441\u043e\u0431\u044b\u0442\u0438\u0435.<\/p>\n
user A + event 123 \u2192 alloweduser B + event 123 \u2192 alloweduser A + event 123 \u2192 duplicate<\/code>
<\/span><\/a><\/div><\/pre>\n
event_snapshot<\/code>\u00a0\u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u0432\u043d\u0443\u0442\u0440\u0435\u043d\u043d\u044e\u044e \u043c\u043e\u0434\u0435\u043b\u044c \u043a\u0430\u0440\u0442\u043e\u0447\u043a\u0438:<\/p>\n
export type CloudFavoriteRow = {  user_id: string;  event_id: string;  event_snapshot: EventCardData;  created_at: string;  updated_at: string;};<\/code>
<\/span><\/a><\/div><\/pre>\n
\u042d\u0442\u043e \u0441\u043e\u0437\u043d\u0430\u0442\u0435\u043b\u044c\u043d\u043e \u043e\u0442\u043b\u0438\u0447\u0430\u0435\u0442\u0441\u044f \u043e\u0442 \u0441\u0445\u0435\u043c\u044b, \u0433\u0434\u0435 \u0432 favorites \u0445\u0440\u0430\u043d\u0438\u0442\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u0432\u043d\u0435\u0448\u043d\u0438\u0439 ID. \u041f\u043b\u044e\u0441 snapshot \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430 \u0438\u0437\u0431\u0440\u0430\u043d\u043d\u043e\u0433\u043e \u043c\u043e\u0436\u0435\u0442 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u0442\u044c \u0441\u043e\u0445\u0440\u0430\u043d\u0451\u043d\u043d\u044b\u0435 \u0434\u0430\u043d\u043d\u044b\u0435 \u0438\u0437 \u0441\u0432\u043e\u0435\u0439 \u0442\u0430\u0431\u043b\u0438\u0446\u044b. \u041e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u0438\u0435 \u0442\u043e\u0436\u0435 \u043f\u0440\u044f\u043c\u043e\u0435, snapshot \u043d\u0435 \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0441\u0430\u043c, \u0435\u0441\u043b\u0438 \u0438\u0441\u0445\u043e\u0434\u043d\u043e\u0435 \u0441\u043e\u0431\u044b\u0442\u0438\u0435 \u043f\u043e\u0437\u0436\u0435 \u0438\u0437\u043c\u0435\u043d\u0438\u043b\u043e\u0441\u044c.
\u0412 \u0442\u0435\u043a\u0443\u0449\u0435\u0439 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u043d\u0435\u0442 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e\u0433\u043e UPDATE flow \u0434\u043b\u044f \u0442\u0430\u043a\u0438\u0445 snapshots.<\/p>\n
RLS \u043a\u0430\u043a \u0433\u0440\u0430\u043d\u0438\u0446\u0430 \u0434\u043e\u0441\u0442\u0443\u043f\u0430<\/h3>\n
\u041f\u043e\u0441\u043b\u0435 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0442\u0430\u0431\u043b\u0438\u0446\u044b \u0432\u043a\u043b\u044e\u0447\u0430\u0435\u0442\u0441\u044f Row Level Security:<\/p>\n
alter table public.favoritesenable row level security;<\/code>
<\/span><\/a><\/div><\/pre>\n
Browser-facing \u0440\u043e\u043b\u044c \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442 \u0442\u043e\u043b\u044c\u043a\u043e \u043d\u0443\u0436\u043d\u044b\u0435 \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u0438:<\/p>\n
grant usage on schema publicto authenticated;grant select, insert, deleteon table public.favoritesto authenticated;<\/code>
<\/span><\/a><\/div><\/pre>\n
UPDATE \u0437\u0434\u0435\u0441\u044c \u043e\u0442\u0441\u0443\u0442\u0441\u0442\u0432\u0443\u0435\u0442.
\u0414\u0430\u043b\u044c\u0448\u0435 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u0442\u0440\u0438 policy. \u0427\u0442\u0435\u043d\u0438\u0435 \u0441\u0432\u043e\u0438\u0445 \u0441\u0442\u0440\u043e\u043a:<\/p>\n
create policy \"favorites_select_own\"on public.favoritesfor selectto authenticatedusing (  (select auth.uid()) = user_id);<\/code>
<\/span><\/a><\/div><\/pre>\n
\u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u0441\u0442\u0440\u043e\u043a\u0438 \u0442\u043e\u043b\u044c\u043a\u043e \u0434\u043b\u044f \u0441\u0435\u0431\u044f:<\/p>\n
create policy \"favorites_insert_own\"on public.favoritesfor insertto authenticatedwith check (  (select auth.uid()) = user_id);<\/code>
<\/span><\/a><\/div><\/pre>\n
\u0423\u0434\u0430\u043b\u0435\u043d\u0438\u0435 \u0441\u0432\u043e\u0438\u0445 \u0441\u0442\u0440\u043e\u043a:<\/p>\n
create policy \"favorites_delete_own\"on public.favoritesfor deleteto authenticatedusing (  (select auth.uid()) = user_id);<\/code>
<\/span><\/a><\/div><\/pre>\n
Frontend \u0432\u0441\u0451 \u0440\u0430\u0432\u043d\u043e \u0437\u043d\u0430\u0435\u0442\u00a0userId<\/code>\u00a0\u0438 \u043c\u043e\u0436\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0435\u0433\u043e \u0432 \u0437\u0430\u043f\u0440\u043e\u0441\u0435. \u041d\u043e JavaScript-\u0444\u0438\u043b\u044c\u0442\u0440 \u043d\u0435 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u0435\u043c \u0434\u043e\u0441\u0442\u0443\u043f\u0430. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, cloud favorites \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u044e\u0442\u0441\u044f \u0442\u0430\u043a:<\/p>\n
const { data, error } = await supabase  .from(\"favorites\")  .select(    \"user_id,event_id,event_snapshot,\" +    \"created_at,updated_at\"  )  .eq(\"user_id\", userId)  .order(\"created_at\", {    ascending: false,  });<\/code>
<\/span><\/a><\/div><\/pre>\n
.eq(\"user_id\", userId)<\/code>\u00a0\u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0438\u0432\u0430\u0435\u0442 \u0437\u0430\u043f\u0440\u043e\u0441 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f. RLS \u043d\u0435\u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u0442 \u0441\u0442\u0440\u043e\u043a\u0438 \u043d\u0430 \u0441\u0442\u043e\u0440\u043e\u043d\u0435 \u0431\u0430\u0437\u044b. \u0415\u0441\u043b\u0438 \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u044c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435\u00a0user_id<\/code>\u00a0\u0432 \u0437\u0430\u043f\u0440\u043e\u0441\u0435 \u0438\u0437 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430, policy \u043e\u0441\u0442\u0430\u0451\u0442\u0441\u044f \u0442\u0435\u043c \u0436\u0435.<\/p>\n
\u041a\u0430\u043a hook \u0432\u044b\u0431\u0438\u0440\u0430\u0435\u0442 guest \u0438\u043b\u0438 user mode<\/h3>\n
\u041e\u0431\u0449\u0438\u0439 cloud store \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u0440\u0435\u0436\u0438\u043c:<\/p>\n
type CloudFavoriteMode =  \"guest\" | \"user\";<\/code>
<\/span><\/a><\/div><\/pre>\n
\u041f\u0440\u0438 \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0441\u043e\u0437\u0434\u0430\u0451\u0442\u0441\u044f browser client \u0438 \u0437\u0430\u043f\u0440\u0430\u0448\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c:<\/p>\n
const supabase =  createSupabaseBrowserClient();if (!supabase) {  \/\/ guest mode  return;}const { data, error } =  await supabase.auth.getUser();const userId =  error ? null : data.user?.id ?? null;<\/code>
<\/span><\/a><\/div><\/pre>\n
\u0415\u0441\u043b\u0438 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f \u043d\u0435\u0442, \u043e\u0441\u0442\u0430\u0451\u0442\u0441\u044f \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0439 localStorage flow.
\u0415\u0441\u043b\u0438\u00a0userId<\/code>\u00a0\u0435\u0441\u0442\u044c, \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0435\u0442\u0441\u044f\u00a0public.favorites<\/code>:<\/p>\n
await loadCloudFavorites({  supabase,  userId,});<\/code>
<\/span><\/a><\/div><\/pre>\n
\u041d\u0430 \u0443\u0440\u043e\u0432\u043d\u0435 hook \u0432\u044b\u0431\u043e\u0440 \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0442\u0430\u043a:<\/p>\n
const mode = snapshot.mode;const favoriteEvents =  mode === \"user\"    ? snapshot.events    : localFavoriteEvents;const favoriteIds =  mode === \"user\"    ? snapshot.favoriteIds    : localFavorites.favoriteIds;<\/code>
<\/span><\/a><\/div><\/pre>\n
\u041a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u043d\u0435 \u0434\u0435\u043b\u0430\u0435\u0442 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0439 branch \u0434\u043b\u044f Supabase query. \u041e\u043d \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442:<\/p>\n
favoriteEventsfavoriteIdsisHydratedisLoadingmode<\/code>
<\/span><\/a><\/div><\/pre>\n
\u0418 \u043c\u043e\u0436\u0435\u0442 \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u044c \u043f\u043e\u0434\u043f\u0438\u0441\u044c:<\/p>\n
Browser favorites<\/code>
<\/span><\/a><\/div><\/pre>\n
\u0438\u043b\u0438:<\/p>\n
Account favorites<\/code>
<\/span><\/a><\/div><\/pre>\n
\u041c\u0438\u0433\u0440\u0430\u0446\u0438\u044f \u043f\u0440\u0438 \u043f\u0435\u0440\u0432\u043e\u043c \u0432\u0445\u043e\u0434\u0435<\/h3>\n
\u0417\u0434\u0435\u0441\u044c \u0432\u043e\u0437\u043d\u0438\u043a\u0430\u0435\u0442 \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0439 \u043f\u0435\u0440\u0435\u0445\u043e\u0434 \u043c\u0435\u0436\u0434\u0443 \u0434\u0432\u0443\u043c\u044f \u0440\u0435\u0436\u0438\u043c\u0430\u043c\u0438. \u041f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u0438\u043c, \u0447\u0442\u043e \u0434\u043e \u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0430\u0446\u0438\u0438 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u0441\u043e\u0445\u0440\u0430\u043d\u0438\u043b \u0442\u0440\u0438 \u0441\u043e\u0431\u044b\u0442\u0438\u044f:<\/p>\n
localStorage:ABC<\/code>
<\/span><\/a><\/div><\/pre>\n
\u041f\u043e\u0441\u043b\u0435 \u0432\u0445\u043e\u0434\u0430 \u0432 \u0430\u043a\u043a\u0430\u0443\u043d\u0442 \u0432 \u043e\u0431\u043b\u0430\u043a\u0435 \u0443\u0436\u0435 \u043c\u043e\u0436\u0435\u0442 \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u044c\u0441\u044f:<\/p>\n
Supabase:BD<\/code>
<\/span><\/a><\/div><\/pre>\n
\u041d\u0435\u043b\u044c\u0437\u044f \u043f\u0440\u043e\u0441\u0442\u043e \u0437\u0430\u043c\u0435\u043d\u0438\u0442\u044c \u043e\u0434\u0438\u043d \u0441\u043f\u0438\u0441\u043e\u043a \u0434\u0440\u0443\u0433\u0438\u043c. \u0422\u043e\u0433\u0434\u0430\u00a0A<\/code>\u00a0\u0438\u00a0C<\/code>\u00a0\u0438\u0441\u0447\u0435\u0437\u043d\u0443\u0442 \u0438\u0437 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430.
\u0412 \u043f\u0440\u043e\u0435\u043a\u0442\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f copy migration. \u0421\u043d\u0430\u0447\u0430\u043b\u0430 \u0447\u0438\u0442\u0430\u044e\u0442\u0441\u044f cloud rows, \u0437\u0430\u0442\u0435\u043c IDs \u043f\u0440\u0435\u0432\u0440\u0430\u0449\u0430\u044e\u0442\u0441\u044f \u0432\u00a0Set<\/code>:<\/p>\n
await migrateLocalFavoritesToCloud({  existingIds: new Set(    rows.map((row) => row.event_id)  ),  supabase,  userId,});<\/code>
<\/span><\/a><\/div><\/pre>\n
\u0418\u0437 localStorage \u0432\u044b\u0431\u0438\u0440\u0430\u044e\u0442\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u043e\u0442\u0441\u0443\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0435 \u0441\u043e\u0431\u044b\u0442\u0438\u044f:<\/p>\n
const localEvents =  getFavoriteEvents().filter(    (event) =>      !existingIds.has(event.id)  );<\/code>
<\/span><\/a><\/div><\/pre>\n
\u0414\u043b\u044f \u043d\u0438\u0445 \u0441\u043e\u0437\u0434\u0430\u044e\u0442\u0441\u044f \u043d\u043e\u0432\u044b\u0435 rows:<\/p>\n
const rows: CloudFavoriteInsert[] =  localEvents.map((event) => ({    event_id: event.id,    event_snapshot: event,    user_id: userId,  }));<\/code>
<\/span><\/a><\/div><\/pre>\n
\u0417\u0430\u0442\u0435\u043c \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u0442\u0441\u044f \u043e\u0431\u044b\u0447\u043d\u044b\u0439\u00a0insert<\/code>:<\/p>\n
const { error } = await supabase  .from(\"favorites\")  .insert(rows);<\/code>
<\/span><\/a><\/div><\/pre>\n
\u041f\u0440\u0438 \u0443\u0441\u043f\u0435\u0448\u043d\u043e\u0439 \u0437\u0430\u043f\u0438\u0441\u0438 \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u044b\u0435 \u0441\u043e\u0431\u044b\u0442\u0438\u044f \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u0432 \u0442\u0435\u043a\u0443\u0449\u0438\u0439 cloud store.
\u041f\u043e\u043b\u0443\u0447\u0430\u0435\u0442\u0441\u044f:<\/p>\n
local:A B Ccloud before:B Dcloud after migration:A B C D<\/code>
<\/span><\/a><\/div><\/pre>\n
\u041f\u043e\u0447\u0435\u043c\u0443 \u043c\u0438\u0433\u0440\u0430\u0446\u0438\u044f \u043a\u043e\u043f\u0438\u0440\u0443\u0435\u0442, \u0430 \u043d\u0435 \u043f\u0435\u0440\u0435\u043d\u043e\u0441\u0438\u0442<\/h3>\n
\u041f\u043e\u0441\u043b\u0435 \u0443\u0441\u043f\u0435\u0448\u043d\u043e\u0433\u043e\u00a0insert<\/code>\u00a0\u043b\u043e\u043a\u0430\u043b\u044c\u043d\u044b\u0439 storage \u043d\u0435 \u043e\u0447\u0438\u0449\u0430\u0435\u0442\u0441\u044f. \u042d\u0442\u043e \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u0435\u0442 \u0433\u043e\u0441\u0442\u0435\u0432\u043e\u0439 \u043a\u043e\u043d\u0442\u0443\u0440 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430. \u0415\u0441\u043b\u0438 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u043f\u043e\u0437\u0436\u0435 \u0432\u044b\u0439\u0434\u0435\u0442 \u0438\u0437 \u0430\u043a\u043a\u0430\u0443\u043d\u0442\u0430, \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0441\u043d\u043e\u0432\u0430 \u043f\u0435\u0440\u0435\u0439\u0434\u0451\u0442 \u0432 guest mode \u0438 \u0441\u043c\u043e\u0436\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043f\u0440\u0435\u0436\u043d\u0438\u0435 browser favorites.
\u0412\u0430\u0436\u043d\u043e \u043f\u043e\u043d\u0438\u043c\u0430\u0442\u044c \u0433\u0440\u0430\u043d\u0438\u0446\u0443, \u0442\u0435\u043a\u0443\u0449\u0430\u044f \u0441\u0438\u043d\u0445\u0440\u043e\u043d\u0438\u0437\u0430\u0446\u0438\u044f \u043e\u0434\u043d\u043e\u0441\u0442\u043e\u0440\u043e\u043d\u043d\u044f\u044f.<\/p>\n
localStorage    \u2193 first sign inSupabase<\/code>
<\/span><\/a><\/div><\/pre>\n
\u0418\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f cloud favorites \u043e\u0431\u0440\u0430\u0442\u043d\u043e \u0432 localStorage \u043d\u0435 \u043a\u043e\u043f\u0438\u0440\u0443\u044e\u0442\u0441\u044f. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u043f\u043e\u0441\u043b\u0435 \u0432\u0445\u043e\u0434\u0430 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u043c\u043e\u0436\u0435\u0442 \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u043d\u043e\u0432\u044b\u0435 \u0441\u043e\u0431\u044b\u0442\u0438\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u0432 account favorites, \u0430 \u043f\u043e\u0441\u043b\u0435 \u0432\u044b\u0445\u043e\u0434\u0430 \u0433\u043e\u0441\u0442\u0435\u0432\u043e\u0439 \u0441\u043f\u0438\u0441\u043e\u043a \u043d\u0430 \u044d\u0442\u043e\u043c \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435 \u0431\u0443\u0434\u0435\u0442 \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0442\u044c \u0441\u0442\u0430\u0440\u044b\u0439 \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u044b\u0439 \u043d\u0430\u0431\u043e\u0440.
\u042d\u0442\u043e \u043d\u0435 \u0434\u0432\u0443\u0441\u0442\u043e\u0440\u043e\u043d\u043d\u044f\u044f offline-sync \u0441\u0438\u0441\u0442\u0435\u043c\u0430.<\/p>\n
\u0424\u043b\u0430\u0433 \u043c\u0438\u0433\u0440\u0430\u0446\u0438\u0438 \u043f\u0440\u0438\u0432\u044f\u0437\u0430\u043d \u043a \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044e<\/h3>\n
\u0427\u0442\u043e\u0431\u044b \u043d\u0435 \u043a\u043e\u043f\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043e\u0434\u0438\u043d \u0438 \u0442\u043e\u0442 \u0436\u0435 local cache \u043f\u0440\u0438 \u043a\u0430\u0436\u0434\u043e\u0439 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0435, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0439 key:<\/p>\n
const MIGRATION_FLAG_PREFIX =  \"eventmap:favorites:migrated:\";<\/code>
<\/span><\/a><\/div><\/pre>\n
\u041f\u043e\u043b\u043d\u044b\u0439 \u043a\u043b\u044e\u0447 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442\u00a0userId<\/code>:<\/p>\n
function getMigrationFlagKey(  userId: string): string {  return `${MIGRATION_FLAG_PREFIX}${userId}`;}<\/code>
<\/span><\/a><\/div><\/pre>\n
\u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440:<\/p>\n
eventmap:favorites:migrated:<user-id><\/code>
<\/span><\/a><\/div><\/pre>\n
\u041f\u043e\u0441\u043b\u0435 \u0443\u0441\u043f\u0435\u0448\u043d\u043e\u0439 \u043c\u0438\u0433\u0440\u0430\u0446\u0438\u0438:<\/p>\n
window.localStorage.setItem(  getMigrationFlagKey(userId),  \"1\");<\/code>
<\/span><\/a><\/div><\/pre>\n
\u0415\u0441\u043b\u0438 cloud insert \u0432\u0435\u0440\u043d\u0443\u043b \u043e\u0448\u0438\u0431\u043a\u0443, flag \u043d\u0435 \u0441\u0442\u0430\u0432\u0438\u0442\u0441\u044f. \u0422\u043e \u0435\u0441\u0442\u044c \u043d\u0435\u0443\u0434\u0430\u0447\u043d\u0430\u044f \u043f\u043e\u043f\u044b\u0442\u043a\u0430 \u043d\u0435 \u043e\u0442\u043c\u0435\u0447\u0430\u0435\u0442\u0441\u044f \u043a\u0430\u043a \u0437\u0430\u0432\u0435\u0440\u0448\u0451\u043d\u043d\u0430\u044f \u043c\u0438\u0433\u0440\u0430\u0446\u0438\u044f. \u0424\u043b\u0430\u0433 \u0445\u0440\u0430\u043d\u0438\u0442\u0441\u044f \u0432 \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u043e\u043c \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435. \u041d\u0430 \u0434\u0440\u0443\u0433\u043e\u043c \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u0435 \u0434\u0435\u0439\u0441\u0442\u0432\u0443\u0435\u0442 \u0441\u0432\u043e\u0439 localStorage \u0438, \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0435\u043d\u043d\u043e, \u0441\u0432\u043e\u044f \u043c\u0438\u0433\u0440\u0430\u0446\u0438\u044f \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u044b\u0445 \u0433\u043e\u0441\u0442\u0435\u0432\u044b\u0445 \u0434\u0430\u043d\u043d\u044b\u0445.<\/p>\n
\u041f\u043e\u0447\u0435\u043c\u0443 \u0437\u0434\u0435\u0441\u044c INSERT, \u0430 \u043d\u0435 upsert<\/h3>\n
\u0412 \u043f\u043e\u0434\u043e\u0431\u043d\u044b\u0445 \u0441\u0445\u0435\u043c\u0430\u0445 \u0445\u043e\u0447\u0435\u0442\u0441\u044f \u0437\u0430\u043c\u0435\u043d\u0438\u0442\u044c:<\/p>\n
.insert(rows)<\/code>
<\/span><\/a><\/div><\/pre>\n
\u043d\u0430:<\/p>\n
.upsert(rows)<\/code>
<\/span><\/a><\/div><\/pre>\n
\u041d\u043e SQL policy \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u043d\u0435 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 UPDATE. \u0415\u0441\u0442\u044c \u0442\u043e\u043b\u044c\u043a\u043e:<\/p>\n
SELECTINSERTDELETE<\/code>
<\/span><\/a><\/div><\/pre>\n
upsert<\/code>\u00a0\u043c\u043e\u0436\u0435\u0442 \u043f\u0435\u0440\u0435\u0439\u0442\u0438 \u0432 update-\u0441\u0446\u0435\u043d\u0430\u0440\u0438\u0439 \u043f\u0440\u0438 \u043a\u043e\u043d\u0444\u043b\u0438\u043a\u0442\u0435 \u0441 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u044e\u0449\u0435\u0439 \u0441\u0442\u0440\u043e\u043a\u043e\u0439. \u0422\u043e\u0433\u0434\u0430 \u043c\u043e\u0434\u0435\u043b\u044c \u043f\u0440\u0430\u0432 \u0443\u0436\u0435 \u043d\u0435 \u0441\u043e\u0432\u043f\u0430\u0434\u0430\u0435\u0442 \u0441 \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u044f\u043c\u0438 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f.
\u0412 \u043f\u0440\u043e\u0435\u043a\u0442\u0435 \u0441\u043d\u0430\u0447\u0430\u043b\u0430 \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u044e\u0442\u0441\u044f \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0435\u00a0event_id<\/code>, \u0437\u0430\u0442\u0435\u043c \u043f\u0440\u0438 \u043c\u0438\u0433\u0440\u0430\u0446\u0438\u0438 \u043e\u0442\u0431\u0440\u0430\u0441\u044b\u0432\u0430\u044e\u0442\u0441\u044f \u0441\u043e\u0432\u043f\u0430\u0434\u0435\u043d\u0438\u044f \u0438 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u0442\u0441\u044f\u00a0insert<\/code>. \u041f\u0440\u0438 \u043e\u0431\u044b\u0447\u043d\u043e\u043c \u0441\u043e\u0445\u0440\u0430\u043d\u0435\u043d\u0438\u0438 hook \u0442\u0430\u043a\u0436\u0435 \u0441\u043d\u0430\u0447\u0430\u043b\u0430 \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u0442:<\/p>\n
if (  cloudStore.favoriteIds.includes(    event.id  )) {  return;}<\/code>
<\/span><\/a><\/div><\/pre>\n
\u041e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0439 UPDATE \u0434\u043b\u044f favorites \u0441\u0435\u0439\u0447\u0430\u0441 \u043d\u0435 \u043d\u0443\u0436\u0435\u043d.<\/p>\n
\u0414\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0441 optimistic UI<\/h3>\n
\u0414\u043b\u044f \u0432\u043e\u0448\u0435\u0434\u0448\u0435\u0433\u043e \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f \u043d\u043e\u0432\u043e\u0435 \u0441\u043e\u0431\u044b\u0442\u0438\u0435 \u0441\u043d\u0430\u0447\u0430\u043b\u0430 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0432 \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u044b\u0439 cloud store:<\/p>\n
const previousStore = cloudStore;const events = normaliseEvents([  event,  ...cloudStore.events,]);patchCloudStore({  events,  favoriteIds:    getFavoriteIds(events),});<\/code>
<\/span><\/a><\/div><\/pre>\n
\u041f\u043e\u0441\u043b\u0435 \u044d\u0442\u043e\u0433\u043e \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u0442\u0441\u044f insert:<\/p>\n
const row: CloudFavoriteInsert = {  event_id: event.id,  event_snapshot: event,  user_id: userId,};const { error } = await supabase  .from(\"favorites\")  .insert(row);<\/code>
<\/span><\/a><\/div><\/pre>\n
\u0415\u0441\u043b\u0438 \u0431\u0430\u0437\u0430 \u0432\u0435\u0440\u043d\u0443\u043b\u0430 \u043e\u0448\u0438\u0431\u043a\u0443:<\/p>\n
if (error) {  setCloudStore(previousStore);}<\/code>
<\/span><\/a><\/div><\/pre>\n
UI \u043e\u0442\u043a\u0430\u0442\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u043a \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0435\u043c\u0443 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044e. \u042d\u0442\u043e \u043d\u0435 \u043c\u0435\u043d\u044f\u0435\u0442 \u0440\u043e\u043b\u044c RLS. \u041e\u043f\u0442\u0438\u043c\u0438\u0441\u0442\u0438\u0447\u0435\u0441\u043a\u043e\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u0435\u0442 \u0442\u043e\u043b\u044c\u043a\u043e \u0432 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0435, \u0430 \u0437\u0430\u043f\u0438\u0441\u044c \u0432\u0441\u0451 \u0440\u0430\u0432\u043d\u043e \u043f\u0440\u043e\u0445\u043e\u0434\u0438\u0442 policy \u0431\u0430\u0437\u044b.<\/p>\n
DELETE \u0443\u0441\u0442\u0440\u043e\u0435\u043d \u0441\u0438\u043c\u043c\u0435\u0442\u0440\u0438\u0447\u043d\u043e<\/h3>\n
\u0421\u043d\u0430\u0447\u0430\u043b\u0430 \u0441\u043e\u0431\u044b\u0442\u0438\u0435 \u0443\u0431\u0438\u0440\u0430\u0435\u0442\u0441\u044f \u0438\u0437 client store:<\/p>\n
const previousStore = cloudStore;const events =  cloudStore.events.filter(    (event) => event.id !== id  );patchCloudStore({  events,  favoriteIds:    getFavoriteIds(events),});<\/code>
<\/span><\/a><\/div><\/pre>\n
\u041f\u043e\u0442\u043e\u043c \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u0442\u0441\u044f \u0437\u0430\u043f\u0440\u043e\u0441:<\/p>\n
const { error } = await supabase  .from(\"favorites\")  .delete()  .eq(\"user_id\", userId)  .eq(\"event_id\", id);<\/code>
<\/span><\/a><\/div><\/pre>\n
\u041f\u0440\u0438 \u043e\u0448\u0438\u0431\u043a\u0435 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442\u0441\u044f\u00a0previousStore<\/code>. \u041d\u0430 \u0443\u0440\u043e\u0432\u043d\u0435 \u0431\u0430\u0437\u044b DELETE policy \u0432\u0441\u0451 \u0440\u0430\u0432\u043d\u043e \u0442\u0440\u0435\u0431\u0443\u0435\u0442 \u0441\u043e\u0432\u043f\u0430\u0434\u0435\u043d\u0438\u044f\u00a0auth.uid()<\/code>\u00a0\u0438\u00a0user_id<\/code>.<\/p>\n
Auth \u043d\u0443\u0436\u0435\u043d \u043d\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u0442\u0430\u0431\u043b\u0438\u0446\u0435<\/h3>\n
\u0414\u043b\u044f cloud mode \u0441\u043d\u0430\u0447\u0430\u043b\u0430 \u0434\u043e\u043b\u0436\u043d\u0430 \u043f\u043e\u044f\u0432\u0438\u0442\u044c\u0441\u044f Supabase session. \u0412 \u043f\u0440\u043e\u0435\u043a\u0442\u0435 login page \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442 Magic Link \u0438 Google OAuth.
Magic Link:<\/p>\n
await supabase.auth.signInWithOtp({  email,  options: {    emailRedirectTo:      getRedirectTo(),  },});<\/code>
<\/span><\/a><\/div><\/pre>\n
Google:<\/p>\n
await supabase.auth.signInWithOAuth({  provider: \"google\",  options: {    redirectTo:      getRedirectTo(),  },});<\/code>
<\/span><\/a><\/div><\/pre>\n
\u041e\u0431\u0435 \u0432\u0435\u0442\u043a\u0438 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u044e\u0442 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f \u043d\u0430:<\/p>\n
\/auth\/callback<\/code>
<\/span><\/a><\/div><\/pre>\n
Callback \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442\u00a0code<\/code>:<\/p>\n
const code =  request.nextUrl.searchParams    .get(\"code\");<\/code>
<\/span><\/a><\/div><\/pre>\n
\u0438 \u043c\u0435\u043d\u044f\u0435\u0442 \u0435\u0433\u043e \u043d\u0430 Supabase session:<\/p>\n
const { error } =  await supabase.auth    .exchangeCodeForSession(code);<\/code>
<\/span><\/a><\/div><\/pre>\n
\u041f\u043e\u0441\u043b\u0435 \u044d\u0442\u043e\u0433\u043e \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442\u0441\u044f \u043d\u0430 \u0441\u043e\u0445\u0440\u0430\u043d\u0451\u043d\u043d\u044b\u0439 \u0432\u043d\u0443\u0442\u0440\u0435\u043d\u043d\u0438\u0439 route.<\/p>\n
next\u00a0\u043d\u0435\u043b\u044c\u0437\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043a\u0430\u043a \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u043b\u044c\u043d\u044b\u0439 redirect<\/h3>\n
Login \u043c\u043e\u0436\u0435\u0442 \u043e\u0442\u043a\u0440\u044b\u0432\u0430\u0442\u044c\u0441\u044f \u0441 \u0430\u0434\u0440\u0435\u0441\u043e\u043c:<\/p>\n
\/en\/login?next=\/en\/favorites<\/code>
<\/span><\/a><\/div><\/pre>\n
\u041f\u043e\u0441\u043b\u0435 \u0430\u0432\u0442\u043e\u0440\u0438\u0437\u0430\u0446\u0438\u0438 \u0445\u043e\u0447\u0435\u0442\u0441\u044f \u0432\u0435\u0440\u043d\u0443\u0442\u044c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f \u0442\u0443\u0434\u0430, \u043e\u0442\u043a\u0443\u0434\u0430 \u043d\u0430\u0447\u0430\u043b\u0441\u044f flow. \u041d\u043e \u0441\u0442\u0440\u043e\u043a\u0443\u00a0next<\/code>\u00a0\u043d\u0435\u043b\u044c\u0437\u044f \u0431\u0435\u0437 \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0438 \u043f\u0435\u0440\u0435\u0434\u0430\u0432\u0430\u0442\u044c \u0432 redirect.
\u0412 \u043f\u0440\u043e\u0435\u043a\u0442\u0435 \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u0442\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u0432\u043d\u0443\u0442\u0440\u0435\u043d\u043d\u0438\u0439 \u043f\u0443\u0442\u044c:<\/p>\n
export function getSafeAuthNext(  value: string | null,  fallback: string): string {  if (!value) {    return fallback;  }  if (!value.startsWith(\"\/\")) {    return fallback;  }  if (value.startsWith(\"\/\/\")) {    return fallback;  }  try {    const parsed = new URL(      value,      \"https:\/\/eventmap.local\"    );    if (      parsed.origin !==      \"https:\/\/eventmap.local\"    ) {      return fallback;    }    return (      `${parsed.pathname}` +      `${parsed.search}` +      `${parsed.hash}`    );  } catch {    return fallback;  }}<\/code>
<\/span><\/a><\/div><\/pre>\n
\u0422\u0430\u043a callback \u043d\u0435 \u043f\u0440\u0435\u0432\u0440\u0430\u0449\u0430\u0435\u0442\u0441\u044f \u0432 open redirect \u043d\u0430 \u043f\u0435\u0440\u0435\u0434\u0430\u043d\u043d\u044b\u0439 \u0432\u043d\u0435\u0448\u043d\u0438\u0439 \u0434\u043e\u043c\u0435\u043d.<\/p>\n
Redirect URLs \u0434\u043b\u044f localhost \u0438 production<\/h3>\n
Auth flow \u0437\u0430\u0432\u0438\u0441\u0438\u0442 \u043d\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u043e\u0442 \u043a\u043e\u0434\u0430 Next.js. Supabase \u0434\u043e\u043b\u0436\u0435\u043d \u0440\u0430\u0437\u0440\u0435\u0448\u0430\u0442\u044c \u0430\u0434\u0440\u0435\u0441 callback \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f. \u0414\u043b\u044f \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u043e\u0439 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438:<\/p>\n
Site URL:http:\/\/localhost:3000Redirect URL:http:\/\/localhost:3000\/auth\/callback<\/code>
<\/span><\/a><\/div><\/pre>\n
\u0414\u043b\u044f production:<\/p>\n
Site URL:https:\/\/<production-domain>Redirect URL:https:\/\/<production-domain>\/auth\/callback<\/code>
<\/span><\/a><\/div><\/pre>\n
\u0423 Google OAuth \u0435\u0441\u0442\u044c \u0435\u0449\u0451 \u043e\u0434\u0438\u043d \u0443\u0440\u043e\u0432\u0435\u043d\u044c. Google \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f \u043d\u0435 \u043d\u0430\u043f\u0440\u044f\u043c\u0443\u044e \u0432 Next.js callback, \u0430 \u0432 Supabase Auth:<\/p>\n
https:\/\/<project-ref>.supabase.co\/auth\/v1\/callback<\/code>
<\/span><\/a><\/div><\/pre>\n
\u041f\u043e\u0441\u043b\u0435 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0438 provider callback Supabase \u043f\u0435\u0440\u0435\u043d\u0430\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u0442 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f \u043d\u0430 \u0440\u0430\u0437\u0440\u0435\u0448\u0451\u043d\u043d\u044b\u0439 callback \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f. \u0421\u0445\u0435\u043c\u0430 \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442\u0441\u044f \u0442\u0430\u043a\u043e\u0439:<\/p>\n
Next.js  \u2193 signInWithOAuthGoogle  \u2193Supabase Auth callback  \u2193Next.js \/auth\/callback  \u2193 exchange codesafe next path<\/code>
<\/span><\/a><\/div><\/pre>\n
\u042d\u0442\u0438 URL \u043b\u0443\u0447\u0448\u0435 \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0442\u044c \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e \u0434\u043b\u044f localhost \u0438 production. \u041e\u0448\u0438\u0431\u043a\u0430 \u0432 allow list \u043c\u043e\u0436\u0435\u0442 \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u0442\u044c \u043a\u0430\u043a \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0430 React \u0438\u043b\u0438 callback route, \u0445\u043e\u0442\u044f \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0434\u043e \u0441\u0432\u043e\u0435\u0433\u043e \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430 \u0432\u043e\u043e\u0431\u0449\u0435 \u043d\u0435 \u0434\u043e\u0448\u043b\u043e.<\/p>\n
Client island \u043e\u0441\u0442\u0430\u0451\u0442\u0441\u044f \u043c\u0430\u043b\u0435\u043d\u044c\u043a\u0438\u043c<\/h3>\n
\u0418\u0437\u0431\u0440\u0430\u043d\u043d\u043e\u043c\u0443 \u043d\u0443\u0436\u0435\u043d browser API \u0438 \u0438\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432\u043d\u0430\u044f \u043a\u043d\u043e\u043f\u043a\u0430, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e server-only \u044d\u0442\u0430 \u0447\u0430\u0441\u0442\u044c \u0431\u044b\u0442\u044c \u043d\u0435 \u043c\u043e\u0436\u0435\u0442. \u041d\u043e \u0438\u0437 \u044d\u0442\u043e\u0433\u043e \u043d\u0435 \u0441\u043b\u0435\u0434\u0443\u0435\u0442 \u043f\u0435\u0440\u0435\u0432\u043e\u0434 \u0432\u0441\u0435\u0439 \u043a\u0430\u0440\u0442\u043e\u0447\u043a\u0438 \u0438\u043b\u0438 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u0432 Client Component.
\u0412 \u043f\u0440\u043e\u0435\u043a\u0442\u0435\u00a0EventCard<\/code>\u00a0\u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442 \u0433\u043e\u0442\u043e\u0432\u043e\u0435\u00a0EventCardData<\/code>, \u0430 \u0438\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u044c \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u0432\u00a0FavoriteButton<\/code>.<\/p>\n
<FavoriteButton  event={event}  eventId={event.id}\/><\/code>
<\/span><\/a><\/div><\/pre>\n
\u0421\u0442\u0440\u0430\u043d\u0438\u0446\u0430\u00a0\/favorites<\/code>\u00a0\u0442\u043e\u0436\u0435 \u043e\u0441\u0442\u0430\u0451\u0442\u0441\u044f \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u043c route, \u0430 \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u0430\u044f \u0447\u0430\u0441\u0442\u044c \u043e\u0442\u0432\u0435\u0447\u0430\u0435\u0442 \u0442\u043e\u043b\u044c\u043a\u043e \u0437\u0430 \u0432\u044b\u0431\u043e\u0440 \u0438\u0441\u0442\u043e\u0447\u043d\u0438\u043a\u0430, hydration \u0438 \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u0438 \u0441\u043e \u0441\u043f\u0438\u0441\u043a\u043e\u043c. \u0413\u0440\u0430\u043d\u0438\u0446\u0430 \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442\u0441\u044f \u0442\u0430\u043a\u043e\u0439:<\/p>\n
Server-rendered application        \u2193EventCard        \u2193small FavoriteButton client island        \u2193useFavoritesCloud       \/ \\      \/   \\localStorage Supabase<\/code>
<\/span><\/a><\/div><\/pre>\n
\u0427\u0442\u043e \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u0431\u0435\u0437 Supabase<\/h3>\n
\u041a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u044f \u043c\u043e\u0436\u0435\u0442 \u043e\u0442\u0441\u0443\u0442\u0441\u0442\u0432\u043e\u0432\u0430\u0442\u044c:<\/p>\n
const supabase =  createSupabaseBrowserClient();if (!supabase) {  \/\/ guest}<\/code>
<\/span><\/a><\/div><\/pre>\n
\u0422\u043e \u0436\u0435 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442, \u0435\u0441\u043b\u0438 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u043d\u0435 \u0430\u0432\u0442\u043e\u0440\u0438\u0437\u043e\u0432\u0430\u043d. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0435 cloud favorites \u043d\u0435 \u0434\u0435\u043b\u0430\u0435\u0442 guest mode \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u044b\u043c \u043e\u0442 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u043e\u0441\u0442\u0438 Supabase \u0434\u043b\u044f \u0441\u0430\u043c\u043e\u0433\u043e \u0444\u0430\u043a\u0442\u0430 \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u0441\u043e\u0445\u0440\u0430\u043d\u0435\u043d\u0438\u044f. \u0421 \u0442\u043e\u0447\u043a\u0438 \u0437\u0440\u0435\u043d\u0438\u044f UI \u044d\u0442\u043e \u043f\u043e-\u043f\u0440\u0435\u0436\u043d\u0435\u043c\u0443 \u043e\u0434\u043d\u0430 \u043a\u043d\u043e\u043f\u043a\u0430.<\/p>\n
\u0422\u0435\u043a\u0443\u0449\u0438\u0435 \u0433\u0440\u0430\u043d\u0438\u0446\u044b \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438<\/h3>\n
\u0423 \u0441\u0445\u0435\u043c\u044b \u0435\u0441\u0442\u044c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u044b\u0445 \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u0438\u0439. Cloud migration \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u0442\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u0438\u0437 localStorage \u0432 Supabase. \u041e\u0431\u0440\u0430\u0442\u043d\u043e\u0439 \u0441\u0438\u043d\u0445\u0440\u043e\u043d\u0438\u0437\u0430\u0446\u0438\u0438 \u043d\u0435\u0442.\u00a0event_snapshot<\/code>\u00a0\u0441\u043e\u0445\u0440\u0430\u043d\u044f\u0435\u0442\u0441\u044f \u0432 \u043c\u043e\u043c\u0435\u043d\u0442 INSERT. UPDATE policy \u0438 \u043c\u0435\u0445\u0430\u043d\u0438\u0437\u043c \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f snapshot \u0432 \u0442\u0435\u043a\u0443\u0449\u0435\u043c \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u0435 \u043e\u0442\u0441\u0443\u0442\u0441\u0442\u0432\u0443\u044e\u0442. \u041c\u0438\u0433\u0440\u0430\u0446\u0438\u043e\u043d\u043d\u044b\u0439 flag \u043b\u043e\u043a\u0430\u043b\u0435\u043d \u0434\u043b\u044f \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430 \u0438 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f.
Cloud favorites \u0440\u0430\u0431\u043e\u0442\u0430\u044e\u0442 \u0447\u0435\u0440\u0435\u0437 browser client \u043f\u043e\u0441\u043b\u0435 hydration. \u0422\u0435\u043a\u0443\u0449\u0430\u044f \u0441\u0445\u0435\u043c\u0430 \u043d\u0435 \u043f\u044b\u0442\u0430\u0435\u0442\u0441\u044f \u043f\u0440\u0435\u0432\u0440\u0430\u0449\u0430\u0442\u044c\u00a0\/favorites<\/code>\u00a0\u0432 \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u043e \u0437\u0430\u0449\u0438\u0449\u0451\u043d\u043d\u0443\u044e account page. \u041f\u0440\u043e\u0432\u0435\u0440\u043a\u0430\u00a0.eq(\"user_id\", userId)<\/code>\u00a0\u0432 frontend-\u0437\u0430\u043f\u0440\u043e\u0441\u0435 \u043d\u0435 \u0437\u0430\u043c\u0435\u043d\u044f\u0435\u0442 RLS. Service-role key \u0432 browser flow \u043d\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f.
\u042d\u0442\u0438 \u0433\u0440\u0430\u043d\u0438\u0446\u044b \u0432\u0430\u0436\u043d\u0435\u0435 \u043f\u043e\u043f\u044b\u0442\u043a\u0438 \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u043e\u0434\u0438\u043d hook \u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u043c \u0441\u0440\u0430\u0437\u0443 \u0437\u0430 \u043f\u043e\u043b\u043d\u043e\u0446\u0435\u043d\u043d\u0443\u044e offline-\u0441\u0438\u043d\u0445\u0440\u043e\u043d\u0438\u0437\u0430\u0446\u0438\u044e, account management \u0438 \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u0443\u044e \u0430\u0432\u0442\u043e\u0440\u0438\u0437\u0430\u0446\u0438\u044e.<\/p>\n
\u0418\u0442\u043e\u0433\u043e\u0432\u0430\u044f \u0441\u0445\u0435\u043c\u0430<\/h3>\n
\u041e\u0441\u043d\u043e\u0432\u043d\u043e\u0439 \u043f\u043e\u0442\u043e\u043a \u0443\u043a\u043b\u0430\u0434\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0432 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0439:<\/p>\n
no session  \u2193localStorage favorites  \u2193user signs in  \u2193load cloud favorites  \u2193copy missing local snapshots  \u2193mark migration for this user\/browser  \u2193use Supabase favoritesuser signs out  \u2193guest localStorage mode<\/code>
<\/span><\/a><\/div><\/pre>\n
\u041f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u043c\u043e\u0436\u0435\u0442 \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u0442\u044c \u0441\u043e\u0431\u044b\u0442\u0438\u044f \u0434\u043e \u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0430\u0446\u0438\u0438. \u041f\u043e\u0441\u043b\u0435 \u0432\u0445\u043e\u0434\u0430 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0435 browser favorites \u043a\u043e\u043f\u0438\u0440\u0443\u044e\u0442\u0441\u044f \u0432 account storage. RLS \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0438\u0432\u0430\u0435\u0442 \u0441\u0442\u0440\u043e\u043a\u0438 \u0442\u0435\u043a\u0443\u0449\u0438\u043c\u00a0auth.uid()<\/code>, \u0430 UI \u043f\u0440\u043e\u0434\u043e\u043b\u0436\u0430\u0435\u0442 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0447\u0435\u0440\u0435\u0437 \u043e\u0434\u0438\u043d\u00a0useFavoritesCloud<\/code>.
\u041e\u0431\u0449\u0438\u0439 \u0432\u0430\u0440\u0438\u0430\u043d\u0442 \u0441 \u0442\u0430\u0431\u043b\u0438\u0446\u0435\u0439 Supabase \u0438 \u0431\u0430\u0437\u043e\u0432\u044b\u043c\u0438 RLS policies \u0431\u0435\u0437 \u0441\u043b\u043e\u044f \u043c\u0438\u0433\u0440\u0430\u0446\u0438\u0438 \u043e\u043f\u0438\u0441\u0430\u043d \u0432 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435\u00a0\u041a\u0430\u043a \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c Supabase \u0432\u043c\u0435\u0441\u0442\u043e \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e\u0433\u043e backend<\/a>.<\/p>\n<\/div>\n
\u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438 https:\/\/habr.com\/ru\/articles\/1106802\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
\u0418\u0437\u0431\u0440\u0430\u043d\u043d\u043e\u0435 \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u043c\u0435\u0441\u0442\u0438\u0442\u044c \u0432\u00a0localStorage. \u041f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u043d\u0430\u0436\u0438\u043c\u0430\u0435\u0442 \u043a\u043d\u043e\u043f\u043a\u0443, \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u0435\u0442 ID \u0437\u0430\u043f\u0438\u0441\u0438 \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435, \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0439 backend \u0434\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043d\u0435 \u043d\u0443\u0436\u0435\u043d. \u041f\u0440\u043e\u0431\u043b\u0435\u043c\u0430 \u043f\u043e\u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043f\u043e\u0441\u043b\u0435 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0430\u043a\u043a\u0430\u0443\u043d\u0442\u043e\u0432.\u00a0localStorage\u00a0\u043f\u0440\u0438\u0432\u044f\u0437\u0430\u043d \u043a \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u043e\u043c\u0443 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0443. \u041f\u043e\u0441\u043b\u0435 \u0432\u0445\u043e\u0434\u0430 \u0441 \u0434\u0440\u0443\u0433\u043e\u0433\u043e \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u0430 \u0441\u043e\u0445\u0440\u0430\u043d\u0451\u043d\u043d\u043e\u0433\u043e \u0441\u043f\u0438\u0441\u043a\u0430 \u0442\u0430\u043c \u043d\u0435\u0442. \u041f\u0440\u043e\u0441\u0442\u0430\u044f \u0437\u0430\u043c\u0435\u043d\u0430\u00a0localStorage\u00a0\u043d\u0430 \u043e\u0431\u043b\u0430\u0447\u043d\u0443\u044e \u0442\u0430\u0431\u043b\u0438\u0446\u0443 \u0442\u043e\u0436\u0435 \u043c\u0435\u043d\u044f\u0435\u0442 \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u0435 \u043f\u0440\u043e\u0434\u0443\u043a\u0442\u0430, \u0442\u0435\u043f\u0435\u0440\u044c \u0434\u043b\u044f \u043a\u043d\u043e\u043f\u043a\u0438 \u00ab\u0412 \u0438\u0437\u0431\u0440\u0430\u043d\u043d\u043e\u0435\u00bb \u043f\u0440\u0438\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u0441\u043d\u0430\u0447\u0430\u043b\u0430 \u0442\u0440\u0435\u0431\u043e\u0432\u0430\u0442\u044c \u0430\u0432\u0442\u043e\u0440\u0438\u0437\u0430\u0446\u0438\u044e. \u0415\u0441\u043b\u0438 \u0433\u043e\u0441\u0442\u0435\u0432\u043e\u0439 \u0440\u0435\u0436\u0438\u043c \u0443\u0436\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442, \u043b\u043e\u0433\u0438\u0447\u043d\u0435\u0435 \u0441\u043e\u0445\u0440\u0430\u043d\u0438\u0442\u044c \u0435\u0433\u043e \u0438 \u043f\u0435\u0440\u0435\u043a\u043b\u044e\u0447\u0430\u0442\u044c \u0438\u0441\u0442\u043e\u0447\u043d\u0438\u043a \u0434\u0430\u043d\u043d\u044b\u0445 \u043f\u043e\u0441\u043b\u0435 \u0432\u0445\u043e\u0434\u0430.\u0412\u00a0EventMap\u00a0\u0441\u0445\u0435\u043c\u0430 \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0442\u0430\u043a:guest  \u2193localStorageauthenticated user  \u2193Supabase Auth  \u2193public.favorites  \u2193RLSfirst sign in  \u2193copy local favorites to cloud\u0421\u043d\u0430\u0447\u0430\u043b\u0430 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u043c \u0434\u0432\u0430 \u0440\u0435\u0436\u0438\u043c\u0430\u0414\u043b\u044f \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430 \u0438\u0437\u0431\u0440\u0430\u043d\u043d\u043e\u0435 \u043e\u0441\u0442\u0430\u0451\u0442\u0441\u044f \u043e\u0434\u043d\u043e\u0439 \u0444\u0443\u043d\u043a\u0446\u0438\u0435\u0439. \u0418\u0441\u0442\u043e\u0447\u043d\u0438\u043a \u0434\u0430\u043d\u043d\u044b\u0445 \u0437\u0430\u0432\u0438\u0441\u0438\u0442 \u043e\u0442 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u0430\u0432\u0442\u043e\u0440\u0438\u0437\u0430\u0446\u0438\u0438. \u0414\u043b\u044f \u0433\u043e\u0441\u0442\u044f:FavoriteButton  \u2193useFavoritesCloud  \u2193useFavorites  \u2193localStorage\u0414\u043b\u044f \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f:FavoriteButton  \u2193useFavoritesCloud  \u2193Supabase browser client  \u2193public.favorites\u041a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u043a\u043d\u043e\u043f\u043a\u0438 \u043d\u0435 \u0434\u043e\u043b\u0436\u0435\u043d \u0437\u043d\u0430\u0442\u044c, \u043a\u0443\u0434\u0430 \u0438\u043c\u0435\u043d\u043d\u043e \u0437\u0430\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0441\u043e\u0431\u044b\u0442\u0438\u0435. \u0412 \u043f\u0440\u043e\u0435\u043a\u0442\u0435 \u043e\u043d \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 \u043e\u0434\u0438\u043d hook:const {  isFavorite,  isHydrated,  removeFavorite,  toggleFavoriteEvent,} = useFavoritesCloud();\u041f\u0435\u0440\u0435\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435 \u043c\u0435\u0436\u0434\u0443 browser storage \u0438 Supabase \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u043d\u0438\u0436\u0435 \u044d\u0442\u043e\u0433\u043e \u0443\u0440\u043e\u0432\u043d\u044f.\u0427\u0442\u043e \u043e\u0441\u0442\u0430\u0451\u0442\u0441\u044f \u0432 localStorage\u0413\u043e\u0441\u0442\u0435\u0432\u043e\u0439 \u0440\u0435\u0436\u0438\u043c \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u043e\u0432\u0430\u043b \u0434\u043e \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u044f Supabase. \u0414\u043b\u044f \u043d\u0435\u0433\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f \u0434\u0432\u0430 \u043a\u043b\u044e\u0447\u0430:export const FAVORITES_STORAGE_KEY =  «eventmap:favorites»;export const FAVORITE_EVENTS_STORAGE_KEY =  «eventmap:favorite-events»;\u041f\u0435\u0440\u0432\u044b\u0439 \u0445\u0440\u0430\u043d\u0438\u0442 IDs:[  «london-music-night»,  «berlin-jazz-evening»]\u0412\u0442\u043e\u0440\u043e\u0439 \u0445\u0440\u0430\u043d\u0438\u0442 snapshots \u043a\u0430\u0440\u0442\u043e\u0447\u0435\u043a:type FavoriteEventsMap =  Record<string, EventCardData>;Snapshot \u043d\u0443\u0436\u0435\u043d \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435 \u0438\u0437\u0431\u0440\u0430\u043d\u043d\u043e\u0433\u043e. \u041e\u043d\u0430 \u043c\u043e\u0436\u0435\u0442 \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u044c \u0441\u043e\u0445\u0440\u0430\u043d\u0451\u043d\u043d\u0443\u044e \u043a\u0430\u0440\u0442\u043e\u0447\u043a\u0443 \u0431\u0435\u0437 \u043f\u043e\u0432\u0442\u043e\u0440\u043d\u043e\u0433\u043e \u0437\u0430\u043f\u0440\u043e\u0441\u0430 \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u0441\u043e\u0431\u044b\u0442\u0438\u044f \u0441\u0440\u0430\u0437\u0443 \u043f\u043e\u0441\u043b\u0435 \u0447\u0442\u0435\u043d\u0438\u044f\u00a0localStorage.\u0414\u0430\u043d\u043d\u044b\u0435 \u0438\u0437 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430 \u043d\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f \u0431\u0435\u0437 \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0438. IDs \u043f\u0440\u043e\u0445\u043e\u0434\u044f\u0442 \u0447\u0435\u0440\u0435\u0437 \u043d\u043e\u0440\u043c\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044e:export function normaliseFavoriteIds(  value: unknown): string[] {  if (!Array.isArray(value)) {    return [];  }  const ids = value    .filter(      (item): item is string =>        typeof item === «string»    )    .map((item) => item.trim())    .filter(Boolean);  return Array.from(new Set(ids));}\u0414\u043b\u044f snapshots \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u0442\u0441\u044f \u0444\u043e\u0440\u043c\u0430\u00a0EventCardData.\u042d\u0442\u043e \u043d\u0435 \u043f\u043e\u043b\u043d\u043e\u0446\u0435\u043d\u043d\u0430\u044f runtime schema \u0432\u0440\u043e\u0434\u0435 Zod, \u043d\u043e \u043f\u043e\u0432\u0440\u0435\u0436\u0434\u0451\u043d\u043d\u044b\u0439 JSON \u0438\u043b\u0438 \u043e\u0431\u044a\u0435\u043a\u0442 \u043d\u0435\u043e\u0436\u0438\u0434\u0430\u043d\u043d\u043e\u0439 \u0444\u043e\u0440\u043c\u044b \u043d\u0435 \u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u0441\u044f \u043a\u0430\u0440\u0442\u043e\u0447\u043a\u043e\u0439 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438.\u041f\u043e\u0447\u0435\u043c\u0443 hydration \u0437\u0434\u0435\u0441\u044c \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u0430\u044f \u0447\u0430\u0441\u0442\u044c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044flocalStorage\u00a0\u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u0435\u0442 \u0442\u043e\u043b\u044c\u043a\u043e \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u0438\u0439 hook \u0441\u043d\u0430\u0447\u0430\u043b\u0430 \u0434\u043e\u043b\u0436\u0435\u043d \u043f\u043e\u043d\u044f\u0442\u044c, \u043f\u0440\u043e\u0447\u0438\u0442\u0430\u043d\u044b \u043b\u0438 \u0434\u0430\u043d\u043d\u044b\u0435:let isStoreHydrated = false;\u041f\u043e\u0441\u043b\u0435 \u0447\u0442\u0435\u043d\u0438\u044f storage:function readStoreFromBrowser() {  favoriteIdsStore = parseFavoriteIds(    window.localStorage.getItem(      FAVORITES_STORAGE_KEY    )  );  favoriteEventsStore =    parseFavoriteEvents(      window.localStorage.getItem(        FAVORITE_EVENTS_STORAGE_KEY      )    );  isStoreHydrated = true;  notifyListeners();}\u041f\u043e\u043a\u0430 \u044d\u0442\u043e\u0442 \u044d\u0442\u0430\u043f \u043d\u0435 \u0437\u0430\u043a\u043e\u043d\u0447\u0435\u043d, \u043a\u043d\u043e\u043f\u043a\u0430 \u043d\u0435 \u0434\u043e\u043b\u0436\u043d\u0430 \u0441\u0447\u0438\u0442\u0430\u0442\u044c \u043f\u0443\u0441\u0442\u043e\u0439 \u043c\u0430\u0441\u0441\u0438\u0432 \u0440\u0435\u0430\u043b\u044c\u043d\u044b\u043c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435\u043c \u0438\u0437\u0431\u0440\u0430\u043d\u043d\u043e\u0433\u043e. \u0422\u0430 \u0436\u0435 \u0433\u0440\u0430\u043d\u0438\u0446\u0430 \u043f\u043e\u0442\u043e\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u043f\u0440\u0438 \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0438 \u043e\u0431\u043b\u0430\u0447\u043d\u043e\u0433\u043e \u0440\u0435\u0436\u0438\u043c\u0430. \u0421\u043d\u0430\u0447\u0430\u043b\u0430 \u0433\u0438\u0434\u0440\u0430\u0442\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u044b\u0439 store, \u0437\u0430\u0442\u0435\u043c \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442\u0441\u044f \u0442\u0435\u043a\u0443\u0449\u0438\u0439 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c.Supabase client \u0434\u043b\u044f \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430 \u0438 \u0441\u0435\u0440\u0432\u0435\u0440\u0430\u0412 \u043f\u0440\u043e\u0435\u043a\u0442\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f\u00a0@supabase\/supabase-js\u00a0\u0438\u00a0@supabase\/ssr. \u041a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u044f \u0441\u043e\u0441\u0442\u043e\u0438\u0442 \u0438\u0437 \u0434\u0432\u0443\u0445 \u043f\u0443\u0431\u043b\u0438\u0447\u043d\u044b\u0445 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445:NEXT_PUBLIC_SUPABASE_URL=NEXT_PUBLIC_SUPABASE_PUBLISHABLE_KEY=Browser client \u0441\u043e\u0437\u0434\u0430\u0451\u0442\u0441\u044f \u0442\u0430\u043a:import { createBrowserClient }  from «@supabase\/ssr»;export function createSupabaseBrowserClient() {  const config = getSupabaseConfig();  if (!config) {    return null;  }  return createBrowserClient(    config.url,    config.publishableKey  );}\u0414\u043b\u044f server context \u0435\u0441\u0442\u044c \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0439 \u043a\u043b\u0438\u0435\u043d\u0442:import { createServerClient }  from «@supabase\/ssr»;import { cookies } from «next\/headers»;export async functioncreateSupabaseServerClient() {  const config = getSupabaseConfig();  if (!config) {    return null;  }  const cookieStore = await cookies();  return createServerClient(    config.url,    config.publishableKey,    {      cookies: {        getAll() {          return cookieStore.getAll();        },        setAll(cookiesToSet) {          try {            cookiesToSet.forEach(              ({ name, options, value }) => {                cookieStore.set(                  name,                  value,                  options                );              }            );          } catch {            \/\/ Context cannot write cookies.          }        },      },    }  );}Publishable key \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u0432 \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u043e\u043c bundle \u043f\u043e \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u044e. \u041e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u0438\u0435 \u0434\u043e\u0441\u0442\u0443\u043f\u0430 \u043a \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u043c \u0441\u0442\u0440\u043e\u043a\u0430\u043c \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043d\u0435\u043b\u044c\u0437\u044f \u0441\u0442\u0440\u043e\u0438\u0442\u044c \u0432\u043e\u043a\u0440\u0443\u0433 \u0438\u0434\u0435\u0438 \u00ab\u0441\u043f\u0440\u044f\u0447\u0435\u043c \u043a\u043b\u044e\u0447\u00bb.\u0414\u043b\u044f \u0442\u0430\u0431\u043b\u0438\u0446\u044b\u00a0favorites\u00a0\u044d\u0442\u0443 \u0437\u0430\u0434\u0430\u0447\u0443 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u0442 RLS. Service-role \u0438\u043b\u0438 \u0434\u0440\u0443\u0433\u043e\u0439 \u043f\u0440\u0438\u0432\u0438\u043b\u0435\u0433\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0439 \u043a\u043b\u044e\u0447 \u0432 frontend \u043d\u0435 \u043f\u0435\u0440\u0435\u0434\u0430\u0451\u0442\u0441\u044f.\u0422\u0430\u0431\u043b\u0438\u0446\u0430 cloud favorites\u0412 \u043f\u0440\u043e\u0435\u043a\u0442\u0435 \u0441\u0442\u0440\u043e\u043a\u0430 \u0438\u0437\u0431\u0440\u0430\u043d\u043d\u043e\u0433\u043e \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f, ID \u0441\u043e\u0431\u044b\u0442\u0438\u044f \u0438 snapshot:create table if not exists public.favorites (  user_id uuid not null    references auth.users(id)    on delete cascade,  event_id text not null,  event_snapshot jsonb not null,  created_at timestamptz    not null default now(),  updated_at timestamptz    not null default now(),  primary key (user_id, event_id));\u0421\u043e\u0441\u0442\u0430\u0432\u043d\u043e\u0439 primary key \u0440\u0435\u0448\u0430\u0435\u0442 \u0435\u0449\u0451 \u043e\u0434\u043d\u0443 \u0437\u0430\u0434\u0430\u0447\u0443, \u043e\u0434\u0438\u043d \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u043d\u0435 \u043c\u043e\u0436\u0435\u0442 \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0434\u0432\u0435 \u0441\u0442\u0440\u043e\u043a\u0438 \u0434\u043b\u044f \u043e\u0434\u043d\u043e\u0433\u043e\u00a0event_id. \u041f\u0440\u0438 \u044d\u0442\u043e\u043c \u0434\u0440\u0443\u0433\u043e\u0439 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u043c\u043e\u0436\u0435\u0442 \u0441\u043e\u0445\u0440\u0430\u043d\u0438\u0442\u044c \u0442\u043e \u0436\u0435 \u0441\u043e\u0431\u044b\u0442\u0438\u0435.user A + event 123 \u2192 alloweduser B + event 123 \u2192 alloweduser A + event 123 \u2192 duplicateevent_snapshot\u00a0\u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u0432\u043d\u0443\u0442\u0440\u0435\u043d\u043d\u044e\u044e \u043c\u043e\u0434\u0435\u043b\u044c \u043a\u0430\u0440\u0442\u043e\u0447\u043a\u0438:export type CloudFavoriteRow = {  user_id: string;  event_id: string;  event_snapshot: EventCardData;  created_at: string;  updated_at: string;};\u042d\u0442\u043e \u0441\u043e\u0437\u043d\u0430\u0442\u0435\u043b\u044c\u043d\u043e \u043e\u0442\u043b\u0438\u0447\u0430\u0435\u0442\u0441\u044f \u043e\u0442 \u0441\u0445\u0435\u043c\u044b, \u0433\u0434\u0435 \u0432 favorites \u0445\u0440\u0430\u043d\u0438\u0442\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u0432\u043d\u0435\u0448\u043d\u0438\u0439 ID. \u041f\u043b\u044e\u0441 snapshot \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430 \u0438\u0437\u0431\u0440\u0430\u043d\u043d\u043e\u0433\u043e \u043c\u043e\u0436\u0435\u0442 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u0442\u044c \u0441\u043e\u0445\u0440\u0430\u043d\u0451\u043d\u043d\u044b\u0435 \u0434\u0430\u043d\u043d\u044b\u0435 \u0438\u0437 \u0441\u0432\u043e\u0435\u0439 \u0442\u0430\u0431\u043b\u0438\u0446\u044b. \u041e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u0438\u0435 \u0442\u043e\u0436\u0435 \u043f\u0440\u044f\u043c\u043e\u0435, snapshot \u043d\u0435 \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0441\u0430\u043c, \u0435\u0441\u043b\u0438 \u0438\u0441\u0445\u043e\u0434\u043d\u043e\u0435 \u0441\u043e\u0431\u044b\u0442\u0438\u0435 \u043f\u043e\u0437\u0436\u0435 \u0438\u0437\u043c\u0435\u043d\u0438\u043b\u043e\u0441\u044c.\u0412 \u0442\u0435\u043a\u0443\u0449\u0435\u0439 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u043d\u0435\u0442 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e\u0433\u043e UPDATE flow \u0434\u043b\u044f \u0442\u0430\u043a\u0438\u0445 snapshots.RLS \u043a\u0430\u043a \u0433\u0440\u0430\u043d\u0438\u0446\u0430 \u0434\u043e\u0441\u0442\u0443\u043f\u0430\u041f\u043e\u0441\u043b\u0435 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0442\u0430\u0431\u043b\u0438\u0446\u044b \u0432\u043a\u043b\u044e\u0447\u0430\u0435\u0442\u0441\u044f Row Level Security:alter table public.favoritesenable row level security;Browser-facing \u0440\u043e\u043b\u044c \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442 \u0442\u043e\u043b\u044c\u043a\u043e \u043d\u0443\u0436\u043d\u044b\u0435 \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u0438:grant usage on schema publicto authenticated;grant select, insert, deleteon table public.favoritesto authenticated;UPDATE \u0437\u0434\u0435\u0441\u044c \u043e\u0442\u0441\u0443\u0442\u0441\u0442\u0432\u0443\u0435\u0442.\u0414\u0430\u043b\u044c\u0448\u0435 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u0442\u0440\u0438 policy. \u0427\u0442\u0435\u043d\u0438\u0435 \u0441\u0432\u043e\u0438\u0445 \u0441\u0442\u0440\u043e\u043a:create policy «favorites_select_own»on public.favoritesfor selectto authenticatedusing (  (select auth.uid()) = user_id);\u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u0441\u0442\u0440\u043e\u043a\u0438 \u0442\u043e\u043b\u044c\u043a\u043e \u0434\u043b\u044f \u0441\u0435\u0431\u044f:create policy «favorites_insert_own»on public.favoritesfor insertto authenticatedwith check (  (select auth.uid()) = user_id);\u0423\u0434\u0430\u043b\u0435\u043d\u0438\u0435 \u0441\u0432\u043e\u0438\u0445 \u0441\u0442\u0440\u043e\u043a:create policy «favorites_delete_own»on public.favoritesfor deleteto authenticatedusing (  (select auth.uid()) = user_id);Frontend \u0432\u0441\u0451 \u0440\u0430\u0432\u043d\u043e \u0437\u043d\u0430\u0435\u0442\u00a0userId\u00a0\u0438 \u043c\u043e\u0436\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0435\u0433\u043e \u0432 \u0437\u0430\u043f\u0440\u043e\u0441\u0435. \u041d\u043e JavaScript-\u0444\u0438\u043b\u044c\u0442\u0440 \u043d\u0435 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u0435\u043c \u0434\u043e\u0441\u0442\u0443\u043f\u0430. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, cloud favorites \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u044e\u0442\u0441\u044f \u0442\u0430\u043a:const { data, error } = await supabase  .from(«favorites»)  .select(    «user_id,event_id,event_snapshot,» +    «created_at,updated_at»  )  .eq(«user_id», userId)  .order(«created_at», {    ascending: false,  });.eq(«user_id», userId)\u00a0\u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0438\u0432\u0430\u0435\u0442 \u0437\u0430\u043f\u0440\u043e\u0441 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f. RLS \u043d\u0435\u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u0442 \u0441\u0442\u0440\u043e\u043a\u0438 \u043d\u0430 \u0441\u0442\u043e\u0440\u043e\u043d\u0435 \u0431\u0430\u0437\u044b. \u0415\u0441\u043b\u0438 \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u044c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435\u00a0user_id\u00a0\u0432 \u0437\u0430\u043f\u0440\u043e\u0441\u0435 \u0438\u0437 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430, policy \u043e\u0441\u0442\u0430\u0451\u0442\u0441\u044f \u0442\u0435\u043c \u0436\u0435.\u041a\u0430\u043a hook \u0432\u044b\u0431\u0438\u0440\u0430\u0435\u0442 guest \u0438\u043b\u0438 user mode\u041e\u0431\u0449\u0438\u0439 cloud store \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u0440\u0435\u0436\u0438\u043c:type CloudFavoriteMode =  «guest» | «user»;\u041f\u0440\u0438 \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0441\u043e\u0437\u0434\u0430\u0451\u0442\u0441\u044f browser client \u0438 \u0437\u0430\u043f\u0440\u0430\u0448\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c:const supabase =  createSupabaseBrowserClient();if (!supabase) {  \/\/ guest mode  return;}const { data, error } =  await supabase.auth.getUser();const userId =  error ? null : data.user?.id ?? null;\u0415\u0441\u043b\u0438 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f \u043d\u0435\u0442, \u043e\u0441\u0442\u0430\u0451\u0442\u0441\u044f \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0439 localStorage flow.\u0415\u0441\u043b\u0438\u00a0userId\u00a0\u0435\u0441\u0442\u044c, \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0435\u0442\u0441\u044f\u00a0public.favorites:await loadCloudFavorites({  supabase,  userId,});\u041d\u0430 \u0443\u0440\u043e\u0432\u043d\u0435 hook \u0432\u044b\u0431\u043e\u0440 \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0442\u0430\u043a:const mode = snapshot.mode;const favoriteEvents =  mode === «user»    ? snapshot.events    : localFavoriteEvents;const favoriteIds =  mode === «user»    ? snapshot.favoriteIds    : localFavorites.favoriteIds;\u041a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u043d\u0435 \u0434\u0435\u043b\u0430\u0435\u0442 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0439 branch \u0434\u043b\u044f Supabase query. \u041e\u043d \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442:favoriteEventsfavoriteIdsisHydratedisLoadingmode\u0418 \u043c\u043e\u0436\u0435\u0442 \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u044c \u043f\u043e\u0434\u043f\u0438\u0441\u044c:Browser favorites\u0438\u043b\u0438:Account favorites\u041c\u0438\u0433\u0440\u0430\u0446\u0438\u044f \u043f\u0440\u0438 \u043f\u0435\u0440\u0432\u043e\u043c \u0432\u0445\u043e\u0434\u0435\u0417\u0434\u0435\u0441\u044c \u0432\u043e\u0437\u043d\u0438\u043a\u0430\u0435\u0442 \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0439 \u043f\u0435\u0440\u0435\u0445\u043e\u0434 \u043c\u0435\u0436\u0434\u0443 \u0434\u0432\u0443\u043c\u044f \u0440\u0435\u0436\u0438\u043c\u0430\u043c\u0438. \u041f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u0438\u043c, \u0447\u0442\u043e \u0434\u043e \u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0430\u0446\u0438\u0438 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u0441\u043e\u0445\u0440\u0430\u043d\u0438\u043b \u0442\u0440\u0438 \u0441\u043e\u0431\u044b\u0442\u0438\u044f:localStorage:ABC\u041f\u043e\u0441\u043b\u0435 \u0432\u0445\u043e\u0434\u0430 \u0432 \u0430\u043a\u043a\u0430\u0443\u043d\u0442 \u0432 \u043e\u0431\u043b\u0430\u043a\u0435 \u0443\u0436\u0435 \u043c\u043e\u0436\u0435\u0442 \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u044c\u0441\u044f:Supabase:BD\u041d\u0435\u043b\u044c\u0437\u044f \u043f\u0440\u043e\u0441\u0442\u043e \u0437\u0430\u043c\u0435\u043d\u0438\u0442\u044c \u043e\u0434\u0438\u043d \u0441\u043f\u0438\u0441\u043e\u043a \u0434\u0440\u0443\u0433\u0438\u043c. \u0422\u043e\u0433\u0434\u0430\u00a0A\u00a0\u0438\u00a0C\u00a0\u0438\u0441\u0447\u0435\u0437\u043d\u0443\u0442 \u0438\u0437 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430.\u0412 \u043f\u0440\u043e\u0435\u043a\u0442\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f copy migration. \u0421\u043d\u0430\u0447\u0430\u043b\u0430 \u0447\u0438\u0442\u0430\u044e\u0442\u0441\u044f cloud rows, \u0437\u0430\u0442\u0435\u043c IDs \u043f\u0440\u0435\u0432\u0440\u0430\u0449\u0430\u044e\u0442\u0441\u044f \u0432\u00a0Set:await migrateLocalFavoritesToCloud({  existingIds: new Set(    rows.map((row) => row.event_id)  ),  supabase,  userId,});\u0418\u0437 localStorage \u0432\u044b\u0431\u0438\u0440\u0430\u044e\u0442\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u043e\u0442\u0441\u0443\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0435 \u0441\u043e\u0431\u044b\u0442\u0438\u044f:const localEvents =  getFavoriteEvents().filter(    (event) =>      !existingIds.has(event.id)  );\u0414\u043b\u044f \u043d\u0438\u0445 \u0441\u043e\u0437\u0434\u0430\u044e\u0442\u0441\u044f \u043d\u043e\u0432\u044b\u0435 rows:const rows: CloudFavoriteInsert[] =  localEvents.map((event) => ({    event_id: event.id,    event_snapshot: event,    user_id: userId,  }));\u0417\u0430\u0442\u0435\u043c \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u0442\u0441\u044f \u043e\u0431\u044b\u0447\u043d\u044b\u0439\u00a0insert:const { error } = await supabase  .from(«favorites»)  .insert(rows);\u041f\u0440\u0438 \u0443\u0441\u043f\u0435\u0448\u043d\u043e\u0439 \u0437\u0430\u043f\u0438\u0441\u0438 \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u044b\u0435 \u0441\u043e\u0431\u044b\u0442\u0438\u044f \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u0432 \u0442\u0435\u043a\u0443\u0449\u0438\u0439 cloud store.\u041f\u043e\u043b\u0443\u0447\u0430\u0435\u0442\u0441\u044f:local:A B Ccloud before:B Dcloud after migration:A B C D\u041f\u043e\u0447\u0435\u043c\u0443 \u043c\u0438\u0433\u0440\u0430\u0446\u0438\u044f \u043a\u043e\u043f\u0438\u0440\u0443\u0435\u0442, \u0430 \u043d\u0435 \u043f\u0435\u0440\u0435\u043d\u043e\u0441\u0438\u0442\u041f\u043e\u0441\u043b\u0435 \u0443\u0441\u043f\u0435\u0448\u043d\u043e\u0433\u043e\u00a0insert\u00a0\u043b\u043e\u043a\u0430\u043b\u044c\u043d\u044b\u0439 storage \u043d\u0435 \u043e\u0447\u0438\u0449\u0430\u0435\u0442\u0441\u044f. \u042d\u0442\u043e \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u0435\u0442 \u0433\u043e\u0441\u0442\u0435\u0432\u043e\u0439 \u043a\u043e\u043d\u0442\u0443\u0440 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430. \u0415\u0441\u043b\u0438 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u043f\u043e\u0437\u0436\u0435 \u0432\u044b\u0439\u0434\u0435\u0442 \u0438\u0437 \u0430\u043a\u043a\u0430\u0443\u043d\u0442\u0430, \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0441\u043d\u043e\u0432\u0430 \u043f\u0435\u0440\u0435\u0439\u0434\u0451\u0442 \u0432 guest mode \u0438 \u0441\u043c\u043e\u0436\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043f\u0440\u0435\u0436\u043d\u0438\u0435 browser favorites.\u0412\u0430\u0436\u043d\u043e \u043f\u043e\u043d\u0438\u043c\u0430\u0442\u044c \u0433\u0440\u0430\u043d\u0438\u0446\u0443, \u0442\u0435\u043a\u0443\u0449\u0430\u044f \u0441\u0438\u043d\u0445\u0440\u043e\u043d\u0438\u0437\u0430\u0446\u0438\u044f \u043e\u0434\u043d\u043e\u0441\u0442\u043e\u0440\u043e\u043d\u043d\u044f\u044f.localStorage    \u2193 first sign inSupabase\u0418\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f cloud favorites \u043e\u0431\u0440\u0430\u0442\u043d\u043e \u0432 localStorage \u043d\u0435 \u043a\u043e\u043f\u0438\u0440\u0443\u044e\u0442\u0441\u044f. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u043f\u043e\u0441\u043b\u0435 \u0432\u0445\u043e\u0434\u0430 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u043c\u043e\u0436\u0435\u0442 \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u043d\u043e\u0432\u044b\u0435 \u0441\u043e\u0431\u044b\u0442\u0438\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u0432 account favorites, \u0430 \u043f\u043e\u0441\u043b\u0435 \u0432\u044b\u0445\u043e\u0434\u0430 \u0433\u043e\u0441\u0442\u0435\u0432\u043e\u0439 \u0441\u043f\u0438\u0441\u043e\u043a \u043d\u0430 \u044d\u0442\u043e\u043c \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435 \u0431\u0443\u0434\u0435\u0442 \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0442\u044c \u0441\u0442\u0430\u0440\u044b\u0439 \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u044b\u0439…<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[],"tags":[],"class_list":["post-502820","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/502820","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=502820"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/502820\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=502820"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=502820"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=502820"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}