@sqrzro/auth 4.0.0-alpha.1 → 4.0.0-alpha.10

package/dist/utility/validate-password-complexity.js

@@ -0,0 +1,65 @@
+import { formatPlural, getEntries, getKeys } from '@sqrzro/utility';
+import { z } from 'zod';
+export var PasswordComplexityKey;
+(function (PasswordComplexityKey) {
+    PasswordComplexityKey["LENGTH"] = "LENGTH";
+    PasswordComplexityKey["UPPERCASE"] = "UPPERCASE";
+    PasswordComplexityKey["LOWERCASE"] = "LOWERCASE";
+    PasswordComplexityKey["NUMBER"] = "NUMBER";
+    PasswordComplexityKey["SPECIAL"] = "SPECIAL";
+})(PasswordComplexityKey || (PasswordComplexityKey = {}));
+const lang = {
+    [PasswordComplexityKey.LENGTH]: (value) => `At least ${formatPlural('character', value)} long`,
+    [PasswordComplexityKey.UPPERCASE]: (value) => `Contain at least ${formatPlural('uppercase letter', value)}`,
+    [PasswordComplexityKey.LOWERCASE]: (value) => `Contain at least ${formatPlural('lowercase letter', value)}`,
+    [PasswordComplexityKey.NUMBER]: (value) => `Contain at least ${formatPlural('number', value)}`,
+    [PasswordComplexityKey.SPECIAL]: (value) => `Contain at least ${formatPlural('special character', value)}`,
+};
+function createSchema(complexity) {
+    let result = z.string();
+    if (complexity.LENGTH) {
+        result = result.min(complexity.LENGTH, PasswordComplexityKey.LENGTH);
+    }
+    if (complexity.UPPERCASE) {
+        result = result.regex(new RegExp(`(?:.*[A-Z]){${complexity.UPPERCASE}}`), PasswordComplexityKey.UPPERCASE);
+    }
+    if (complexity.LOWERCASE) {
+        result = result.regex(new RegExp(`(?:.*[a-z]){${complexity.LOWERCASE}}`), PasswordComplexityKey.LOWERCASE);
+    }
+    if (complexity.NUMBER) {
+        result = result.regex(new RegExp(`(?:.*\\d){${complexity.NUMBER}}`), PasswordComplexityKey.NUMBER);
+    }
+    if (complexity.SPECIAL) {
+        result = result.regex(new RegExp(`(?:.*[@$!%*?&]){${complexity.SPECIAL}}`), PasswordComplexityKey.SPECIAL);
+    }
+    return result;
+}
+function getDefaultComplexityResult(complexity) {
+    return getEntries(complexity).map(([key, value]) => ({
+        status: false,
+        value: lang[key](value),
+    }));
+}
+function transformResult(complexity, errors) {
+    // If there are errors that don't match the complexity keys (for example, the initial state), return the default result
+    if (errors.find((error) => !getKeys(complexity).includes(error))) {
+        return getDefaultComplexityResult(complexity);
+    }
+    return getEntries(complexity).map(([key, value]) => ({
+        status: !errors.includes(key),
+        value: lang[key](value),
+    }));
+}
+function validatePasswordComplexity(complexity, password) {
+    try {
+        createSchema(complexity).parse(password);
+        return transformResult(complexity, []);
+    }
+    catch (error) {
+        if (error instanceof z.ZodError) {
+            return transformResult(complexity, error.issues.map((issue) => issue.message));
+        }
+        return getDefaultComplexityResult(complexity);
+    }
+}
+export default validatePasswordComplexity;

package/package.json

