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

package/src/index.ts

@@ -1,10 +1,4 @@
 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/src/interfaces.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/tsconfig.json

@@ -4,15 +4,16 @@
         "declaration": true,
         "esModuleInterop": true,
         "importHelpers": true,
+        "lib": ["ESNext"],
         "jsx": "react-jsx",
-        "lib": ["DOM", "ESNext"],
         "module": "ESNext",
-        "moduleResolution": "node",
+        "moduleResolution": "bundler",
         "outDir": "dist",
         "resolveJsonModule": true,
         "skipLibCheck": true,
-        "target": "ESNext"
+        "strict": true,
+        "target": "esnext"
     },
-    "include": ["next-env.d.ts", "src/**/*"],
-    "exclude": ["node_modules"]
+    "include": ["**/*.ts"],
+    "exclude": ["dist", "./*.d.ts", "node_modules"]
 }

package/src/components/LoginForm/index.tsx

@@ -1,44 +0,0 @@
-'use client';
-
-import { Fragment } from 'react';
-
-import { Form, FormSubmit, Link, PasswordFormField, TextFormField, tw } from '@sqrzro/components';
-
-import useLoginForm from '../../hooks/useLoginForm';
-import { submitLoginForm } from '../../server';
-
-import type { AuthClassNames } from '../Auth';
-
-export interface LoginFormProps {
-    classNames?: Partial<AuthClassNames>;
-    searchParams: { r?: string };
-}
-
-function LoginForm({ classNames, searchParams }: Readonly<LoginFormProps>): React.ReactElement {
-    const { fieldProps, formData, formProps, isLoading } = useLoginForm(submitLoginForm, {
-        redirect: searchParams.r,
-    });
-
-    return (
-        <Fragment>
-            <h1 className={tw('text-center', classNames?.title)}>Sign in to continue</h1>
-            <Form {...formProps} classNames={{ root: classNames?.form }}>
-                <TextFormField {...fieldProps('email')} hasAssistiveError />
-                <PasswordFormField {...fieldProps('password')} hasAssistiveError />
-                <div className={tw(classNames?.actions)}>
-                    <FormSubmit isLoading={isLoading}>Sign In</FormSubmit>
-                </div>
-                <footer className={tw('text-center', classNames?.footer)}>
-                    <Link
-                        className={classNames?.link}
-                        href={`/auth/password${formData.email ? `?email=${formData.email}` : ''}`}
-                    >
-                        Forgot Password?
-                    </Link>
-                </footer>
-            </Form>
-        </Fragment>
-    );
-}
-
-export default LoginForm;

package/src/components/MFAForm/index.tsx

@@ -1,47 +0,0 @@
-'use client';
-
-import { CodeFormField, Form, FormSubmit } from '@sqrzro/components';
-
-import useMFAForm from '../../hooks/useMFAForm';
-import { submitMFAForm } from '../../server';
-
-import type { AuthClassNames } from '../Auth';
-import { useEffect, useState } from 'react';
-
-export interface MFAFormProps {
-    classNames?: Partial<AuthClassNames>;
-    searchParams: { r?: string };
-}
-
-function MFAForm({ classNames, searchParams }: Readonly<MFAFormProps>): React.ReactElement {
-    const [delayedKey, setDelayedKey] = useState(0);
-
-    const { formProps, fieldProps, isLoading, key, submitForm } = useMFAForm(submitMFAForm, {
-        redirect: searchParams.r,
-    });
-
-    useEffect(() => {
-        if (!isLoading) {
-            setDelayedKey(key);
-        }
-    }, [isLoading, key]);
-
-    return (
-        <Form {...formProps} classNames={{ root: classNames?.form }}>
-            <CodeFormField
-                key={delayedKey}
-                {...fieldProps('token')}
-                isDisabled={isLoading}
-                onFinalChange={submitForm}
-                hasAssistiveError
-                hasAssistiveLabel
-                isAutoFocus
-            />
-            <div className="sr-only">
-                <FormSubmit>Verify</FormSubmit>
-            </div>
-        </Form>
-    );
-}
-
-export default MFAForm;

package/src/components/MFAPage/index.tsx

