@sqrzro/auth 2.0.0-r19.9 → 4.0.0-alpha.0

package/dist/forms/PasswordResetForm/index.js

@@ -0,0 +1,13 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment } from 'react';
+import { Form, FormSubmit, PasswordFormField, useForm } from '@sqrzro/ui/forms';
+import submit from './server';
+function PasswordResetForm({ token }) {
+    const { fieldProps, formProps } = useForm({
+        defaults: { token },
+        onSubmit: submit,
+    });
+    return (_jsx(Fragment, { children: _jsxs(Form, { ...formProps, children: [_jsx(PasswordFormField, { ...fieldProps('password') }), _jsx(FormSubmit, { isFullWidth: true, children: "Reset Password" })] }) }));
+}
+export default PasswordResetForm;

package/dist/forms/PasswordResetForm/interfaces.d.ts

@@ -0,0 +1,4 @@
+export interface PasswordResetFormFields {
+    password: string;
+    token: string;
+}

package/dist/forms/PasswordResetForm/interfaces.js

@@ -0,0 +1 @@
+export {};

package/dist/forms/PasswordResetForm/server.d.ts

@@ -0,0 +1,4 @@
+import { FormResponse } from '@sqrzro/server/forms';
+import type { PasswordResetFormFields } from './interfaces';
+declare function submit(formData: PasswordResetFormFields): FormResponse<void>;
+export default submit;

package/dist/forms/PasswordResetForm/server.js

@@ -0,0 +1,23 @@
+'use server';
+import { updatePasswordWithToken } from '@sqrzro/server/auth';
+import { submitForm } from '@sqrzro/server/forms';
+import { redirect } from 'next/navigation';
+import { z } from 'zod';
+const schema = z
+    .object({
+    password: z.string(),
+    token: z.string().regex(/[A-Za-z0-9]{48}/u),
+})
+    .required({ password: true, token: true });
+async function fn(data) {
+    await updatePasswordWithToken(data.token, data.password);
+    return redirect('/auth/login');
+}
+async function submit(formData) {
+    return submitForm({
+        fn,
+        formData,
+        schema,
+    });
+}
+export default submit;

package/dist/handle-proxy.d.ts

@@ -0,0 +1,4 @@
+import { NextResponse } from 'next/server';
+import type { NextRequest } from 'next/server';
+declare function handleProxy(request: NextRequest): Promise<NextResponse>;
+export default handleProxy;

package/dist/handle-proxy.js

@@ -0,0 +1,17 @@
+import { validateSession } from '@sqrzro/server/auth';
+import { NextResponse } from 'next/server';
+async function handleProxy(request) {
+    const pathname = request.nextUrl.pathname;
+    const validated = await validateSession(request.cookies);
+    if (validated) {
+        if (pathname.startsWith('/auth')) {
+            return NextResponse.redirect(new URL('/', request.url));
+        }
+        return NextResponse.next();
+    }
+    if (pathname.startsWith('/auth')) {
+        return NextResponse.next();
+    }
+    return NextResponse.redirect(new URL('/auth/login', request.url));
+}
+export default handleProxy;

package/dist/hooks/useLoginForm.js

