@stackframe/stack 2.3.3 → 2.3.5

package/README.md

@@ -0,0 +1,29 @@
+# Stack
+
+Stack is an open-source, self-hostable, and highly customizable authentication and user management system.
+
+We provide frontend and backend libraries for Next.js, React, and JavaScript. You can set it up in one minute and scale with the project as it grows.
+
+## Features
+
+- Composable React components & hooks
+- OAuth (Google, Facebook, GitHub, etc.)
+- Email and password authentication (with email verification and password reset)
+- Easy to set up with proxied providers (no need to sign up and create OAuth endpoints yourself on all the providers)
+- User management & analytics
+- User-associated metadata with client-/server-specific permissions
+- Out-of-the-box Dark/Light mode support
+- suports switching out the underlying UI library, support MUI Joy out of the box
+- **100% open-source!**
+
+Currently, only Next.js is supported, but we are working on adding other frameworks.
+
+## Installation
+
+To get started with Stack, you need to [create a Next.js project](https://nextjs.org/docs/getting-started/installation) using the App router. Then, you can install Stack by running the following command:
+
+```bash
+npm install @stackframe/stack
+```
+
+For setup, refer to [our documentation](https://docs.stack-auth.com).

package/dist/components/user-avatar.d.ts

@@ -1,3 +1,5 @@
+import { User } from "../lib/stack-app";
 export default function UserAvatar(props: {
     size?: number;
-}): import("react/jsx-runtime").JSX.Element | null;
+    user: User | null;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/components/user-avatar.js

@@ -1,9 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Avatar, AvatarFallback, AvatarImage, Text, useUser } from "..";
+import { Avatar, AvatarFallback, AvatarImage, Text } from "..";
+const anonUserDataUrl = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' viewBox='-100 -1060 1160 1160' width='24'%3E%3Crect x='-100' y='-1060' width='100%25' height='100%25' fill='%23d8d8d8' /%3E%3Cpath d='M480-480q-66 0-113-47t-47-113q0-66 47-113t113-47q66 0 113 47t47 113q0 66-47 113t-113 47ZM160-160v-112q0-34 17.5-62.5T224-378q62-31 126-46.5T480-440q66 0 130 15.5T736-378q29 15 46.5 43.5T800-272v112H160Zm80-80h480v-32q0-11-5.5-20T700-306q-54-27-109-40.5T480-360q-56 0-111 13.5T260-306q-9 5-14.5 14t-5.5 20v32Zm240-320q33 0 56.5-23.5T560-640q0-33-23.5-56.5T480-720q-33 0-56.5 23.5T400-640q0 33 23.5 56.5T480-560Zm0-80Zm0 400Z'/%3E%3C/svg%3E";
 export default function UserAvatar(props) {
-    const user = useUser();
-    if (!user) {
-        return null;
-    }
-    return (_jsxs(Avatar, { style: { height: props.size, width: props.size }, children: [_jsx(AvatarImage, { src: user.profileImageUrl || '' }), _jsx(AvatarFallback, { children: _jsx(Text, { style: { fontWeight: 500 }, children: (user.displayName || user.primaryEmail)?.slice(0, 2).toUpperCase() }) })] }));
+    const user = props.user;
+    return (_jsxs(Avatar, { style: { height: props.size, width: props.size }, children: [_jsx(AvatarImage, { src: user ? user.profileImageUrl || '' : anonUserDataUrl }), _jsx(AvatarFallback, { children: _jsx(Text, { style: { fontWeight: 500 }, children: (user?.displayName || user?.primaryEmail)?.slice(0, 2).toUpperCase() ?? "?" }) })] }));
 }

package/dist/components/user-button.d.ts

@@ -1,4 +1,6 @@
-export default function UserButton({ showUserInfo, showColorMode, }: {
+type UserButtonProps = {
     showUserInfo?: boolean;
     showColorMode?: boolean;
-}): import("react/jsx-runtime").JSX.Element | null;
+};
+export default function UserButton({ showUserInfo, showColorMode, }: UserButtonProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/user-button.js

@@ -1,7 +1,8 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useUser, Text, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, DropdownMenuLabel, DropdownMenuSeparator, useStackApp, useDesign } from "..";
-import { RxPerson, RxEnter, RxSun, RxShadow } from "react-icons/rx";
+import { Suspense } from "react";
+import { useUser, Text, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, DropdownMenuLabel, DropdownMenuSeparator, useStackApp, useDesign, Skeleton } from "..";
+import { RxPerson, RxEnter, RxSun, RxShadow, RxFilePlus } from "react-icons/rx";
 import { runAsynchronously } from "@stackframe/stack-shared/dist/utils/promises";
 import { SECONDARY_FONT_COLORS } from "../utils/constants";
 import UserAvatar from "./user-avatar";
@@ -9,9 +10,16 @@ import { useRouter } from "next/navigation";
 function Item(props) {
     return (_jsxs(DropdownMenuItem, { onClick: () => runAsynchronously(props.onClick), style: { display: 'flex', gap: '0.5rem', alignItems: 'center' }, children: [props.icon, _jsx(Text, { children: props.text })] }));
 }
-export default function UserButton({ showUserInfo = false, showColorMode = true, }) {
-    const { colorMode, setColorMode } = useDesign();
+export default function UserButton({ showUserInfo = false, showColorMode = false, }) {
+    return (_jsx(Suspense, { fallback: _jsx(Skeleton, { children: _jsx(UserButtonInnerInner, { showUserInfo: showUserInfo, showColorMode: showColorMode, user: null }) }), children: _jsx(UserButtonInner, { showUserInfo: showUserInfo, showColorMode: showColorMode }) }));
+}
+function UserButtonInner(props) {
     const user = useUser();
+    return _jsx(UserButtonInnerInner, { showUserInfo: props.showUserInfo, showColorMode: props.showColorMode, user: user });
+}
+function UserButtonInnerInner(props) {
+    const { colorMode, setColorMode } = useDesign();
+    const user = props.user;
     const app = useStackApp();
     const router = useRouter();
     const textStyles = {
@@ -19,9 +27,7 @@ export default function UserButton({ showUserInfo = false, showColorMode = true,
         whiteSpace: 'nowrap',
         overflow: 'hidden'
     };
-    if (!user)
-        return null;
-    return (_jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { children: _jsxs("div", { style: { display: 'flex', gap: '0.5rem', alignItems: 'center' }, children: [_jsx(UserAvatar, {}), showUserInfo && _jsxs("div", { style: { display: 'flex', flexDirection: 'column', justifyContent: 'center' }, children: [_jsx(Text, { style: textStyles, children: user.displayName }), _jsx(Text, { style: { ...textStyles, fontWeight: 400 }, variant: "secondary", size: "sm", children: user.primaryEmail })] })] }) }), _jsxs(DropdownMenuContent, { style: { zIndex: 1500 }, children: [_jsx(DropdownMenuLabel, { children: _jsxs("div", { style: { display: 'flex', gap: '0.5rem', alignItems: 'center' }, children: [_jsx(UserAvatar, {}), _jsxs("div", { children: [_jsx(Text, { children: user.displayName }), _jsx(Text, { variant: "secondary", size: "sm", style: { fontWeight: 400 }, children: user.primaryEmail })] })] }) }), _jsx(DropdownMenuSeparator, {}), _jsx(Item, { text: "Account settings", onClick: () => runAsynchronously(router.push(app.urls.accountSettings)), icon: _jsx(RxPerson, { size: 22, color: SECONDARY_FONT_COLORS[colorMode] }) }), showColorMode && _jsx(Item, { text: colorMode === 'dark' ? 'Light theme' : 'Dark theme', onClick: () => setColorMode(colorMode === 'dark' ? 'light' : 'dark'), icon: colorMode === 'dark' ?
+    return (_jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { children: _jsxs("div", { style: { display: 'flex', gap: '0.5rem', alignItems: 'center' }, children: [_jsx(UserAvatar, { user: user }), user && props.showUserInfo && _jsxs("div", { style: { display: 'flex', flexDirection: 'column', justifyContent: 'center' }, children: [_jsx(Text, { style: textStyles, children: user.displayName }), _jsx(Text, { style: { ...textStyles, fontWeight: 400 }, variant: "secondary", size: "sm", children: user.primaryEmail })] })] }) }), _jsxs(DropdownMenuContent, { style: { zIndex: 1500 }, children: [_jsx(DropdownMenuLabel, { children: _jsxs("div", { style: { display: 'flex', gap: '0.5rem', alignItems: 'center' }, children: [_jsx(UserAvatar, { user: user }), _jsxs("div", { children: [user && _jsx(Text, { children: user.displayName }), user && _jsx(Text, { variant: "secondary", size: "sm", style: { fontWeight: 400 }, children: user.primaryEmail }), !user && _jsx(Text, { variant: "secondary", children: "Not logged in" })] })] }) }), _jsx(DropdownMenuSeparator, {}), user && _jsx(Item, { text: "Account settings", onClick: () => runAsynchronously(router.push(app.urls.accountSettings)), icon: _jsx(RxPerson, { size: 22, color: SECONDARY_FONT_COLORS[colorMode] }) }), !user && _jsx(Item, { text: "Sign in", onClick: () => runAsynchronously(router.push(app.urls.signIn)), icon: _jsx(RxEnter, { size: 22, color: SECONDARY_FONT_COLORS[colorMode] }) }), !user && _jsx(Item, { text: "Sign up", onClick: () => runAsynchronously(router.push(app.urls.signUp)), icon: _jsx(RxFilePlus, { size: 22, color: SECONDARY_FONT_COLORS[colorMode] }) }), props.showColorMode && _jsx(Item, { text: colorMode === 'dark' ? 'Light theme' : 'Dark theme', onClick: () => setColorMode(colorMode === 'dark' ? 'light' : 'dark'), icon: colorMode === 'dark' ?
                             _jsx(RxSun, { size: 22, color: SECONDARY_FONT_COLORS[colorMode] }) :
-                            _jsx(RxShadow, { size: 22, color: SECONDARY_FONT_COLORS[colorMode] }) }), _jsx(Item, { text: "Sign out", onClick: () => user.signOut(), icon: _jsx(RxEnter, { size: 22, color: SECONDARY_FONT_COLORS[colorMode] }) })] })] }));
+                            _jsx(RxShadow, { size: 22, color: SECONDARY_FONT_COLORS[colorMode] }) }), user && _jsx(Item, { text: "Sign out", onClick: () => user.signOut(), icon: _jsx(RxEnter, { size: 22, color: SECONDARY_FONT_COLORS[colorMode] }) })] })] }));
 }

