@stackframe/stack 1.0.0

package/dist/elements/OauthButton.js

@@ -0,0 +1,67 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { FaGithub, FaFacebook, FaApple } from 'react-icons/fa';
+import { useStackApp } from '..';
+import { runAsynchronously } from "@stackframe/stack-shared/dist/utils/promises";
+import Button from './Button';
+const iconSize = 24;
+export default function OauthButton({ provider, type, redirectUrl }) {
+    const stackApp = useStackApp();
+    let style;
+    switch (provider) {
+        case 'google': {
+            style = {
+                backgroundColor: '#fff',
+                textColor: '#000',
+                name: 'Google',
+                icon: (_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: iconSize, height: iconSize, viewBox: "0 0 24 24", children: [_jsx("path", { fill: "#4285F4", d: "M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z" }), _jsx("path", { fill: "#34A853", d: "M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z" }), _jsx("path", { fill: "#FBBC05", d: "M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z" }), _jsx("path", { fill: "#EA4335", d: "M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z" }), _jsx("path", { fill: "none", d: "M1 1h22v22H1z" })] })),
+            };
+            break;
+        }
+        case 'github': {
+            style = {
+                backgroundColor: '#111',
+                textColor: '#fff',
+                name: 'GitHub',
+                icon: (_jsx(FaGithub, { color: "#fff", size: iconSize })),
+            };
+            break;
+        }
+        case 'facebook': {
+            style = {
+                backgroundColor: '#1877F2',
+                textColor: '#fff',
+                name: 'Facebook',
+                icon: (_jsx(FaFacebook, { color: "#fff", size: iconSize })),
+            };
+            break;
+        }
+        case 'apple': {
+            style = {
+                backgroundColor: '#000',
+                textColor: '#fff',
+                name: 'Apple',
+                icon: (_jsx(FaApple, { color: "#fff", size: iconSize })),
+            };
+            break;
+        }
+        case 'microsoft': {
+            style = {
+                backgroundColor: '#2f2f2f',
+                textColor: '#fff',
+                name: 'Microsoft',
+                icon: (_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: iconSize, height: iconSize, viewBox: "0 0 21 21", children: [_jsx("title", { children: "MS-SymbolLockup" }), _jsx("path", { fill: "#f25022", d: "M1 1h9v9H1z" }), _jsx("path", { fill: "#00a4ef", d: "M1 11h9v9H1z" }), _jsx("path", { fill: "#7fba00", d: "M11 1h9v9h-9z" }), _jsx("path", { fill: "#ffb900", d: "M11 11h9v9h-9z" })] })),
+            };
+            break;
+        }
+        default: {
+            style = {
+                backgroundColor: '#000',
+                textColor: '#fff',
+                name: provider,
+                icon: null
+            };
+        }
+    }
+    return (_jsxs(Button, { style: { backgroundColor: style.backgroundColor, color: style.textColor }, onClick: () => runAsynchronously(stackApp.signInWithOauth(provider)), leftIcon: style.icon, children: [type === 'signup' ? 'Sign up with ' : 'Sign in with ', style.name] }));
+}

package/dist/elements/OauthGroup.d.ts

@@ -0,0 +1,4 @@
+export default function OauthGroup({ type, redirectUrl }: {
+    type: 'signin' | 'signup';
+    redirectUrl?: string;
+}): import("react/jsx-runtime").JSX.Element | null;

package/dist/elements/OauthGroup.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useStackApp } from "..";
+import OauthButton from "./OauthButton";
+export default function OauthGroup({ type, redirectUrl }) {
+    const stackApp = useStackApp();
+    const project = stackApp.useProject();
+    if (!project) {
+        return null;
+    }
+    return (_jsx("div", { className: "wl_space-y-4 wl_flex wl_flex-col wl_items-stretch", children: project.oauthProviders.map(({ id }) => (_jsx(OauthButton, { provider: id, type: type, redirectUrl: redirectUrl }, id))) }));
+}

package/dist/elements/PasswordField.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const PasswordField: import("react").ForwardRefExoticComponent<import("react").InputHTMLAttributes<HTMLInputElement> & import("react").RefAttributes<HTMLInputElement>>;

