@sqrzro/auth 4.0.0-alpha.7 → 4.0.0-alpha.9

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.7",
+  "version": "4.0.0-alpha.9",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "dependencies": {
     "zod": "^4.3.6",
-    "@sqrzro/server": "^4.0.0-alpha.16",
-    "@sqrzro/ui": "^4.0.0-alpha.13"
+    "@sqrzro/server": "^4.0.0-alpha.18",
+    "@sqrzro/utility": "^4.0.0-alpha.3",
+    "@sqrzro/ui": "^4.0.0-alpha.14"
   },
   "devDependencies": {
     "@types/react": "^19.2.7",

package/src/components/Auth/index.tsx

@@ -8,7 +8,7 @@ import type { AuthClassNameProps } from '../../interfaces';
 
 import Password from '../Password';
 
-interface AuthPageProps extends AuthClassNameProps, NextPageProps {
+export interface AuthProps extends AuthClassNameProps, NextPageProps {
     logo?: React.ReactElement;
 }
 
@@ -16,7 +16,7 @@ async function AuthComponent({
     classNames,
     params,
     searchParams,
-}: AuthPageProps): Promise<React.ReactElement> {
+}: AuthProps): Promise<React.ReactElement> {
     const awaitedParams = await params;
 
     if (!awaitedParams || !Array.isArray(awaitedParams.auth) || awaitedParams.auth.length !== 1) {
@@ -38,7 +38,7 @@ async function AuthComponent({
     return notFound();
 }
 
-function Auth({ classNames, logo, ...props }: AuthPageProps): React.ReactElement {
+function Auth({ classNames, logo, ...props }: AuthProps): React.ReactElement {
     return (
         <div className={classNames?.root}>
             <div className={classNames?.logo}>{logo}</div>

package/src/components/Password/index.tsx

@@ -1,12 +1,11 @@
 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 extends AuthClassNameProps {
-    searchParams?: Promise<Record<string, string>> | null;
-}
+interface PasswordProps extends AuthClassNameProps, NextPageProps {}
 
 async function Password({
     classNames,
@@ -24,7 +23,9 @@ async function Password({
         }
     }
 
-    return <PasswordForm classNames={classNames} />;
+    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/server.ts

@@ -10,13 +10,13 @@ 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);

package/src/forms/PasswordForm/index.tsx

@@ -1,24 +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';
 
-function PasswordForm({ classNames }: AuthClassNameProps): React.ReactElement | null {
-    const { fieldProps, formProps } = useForm({
+interface PasswordFormProps extends AuthClassNameProps {
+    defaults?: Default<PasswordFormFields>;
+}
+
+function PasswordForm({ classNames, defaults }: PasswordFormProps): React.ReactElement | null {
+    const [sentCount, setSentCount] = useState(0);
+
+    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,9 +1,10 @@
 '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';
@@ -16,6 +17,8 @@ function PasswordResetForm({
     classNames,
     token,
 }: Readonly<PasswordResetFormProps>): React.ReactElement | null {
+    const [isDisabled, setIsDisabled] = useState(true);
+
     const { fieldProps, formProps } = useForm({
         defaults: { token },
         onSubmit: submit,
@@ -24,8 +27,11 @@ function PasswordResetForm({
     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;

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;

package/src/utility/get-complexity.ts

@@ -0,0 +1,14 @@
+import type { PasswordComplexityObject } from './interfaces';
+
+const DEFAULT_COMPLEXITY: PasswordComplexityObject = {
+    LENGTH: 8,
+    LOWERCASE: 1,
+    UPPERCASE: 1,
+    NUMBER: 1,
+};
+
+function getComplexity(complexity?: PasswordComplexityObject): PasswordComplexityObject {
+    return complexity ?? DEFAULT_COMPLEXITY;
+}
+
+export default getComplexity;

package/src/utility/interfaces.ts

@@ -0,0 +1,11 @@
+export enum PasswordComplexityKey {
+    LENGTH = 'LENGTH',
+    UPPERCASE = 'UPPERCASE',
+    LOWERCASE = 'LOWERCASE',
+    NUMBER = 'NUMBER',
+    SPECIAL = 'SPECIAL',
+}
+
+export type PasswordComplexityObject = Partial<Record<PasswordComplexityKey, number>>;
+
+export type PasswordComplexityResult = { status: boolean; value: string }[];

package/src/utility/lang.ts

@@ -0,0 +1,14 @@
+import { formatPlural } from '@sqrzro/utility';
+
+import { PasswordComplexityKey } from './interfaces';
+
+export const complexities: Record<PasswordComplexityKey, (value?: number) => string> = {
+    [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)}`,
+};

package/src/utility/validate-complexity.ts

@@ -0,0 +1,53 @@
+import { getEntries, getKeys } from '@sqrzro/utility';
+import { z } from 'zod';
+
+import createComplexitySchema from './create-complexity-schema';
+import { complexities } from './lang';
+
+import { PasswordComplexityKey } from './interfaces';
+import type { PasswordComplexityObject, PasswordComplexityResult } from './interfaces';
+
+function getDefaultComplexityResult(
+    complexity: PasswordComplexityObject
+): PasswordComplexityResult {
+    return getEntries(complexity).map(([key, value]) => ({
+        status: false,
+        value: complexities[key](value),
+    }));
+}
+
+function transformResult(
+    complexity: PasswordComplexityObject,
+    errors: PasswordComplexityKey[]
+): PasswordComplexityResult {
+    // 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: complexities[key](value),
+    }));
+}
+
+function validateComplexity(
+    complexity: PasswordComplexityObject,
+    password?: string
+): PasswordComplexityResult {
+    try {
+        createComplexitySchema(complexity).parse(password);
+        return transformResult(complexity, []);
+    } catch (error) {
+        if (error instanceof z.ZodError) {
+            return transformResult(
+                complexity,
+                error.issues.map((issue) => issue.message as PasswordComplexityKey)
+            );
+        }
+        return getDefaultComplexityResult(complexity);
+    }
+}
+
+export default validateComplexity;

package/src/handle-proxy.ts

@@ -1,23 +0,0 @@
-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;