package/dist/components-core/index.d.ts

@@ -43,3 +43,6 @@ export declare const Tabs: React.ForwardRefExoticComponent<Omit<import("@radix-u
 export declare const TabsList: React.ForwardRefExoticComponent<Omit<Omit<import("@radix-ui/react-tabs").TabsListProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export declare const TabsContent: React.ForwardRefExoticComponent<Omit<Omit<import("@radix-ui/react-tabs").TabsContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export declare const TabsTrigger: React.ForwardRefExoticComponent<Omit<Omit<import("@radix-ui/react-tabs").TabsTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+export declare const Skeleton: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
+    deactivated?: boolean | undefined;
+} & React.RefAttributes<HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLSpanElement>>;

package/dist/components-core/index.js

@@ -46,3 +46,4 @@ export const Tabs = createDynamicComponent('Tabs');
 export const TabsList = createDynamicComponent('TabsList');
 export const TabsContent = createDynamicComponent('TabsContent');
 export const TabsTrigger = createDynamicComponent('TabsTrigger');
+export const Skeleton = createDynamicComponent('Skeleton');

package/dist/components-core/skeleton.d.ts

@@ -0,0 +1,5 @@
+import React from "react";
+declare const Skeleton: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
+    deactivated?: boolean | undefined;
+} & React.RefAttributes<HTMLSpanElement>>;
+export { Skeleton };