package/dist/elements/PasswordField.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useRef, useState } from 'react';
+import { HiEye, HiEyeOff } from 'react-icons/hi';
+export const PasswordField = forwardRef(({ id, name, ...props }, ref) => {
+    const [isOpen, setIsOpen] = useState(false);
+    const inputRef = useRef(null);
+    const mergeRef = (node) => {
+        if (ref) {
+            if (typeof ref === 'function') {
+                ref(node);
+            }
+            else {
+                ref.current = node;
+            }
+        }
+        inputRef.current = node;
+    };
+    const onClickReveal = () => {
+        setIsOpen(!isOpen);
+        const currentInput = inputRef.current;
+        if (currentInput) {
+            currentInput.focus({ preventScroll: true });
+        }
+    };
+    return (_jsxs("div", { className: "wl_relative", children: [_jsx("input", { id: id, ref: mergeRef, name: name, type: isOpen ? 'text' : 'password', autoComplete: "current-password", required: true, className: "wl_input wl_input-bordered wl_w-full", ...props }), _jsx("button", { tabIndex: -1, type: "button", className: "wl_absolute wl_inset-y-0 wl_right-0 wl_flex wl_items-center wl_pr-3", onClick: onClickReveal, "aria-label": isOpen ? 'Mask password' : 'Reveal password', children: isOpen ? _jsx(HiEyeOff, {}) : _jsx(HiEye, {}) })] }));
+});
+PasswordField.displayName = 'PasswordField';

package/dist/elements/PasswordResetInner.d.ts