@@ -1,54 +0,0 @@
-import { Fragment } from 'react';
-
-import { tw } from '@sqrzro/components';
-import { notFound } from 'next/navigation';
-
-import type { AuthClassNames } from '../Auth';
-import MFAForm from '../MFAForm';
-import MFASetup from '../MFASetup';
-
-import { checkMFAEnabled, checkUserHasMFA, getSessionUser } from '../../server';
-import LogoutButton from '../LogoutButton';
-
-export interface MFAPageProps {
-    classNames?: Partial<AuthClassNames>;
-    searchParams: { r?: string };
-}
-
-async function MFAPage({
-    classNames,
-    searchParams,
-}: Readonly<MFAPageProps>): Promise<React.ReactElement> {
-    if (!(await checkMFAEnabled())) {
-        return notFound();
-    }
-
-    const user = await getSessionUser();
-
-    if (!user) {
-        return <div>Error</div>;
-    }
-
-    const userHasMFA = await checkUserHasMFA(user);
-
-    if (!userHasMFA) {
-        return <MFASetup classNames={classNames} searchParams={searchParams} />;
-    }
-
-    return (
-        <Fragment>
-            <h1 className={tw('text-center', classNames?.title)}>Multi-Factor Authentication</h1>
-            <p className="text-center">
-                To confirm your identity, enter the 6-digit code listed in your authentication app:
-            </p>
-            <MFAForm classNames={classNames} searchParams={searchParams} />
-            <footer className={tw('text-center', classNames?.footer)}>
-                <LogoutButton>
-                    <span className={classNames?.link}>Back</span>
-                </LogoutButton>
-            </footer>
-        </Fragment>
-    );
-}
-
-export default MFAPage;

package/src/components/MFASetup/index.tsx

@@ -1,43 +0,0 @@
-import { Fragment } from 'react';
-
-import { tw } from '@sqrzro/components';
-
-import { generateMFA, getSessionUser } from '../../server';
-
-import type { AuthClassNames } from '../Auth';
-import MFASetupForm from '../MFASetupForm';
-
-export interface MFASetupProps {
-    classNames?: Partial<AuthClassNames>;
-    searchParams: { r?: string };
-}
-
-async function MFASetup({
-    classNames,
-    searchParams,
-}: Readonly<MFASetupProps>): Promise<React.ReactElement> {
-    if (!process.env.APP_NAME) {
-        throw new Error('MFA secret could not be generated because APP_NAME is not defined');
-    }
-
-    const user = await getSessionUser();
-
-    if (!user) {
-        return <div>Error</div>;
-    }
-
-    const url = await generateMFA(process.env.APP_NAME, user.email);
-
-    if (!url) {
-        return <div>Error</div>;
-    }
-
-    return (
-        <Fragment>
-            <h1 className={tw('', classNames?.title)}>Multi-Factor Authentication</h1>
-            <MFASetupForm classNames={classNames} searchParams={searchParams} url={url} />
-        </Fragment>
-    );
-}
-
-export default MFASetup;

package/src/components/MFASetupForm/index.tsx

@@ -1,78 +0,0 @@
-'use client';
-
-import { Fragment, useState } from 'react';
-
-import { Button, Link, tw } from '@sqrzro/components';
-
-import type { AuthClassNames } from '../Auth';
-import LogoutButton from '../LogoutButton';
-import MFAForm from '../MFAForm';
-
-export interface MFASetupFormProps {
-    classNames?: Partial<AuthClassNames>;
-    searchParams: { r?: string };
-    url: string;
-}
-
-function MFASetupForm({
-    classNames,
-    searchParams,
-    url,
-}: Readonly<MFASetupFormProps>): React.ReactElement | null {
-    const [step, setStep] = useState(1);
-
-    function nextStep(): void {
-        setStep(2);
-    }
-
-    function previousStep(event: React.MouseEvent): void {
-        setStep(1);
-    }
-
-    if (step === 1) {
-        return (
-            <div className={tw(classNames?.form)}>
-                <p>
-                    You&#39;ll need to setup an additional authentication step before you can
-                    continue.
-                </p>
-                <figure className="flex justify-center rounded border p-4">
-                    <img alt="qrcode" src={url} width="147" />
-                </figure>
-                <p>
-                    <strong>Step 1:</strong> Scan the QR code above in an authentication app like
-                    Google Authenticator or Authy.
-                </p>
-                <Button onClick={nextStep} variant="primary" isFullWidth>
-                    Continue
-                </Button>
-                <div className="text-center">
-                    <LogoutButton>
-                        <span className={classNames?.link}>Back</span>
-                    </LogoutButton>
-                </div>
-            </div>
-        );
-    }
-
-    if (step === 2) {
-        return (
-            <div className={tw(classNames?.form)}>
-                <p>
-                    <strong>Step 2:</strong> To confirm your identity, enter the 6-digit code listed
-                    in your authentication app:
-                </p>
-                <MFAForm classNames={classNames} searchParams={searchParams} />
-                <div className="text-center">
-                    <button className={classNames?.link} onClick={previousStep} type="button">
-                        Scan QR code again
-                    </button>
-                </div>
-            </div>
-        );
-    }
-
-    return null;
-}
-
-export default MFASetupForm;