package/dist/components-core/skeleton.js

@@ -0,0 +1,32 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from "react";
+import styled, { keyframes } from 'styled-components';
+import { SECONDARY_FONT_COLORS } from "../utils/constants";
+import { useDesign } from "../providers/design-provider";
+const animation = keyframes `
+  0% {
+    filter: grayscale(1) contrast(0) brightness(0) invert(1) brightness(0.8);
+  }
+  100% {
+    filter: grayscale(1) contrast(0) brightness(0) invert(1) brightness(0.7);
+  }
+`;
+const Primitive = styled("span") `
+  &[data-stack-state="activated"] {
+    animation: ${animation} 1s infinite alternate-reverse !important;
+  }
+  &[data-stack-state="activated"], &[data-stack-state="activated"] * {
+    pointer-events: none !important;
+    -webkit-user-select: none !important;
+    -moz-user-select: none !important;
+    user-select: none !important;
+    cursor: default !important;
+  }
+`;
+const Skeleton = React.forwardRef((props, ref) => {
+    const { colorMode } = useDesign();
+    return _jsx(Primitive, { "$color": colorMode === 'dark' ? SECONDARY_FONT_COLORS.dark : SECONDARY_FONT_COLORS.light, ref: ref, "data-stack-state": props.deactivated ? "deactivated" : "activated", ...props });
+});
+Skeleton.displayName = "Skeleton";
+export { Skeleton };