@@ -1,13 +1,14 @@
 {
   "name": "@sqrzro/auth",
   "type": "module",
-  "version": "4.0.0-alpha.1",
+  "version": "4.0.0-alpha.10",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "dependencies": {
-    "@sqrzro/server": "n16",
-    "zod": "^4.1.13",
-    "@sqrzro/ui": "^4.0.0-alpha.1"
+    "zod": "^4.3.6",
+    "@sqrzro/server": "^4.0.0-alpha.20",
+    "@sqrzro/ui": "^4.0.0-alpha.20",
+    "@sqrzro/utility": "^4.0.0-alpha.7"
   },
   "devDependencies": {
     "@types/react": "^19.2.7",

package/src/components/Auth/index.tsx

@@ -1,27 +1,30 @@
 import { Suspense } from 'react';
 
+import type { NextPageProps } from '@sqrzro/ui/utility';
 import { notFound } from 'next/navigation';
 
 import LoginForm from '../../forms/LoginForm';
+import type { AuthClassNameProps } from '../../interfaces';
+
 import Password from '../Password';
 
-interface AuthProps {
-    params: Promise<Record<string, string>>;
-    searchParams: Promise<Record<string, string>>;
+export interface AuthProps extends AuthClassNameProps, NextPageProps {
+    logo?: React.ReactElement;
 }
 
 async function AuthComponent({
+    classNames,
     params,
     searchParams,
-}: Readonly<AuthProps>): Promise<React.ReactElement> {
+}: AuthProps): Promise<React.ReactElement> {
     const awaitedParams = await params;
 
-    if (!Array.isArray(awaitedParams.auth) || awaitedParams.auth.length !== 1) {
+    if (!awaitedParams || !Array.isArray(awaitedParams.auth) || awaitedParams.auth.length !== 1) {
         return notFound();
     }
 
     if (awaitedParams.auth[0] === 'login') {
-        return <LoginForm />;
+        return <LoginForm classNames={classNames} />;
     }
 
     if (awaitedParams.auth[0] === 'mfa') {
@@ -29,19 +32,21 @@ async function AuthComponent({
     }
 
     if (awaitedParams.auth[0] === 'password') {
-        return <Password searchParams={searchParams} />;
+        return <Password classNames={classNames} searchParams={searchParams} />;
     }
 
     return notFound();
 }
 
-function Auth({ params, searchParams }: Readonly<AuthProps>): React.ReactElement {
+function Auth({ classNames, logo, ...props }: AuthProps): React.ReactElement {
     return (
-        <div>
-            AUTH PAGE HEADER
-            <Suspense>
-                <AuthComponent params={params} searchParams={searchParams} />
-            </Suspense>
+        <div className={classNames?.root}>
+            <div className={classNames?.logo}>{logo}</div>
+            <div className={classNames?.panel}>
+                <Suspense>
+                    <AuthComponent classNames={classNames} {...props} />
+                </Suspense>
+            </div>
         </div>
     );
 }

package/src/components/Password/index.tsx

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

package/src/components/PasswordComplexityFormField/index.tsx

@@ -0,0 +1,34 @@
+'use client';
+
+import { Fragment } from 'react';
+
+import { PasswordComplexity, PasswordFormField } from '@sqrzro/ui/forms';
+import type { PasswordFormFieldProps } from '@sqrzro/ui/forms';
+
+import getComplexity from '../../utility/get-complexity';
+import validatePasswordComplexity from '../../utility/validate-complexity';
+import type { PasswordComplexityObject } from '../../utility/interfaces';
+
+interface PasswordComplexityFormFieldProps extends PasswordFormFieldProps {
+    complexity?: PasswordComplexityObject;
+    onComplexity?: (isValid: boolean) => void;
+}
+
+function PasswordComplexityFormField({
+    complexity,
+    onComplexity,
+    value,
+    ...props
+}: PasswordComplexityFormFieldProps): React.ReactElement {
+    return (
+        <Fragment>
+            <PasswordFormField value={value} {...props} />
+            <PasswordComplexity
+                data={validatePasswordComplexity(getComplexity(complexity), value)}
+                onComplexity={onComplexity}
+            />
+        </Fragment>
+    );
+}
+
+export default PasswordComplexityFormField;

package/src/forms/LoginForm/index.tsx

@@ -5,21 +5,27 @@ import { Fragment } from 'react';
 import { Link } from '@sqrzro/ui/components';
 import { Form, FormSubmit, PasswordFormField, TextFormField, useForm } from '@sqrzro/ui/forms';
 
+import type { AuthClassNameProps } from '../../interfaces';
+
 import submit from './server';
 
-function LoginForm(): React.ReactElement | null {
+function LoginForm({ classNames }: AuthClassNameProps): React.ReactElement | null {
     const { fieldProps, formData, formProps } = useForm({
         onSubmit: submit,
     });
 
     return (
         <Fragment>
-            <Form {...formProps}>
+            <h1 className={classNames?.title}>Sign in to continue</h1>
+            <Form classNames={{ root: classNames?.form }} {...formProps}>
                 <TextFormField {...fieldProps('email')} hasAssistiveError />
                 <PasswordFormField {...fieldProps('password')} hasAssistiveError />
-                <FormSubmit>Sign In</FormSubmit>
-                <footer>
+                <div className={classNames?.actions}>
+                    <FormSubmit isFullWidth>Sign In</FormSubmit>
+                </div>
+                <footer className={classNames?.footer}>
                     <Link
+                        className={classNames?.link}
                         href={`/auth/password${formData.email ? `?email=${formData.email}` : ''}`}
                     >
                         Forgot Password?

package/src/forms/LoginForm/server.ts

@@ -2,6 +2,7 @@
 
 import { createSession, validateUser } from '@sqrzro/server/auth';
 import { FormResponse, submitForm } from '@sqrzro/server/forms';
+import { log } from '@sqrzro/server/utility';
 import { redirect } from 'next/navigation';
 import { z } from 'zod';
 
@@ -9,16 +10,23 @@ import type { LoginFormFields } from './interfaces';
 
 const schema = z
     .object({
-        email: z.email(),
-        password: z.string(),
+        email: z.email().nonempty(),
+        password: z.string().nonempty(),
         redirect: z.string().optional(),
     })
     .required({ email: true, password: true });
 
-async function fn(data: LoginFormFields): Promise<void> {
+async function fn(data: z.infer<typeof schema>): Promise<void> {
+    log('auth', 'LoginForm', `Login for email ${data.email}`);
+
     const userID = await validateUser(data.email, data.password);
+
+    log('auth', 'LoginForm', `Validated user ${userID} for email ${data.email}`);
+
     await createSession(userID);
 
+    log('auth', 'LoginForm', `Session created for user ${userID}`);
+
     redirect('/');
 }
 

package/src/forms/PasswordForm/index.tsx

@@ -1,22 +1,102 @@
 'use client';
 
-import { Fragment } from 'react';
+import { Fragment, useState } from 'react';
 
-import { Form, FormSubmit, TextFormField, useForm } from '@sqrzro/ui/forms';
+import { Link } from '@sqrzro/ui/components';
+import { Default, Form, FormSubmit, TextFormField, useForm } from '@sqrzro/ui/forms';
+
+import type { AuthClassNameProps } from '../../interfaces';
 
 import submit from './server';
+import type { PasswordFormFields } from './interfaces';
+
+interface PasswordFormProps extends AuthClassNameProps {
+    defaults?: Default<PasswordFormFields>;
+}
+
+function PasswordForm({ classNames, defaults }: PasswordFormProps): React.ReactElement | null {
+    const [sentCount, setSentCount] = useState(0);
 
-function PasswordForm(): React.ReactElement | null {
-    const { fieldProps, formProps } = useForm({
+    const { fieldProps, formData, formProps, setFormData, submitForm } = useForm({
+        defaults,
         onSubmit: submit,
+        onSuccess: () => {
+            setSentCount(sentCount + 1);
+        },
     });
 
+    function handleResend(event: React.MouseEvent<HTMLAnchorElement>): void {
+        event.preventDefault();
+        submitForm();
+    }
+
+    function handleReset(event: React.MouseEvent<HTMLAnchorElement>): void {
+        event.preventDefault();
+
+        setFormData('email', '');
+        setSentCount(0);
+    }
+
     return (
         <Fragment>
-            <Form {...formProps}>
-                <TextFormField {...fieldProps('email')} hasAssistiveError />
-                <FormSubmit isFullWidth>Send Email</FormSubmit>
-            </Form>
+            <div style={{ display: sentCount === 0 ? 'block' : 'none' }}>
+                <Form {...formProps}>
+                    <h1 className={classNames?.title}>Reset Your Password</h1>
+                    <p className="text-sm">
+                        Enter the email address associated with your account and we&#39;ll send you
+                        a link to reset your password.
+                    </p>
+                    <TextFormField {...fieldProps('email')} hasAssistiveError />
+                    <div className={classNames?.actions}>
+                        <FormSubmit isFullWidth>Send Email</FormSubmit>
+                    </div>
+                    <footer className={classNames?.footer}>
+                        <Link className={classNames?.link} href="/auth/login">
+                            Back
+                        </Link>
+                    </footer>
+                </Form>
+            </div>
+            <div style={{ display: sentCount === 0 ? 'none' : 'block' }}>
+                <div className={classNames?.form}>
+                    <h1 className={classNames?.title}>Check Your Email</h1>
+                    {sentCount === 1 ? (
+                        <Fragment>
+                            <p className="text-sm">
+                                If <strong>{formData.email}</strong> matches an email we have on
+                                file, then we&#39;ve sent you an email containing further
+                                instructions for resetting your password.
+                            </p>
+                            <p className="text-sm">
+                                If you haven&#39;t received an email in 5 minutes, check your spam,{' '}
+                                <Link className={classNames?.link} onClick={handleResend}>
+                                    resend
+                                </Link>
+                                , or{' '}
+                                <Link className={classNames?.link} onClick={handleReset}>
+                                    try a different email address
+                                </Link>
+                                .
+                            </p>
+                        </Fragment>
+                    ) : (
+                        <Fragment>
+                            <p className="text-sm">
+                                We&#39;ve resent password reset instructions to{' '}
+                                <strong>{formData.email}</strong>, if it is an email we have on
+                                file.
+                            </p>
+                            <p className="text-sm">
+                                Please check again. If you still haven&#39;t received an email,{' '}
+                                <Link className={classNames?.link} onClick={handleReset}>
+                                    try a different email address
+                                </Link>
+                                .
+                            </p>
+                        </Fragment>
+                    )}
+                </div>
+            </div>
         </Fragment>
     );
 }

package/src/forms/PasswordForm/server.ts

@@ -2,19 +2,25 @@
 
 import { createReset } from '@sqrzro/server/auth';
 import { FormResponse, submitForm } from '@sqrzro/server/forms';
+import { sendMail } from '@sqrzro/server/mail';
 import { z } from 'zod';
 
+import PasswordMail from '../../mail/PasswordMail';
+
 import type { PasswordFormFields } from './interfaces';
 
-const schema = z
-    .object({
-        email: z.email(),
-    })
-    .required({ email: true });
+const schema = z.object({
+    email: z.email().nonempty(),
+});
 
-async function fn(data: PasswordFormFields): Promise<void> {
+async function fn(data: z.infer<typeof schema>): Promise<void> {
     const token = await createReset('PASSWORD', data.email);
-    console.log(token);
+
+    if (!token) {
+        return;
+    }
+
+    await sendMail(data.email, PasswordMail, { token });
 }
 
 async function submit(formData: PasswordFormFields): FormResponse<void> {

package/src/forms/PasswordResetForm/index.tsx

@@ -1,16 +1,24 @@
 'use client';
 
-import { Fragment } from 'react';
+import { Fragment, useState } from 'react';
 
-import { Form, FormSubmit, PasswordFormField, useForm } from '@sqrzro/ui/forms';
+import { Form, FormSubmit, useForm } from '@sqrzro/ui/forms';
+
+import PasswordComplexityFormField from '../../components/PasswordComplexityFormField';
+import type { AuthClassNameProps } from '../../interfaces';
 
 import submit from './server';
 
-interface PasswordResetFormProps {
+interface PasswordResetFormProps extends AuthClassNameProps {
     token: string;
 }
 
-function PasswordResetForm({ token }: Readonly<PasswordResetFormProps>): React.ReactElement | null {
+function PasswordResetForm({
+    classNames,
+    token,
+}: Readonly<PasswordResetFormProps>): React.ReactElement | null {
+    const [isDisabled, setIsDisabled] = useState(true);
+
     const { fieldProps, formProps } = useForm({
         defaults: { token },
         onSubmit: submit,
@@ -19,8 +27,11 @@ function PasswordResetForm({ token }: Readonly<PasswordResetFormProps>): React.R
     return (
         <Fragment>
             <Form {...formProps}>
-                <PasswordFormField {...fieldProps('password')} />
-                <FormSubmit isFullWidth>Reset Password</FormSubmit>
+                <PasswordComplexityFormField
+                    {...fieldProps('password')}
+                    onComplexity={(isValid) => setIsDisabled(!isValid)}
+                />
+                <FormSubmit isDisabled={isDisabled}>Reset Password</FormSubmit>
             </Form>
         </Fragment>
     );

package/src/forms/PasswordResetForm/server.ts

@@ -5,17 +5,21 @@ import { FormResponse, submitForm } from '@sqrzro/server/forms';
 import { redirect } from 'next/navigation';
 import { z } from 'zod';
 
+import getComplexityRule from '../../rules/complexity';
+import getComplexity from '../../utility/get-complexity';
+
 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 });
+const schema = z.object({
+    password: getComplexityRule(getComplexity()).nonempty(),
+    token: z
+        .string()
+        .regex(/[A-Za-z0-9]{48}/u)
+        .nonempty(),
+});
 
-async function fn(data: PasswordResetFormFields): Promise<void> {
-    await updatePasswordWithToken(data.token, data.password);
+async function fn(data: z.infer<typeof schema>): Promise<void> {
+    await updatePasswordWithToken('PASSWORD', data.token, data.password);
     return redirect('/auth/login');
 }
 

package/src/get-auth-proxy.ts

@@ -0,0 +1,34 @@
+import type { AuthSession } from '@sqrzro/server/auth';
+import type { ProxyRedirect } from '@sqrzro/server/proxy';
+import type { NextRequest } from 'next/server';
+
+import type { AuthConfigObject } from './interfaces';
+
+async function handleAuthProxy(
+    session: AuthSession | null,
+    request: NextRequest,
+    config?: AuthConfigObject
+): Promise<ProxyRedirect | null> {
+    const pathname = request.nextUrl.pathname;
+
+    if (session) {
+        if (pathname.startsWith('/auth')) {
+            return { redirect: '/' };
+        }
+        return null;
+    }
+
+    if (pathname.startsWith('/auth') || config?.allow?.includes(pathname)) {
+        return null;
+    }
+
+    return { redirect: '/auth/login' };
+}
+
+function getAuthProxy(
+    config?: AuthConfigObject
+): (session: AuthSession | null, request: NextRequest) => Promise<ProxyRedirect | null> {
+    return (session, request) => handleAuthProxy(session, request, config);
+}
+
+export default getAuthProxy;

package/src/index.ts

@@ -1,4 +1,8 @@
+export type { AuthClassNames, AuthConfigObject } from './interfaces';
+
+export type { AuthProps } from './components/Auth';
 export { default as Auth } from './components/Auth';
+
 export { default as LogoutButton } from './components/LogoutButton';
 
-export { default as handleProxy } from './handle-proxy';
+export { default as getAuthProxy } from './get-auth-proxy';

package/src/interfaces.ts

@@ -1,3 +1,7 @@
+export interface AuthConfigObject {
+    allow?: string[];
+}
+
 export interface AuthClassNames {
     actions: string;
     footer: string;
@@ -7,4 +11,8 @@ export interface AuthClassNames {
     root: string;
     panel: string;
     title: string;
-}
+}
+
+export interface AuthClassNameProps {
+    classNames?: Partial<AuthClassNames>;
+}

package/src/mail/PasswordMail.tsx

@@ -0,0 +1,16 @@
+import { createMail } from '@sqrzro/server/mail';
+
+interface PasswordMailProps {
+    readonly token: string;
+}
+
+function PasswordMail({ token }: PasswordMailProps): React.ReactElement {
+    return (
+        <div>
+            PasswordMail
+            <a href={`http://localhost:8000/auth/password?token=${token}`}>Reset Password</a>
+        </div>
+    );
+}
+
+export default createMail('PASSWORD', PasswordMail);

package/src/rules/complexity.ts

@@ -0,0 +1,14 @@
+import { z } from 'zod';
+
+import createComplexitySchema from '../utility/create-complexity-schema';
+import type { PasswordComplexityObject } from '../utility/interfaces';
+
+function getComplexityRule(complexity: PasswordComplexityObject) {
+    const schema = createComplexitySchema(complexity);
+
+    return z.string().refine((value) => schema.safeParse(value).success, {
+        message: 'Password does not meet complexity requirements',
+    });
+}
+
+export default getComplexityRule;

package/src/utility/create-complexity-schema.ts

@@ -0,0 +1,44 @@
+import { z } from 'zod';
+
+import { PasswordComplexityKey } from './interfaces';
+import type { PasswordComplexityObject } from './interfaces';
+
+function createComplexitySchema(complexity: PasswordComplexityObject): z.ZodString {
+    let result = z.string();
+
+    if (complexity.LENGTH) {
+        result = result.min(complexity.LENGTH, PasswordComplexityKey.LENGTH);
+    }
+
+    if (complexity.UPPERCASE) {
+        result = result.regex(
+            new RegExp(`(?:.*[A-Z]){${complexity.UPPERCASE}}`),
+            PasswordComplexityKey.UPPERCASE
+        );
+    }
+
+    if (complexity.LOWERCASE) {
+        result = result.regex(
+            new RegExp(`(?:.*[a-z]){${complexity.LOWERCASE}}`),
+            PasswordComplexityKey.LOWERCASE
+        );
+    }
+
+    if (complexity.NUMBER) {
+        result = result.regex(
+            new RegExp(`(?:.*\\d){${complexity.NUMBER}}`),
+            PasswordComplexityKey.NUMBER
+        );
+    }
+
+    if (complexity.SPECIAL) {
+        result = result.regex(
+            new RegExp(`(?:.*[@$!%*?&]){${complexity.SPECIAL}}`),
+            PasswordComplexityKey.SPECIAL
+        );
+    }
+
+    return result;
+}
+
+export default createComplexitySchema;