@@ -0,0 +1,4 @@
+export default function PasswordResetInner({ code, fullPage }: {
+    code: string;
+    fullPage?: boolean;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/elements/PasswordResetInner.js

@@ -0,0 +1,61 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { getPasswordError } from "@stackframe/stack-shared/src/helpers/password";
+import { useStackApp } from "..";
+import { PasswordField } from "./PasswordField";
+import { FormWarningText } from "./FormWarning";
+import RedirectMessageCard from "./RedirectMessageCard";
+import MessageCard from "./MessageCard";
+import CardFrame from "./CardFrame";
+import CardHeader from "./CardHeader";
+export default function PasswordResetInner({ code, fullPage = false }) {
+    const [password, setPassword] = useState('');
+    const [passwordError, setPasswordError] = useState('');
+    const [passwordRepeat, setPasswordRepeat] = useState('');
+    const [passwordRepeatError, setPasswordRepeatError] = useState('');
+    const [finished, setFinished] = useState(false);
+    const [resetError, setResetError] = useState(false);
+    const stackApp = useStackApp();
+    const onSubmit = async () => {
+        if (!password) {
+            setPasswordError('Please enter your password');
+            return;
+        }
+        if (!passwordRepeat) {
+            setPasswordRepeatError('Please repeat your password');
+            return;
+        }
+        if (password !== passwordRepeat) {
+            setPasswordRepeatError('Passwords do not match');
+            return;
+        }
+        const errorMessage = getPasswordError(password);
+        if (errorMessage) {
+            setPasswordError(errorMessage);
+            return;
+        }
+        const errorCode = await stackApp.resetPassword({ password, code });
+        // this should not happen, the outer component should verify the code before rendering this component
+        if (errorCode) {
+            setResetError(true);
+            return;
+        }
+        setFinished(true);
+    };
+    if (finished) {
+        return _jsx(RedirectMessageCard, { type: 'passwordReset', fullPage: fullPage });
+    }
+    if (resetError) {
+        return (_jsx(MessageCard, { title: "Failed to reset password", fullPage: fullPage, children: _jsx("p", { children: "Failed to reset password. Please request a new password reset link" }) }));
+    }
+    return (_jsxs(CardFrame, { fullPage: fullPage, children: [_jsx(CardHeader, { title: "Reset Your Password" }), _jsxs("div", { className: "wl_flex wl_flex-col wl_space-y-2 wl_items-stretch", children: [_jsxs("div", { className: "wl_form-control", children: [_jsx("label", { className: "wl_label", htmlFor: "password", children: "New Password" }), _jsx(PasswordField, { id: "password", name: "password", value: password, onChange: (e) => {
+                                    setPassword(e.target.value);
+                                    setPasswordError('');
+                                    setPasswordRepeatError('');
+                                } }), _jsx(FormWarningText, { text: passwordError })] }), _jsxs("div", { className: "wl_form-control", children: [_jsx("label", { className: "wl_label", htmlFor: "repeat-password", children: "Repeat New Password" }), _jsx(PasswordField, { id: "repeat-password", name: "repeat-password", value: passwordRepeat, onChange: (e) => {
+                                    setPasswordRepeat(e.target.value);
+                                    setPasswordError('');
+                                    setPasswordRepeatError('');
+                                } }), _jsx(FormWarningText, { text: passwordRepeatError })] }), _jsx("div", { className: "wl_flex wl_flex-col wl_items-stretch", children: _jsx("button", { className: "wl_btn wl_btn-primary wl_mt-6", onClick: () => void onSubmit(), children: "Reset Password" }) })] })] }));
+}

package/dist/elements/RedirectMessageCard.d.ts

@@ -0,0 +1,4 @@
+export default function RedirectMessageCard({ type, fullPage, }: {
+    type: 'signedIn' | 'signedOut' | 'emailSent' | 'passwordReset' | 'emailVerified';
+    fullPage?: boolean;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/elements/RedirectMessageCard.js

@@ -0,0 +1,49 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRouter } from "next/navigation";
+import { useStackApp } from "..";
+import MessageCard from "./MessageCard";
+export default function RedirectMessageCard({ type, fullPage = false, }) {
+    const stackApp = useStackApp();
+    const router = useRouter();
+    let title;
+    let url;
+    let message = null;
+    let buttonText;
+    switch (type) {
+        case 'signedIn': {
+            title = "You are already signed in";
+            message = 'You are already signed in. You can click the buttont below to sign out if you want to sign in with a different account.';
+            url = stackApp.urls.signOut;
+            buttonText = "Sign Out";
+            break;
+        }
+        case 'signedOut': {
+            title = "You are already signed out";
+            url = stackApp.urls.home;
+            buttonText = "Go to Home";
+            break;
+        }
+        case 'emailSent': {
+            title = "Email Sent";
+            message = 'Please check your inbox. If you do not receive the email, please check your spam folder.';
+            url = stackApp.urls.home;
+            buttonText = "Go to Home";
+            break;
+        }
+        case 'passwordReset': {
+            title = "Password Reset";
+            message = 'Your password has been reset. You can now sign in with your new password.';
+            url = stackApp.urls.signIn;
+            buttonText = "Go to Sign In";
+            break;
+        }
+        case 'emailVerified': {
+            title = "Email Verified";
+            message = 'Your have successfully verified your email';
+            url = stackApp.urls.signIn;
+            buttonText = "Go to Home";
+            break;
+        }
+    }
+    return (_jsxs(MessageCard, { title: title, fullPage: fullPage, children: [message && _jsx("p", { className: 'wl_mb-8', children: message }), _jsx("button", { className: 'wl_btn wl_btn-primary', onClick: () => router.push(url.toString()), children: buttonText })] }));
+}

package/dist/index.d.ts

@@ -0,0 +1,11 @@
+export { default as StackProvider } from "./providers/StackProvider";
+export { useUser, useStackApp } from "./lib/hooks";
+export { StackClientApp, StackServerApp, StackAdminApp } from "./lib/stack-app";
+export { default as SignIn } from "./components/SignIn";
+export { default as SignUp } from "./components/SignUp";
+export { default as StackHandler } from "./components/StackHandler";
+export { default as EmailVerification } from "./components/EmailVerification";
+export { default as PasswordReset } from "./components/PasswordReset";
+export { default as ForgotPassword } from "./components/ForgotPassword";
+export { validateEmail } from "./utils/email";
+import '../dist/tailwind.css';

package/dist/index.js

@@ -0,0 +1,12 @@
+export { default as StackProvider } from "./providers/StackProvider";
+export { useUser, useStackApp } from "./lib/hooks";
+export { StackClientApp, StackServerApp, StackAdminApp } from "./lib/stack-app";
+export { default as SignIn } from "./components/SignIn";
+export { default as SignUp } from "./components/SignUp";
+export { default as StackHandler } from "./components/StackHandler";
+export { default as EmailVerification } from "./components/EmailVerification";
+export { default as PasswordReset } from "./components/PasswordReset";
+export { default as ForgotPassword } from "./components/ForgotPassword";
+export { validateEmail } from "./utils/email";
+// TODO we can't import it like this
+import '../dist/tailwind.css';

package/dist/lib/auth.d.ts

@@ -0,0 +1,19 @@
+import { StackClientInterface } from "@stackframe/stack-shared";
+import { TokenStore } from "@stackframe/stack-shared/dist/interface/clientInterface";
+import { SignInErrorCode, SignUpErrorCode } from "@stackframe/stack-shared/dist/utils/types";
+export declare function signInWithOauth(iface: StackClientInterface, { provider, redirectUrl, }: {
+    provider: string;
+    redirectUrl?: string;
+}): Promise<void>;
+export declare function callOauthCallback(iface: StackClientInterface, tokenStore: TokenStore, redirectUrl?: string): Promise<void>;
+export declare function signInWithCredential(iface: StackClientInterface, tokenStore: TokenStore, { email, password, redirectUrl, }: {
+    email: string;
+    password: string;
+    redirectUrl?: string;
+}): Promise<SignInErrorCode | undefined>;
+export declare function signUpWithCredential(iface: StackClientInterface, tokenStore: TokenStore, { email, password, redirectUrl, emailVerificationRedirectUrl }: {
+    email: string;
+    password: string;
+    redirectUrl?: string;
+    emailVerificationRedirectUrl?: string;
+}): Promise<SignUpErrorCode | undefined>;

package/dist/lib/auth.js

@@ -0,0 +1,85 @@
+import { saveVerifierAndState, getVerifierAndState } from "./cookie";
+import { constructRedirectUrl } from "../utils/url";
+export async function signInWithOauth(iface, { provider, redirectUrl, }) {
+    redirectUrl = constructRedirectUrl(redirectUrl);
+    const { codeChallenge, state } = await saveVerifierAndState();
+    const location = await iface.getOauthUrl(provider, redirectUrl, codeChallenge, state);
+    window.location.assign(location);
+}
+/**
+ * Checks if the current URL has the query parameters for an OAuth callback, and if so, removes them.
+ *
+ * Must be synchronous for the logic in callOauthCallback to work without race conditions.
+ */
+function consumeOauthCallbackQueryParams(expectedState) {
+    const requiredParams = ["code", "state"];
+    const originalUrl = new URL(window.location.href);
+    for (const param of requiredParams) {
+        if (!originalUrl.searchParams.has(param)) {
+            return null;
+        }
+    }
+    if (expectedState !== originalUrl.searchParams.get("state")) {
+        // If the state doesn't match, then the callback wasn't meant for us.
+        // Maybe the website uses another OAuth library?
+        return null;
+    }
+    const newUrl = new URL(originalUrl);
+    for (const param of requiredParams) {
+        newUrl.searchParams.delete(param);
+    }
+    // let's get rid of the authorization code in the history as we
+    // don't redirect to `redirectUrl` if there's a validation error
+    // (as the redirectUrl might be malicious!).
+    //
+    // We use history.replaceState instead of location.assign(...) to
+    // prevent an unnecessary reload
+    window.history.replaceState({}, "", newUrl.toString());
+    return { newUrl, originalUrl };
+}
+export async function callOauthCallback(iface, tokenStore, redirectUrl) {
+    // note: this part of the function (until the return) needs
+    // to be synchronous, to prevent race conditions when
+    // callOauthCallback is called multiple times in parallel
+    const { codeVerifier, state } = getVerifierAndState();
+    const consumeResult = consumeOauthCallbackQueryParams(state);
+    if (!consumeResult) {
+        return;
+    }
+    if (!codeVerifier || !state) {
+        return;
+    }
+    // the rest can be asynchronous (we now know that we are the
+    // intended recipient of the callback)
+    const { newUrl, originalUrl } = consumeResult;
+    if (!redirectUrl) {
+        redirectUrl = newUrl.toString();
+    }
+    redirectUrl = redirectUrl.split("#")[0]; // remove hash
+    try {
+        await iface.callOauthCallback(originalUrl.searchParams, redirectUrl, codeVerifier, state, tokenStore);
+        // reload/redirect so the server can update now that the user is signed in
+        window.location.assign(redirectUrl);
+    }
+    catch (e) {
+        console.error("Error signing in during OAuth callback", e);
+        throw new Error("Error signing in. Please try again.");
+    }
+}
+export async function signInWithCredential(iface, tokenStore, { email, password, redirectUrl, }) {
+    const errorCode = await iface.signInWithCredential(email, password, tokenStore);
+    if (!errorCode) {
+        redirectUrl = constructRedirectUrl(redirectUrl);
+        window.location.assign(redirectUrl);
+    }
+    return errorCode;
+}
+export async function signUpWithCredential(iface, tokenStore, { email, password, redirectUrl, emailVerificationRedirectUrl = "/" }) {
+    emailVerificationRedirectUrl = constructRedirectUrl(emailVerificationRedirectUrl);
+    const errorCode = await iface.signUpWithCredential(email, password, emailVerificationRedirectUrl, tokenStore);
+    if (!errorCode) {
+        redirectUrl = constructRedirectUrl(redirectUrl);
+        window.location.assign(redirectUrl);
+    }
+    return errorCode;
+}

package/dist/lib/cookie.d.ts

@@ -0,0 +1,12 @@
+export declare function getCookie(name: string): string | null;
+export declare function setOrDeleteCookie(name: string, value: string | null): void;
+export declare function deleteCookie(name: string): void;
+export declare function setCookie(name: string, value: string): void;
+export declare function saveVerifierAndState(): Promise<{
+    codeChallenge: string;
+    state: string;
+}>;
+export declare function getVerifierAndState(): {
+    codeVerifier: string | null;
+    state: string | null;
+};

package/dist/lib/cookie.js

@@ -0,0 +1,60 @@
+import { generateRandomCodeVerifier, generateRandomState, calculatePKCECodeChallenge } from "oauth4webapi";
+import Cookies from "js-cookie";
+import { isClient } from "../utils/next";
+export function getCookie(name) {
+    // TODO the differentiating factor should be RCC vs. RSC, not whether it's a client
+    if (isClient()) {
+        return Cookies.get(name) ?? null;
+    }
+    else {
+        const { cookies } = require("next/headers");
+        return cookies().get(name)?.value ?? null;
+    }
+}
+export function setOrDeleteCookie(name, value) {
+    if (value === null) {
+        deleteCookie(name);
+    }
+    else {
+        setCookie(name, value);
+    }
+}
+export function deleteCookie(name) {
+    // TODO the differentiating factor should be RCC vs. RSC, not whether it's a client
+    if (isClient()) {
+        Cookies.remove(name);
+    }
+    else {
+        const { cookies } = require("next/headers");
+        cookies().delete(name);
+    }
+}
+export function setCookie(name, value) {
+    // TODO the differentiating factor should be RCC vs. RSC, not whether it's a client
+    if (isClient()) {
+        Cookies.set(name, value);
+    }
+    else {
+        const { cookies } = require("next/headers");
+        cookies().set(name, value);
+    }
+}
+export async function saveVerifierAndState() {
+    const codeVerifier = generateRandomCodeVerifier();
+    const codeChallenge = await calculatePKCECodeChallenge(codeVerifier);
+    const state = generateRandomState();
+    setCookie("stack-code-verifier", codeVerifier);
+    setCookie("stack-state", state);
+    return {
+        codeChallenge,
+        state,
+    };
+}
+export function getVerifierAndState() {
+    const codeVerifier = getCookie("stack-code-verifier");
+    const state = getCookie("stack-state");
+    return {
+        codeVerifier,
+        state,
+    };
+}

package/dist/lib/hooks.d.ts

@@ -0,0 +1,21 @@
+import { CurrentUser, GetUserOptions, StackClientApp } from "./stack-app";
+/**
+ * Returns the current user object. Equivalent to `useStackApp().useUser()`.
+ *
+ * @returns the current user
+ */
+export declare function useUser(options: GetUserOptions & {
+    or: 'redirect';
+}): CurrentUser;
+export declare function useUser(options: GetUserOptions & {
+    or: 'throw';
+}): CurrentUser;
+export declare function useUser(options?: GetUserOptions): CurrentUser | null;
+/**
+ * Returns the current Stack app associated with the StackProvider.
+ *
+ * @returns the current Stack app
+ */
+export declare function useStackApp<ProjectId extends string>(options?: {
+    projectIdMustMatch?: ProjectId;
+}): StackClientApp<true, ProjectId>;

package/dist/lib/hooks.js

@@ -0,0 +1,21 @@
+import { StackContext } from "../providers/StackProviderClient";
+import { useContext } from "react";
+export function useUser(options) {
+    return useStackApp().useUser(options);
+}
+/**
+ * Returns the current Stack app associated with the StackProvider.
+ *
+ * @returns the current Stack app
+ */
+export function useStackApp(options = {}) {
+    const context = useContext(StackContext);
+    if (context === null) {
+        throw new Error("useStackApp must be used within a StackProvider");
+    }
+    const stackApp = context.app;
+    if (options.projectIdMustMatch && stackApp.projectId !== options.projectIdMustMatch) {
+        throw new Error("Unexpected project ID in useStackApp: " + stackApp.projectId);
+    }
+    return stackApp;
+}