package/dist/components-page/account-settings.js

@@ -17,7 +17,7 @@ function ProfileSection() {
     return (_jsxs(SettingSection, { title: 'Profile', desc: 'Your profile information', buttonDisabled: !changed, buttonText: 'Save', onButtonClick: async () => {
             await user?.update(userInfo);
             setChanged(false);
-        }, children: [_jsxs("div", { style: { display: 'flex', gap: '1rem', alignItems: 'center' }, children: [_jsx(UserAvatar, { size: 60 }), _jsxs("div", { style: { display: 'flex', flexDirection: 'column' }, children: [_jsx(Text, { size: 'lg', children: user?.displayName }), _jsx(Text, { variant: 'secondary', size: 'sm', children: user?.primaryEmail })] })] }), _jsxs("div", { style: { display: 'flex', flexDirection: 'column' }, children: [_jsx(Label, { htmlFor: 'display-name', children: "Display Name" }), _jsx(Input, { id: 'display-name', value: userInfo.displayName, onChange: (e) => {
+        }, children: [_jsxs("div", { style: { display: 'flex', gap: '1rem', alignItems: 'center' }, children: [_jsx(UserAvatar, { user: user, size: 60 }), _jsxs("div", { style: { display: 'flex', flexDirection: 'column' }, children: [_jsx(Text, { size: 'lg', children: user?.displayName }), _jsx(Text, { variant: 'secondary', size: 'sm', children: user?.primaryEmail })] })] }), _jsxs("div", { style: { display: 'flex', flexDirection: 'column' }, children: [_jsx(Label, { htmlFor: 'display-name', children: "Display Name" }), _jsx(Input, { id: 'display-name', value: userInfo.displayName, onChange: (e) => {
                             setUserInfo((i) => ({ ...i, displayName: e.target.value }));
                             setChanged(true);
                         } })] })] }));

package/dist/lib/stack-app.d.ts

@@ -37,8 +37,6 @@ export type StackAdminAppConstructorOptions<HasTokenStore extends boolean, Proje
 }));
 export type StackClientAppJson<HasTokenStore extends boolean, ProjectId extends string> = StackClientAppConstructorOptions<HasTokenStore, ProjectId> & {
     uniqueIdentifier: string;
-    currentClientUserJson: UserJson | null;
-    currentProjectJson: ClientProjectJson;
 };
 export declare const stackAppInternalsSymbol: unique symbol;
 type Auth<T, C> = {
@@ -179,7 +177,8 @@ export type StackClientApp<HasTokenStore extends boolean = boolean, ProjectId ex
     verifyEmail(code: string): Promise<KnownErrors["EmailVerificationError"] | undefined>;
     signInWithMagicLink(code: string): Promise<KnownErrors["MagicLinkError"] | undefined>;
     [stackAppInternalsSymbol]: {
-        toClientJson(): Promise<StackClientAppJson<HasTokenStore, ProjectId>>;
+        toClientJson(): StackClientAppJson<HasTokenStore, ProjectId>;
+        setCurrentUser(userJsonPromise: Promise<UserJson | null>): void;
     };
 } & AsyncStoreProperty<"project", ClientProjectJson, false> & {
     [K in `redirectTo${Capitalize<keyof Omit<HandlerUrls, 'handler' | 'oauthCallback'>>}`]: () => Promise<never>;

package/dist/lib/stack-app.js

@@ -9,10 +9,10 @@ import { AsyncStore } from "@stackframe/stack-shared/dist/utils/stores";
 import { getProductionModeErrors } from "@stackframe/stack-shared/dist/interface/clientInterface";
 import { isClient } from "../utils/next";
 import { callOAuthCallback, signInWithOAuth } from "./auth";
-import { RedirectType, redirect, useRouter } from "next/navigation";
+import * as NextNavigation from "next/navigation"; // import the entire module to get around some static compiler warnings emitted by Next.js in some cases
 import { constructRedirectUrl } from "../utils/url";
 import { filterUndefined, omit } from "@stackframe/stack-shared/dist/utils/objects";
-import { neverResolve, resolved, runAsynchronously } from "@stackframe/stack-shared/dist/utils/promises";
+import { neverResolve, resolved, runAsynchronously, wait } from "@stackframe/stack-shared/dist/utils/promises";
 import { AsyncCache } from "@stackframe/stack-shared/dist/utils/caches";
 import { suspend } from "@stackframe/stack-shared/dist/utils/react";
 function getUrls(partial) {
@@ -36,10 +36,10 @@ function getUrls(partial) {
     };
 }
 function getDefaultProjectId() {
-    return process.env.NEXT_PUBLIC_STACK_PROJECT_ID || throwErr("No project ID provided. Please copy your project ID from the Stack dashboard and put it in the NEXT_PUBLIC_STACK_PROJECT_ID environment variable.");
+    return process.env.NEXT_PUBLIC_STACK_PROJECT_ID || throwErr("Welcome to Stack! It seems that you haven't provided a project ID. Please create a project on the Stack dashboard at https://app.stack-auth.com and put it in the NEXT_PUBLIC_STACK_PROJECT_ID environment variable.");
 }
 function getDefaultPublishableClientKey() {
-    return process.env.NEXT_PUBLIC_STACK_PUBLISHABLE_CLIENT_KEY || throwErr("No publishable client key provided. Please copy your publishable client key from the Stack dashboard and put it in the NEXT_PUBLIC_STACK_PUBLISHABLE_CLIENT_KEY environment variable.");
+    return process.env.NEXT_PUBLIC_STACK_PUBLISHABLE_CLIENT_KEY || throwErr("Welcome to Stack! It seems that you haven't provided a publishable client key. Please create an API key for your project on the Stack dashboard at https://app.stack-auth.com and copy your publishable client key into the NEXT_PUBLIC_STACK_PUBLISHABLE_CLIENT_KEY environment variable.");
 }
 function getDefaultSecretServerKey() {
     return process.env.STACK_SECRET_SERVER_KEY || throwErr("No secret server key provided. Please copy your publishable client key from the Stack dashboard and put your it in the STACK_SECRET_SERVER_KEY environment variable.");
@@ -172,7 +172,11 @@ class _StackClientAppImpl {
     _interface;
     _tokenStoreOptions;
     _urlOptions;
+    __DEMO_ENABLE_SLIGHT_FETCH_DELAY = false;
     _currentUserCache = createCacheByTokenStore(async (tokenStore) => {
+        if (this.__DEMO_ENABLE_SLIGHT_FETCH_DELAY) {
+            await wait(2000);
+        }
         const user = await this._interface.getClientUserByToken(tokenStore);
         return Result.or(user, null);
     });
@@ -200,19 +204,6 @@ class _StackClientAppImpl {
             throw new StackAssertionError("A Stack client app with the same unique identifier already exists");
         }
         allClientApps.set(this._uniqueIdentifier, [options.checkString ?? "default check string", this]);
-        // For some important calls, either use the provided cached values or start fetching them now
-        if (options.currentClientUserJson !== undefined) {
-            this._currentUserCache.forceSetCachedValue([getTokenStore(this._tokenStoreOptions)], options.currentClientUserJson);
-        }
-        else if (this.hasPersistentTokenStore()) {
-            runAsynchronously(this.getUser(), { ignoreErrors: true });
-        }
-        if (options.currentProjectJson !== undefined) {
-            this._currentProjectCache.forceSetCachedValue([], options.currentProjectJson);
-        }
-        else {
-            runAsynchronously(this.getProject(), { ignoreErrors: true });
-        }
     }
     hasPersistentTokenStore() {
         return this._tokenStoreOptions !== null;
@@ -401,7 +392,7 @@ class _StackClientAppImpl {
         if (userJson === null) {
             switch (options?.or) {
                 case 'redirect': {
-                    redirect(this.urls.signIn, RedirectType.replace);
+                    NextNavigation.redirect(this.urls.signIn, NextNavigation.RedirectType.replace);
                     throw new Error("redirect should never return!");
                 }
                 case 'throw': {
@@ -416,7 +407,7 @@ class _StackClientAppImpl {
     }
     useUser(options) {
         this._ensurePersistentTokenStore();
-        const router = useRouter();
+        const router = NextNavigation.useRouter();
         const tokenStore = getTokenStore(this._tokenStoreOptions);
         const userJson = useCache(this._currentUserCache, [tokenStore], "useUser()");
         if (userJson === null) {
@@ -569,7 +560,7 @@ class _StackClientAppImpl {
     static get [stackAppInternalsSymbol]() {
         return {
             fromClientJson: (json) => {
-                const providedCheckString = JSON.stringify(omit(json, ["currentClientUserJson", "currentProjectJson"]));
+                const providedCheckString = JSON.stringify(omit(json, [ /* none currently */]));
                 const existing = allClientApps.get(json.uniqueIdentifier);
                 if (existing) {
                     const [existingCheckString, clientApp] = existing;
@@ -587,15 +578,11 @@ class _StackClientAppImpl {
     }
     get [stackAppInternalsSymbol]() {
         return {
-            toClientJson: async () => {
+            toClientJson: () => {
                 if (!("publishableClientKey" in this._interface.options)) {
                     // TODO find a way to do this
                     throw Error("Cannot serialize to JSON from an application without a publishable client key");
                 }
-                const [user, project] = await Promise.all([
-                    this.getUser(),
-                    this.getProject(),
-                ]);
                 return {
                     baseUrl: this._interface.options.baseUrl,
                     projectId: this.projectId,
@@ -603,10 +590,11 @@ class _StackClientAppImpl {
                     tokenStore: this._tokenStoreOptions,
                     urls: this._urlOptions,
                     uniqueIdentifier: this._uniqueIdentifier,
-                    currentClientUserJson: user?.toJson() ?? null,
-                    currentProjectJson: project,
                 };
-            }
+            },
+            setCurrentUser: (userJsonPromise) => {
+                runAsynchronously(this._currentUserCache.forceSetCachedValueAsync([getTokenStore(this._tokenStoreOptions)], userJsonPromise));
+            },
         };
     }
     ;

package/dist/providers/component-provider.d.ts

@@ -40,6 +40,9 @@ export declare const Components: {
     readonly TabsList: React.ForwardRefExoticComponent<Omit<import("@radix-ui/react-tabs").TabsListProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
     readonly TabsContent: React.ForwardRefExoticComponent<Omit<import("@radix-ui/react-tabs").TabsContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
     readonly TabsTrigger: React.ForwardRefExoticComponent<Omit<import("@radix-ui/react-tabs").TabsTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+    readonly Skeleton: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
+        deactivated?: boolean | undefined;
+    } & React.RefAttributes<HTMLSpanElement>>;
 };
 export type ComponentConfig = {
     components?: Partial<typeof Components>;
@@ -83,6 +86,9 @@ export declare function useComponents(): {
     readonly TabsList: React.ForwardRefExoticComponent<Omit<import("@radix-ui/react-tabs").TabsListProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
     readonly TabsContent: React.ForwardRefExoticComponent<Omit<import("@radix-ui/react-tabs").TabsContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
     readonly TabsTrigger: React.ForwardRefExoticComponent<Omit<import("@radix-ui/react-tabs").TabsTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+    readonly Skeleton: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
+        deactivated?: boolean | undefined;
+    } & React.RefAttributes<HTMLSpanElement>>;
 };
 export declare function StackComponentProvider(props: {
     children?: React.ReactNode;

package/dist/providers/component-provider.js

@@ -14,6 +14,7 @@ import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuIte
 import { Avatar, AvatarFallback, AvatarImage } from '../components-core/avatar';
 import { Collapsible, CollapsibleTrigger, CollapsibleContent } from '../components-core/collapsible';
 import { Tabs, TabsList, TabsContent, TabsTrigger } from '../components-core/tabs';
+import { Skeleton } from '../components-core/skeleton';
 export const Components = {
     Input,
     Button,
@@ -45,6 +46,7 @@ export const Components = {
     TabsList,
     TabsContent,
     TabsTrigger,
+    Skeleton,
 };
 const ComponentContext = createContext(undefined);
 export function useComponents() {

package/dist/providers/design-provider.d.ts

@@ -34,6 +34,6 @@ export declare function hasCustomColorMode(config: DesignConfig): config is Desi
 };
 export declare function StackDesignProvider(props: {
     children?: React.ReactNode;
-} & DesignConfig): import("react/jsx-runtime").JSX.Element | null;
+} & DesignConfig): import("react/jsx-runtime").JSX.Element;
 export declare function useDesign(): DesignContextValue;
 export {};

package/dist/providers/design-provider.js

@@ -37,7 +37,6 @@ const useColorMode = (props) => {
     }
 };
 export function StackDesignProvider(props) {
-    const [mounted, setMounted] = useState(false);
     const [colorMode, setColorMode] = useColorMode(props);
     const [designValue, setDesignValue] = useState({
         colors: getColors(colorMode, props.colors),
@@ -52,11 +51,6 @@ export function StackDesignProvider(props) {
             colorMode,
         }));
     }, [colorMode]);
-    useEffect(() => {
-        setMounted(true);
-    }, []);
-    if (!mounted)
-        return null;
     return (_jsx(DesignContext.Provider, { value: designValue, children: props.children }));
 }
 export function useDesign() {

package/dist/providers/stack-provider-client.d.ts

@@ -1,9 +1,13 @@
 import { StackClientApp, StackClientAppJson } from "../lib/stack-app";
 import React from "react";
+import { UserJson } from "@stackframe/stack-shared";
 export declare const StackContext: React.Context<{
     app: StackClientApp<true>;
 } | null>;
 export declare function StackProviderClient(props: {
-    appJsonPromise: Promise<StackClientAppJson<true, string>>;
+    appJson: StackClientAppJson<true, string>;
     children?: React.ReactNode;
 }): import("react/jsx-runtime").JSX.Element;
+export declare function UserSetter(props: {
+    userJsonPromise: Promise<UserJson | null>;
+}): null;

package/dist/providers/stack-provider-client.js

@@ -1,14 +1,23 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
-import { use } from "react";
+import { useEffect } from "react";
 import { StackClientApp, stackAppInternalsSymbol } from "../lib/stack-app";
 import React from "react";
+import { useStackApp } from "..";
 export const StackContext = React.createContext(null);
 export function StackProviderClient(props) {
-    const appJson = use(props.appJsonPromise);
+    const appJson = props.appJson;
     const app = StackClientApp[stackAppInternalsSymbol].fromClientJson(appJson);
     if (process.env.NODE_ENV === "development") {
         globalThis.stackApp = app;
     }
     return (_jsx(StackContext.Provider, { value: { app }, children: props.children }));
 }
+export function UserSetter(props) {
+    const app = useStackApp();
+    useEffect(() => {
+        const promise = (async () => await props.userJsonPromise)(); // there is a Next.js bug where Promises passed by server components return `undefined` as their `then` value, so wrap it in a normal promise
+        app[stackAppInternalsSymbol].setCurrentUser(promise);
+    }, []);
+    return null;
+}

package/dist/providers/stack-provider.js

@@ -1,6 +1,11 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Suspense } from 'react';
 import { stackAppInternalsSymbol } from '../lib/stack-app';
-import { StackProviderClient } from './stack-provider-client';
+import { StackProviderClient, UserSetter } from './stack-provider-client';
 export default function StackProvider({ children, app, }) {
-    return (_jsx(StackProviderClient, { appJsonPromise: app[stackAppInternalsSymbol].toClientJson(), children: children }));
+    return (_jsxs(StackProviderClient, { appJson: app[stackAppInternalsSymbol].toClientJson(), children: [_jsx(Suspense, { fallback: null, children: _jsx(UserFetcher, { app: app }) }), children] }));
+}
+function UserFetcher(props) {
+    const userPromise = props.app.getUser().then((user) => user?.toJson() ?? null);
+    return _jsx(UserSetter, { userJsonPromise: userPromise });
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stackframe/stack",
-  "version": "2.3.3",
+  "version": "2.3.5",
   "type": "module",
   "exports": {
     ".": {
@@ -12,6 +12,7 @@
       "default": "./dist/joy.js"
     }
   },
+  "homepage": "https://stack-auth.com",
   "files": [
     "README.md",
     "dist"
@@ -34,11 +35,11 @@
     "tailwindcss-scoped-preflight": "^2.1.0",
     "yup": "^1.4.0",
     "@stackframe/stack-sc": "1.4.1",
-    "@stackframe/stack-shared": "2.3.2"
+    "@stackframe/stack-shared": "2.3.3"
   },
   "peerDependencies": {
     "@mui/joy": "^5.0.0-beta.30",
-    "next": "^14.1",
+    "next": ">=14.1",
     "react": "^18.2"
   },
   "peerDependenciesMeta": {