package/src/components/PasswordForm/index.tsx

@@ -1,113 +0,0 @@
-'use client';
-
-import { Fragment, useState } from 'react';
-
-import { Form, FormSubmit, Link, TextFormField, tw } from '@sqrzro/components';
-import { useForm } from '@sqrzro/hooks';
-
-import { submitPasswordForm } from '../../server';
-
-import type { AuthClassNames } from '../Auth';
-
-interface PasswordFormFields {
-    email: string;
-}
-
-interface PasswordFormProps {
-    classNames?: Partial<AuthClassNames>;
-    email?: string;
-}
-
-function PasswordForm({ classNames, email }: Readonly<PasswordFormProps>): React.ReactElement {
-    const [sentCount, setSentCount] = useState(0);
-
-    const { fieldProps, formData, formProps, isLoading, setFormData, submitForm } = useForm<
-        PasswordFormFields,
-        boolean
-    >({
-        defaults: { email },
-        onSubmit: submitPasswordForm,
-        onSuccess: () => {
-            setSentCount(sentCount + 1);
-        },
-        toasts: { success: false },
-    });
-
-    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>
-            <div className={tw(sentCount === 0 ? 'block' : 'hidden')}>
-                <Form {...formProps} classNames={{ root: classNames?.form }}>
-                    <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')} type="email" hasAssistiveLabel />
-                    <div className={tw(classNames?.actions)}>
-                        <FormSubmit isLoading={isLoading}>Send Email</FormSubmit>
-                    </div>
-                    <footer className={tw('text-center', classNames?.footer)}>
-                        <Link className={classNames?.link} href="/auth/login">
-                            Back
-                        </Link>
-                    </footer>
-                </Form>
-            </div>
-
-            <div className={tw(sentCount > 0 ? 'flex' : 'hidden')}>
-                <div className={tw(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>
-    );
-}
-
-export default PasswordForm;

package/src/components/PasswordPage/index.tsx

@@ -1,20 +0,0 @@
-import type { AuthClassNames } from '../Auth';
-import PasswordForm from '../PasswordForm';
-import PasswordResetForm from '../PasswordResetForm';
-
-interface PasswordPageProps {
-    classNames?: Partial<AuthClassNames>;
-    searchParams: { email?: string; token?: string };
-}
-
-function PasswordPage({
-    classNames,
-    searchParams,
-}: Readonly<PasswordPageProps>): React.ReactElement {
-    if (searchParams.token) {
-        return <PasswordResetForm classNames={classNames} token={searchParams.token} />;
-    }
-    return <PasswordForm classNames={classNames} email={searchParams.email} />;
-}
-
-export default PasswordPage;

package/src/components/PasswordResetForm/index.tsx

@@ -1,45 +0,0 @@
-'use client';
-
-import { Form, FormSubmit, PasswordFormField } from '@sqrzro/components';
-import { useForm } from '@sqrzro/hooks';
-import { useRouter } from 'next/navigation';
-
-import { submitPasswordResetForm } from '../../server';
-
-import type { AuthClassNames } from '../Auth';
-
-interface PasswordResetFormProps {
-    classNames?: Partial<AuthClassNames>;
-    token: string;
-}
-
-function PasswordResetForm({
-    classNames,
-    token,
-}: Readonly<PasswordResetFormProps>): React.ReactElement {
-    const router = useRouter();
-
-    const { fieldProps, formProps, isLoading } = useForm({
-        defaults: { token },
-        hiddenFields: ['token'],
-        onSubmit: submitPasswordResetForm,
-        onSuccess: (response) => {
-            router.push(response || '/');
-        },
-        toasts: { success: false },
-    });
-
-    return (
-        <Form {...formProps} classNames={{ root: classNames?.form }}>
-            <h1 className={classNames?.title}>Reset Your Password</h1>
-            <div className="relative">
-                <PasswordFormField {...fieldProps('password', 'New Password')} />
-            </div>
-            <div className="mt-8">
-                <FormSubmit isLoading={isLoading}>Reset Password</FormSubmit>
-            </div>
-        </Form>
-    );
-}
-
-export default PasswordResetForm;

package/src/hooks/useLoginForm.ts

@@ -1,33 +0,0 @@
-'use client';
-
-import { useForm } from '@sqrzro/hooks';
-import type { UseFormReturn } from '@sqrzro/hooks';
-
-import type { Errorable } from '@sqrzro/interfaces';
-
-interface NextRedirect {
-    NEXT_REDIRECT: string;
-}
-
-export interface LoginFormFields {
-    email: string;
-    password: string;
-    redirect: string;
-}
-
-interface UseLoginFormOptions {
-    redirect?: string;
-}
-
-function useLoginForm(
-    onSubmit: (formData: LoginFormFields) => Promise<Errorable<NextRedirect>>,
-    { redirect }: UseLoginFormOptions = {}
-): UseFormReturn<LoginFormFields> {
-    return useForm({
-        defaults: { redirect },
-        onSubmit,
-        toasts: { validation: 'Incorrect email or password', success: false },
-    });
-}
-
-export default useLoginForm;

package/src/hooks/useMFAForm.ts

@@ -1,56 +0,0 @@
-'use client';
-
-import { useEffect, useState } from 'react';
-
-import { useForm } from '@sqrzro/hooks';
-import type { UseFormArgs, UseFormReturn } from '@sqrzro/hooks';
-import { Errorable } from '@sqrzro/interfaces';
-
-interface NextRedirect {
-    NEXT_REDIRECT: string;
-}
-
-interface MFAFormFields {
-    redirect: string;
-    token: string;
-}
-
-export interface UseMFAFormArgs {
-    onSubmit: UseFormArgs<MFAFormFields, void>['onSubmit'];
-}
-
-export interface UseMFAFormReturn extends UseFormReturn<MFAFormFields> {
-    key: number;
-}
-
-interface UseMFAFormOptions {
-    redirect?: string;
-}
-
-function useLoginForm(
-    onSubmit: (formData: MFAFormFields) => Promise<Errorable<NextRedirect>>,
-    { redirect }: UseMFAFormOptions = {}
-): UseMFAFormReturn {
-    const [errorCount, setErrorCount] = useState(0);
-
-    const form = useForm({
-        defaults: { redirect },
-        onSubmit,
-        onValidationError: () => {
-            setErrorCount((count) => count + 1);
-        },
-        toasts: {
-            success: false,
-            validation:
-                "There seems to be an issue with the code you've entered. Please try again.",
-        },
-    });
-
-    useEffect(() => {
-        form.resetForm();
-    }, [errorCount]);
-
-    return { ...form, key: errorCount };
-}
-
-export default useLoginForm;

package/src/server.ts

@@ -1,100 +0,0 @@
-'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 type { LoginFormFields, UserObject } from '@sqrzro/server/auth';
-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>;
-    password?: (email: string, token: string) => Promise<boolean>;
-}
-
-const authEvents: AuthEventObject = {};
-
-export async function registerAuthEvents(events: AuthEventObject): Promise<void> {
-    if (events.login) {
-        authEvents.login = events.login;
-    }
-    if (events.password) {
-        authEvents.password = events.password;
-    }
-    return Promise.resolve();
-}
-
-/*
- * Functions re-exported from @sqrzro/server/auth
- *
- * NextJS may complain about these functions not being async if they are exported directly from the
- * @sqrzro/server/auth module, so we re-export them here to be on the safe side.
- */
-
-export async function checkUserHasMFA(user: UserObject): Promise<boolean> {
-    return serverCheckUserHasMFA(user);
-}
-
-export async function generateMFA(name: string, email?: string): Promise<string | null> {
-    return serverGenerateMFA(name, email);
-}
-
-export async function getSessionUser(): Promise<UserObject | null> {
-    return serverGetSessionUser();
-}
-
-// This function is synchronous, so we need to wrap it in a promise so it can be exported properly.
-export async function checkMFAEnabled(): Promise<boolean> {
-    return Promise.resolve(syncCheckMFAEnabled());
-}
-
-interface MFAFormFields {
-    token: string;
-}
-
-interface PasswordFormFields {
-    email: string;
-}
-
-interface PasswordResetFormFields {
-    password: string;
-    token: string;
-}
-
-export async function submitLoginForm(formData: LoginFormFields): Promise<Errorable<NextRedirect>> {
-    return handleLoginForm(formData, authEvents.login);
-}
-
-export async function submitMFAForm(formData: MFAFormFields): Promise<Errorable<NextRedirect>> {
-    return handleMFAForm(formData);
-}
-
-async function sendPasswordResetMail(email: string, token: string): Promise<boolean> {
-    return authEvents.password?.(email, token) || false;
-}
-
-export async function submitPasswordForm(
-    formData: PasswordFormFields
-): Promise<Errorable<boolean>> {
-    return handlePasswordForm(formData, sendPasswordResetMail);
-}
-
-export async function submitPasswordResetForm(
-    formData: PasswordResetFormFields
-): Promise<Errorable<string>> {
-    return handlePasswordResetWithTokenForm(formData);
-}
-
-export async function logout(): Promise<void> {
-    return handleLogout();
-}