@@ -3,6 +3,9 @@ import { useForm } from '@sqrzro/hooks';
 function useLoginForm(onSubmit, { redirect } = {}) {
     return useForm({
         defaults: { redirect },
+        onError: (error) => {
+            console.error('Login form error:', error);
+        },
         onSubmit,
         toasts: { validation: 'Incorrect email or password', success: false },
     });

package/dist/index.d.ts

@@ -1,7 +1,3 @@
 export { default as Auth } from './components/Auth';
-export type { AuthClassNames, AuthProps } from './components/Auth';
-export type { MFASetupProps } from './components/MFASetup';
-export { default as MFASetup } from './components/MFASetup';
 export { default as LogoutButton } from './components/LogoutButton';
-export type { UseMFAFormArgs, UseMFAFormReturn } from './hooks/useMFAForm';
-export { default as useMFAForm } from './hooks/useMFAForm';
+export { default as handleProxy } from './handle-proxy';

package/dist/index.js

@@ -1,4 +1,3 @@
 export { default as Auth } from './components/Auth';
-export { default as MFASetup } from './components/MFASetup';
 export { default as LogoutButton } from './components/LogoutButton';
-export { default as useMFAForm } from './hooks/useMFAForm';
+export { default as handleProxy } from './handle-proxy';

package/dist/interfaces.d.ts

@@ -0,0 +1,10 @@
+export interface AuthClassNames {
+    actions: string;
+    footer: string;
+    form: string;
+    link: string;
+    logo: string;
+    root: string;
+    panel: string;
+    title: string;
+}

package/dist/interfaces.js

@@ -0,0 +1 @@
+export {};

package/dist/proxy.js

@@ -0,0 +1 @@
+"use strict";

package/dist/server.d.ts

@@ -3,13 +3,18 @@ import type { NextRedirect } from '@sqrzro/server/forms';
 import type { Errorable } from '@sqrzro/interfaces';
 export type { ScopeObject } from '@sqrzro/server/auth';
 interface AuthEventObject {
-    login?: () => Promise<void>;
+    auth?: (user: UserObject) => Promise<boolean>;
+    login?: (user: UserObject) => Promise<{
+        redirect: string;
+    } | void>;
+    mfa?: (user: UserObject) => Promise<void>;
     password?: (email: string, token: string) => Promise<boolean>;
 }
 export declare function registerAuthEvents(events: AuthEventObject): Promise<void>;
 export declare function checkUserHasMFA(user: UserObject): Promise<boolean>;
 export declare function generateMFA(name: string, email?: string): Promise<string | null>;
 export declare function getSessionUser(): Promise<UserObject | null>;
+export declare function setUserSession(id: string): Promise<void>;
 export declare function checkMFAEnabled(): Promise<boolean>;
 interface MFAFormFields {
     token: string;

package/dist/server.js

@@ -1,10 +1,16 @@
 'use server';
-import { handleLoginForm, handleLogout, handleMFAForm, handlePasswordForm, handlePasswordResetWithTokenForm, checkUserHasMFA as serverCheckUserHasMFA, generateMFA as serverGenerateMFA, getSessionUser as serverGetSessionUser, checkMFAEnabled as syncCheckMFAEnabled, } from '@sqrzro/server/auth';
+import { handleLoginForm, handleLogout, handleMFAForm, handlePasswordForm, handlePasswordResetWithTokenForm, checkUserHasMFA as serverCheckUserHasMFA, generateMFA as serverGenerateMFA, getSessionUser as serverGetSessionUser, setUserSession as serverSetUserSession, checkMFAEnabled as syncCheckMFAEnabled, } from '@sqrzro/server/auth';
 const authEvents = {};
 export async function registerAuthEvents(events) {
+    if (events.auth) {
+        authEvents.auth = events.auth;
+    }
     if (events.login) {
         authEvents.login = events.login;
     }
+    if (events.mfa) {
+        authEvents.mfa = events.mfa;
+    }
     if (events.password) {
         authEvents.password = events.password;
     }
@@ -25,15 +31,18 @@ export async function generateMFA(name, email) {
 export async function getSessionUser() {
     return serverGetSessionUser();
 }
+export async function setUserSession(id) {
+    return serverSetUserSession(id);
+}
 // This function is synchronous, so we need to wrap it in a promise so it can be exported properly.
 export async function checkMFAEnabled() {
     return Promise.resolve(syncCheckMFAEnabled());
 }
 export async function submitLoginForm(formData) {
-    return handleLoginForm(formData, authEvents.login);
+    return handleLoginForm(formData, authEvents.auth, authEvents.login);
 }
 export async function submitMFAForm(formData) {
-    return handleMFAForm(formData);
+    return handleMFAForm(formData, authEvents.mfa);
 }
 async function sendPasswordResetMail(email, token) {
     return authEvents.password?.(email, token) || false;

package/package.json

@@ -1,24 +1,27 @@
 {
   "name": "@sqrzro/auth",
   "type": "module",
-  "version": "2.0.0-r19.9",
+  "version": "4.0.0-alpha.0",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "dependencies": {
-    "@sqrzro/components": "r19",
-    "@sqrzro/hooks": "r19",
-    "@sqrzro/interfaces": "r19",
-    "@sqrzro/server": "r19",
-    "next": "^15.1.5",
-    "react": "^19.0.0"
+    "@sqrzro/server": "n16",
+    "zod": "^4.1.13",
+    "@sqrzro/ui": "^4.0.0-alpha.0"
   },
   "devDependencies": {
-    "@types/react": "^19.0.7",
-    "typescript": "^5.7.3"
+    "@types/react": "^19.2.7",
+    "prettier": "^3.7.4",
+    "typescript": "^5.9.3",
+    "@sqrzro/prettier-config": "^4.0.0-alpha.0"
+  },
+  "peerDependencies": {
+    "next": "^16.0.1",
+    "react": "^19.2.0"
   },
   "scripts": {
-    "build": "tsc -p tsconfig.json",
-    "dev": "tsc -p tsconfig.json --watch",
+    "build": "tsc",
+    "dev": "tsc --watch",
     "start": "pnpm dev"
   }
 }

package/src/components/Auth/index.tsx

@@ -1,91 +1,47 @@
-import { tw } from '@sqrzro/components';
-import type { ClassNameProps } from '@sqrzro/components';
-import { notFound } from 'next/navigation';
+import { Suspense } from 'react';
 
-import LoginForm from '../LoginForm';
-import MFAPage from '../MFAPage';
-import PasswordPage from '../PasswordPage';
+import { notFound } from 'next/navigation';
 
-import { registerAuthEvents } from '../../server';
-import type { ScopeObject } from '../../server';
+import LoginForm from '../../forms/LoginForm';
+import Password from '../Password';
 
-export interface AuthClassNames {
-    actions: string;
-    footer: string;
-    form: string;
-    link: string;
-    logo: string;
-    root: string;
-    panel: string;
-    title: string;
+interface AuthProps {
+    params: Promise<Record<string, string>>;
+    searchParams: Promise<Record<string, string>>;
 }
 
-export interface AuthProps extends ClassNameProps<AuthClassNames> {
-    logo?: React.ReactElement;
-    onLogin?: () => Promise<void>;
-    onPassword?: (email: string, token: string) => Promise<boolean>;
-    params: { auth: string[] };
-    scopes?: Partial<ScopeObject>;
-    searchParams: { email?: string; r?: string; token?: string };
-}
+async function AuthComponent({
+    params,
+    searchParams,
+}: Readonly<AuthProps>): Promise<React.ReactElement> {
+    const awaitedParams = await params;
 
-interface AuthPageProps {
-    classNames?: Partial<AuthClassNames>;
-    searchParams: AuthProps['searchParams'];
-}
+    if (!Array.isArray(awaitedParams.auth) || awaitedParams.auth.length !== 1) {
+        return notFound();
+    }
 
-/**
- * To make it easier for consumers to use Auth in their projects, this auth component uses a
- * Catch-All Segment to handle the rendering of all Auth pages. This function is used to determine
- * which page to render based on the route.
- *
- * More information on Catch-All Segments can be found here:
- * https://nextjs.org/docs/app/building-your-application/routing/dynamic-routes#catch-all-segments
- *
- * @param route
- * @param props
- * @returns
- */
-function getPage(route: string, props: AuthPageProps): React.ReactElement {
-    switch (route) {
-        case 'mfa':
-            return <MFAPage {...props} />;
-        case 'password':
-            return <PasswordPage {...props} />;
-        default:
-            return <LoginForm {...props} />;
+    if (awaitedParams.auth[0] === 'login') {
+        return <LoginForm />;
     }
-}
 
-/**
- *
- * A note on `classNames`: As `Auth` needs to run on the server (as some of its children require
- * sessions etc), using the `getClassNames` pattern won't work, as it currently only works for
- * client components. So we have to pass the classNames directly to the component.
- */
-async function Auth({
-    classNames,
-    logo,
-    onLogin,
-    onPassword,
-    params: { auth },
-    searchParams,
-}: Readonly<AuthProps>): Promise<React.ReactElement> {
-    if (auth.length > 1) {
-        return notFound();
+    if (awaitedParams.auth[0] === 'mfa') {
+        return <div>[MFA NOT DONE]</div>;
     }
 
-    await registerAuthEvents({ login: onLogin, password: onPassword });
+    if (awaitedParams.auth[0] === 'password') {
+        return <Password searchParams={searchParams} />;
+    }
+
+    return notFound();
+}
 
+function Auth({ params, searchParams }: Readonly<AuthProps>): React.ReactElement {
     return (
-        <div className={tw(classNames?.root)}>
-            <div className={tw(classNames?.logo)}>{logo}</div>
-            <div className={tw(classNames?.panel)}>
-                {getPage(auth[0], {
-                    classNames,
-                    searchParams,
-                })}
-            </div>
+        <div>
+            AUTH PAGE HEADER
+            <Suspense>
+                <AuthComponent params={params} searchParams={searchParams} />
+            </Suspense>
         </div>
     );
 }

package/src/components/LogoutButton/index.tsx

@@ -1,32 +1,20 @@
 'use client';
 
-import { useRouter } from 'next/navigation';
+import { useTransition } from 'react';
 
-import { logout } from '../../server';
+import handle from './server';
 
 export interface LogoutButtonProps {
     children?: React.ReactElement | string;
-    redirectTo?: string;
 }
 
-function LogoutButton({
-    children = 'Log out',
-    redirectTo,
-}: Readonly<LogoutButtonProps>): React.ReactElement {
-    const router = useRouter();
-
-    async function handleLogout(): Promise<void> {
-        await logout();
-        router.push(redirectTo || '/');
-
-        // It seems necessary to refresh to ensure the user is redirected to the login page
-        router.refresh();
-    }
+function LogoutButton({ children = 'Log out' }: Readonly<LogoutButtonProps>): React.ReactElement {
+    const [isLoading, startTransition] = useTransition();
 
     return (
-        <form action={handleLogout} className="contents">
-            <button type="submit">{children}</button>
-        </form>
+        <button disabled={isLoading} onClick={() => startTransition(handle)}>
+            {children}
+        </button>
     );
 }
 

package/src/components/LogoutButton/server.ts

@@ -0,0 +1,11 @@
+'use server';
+
+import { deleteSession } from '@sqrzro/server/auth';
+import { redirect } from 'next/navigation';
+
+async function handle(): Promise<void> {
+    await deleteSession();
+    return redirect('/auth/login');
+}
+
+export default handle;

package/src/components/Password/index.tsx

@@ -0,0 +1,26 @@
+import { validateReset } from '@sqrzro/server/auth';
+
+import PasswordForm from '../../forms/PasswordForm';
+import PasswordResetForm from '../../forms/PasswordResetForm';
+
+interface PasswordProps {
+    searchParams: Promise<Record<string, string>>;
+}
+
+async function Password({ searchParams }: Readonly<PasswordProps>): Promise<React.ReactElement> {
+    const awaitedSearchParams = await searchParams;
+
+    if (awaitedSearchParams.token) {
+        const validated = await validateReset('PASSWORD', awaitedSearchParams.token);
+
+        if (validated) {
+            return <PasswordResetForm token={awaitedSearchParams.token} />;
+        } else {
+            return <div>Invalid or Expired Token</div>;
+        }
+    }
+
+    return <PasswordForm />;
+}
+
+export default Password;

package/src/forms/LoginForm/index.tsx

@@ -0,0 +1,33 @@
+'use client';
+
+import { Fragment } from 'react';
+
+import { Link } from '@sqrzro/ui/components';
+import { Form, FormSubmit, PasswordFormField, TextFormField, useForm } from '@sqrzro/ui/forms';
+
+import submit from './server';
+
+function LoginForm(): React.ReactElement | null {
+    const { fieldProps, formData, formProps } = useForm({
+        onSubmit: submit,
+    });
+
+    return (
+        <Fragment>
+            <Form {...formProps}>
+                <TextFormField {...fieldProps('email')} hasAssistiveError />
+                <PasswordFormField {...fieldProps('password')} hasAssistiveError />
+                <FormSubmit>Sign In</FormSubmit>
+                <footer>
+                    <Link
+                        href={`/auth/password${formData.email ? `?email=${formData.email}` : ''}`}
+                    >
+                        Forgot Password?
+                    </Link>
+                </footer>
+            </Form>
+        </Fragment>
+    );
+}
+
+export default LoginForm;

package/src/forms/LoginForm/interfaces.ts

@@ -0,0 +1,5 @@
+export interface LoginFormFields {
+    email: string;
+    password: string;
+    redirect?: string;
+}

package/src/forms/LoginForm/server.ts

@@ -0,0 +1,33 @@
+'use server';
+
+import { createSession, validateUser } from '@sqrzro/server/auth';
+import { FormResponse, submitForm } from '@sqrzro/server/forms';
+import { redirect } from 'next/navigation';
+import { z } from 'zod';
+
+import type { LoginFormFields } from './interfaces';
+
+const schema = z
+    .object({
+        email: z.email(),
+        password: z.string(),
+        redirect: z.string().optional(),
+    })
+    .required({ email: true, password: true });
+
+async function fn(data: LoginFormFields): Promise<void> {
+    const userID = await validateUser(data.email, data.password);
+    await createSession(userID);
+
+    redirect('/');
+}
+
+async function submit(formData: LoginFormFields): FormResponse<void> {
+    return submitForm({
+        fn,
+        formData,
+        schema,
+    });
+}
+
+export default submit;

package/src/forms/PasswordForm/index.tsx

@@ -0,0 +1,24 @@
+'use client';
+
+import { Fragment } from 'react';
+
+import { Form, FormSubmit, TextFormField, useForm } from '@sqrzro/ui/forms';
+
+import submit from './server';
+
+function PasswordForm(): React.ReactElement | null {
+    const { fieldProps, formProps } = useForm({
+        onSubmit: submit,
+    });
+
+    return (
+        <Fragment>
+            <Form {...formProps}>
+                <TextFormField {...fieldProps('email')} hasAssistiveError />
+                <FormSubmit isFullWidth>Send Email</FormSubmit>
+            </Form>
+        </Fragment>
+    );
+}
+
+export default PasswordForm;

package/src/forms/PasswordForm/interfaces.ts

@@ -0,0 +1,3 @@
+export interface PasswordFormFields {
+    email: string;
+}

package/src/forms/PasswordForm/server.ts

@@ -0,0 +1,28 @@
+'use server';
+
+import { createReset } from '@sqrzro/server/auth';
+import { FormResponse, submitForm } from '@sqrzro/server/forms';
+import { z } from 'zod';
+
+import type { PasswordFormFields } from './interfaces';
+
+const schema = z
+    .object({
+        email: z.email(),
+    })
+    .required({ email: true });
+
+async function fn(data: PasswordFormFields): Promise<void> {
+    const token = await createReset('PASSWORD', data.email);
+    console.log(token);
+}
+
+async function submit(formData: PasswordFormFields): FormResponse<void> {
+    return submitForm({
+        fn,
+        formData,
+        schema,
+    });
+}
+
+export default submit;

package/src/forms/PasswordResetForm/index.tsx

@@ -0,0 +1,29 @@
+'use client';
+
+import { Fragment } from 'react';
+
+import { Form, FormSubmit, PasswordFormField, useForm } from '@sqrzro/ui/forms';
+
+import submit from './server';
+
+interface PasswordResetFormProps {
+    token: string;
+}
+
+function PasswordResetForm({ token }: Readonly<PasswordResetFormProps>): React.ReactElement | null {
+    const { fieldProps, formProps } = useForm({
+        defaults: { token },
+        onSubmit: submit,
+    });
+
+    return (
+        <Fragment>
+            <Form {...formProps}>
+                <PasswordFormField {...fieldProps('password')} />
+                <FormSubmit isFullWidth>Reset Password</FormSubmit>
+            </Form>
+        </Fragment>
+    );
+}
+
+export default PasswordResetForm;

package/src/forms/PasswordResetForm/interfaces.ts

@@ -0,0 +1,4 @@
+export interface PasswordResetFormFields {
+    password: string;
+    token: string;
+}

package/src/forms/PasswordResetForm/server.ts

@@ -0,0 +1,30 @@
+'use server';
+
+import { updatePasswordWithToken } from '@sqrzro/server/auth';
+import { FormResponse, submitForm } from '@sqrzro/server/forms';
+import { redirect } from 'next/navigation';
+import { z } from 'zod';
+
+import type { PasswordResetFormFields } from './interfaces';
+
+const schema = z
+    .object({
+        password: z.string(),
+        token: z.string().regex(/[A-Za-z0-9]{48}/u),
+    })
+    .required({ password: true, token: true });
+
+async function fn(data: PasswordResetFormFields): Promise<void> {
+    await updatePasswordWithToken(data.token, data.password);
+    return redirect('/auth/login');
+}
+
+async function submit(formData: PasswordResetFormFields): FormResponse<void> {
+    return submitForm({
+        fn,
+        formData,
+        schema,
+    });
+}
+
+export default submit;

package/src/handle-proxy.ts

@@ -0,0 +1,23 @@
+import { validateSession } from '@sqrzro/server/auth';
+import { NextResponse } from 'next/server';
+import type { NextRequest } from 'next/server';
+
+async function handleProxy(request: NextRequest): Promise<NextResponse> {
+    const pathname = request.nextUrl.pathname;
+    const validated = await validateSession(request.cookies);
+
+    if (validated) {
+        if (pathname.startsWith('/auth')) {
+            return NextResponse.redirect(new URL('/', request.url));
+        }
+        return NextResponse.next();
+    }
+
+    if (pathname.startsWith('/auth')) {
+        return NextResponse.next();
+    }
+
+    return NextResponse.redirect(new URL('/auth/login', request.url));
+}
+
+export default handleProxy;