@sqrzro/auth 2.0.0-bz.0

package/.turbo/turbo-build.log

@@ -0,0 +1,4 @@
+
+> @sqrzro/auth@2.0.0-bz.0 build /Users/richard/Sites/@sqrzro/sqrzro/packages/auth
+> tsc -p tsconfig.json
+

package/LICENSE

@@ -0,0 +1,5 @@
+Copyright 2024 Richard Carter
+
+Permission to use, copy, modify, and/or distribute this software for any purpose with or without fee is hereby granted, provided that the above copyright notice and this permission notice appear in all copies.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.

package/dist/components/Auth/index.d.ts

@@ -0,0 +1,33 @@
+/// <reference types="react" />
+import type { ClassNameProps } from '@sqrzro/components';
+import type { ScopeObject } from '../../server';
+export interface AuthClassNames {
+    actions: string;
+    footer: string;
+    link: string;
+    logo: string;
+    root: string;
+    panel: string;
+    title: string;
+}
+export interface AuthProps extends ClassNameProps<AuthClassNames> {
+    logo?: React.ReactElement;
+    onLogin?: () => Promise<void>;
+    params: {
+        auth: string[];
+    };
+    scopes?: Partial<ScopeObject>;
+    searchParams: {
+        email?: string;
+        r?: string;
+        token?: string;
+    };
+}
+/**
+ *
+ * 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.
+ */
+declare function Auth({ classNames, logo, onLogin, params: { auth }, searchParams, }: Readonly<AuthProps>): Promise<React.ReactElement>;
+export default Auth;

package/dist/components/Auth/index.js

@@ -0,0 +1,46 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { tw } from '@sqrzro/components';
+import { notFound } from 'next/navigation';
+import LoginForm from '../LoginForm';
+import MFAPage from '../MFAPage';
+import PasswordPage from '../PasswordPage';
+import { registerAuthEvent } from '../../server';
+/**
+ * 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, props) {
+    switch (route) {
+        case 'mfa':
+            return _jsx(MFAPage, { ...props });
+        case 'password':
+            return _jsx(PasswordPage, { ...props });
+        default:
+            return _jsx(LoginForm, { ...props });
+    }
+}
+/**
+ *
+ * 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, params: { auth }, searchParams, }) {
+    if (auth.length > 1) {
+        return notFound();
+    }
+    await registerAuthEvent(onLogin);
+    return (_jsxs("div", { className: tw('grid h-screen grid-rows-[1fr_auto_auto_2fr] justify-center', classNames?.root), children: [_jsx("div", { className: tw('row-start-2', classNames?.logo), children: logo }), _jsx("div", { className: tw('row-start-3 w-screen max-w-sm', classNames?.panel), children: getPage(auth[0], {
+                    classNames,
+                    searchParams,
+                }) })] }));
+}
+export default Auth;

package/dist/components/LoginForm/index.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import type { AuthClassNames } from '../Auth';
+export interface LoginFormProps {
+    classNames?: Partial<AuthClassNames>;
+    searchParams: {
+        r?: string;
+    };
+}
+declare function LoginForm({ classNames, searchParams }: Readonly<LoginFormProps>): React.ReactElement;
+export default LoginForm;

package/dist/components/LoginForm/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, Link, PasswordFormField, TextFormField, tw } from '@sqrzro/components';
+import { useLoginForm } from '@sqrzro/hooks';
+import { submitLoginForm } from '../../server';
+function LoginForm({ classNames, searchParams }) {
+    const { fieldProps, formData, formProps } = useLoginForm(submitLoginForm, {
+        redirect: searchParams.r,
+    });
+    return (_jsxs(Fragment, { children: [_jsx("h1", { className: tw('text-center', classNames?.title), children: "Sign in to continue" }), _jsxs(Form, { ...formProps, children: [_jsx(TextFormField, { ...fieldProps('email'), hasAssistiveError: true }), _jsx(PasswordFormField, { ...fieldProps('password'), hasAssistiveError: true }), _jsx("div", { className: tw('', classNames?.actions), children: _jsx(FormSubmit, { children: "Sign In" }) }), _jsx("footer", { className: tw('text-center', classNames?.footer), children: _jsx(Link, { className: classNames?.link, href: `/auth/password${formData.email ? `?email=${formData.email}` : ''}`, children: "Forgot Password?" }) })] })] }));
+}
+export default LoginForm;

package/dist/components/LogoutButton/index.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+export interface LogoutButtonProps {
+    children?: React.ReactElement | string;
+    redirectTo?: string;
+}
+declare function LogoutButton({ children, redirectTo, }: Readonly<LogoutButtonProps>): React.ReactElement;
+export default LogoutButton;

package/dist/components/LogoutButton/index.js

@@ -0,0 +1,13 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useRouter } from 'next/navigation';
+import { logout } from '../../server';
+function LogoutButton({ children = 'Log out', redirectTo, }) {
+    const router = useRouter();
+    async function handleLogout() {
+        await logout();
+        router.push(redirectTo || '/');
+    }
+    return (_jsx("form", { action: handleLogout, className: "contents", children: _jsx("button", { type: "submit", children: children }) }));
+}
+export default LogoutButton;

package/dist/components/MFAForm/index.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import type { AuthClassNames } from '../Auth';
+export interface MFAFormProps {
+    classNames?: Partial<AuthClassNames>;
+    hasAssistiveSubmit?: boolean;
+}
+declare function MFAForm({ hasAssistiveSubmit }: Readonly<MFAFormProps>): React.ReactElement;
+export default MFAForm;

package/dist/components/MFAForm/index.js

@@ -0,0 +1,29 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { CodeFormField, Form, FormSubmit, tw } from '@sqrzro/components';
+import { useForm } from '@sqrzro/hooks';
+import { useRouter } from 'next/navigation';
+import { submitMFAForm } from '../../server';
+function MFAForm({ hasAssistiveSubmit }) {
+    const router = useRouter();
+    const [errorCount, setErrorCount] = useState(0);
+    const { fieldProps, formProps, resetForm, submitForm } = useForm({
+        onSubmit: submitMFAForm,
+        onSuccess: () => {
+            router.push('/');
+        },
+        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(() => {
+        resetForm();
+    }, [errorCount]);
+    return (_jsxs(Form, { ...formProps, children: [_jsx(CodeFormField, { ...fieldProps('token'), onFinalChange: submitForm, hasAssistiveLabel: true, isAutoFocus: true }, errorCount), _jsx("div", { className: tw(hasAssistiveSubmit ? 'sr-only' : ''), children: _jsx(FormSubmit, { children: "Verify" }) })] }));
+}
+export default MFAForm;

package/dist/components/MFAPage/index.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import type { AuthClassNames } from '../Auth';
+export interface MFAPageProps {
+    classNames?: Partial<AuthClassNames>;
+}
+declare function MFAPage({ classNames }: Readonly<MFAPageProps>): Promise<React.ReactElement>;
+export default MFAPage;

package/dist/components/MFAPage/index.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { tw } from '@sqrzro/components';
+import { notFound } from 'next/navigation';
+import MFAForm from '../MFAForm';
+import MFASetup from '../MFASetup';
+import { checkMFAEnabled, checkUserHasMFA, getSessionUser } from '../../server';
+async function MFAPage({ classNames }) {
+    if (!(await checkMFAEnabled())) {
+        return notFound();
+    }
+    const user = await getSessionUser();
+    if (!user) {
+        return _jsx("div", { children: "Error" });
+    }
+    const userHasMFA = await checkUserHasMFA(user);
+    if (!userHasMFA) {
+        return _jsx(MFASetup, { classNames: classNames });
+    }
+    return (_jsxs("div", { children: [_jsx("h1", { className: tw('text-center', classNames?.title), children: "Multi-Factor Authentication" }), _jsx("p", { className: "mb-6 text-center", children: "Enter the 6-digit code listed in your authentication app:" }), _jsx(MFAForm, { classNames: classNames, hasAssistiveSubmit: true })] }));
+}
+export default MFAPage;

package/dist/components/MFASetup/index.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import type { AuthClassNames } from '../Auth';
+export interface MFASetupProps {
+    classNames?: Partial<AuthClassNames>;
+}
+declare function MFASetup({ classNames }: Readonly<MFASetupProps>): Promise<React.ReactElement>;
+export default MFASetup;

package/dist/components/MFASetup/index.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment } from 'react';
+import { tw } from '@sqrzro/components';
+import { generateMFA, getSessionUser } from '../../server';
+import MFASetupForm from '../MFASetupForm';
+async function MFASetup({ classNames }) {
+    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 _jsx("div", { children: "Error" });
+    }
+    const url = await generateMFA(process.env.APP_NAME, user.email);
+    if (!url) {
+        return _jsx("div", { children: "Error" });
+    }
+    return (_jsxs(Fragment, { children: [_jsx("h1", { className: tw('', classNames?.title), children: "Multi-Factor Authentication" }), _jsx(MFASetupForm, { classNames: classNames, url: url })] }));
+}
+export default MFASetup;

package/dist/components/MFASetupForm/index.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import type { AuthClassNames } from '../Auth';
+export interface MFASetupProps {
+    classNames?: Partial<AuthClassNames>;
+    url: string;
+}
+declare function MFASetupForm({ classNames, url }: Readonly<MFASetupProps>): React.ReactElement;
+export default MFASetupForm;

package/dist/components/MFASetupForm/index.js

@@ -0,0 +1,20 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment, useState } from 'react';
+import { Button, Link } from '@sqrzro/components';
+import MFAForm from '../MFAForm';
+function MFASetupForm({ classNames, url }) {
+    const [step, setStep] = useState(1);
+    function nextStep() {
+        setStep(2);
+    }
+    function previousStep(event) {
+        event.preventDefault();
+        setStep(1);
+    }
+    if (step === 1) {
+        return (_jsxs(Fragment, { children: [_jsx("p", { className: "mb-4", children: "You'll need to setup an additional authentication step before you can continue." }), _jsx("figure", { className: "flex justify-center rounded border p-2", children: _jsx("img", { alt: "qrcode", src: url }) }), _jsxs("p", { className: "mb-4", children: [_jsx("strong", { children: "Step 1:" }), " Scan the QR code, or enter the secret below, in the Google Authentictor app."] }), _jsx(Button, { onClick: nextStep, variant: "primary", isFullWidth: true, children: "Continue" })] }));
+    }
+    return (_jsxs(Fragment, { children: [_jsxs("p", { className: "mb-4", children: [_jsx("strong", { children: "Step 2:" }), " Enter the 6-digit code listed in the Google Authenticator app:"] }), _jsx(MFAForm, {}), _jsx(Link, { className: classNames?.link, onClick: previousStep, children: "Scan QRcode again" })] }));
+}
+export default MFASetupForm;

package/dist/components/PasswordForm/index.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import type { AuthClassNames } from '../Auth';
+interface PasswordFormProps {
+    classNames?: Partial<AuthClassNames>;
+    email?: string;
+}
+declare function PasswordForm({ classNames, email }: Readonly<PasswordFormProps>): React.ReactElement;
+export default PasswordForm;

package/dist/components/PasswordForm/index.js

@@ -0,0 +1,28 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment, useState } from 'react';
+import { Form, FormSubmit, Link, TextFormField, tw } from '@sqrzro/components';
+import { useForm } from '@sqrzro/hooks';
+import { submitPasswordForm } from '../../server';
+function PasswordForm({ classNames, email }) {
+    const [sentCount, setSentCount] = useState(0);
+    const { fieldProps, formData, formProps, setFormData, submitForm } = useForm({
+        defaults: { email },
+        onSubmit: submitPasswordForm,
+        onSuccess: () => {
+            setSentCount(sentCount + 1);
+        },
+        toasts: { success: false },
+    });
+    function handleResend(event) {
+        event.preventDefault();
+        submitForm();
+    }
+    function handleReset(event) {
+        event.preventDefault();
+        setFormData('email', '');
+        setSentCount(0);
+    }
+    return (_jsxs(Fragment, { children: [_jsx("div", { className: tw('', sentCount === 0 ? 'block' : 'hidden'), children: _jsxs(Form, { ...formProps, children: [_jsxs("div", { children: [_jsx("h1", { className: classNames?.title, children: "Reset Your Password" }), _jsx("p", { className: "text-sm", children: "Enter the email address associated with your account and we'll send you a link to reset your password." })] }), _jsx(TextFormField, { ...fieldProps('email'), hasAssistiveLabel: true }), _jsx("div", { className: tw('', classNames?.actions), children: _jsx(FormSubmit, { children: "Send Email" }) })] }) }), _jsxs("div", { className: tw('-mt-1 text-sm', sentCount > 0 ? 'block' : 'hidden'), children: [_jsx("h1", { className: classNames?.title, children: "Check Your Email" }), sentCount === 1 ? (_jsxs(Fragment, { children: [_jsxs("p", { className: "mb-4", children: ["If ", formData.email, " matches an email we have on file, then we've sent you an email containing further instructions for resetting your password."] }), _jsxs("p", { children: ["If you haven't received an email in 5 minutes, check your spam,", ' ', _jsx(Link, { className: classNames?.link, onClick: handleResend, children: "resend" }), ", or", ' ', _jsx(Link, { className: classNames?.link, onClick: handleReset, children: "try a different email address" }), "."] })] })) : (_jsxs(Fragment, { children: [_jsxs("p", { className: "mb-4", children: ["We've resent password reset instructions to ", formData.email, ", if it is an email we have on file."] }), _jsxs("p", { children: ["Please check again. If you still haven't received an email,", ' ', _jsx(Link, { className: classNames?.link, onClick: handleReset, children: "try a different email address" }), "."] })] }))] })] }));
+}
+export default PasswordForm;

package/dist/components/PasswordPage/index.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import type { AuthClassNames } from '../Auth';
+interface PasswordPageProps {
+    classNames?: Partial<AuthClassNames>;
+    searchParams: {
+        email?: string;
+        token?: string;
+    };
+}
+declare function PasswordPage({ classNames, searchParams, }: Readonly<PasswordPageProps>): React.ReactElement;
+export default PasswordPage;

package/dist/components/PasswordPage/index.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import PasswordForm from '../PasswordForm';
+import PasswordResetForm from '../PasswordResetForm';
+function PasswordPage({ classNames, searchParams, }) {
+    if (searchParams.token) {
+        return _jsx(PasswordResetForm, { classNames: classNames, token: searchParams.token });
+    }
+    return _jsx(PasswordForm, { classNames: classNames, email: searchParams.email });
+}
+export default PasswordPage;

package/dist/components/PasswordResetForm/index.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import type { AuthClassNames } from '../Auth';
+interface PasswordResetFormProps {
+    classNames?: Partial<AuthClassNames>;
+    token: string;
+}
+declare function PasswordResetForm({ classNames, token, }: Readonly<PasswordResetFormProps>): React.ReactElement;
+export default PasswordResetForm;

package/dist/components/PasswordResetForm/index.js

@@ -0,0 +1,20 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Form, FormSubmit, PasswordFormField } from '@sqrzro/components';
+import { useForm } from '@sqrzro/hooks';
+import { useRouter } from 'next/navigation';
+import { submitPasswordResetForm } from '../../server';
+function PasswordResetForm({ classNames, token, }) {
+    const router = useRouter();
+    const { fieldProps, formProps } = useForm({
+        defaults: { token },
+        hiddenFields: ['token'],
+        onSubmit: submitPasswordResetForm,
+        onSuccess: (response) => {
+            router.push(response || '/');
+        },
+        toasts: { success: false },
+    });
+    return (_jsxs(Form, { ...formProps, children: [_jsx("h1", { className: classNames?.title, children: "Reset Your Password" }), _jsx("div", { className: "relative", children: _jsx(PasswordFormField, { ...fieldProps('password', 'New Password') }) }), _jsx("div", { className: "mt-8", children: _jsx(FormSubmit, { children: "Reset Password" }) })] }));
+}
+export default PasswordResetForm;

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+export { default as Auth } from './components/Auth';
+export type { AuthProps } from './components/Auth';
+export { default as LogoutButton } from './components/LogoutButton';

package/dist/index.js

@@ -0,0 +1,2 @@
+export { default as Auth } from './components/Auth';
+export { default as LogoutButton } from './components/LogoutButton';

package/dist/server.d.ts

@@ -0,0 +1,20 @@
+import type { LoginFormFields, MFAFormFields, UserObject } from '@sqrzro/server/auth';
+import type { Errorable } from '@sqrzro/interfaces';
+export type { MFAFormFields, ScopeObject } from '@sqrzro/server/auth';
+export declare function registerAuthEvent(fn?: () => Promise<void>): 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 checkMFAEnabled(): Promise<boolean>;
+interface PasswordFormFields {
+    email: string;
+}
+interface PasswordResetFormFields {
+    password: string;
+    token: string;
+}
+export declare function submitLoginForm(formData: LoginFormFields): Promise<Errorable<string>>;
+export declare function submitMFAForm(formData: MFAFormFields): Promise<Errorable<boolean>>;
+export declare function submitPasswordForm(formData: PasswordFormFields): Promise<Errorable<boolean>>;
+export declare function submitPasswordResetForm(formData: PasswordResetFormFields): Promise<Errorable<string | null>>;
+export declare function logout(): Promise<void>;

package/dist/server.js

@@ -0,0 +1,46 @@
+'use server';
+import { handleLoginForm, handleLogout, handleMFAForm, handlePasswordForm, handlePasswordResetForm, checkUserHasMFA as serverCheckUserHasMFA, generateMFA as serverGenerateMFA, getSessionUser as serverGetSessionUser, checkMFAEnabled as syncCheckMFAEnabled, } from '@sqrzro/server/auth';
+let authEvent; // eslint-disable-line @typescript-eslint/init-declarations
+export async function registerAuthEvent(fn) {
+    if (fn) {
+        authEvent = fn;
+    }
+    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) {
+    return serverCheckUserHasMFA(user);
+}
+export async function generateMFA(name, email) {
+    return serverGenerateMFA(name, email);
+}
+export async function getSessionUser() {
+    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() {
+    return Promise.resolve(syncCheckMFAEnabled());
+}
+export async function submitLoginForm(formData) {
+    return handleLoginForm(formData, authEvent);
+}
+export async function submitMFAForm(formData) {
+    return handleMFAForm(formData);
+}
+async function sendPasswordResetMail(email, token) {
+    return true;
+}
+export async function submitPasswordForm(formData) {
+    return handlePasswordForm(formData, sendPasswordResetMail);
+}
+export async function submitPasswordResetForm(formData) {
+    return handlePasswordResetForm(formData);
+}
+export async function logout() {
+    return handleLogout();
+}

package/next-env.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.

package/package.json

@@ -0,0 +1,22 @@
+{
+  "name": "@sqrzro/auth",
+  "type": "module",
+  "version": "2.0.0-bz.0",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "dependencies": {
+    "@sqrzro/components": "bz",
+    "@sqrzro/hooks": "bz",
+    "@sqrzro/interfaces": "bz",
+    "@sqrzro/server": "bz",
+    "next": "^14.1.4",
+    "react": "^18.2.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.74",
+    "typescript": "^5.4.4"
+  },
+  "scripts": {
+    "build": "tsc -p tsconfig.json"
+  }
+}

package/prettier.config.cjs

@@ -0,0 +1 @@
+module.exports = require('@sqrzro/prettier-config');

package/src/components/Auth/index.tsx

@@ -0,0 +1,95 @@
+import { tw } from '@sqrzro/components';
+import type { ClassNameProps } from '@sqrzro/components';
+import { notFound } from 'next/navigation';
+
+import LoginForm from '../LoginForm';
+import MFAPage from '../MFAPage';
+import PasswordPage from '../PasswordPage';
+
+import { registerAuthEvent } from '../../server';
+import type { ScopeObject } from '../../server';
+
+export interface AuthClassNames {
+    actions: string;
+    footer: string;
+    link: string;
+    logo: string;
+    root: string;
+    panel: string;
+    title: string;
+}
+
+export interface AuthProps extends ClassNameProps<AuthClassNames> {
+    logo?: React.ReactElement;
+    onLogin?: () => Promise<void>;
+    params: { auth: string[] };
+    scopes?: Partial<ScopeObject>;
+    searchParams: { email?: string; r?: string; token?: string };
+}
+
+interface AuthPageProps {
+    classNames?: Partial<AuthClassNames>;
+    searchParams: AuthProps['searchParams'];
+}
+
+/**
+ * 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} />;
+    }
+}
+
+/**
+ *
+ * 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,
+    params: { auth },
+    searchParams,
+}: Readonly<AuthProps>): Promise<React.ReactElement> {
+    if (auth.length > 1) {
+        return notFound();
+    }
+
+    await registerAuthEvent(onLogin);
+
+    return (
+        <div
+            className={tw(
+                'grid h-screen grid-rows-[1fr_auto_auto_2fr] justify-center',
+                classNames?.root
+            )}
+        >
+            <div className={tw('row-start-2', classNames?.logo)}>{logo}</div>
+            <div className={tw('row-start-3 w-screen max-w-sm', classNames?.panel)}>
+                {getPage(auth[0], {
+                    classNames,
+                    searchParams,
+                })}
+            </div>
+        </div>
+    );
+}
+
+export default Auth;

package/src/components/LoginForm/index.tsx

@@ -0,0 +1,44 @@
+'use client';
+
+import { Fragment } from 'react';
+
+import { Form, FormSubmit, Link, PasswordFormField, TextFormField, tw } from '@sqrzro/components';
+import { useLoginForm } from '@sqrzro/hooks';
+
+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 } = useLoginForm(submitLoginForm, {
+        redirect: searchParams.r,
+    });
+
+    return (
+        <Fragment>
+            <h1 className={tw('text-center', classNames?.title)}>Sign in to continue</h1>
+            <Form {...formProps}>
+                <TextFormField {...fieldProps('email')} hasAssistiveError />
+                <PasswordFormField {...fieldProps('password')} hasAssistiveError />
+                <div className={tw('', classNames?.actions)}>
+                    <FormSubmit>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/LogoutButton/index.tsx

@@ -0,0 +1,30 @@
+'use client';
+
+import { useRouter } from 'next/navigation';
+
+import { logout } 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 || '/');
+    }
+
+    return (
+        <form action={handleLogout} className="contents">
+            <button type="submit">{children}</button>
+        </form>
+    );
+}
+
+export default LogoutButton;

package/src/components/MFAForm/index.tsx

@@ -0,0 +1,59 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+
+import { CodeFormField, Form, FormSubmit, tw } from '@sqrzro/components';
+import { useForm } from '@sqrzro/hooks';
+import { useRouter } from 'next/navigation';
+
+import { submitMFAForm } from '../../server';
+import type { MFAFormFields } from '../../server';
+
+import type { AuthClassNames } from '../Auth';
+
+export interface MFAFormProps {
+    classNames?: Partial<AuthClassNames>;
+    hasAssistiveSubmit?: boolean;
+}
+
+function MFAForm({ hasAssistiveSubmit }: Readonly<MFAFormProps>): React.ReactElement {
+    const router = useRouter();
+
+    const [errorCount, setErrorCount] = useState(0);
+
+    const { fieldProps, formProps, resetForm, submitForm } = useForm<MFAFormFields, boolean>({
+        onSubmit: submitMFAForm,
+        onSuccess: () => {
+            router.push('/');
+        },
+        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(() => {
+        resetForm();
+    }, [errorCount]);
+
+    return (
+        <Form {...formProps}>
+            <CodeFormField
+                key={errorCount}
+                {...fieldProps('token')}
+                onFinalChange={submitForm}
+                hasAssistiveLabel
+                isAutoFocus
+            />
+            <div className={tw(hasAssistiveSubmit ? 'sr-only' : '')}>
+                <FormSubmit>Verify</FormSubmit>
+            </div>
+        </Form>
+    );
+}
+
+export default MFAForm;

package/src/components/MFAPage/index.js

@@ -0,0 +1,78 @@
+"use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var components_1 = require("@sqrzro/components");
+var navigation_1 = require("next/navigation");
+var MFAForm_1 = require("../MFAForm");
+var MFASetup_1 = require("../MFASetup");
+var server_1 = require("../../server");
+function MFAPage(_a) {
+    return __awaiter(this, arguments, void 0, function (_b) {
+        var user, userHasMFA;
+        var classNames = _b.classNames;
+        return __generator(this, function (_c) {
+            switch (_c.label) {
+                case 0: return [4 /*yield*/, (0, server_1.checkMFAEnabled)()];
+                case 1:
+                    if (!(_c.sent())) {
+                        return [2 /*return*/, (0, navigation_1.notFound)()];
+                    }
+                    return [4 /*yield*/, (0, server_1.getSessionUser)()];
+                case 2:
+                    user = _c.sent();
+                    if (!user) {
+                        return [2 /*return*/, <div>Error</div>];
+                    }
+                    return [4 /*yield*/, (0, server_1.checkUserHasMFA)(user)];
+                case 3:
+                    userHasMFA = _c.sent();
+                    if (!userHasMFA) {
+                        return [2 /*return*/, <MFASetup_1.default classNames={classNames}/>];
+                    }
+                    return [2 /*return*/, (<div>
+            <h1 className={(0, components_1.tw)('text-center', classNames === null || classNames === void 0 ? void 0 : classNames.title)}>Multi-Factor Authentication</h1>
+            <p className="mb-6 text-center">
+                Enter the 6-digit code listed in your authentication app:
+            </p>
+            <MFAForm_1.default classNames={classNames} hasAssistiveSubmit/>
+        </div>)];
+            }
+        });
+    });
+}
+exports.default = MFAPage;

package/src/components/MFAPage/index.tsx

@@ -0,0 +1,42 @@
+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';
+
+export interface MFAPageProps {
+    classNames?: Partial<AuthClassNames>;
+}
+
+async function MFAPage({ classNames }: 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} />;
+    }
+
+    return (
+        <div>
+            <h1 className={tw('text-center', classNames?.title)}>Multi-Factor Authentication</h1>
+            <p className="mb-6 text-center">
+                Enter the 6-digit code listed in your authentication app:
+            </p>
+            <MFAForm classNames={classNames} hasAssistiveSubmit />
+        </div>
+    );
+}
+
+export default MFAPage;

package/src/components/MFASetup/index.tsx

@@ -0,0 +1,39 @@
+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>;
+}
+
+async function MFASetup({ classNames }: 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} url={url} />
+        </Fragment>
+    );
+}
+
+export default MFASetup;

package/src/components/MFASetupForm/index.tsx

@@ -0,0 +1,62 @@
+'use client';
+
+import { Fragment, useState } from 'react';
+
+import { Button, Link } from '@sqrzro/components';
+
+import type { AuthClassNames } from '../Auth';
+import MFAForm from '../MFAForm';
+
+export interface MFASetupProps {
+    classNames?: Partial<AuthClassNames>;
+    url: string;
+}
+
+function MFASetupForm({ classNames, url }: Readonly<MFASetupProps>): React.ReactElement {
+    const [step, setStep] = useState(1);
+
+    function nextStep(): void {
+        setStep(2);
+    }
+
+    function previousStep(event: React.MouseEvent): void {
+        event.preventDefault();
+        setStep(1);
+    }
+
+    if (step === 1) {
+        return (
+            <Fragment>
+                <p className="mb-4">
+                    You&#39;ll need to setup an additional authentication step before you can
+                    continue.
+                </p>
+                <figure className="flex justify-center rounded border p-2">
+                    <img alt="qrcode" src={url} />
+                </figure>
+                <p className="mb-4">
+                    <strong>Step 1:</strong> Scan the QR code, or enter the secret below, in the
+                    Google Authentictor app.
+                </p>
+                <Button onClick={nextStep} variant="primary" isFullWidth>
+                    Continue
+                </Button>
+            </Fragment>
+        );
+    }
+
+    return (
+        <Fragment>
+            <p className="mb-4">
+                <strong>Step 2:</strong> Enter the 6-digit code listed in the Google Authenticator
+                app:
+            </p>
+            <MFAForm />
+            <Link className={classNames?.link} onClick={previousStep}>
+                Scan QRcode again
+            </Link>
+        </Fragment>
+    );
+}
+
+export default MFASetupForm;

package/src/components/PasswordForm/index.tsx

@@ -0,0 +1,107 @@
+'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, 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}>
+                    <div>
+                        <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>
+                    </div>
+                    <TextFormField {...fieldProps('email')} hasAssistiveLabel />
+                    <div className={tw('', classNames?.actions)}>
+                        <FormSubmit>Send Email</FormSubmit>
+                    </div>
+                </Form>
+            </div>
+
+            <div className={tw('-mt-1 text-sm', sentCount > 0 ? 'block' : 'hidden')}>
+                <h1 className={classNames?.title}>Check Your Email</h1>
+                {sentCount === 1 ? (
+                    <Fragment>
+                        <p className="mb-4">
+                            If {formData.email} matches an email we have on file, then we&#39;ve
+                            sent you an email containing further instructions for resetting your
+                            password.
+                        </p>
+                        <p>
+                            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="mb-4">
+                            We&#39;ve resent password reset instructions to {formData.email}, if it
+                            is an email we have on file.
+                        </p>
+                        <p>
+                            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>
+        </Fragment>
+    );
+}
+
+export default PasswordForm;

package/src/components/PasswordPage/index.tsx

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

@@ -0,0 +1,50 @@
+'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 PasswordResetFormFields {
+    password: string;
+    token: string;
+}
+
+interface PasswordResetFormProps {
+    classNames?: Partial<AuthClassNames>;
+    token: string;
+}
+
+function PasswordResetForm({
+    classNames,
+    token,
+}: Readonly<PasswordResetFormProps>): React.ReactElement {
+    const router = useRouter();
+
+    const { fieldProps, formProps } = useForm<PasswordResetFormFields, string | null>({
+        defaults: { token },
+        hiddenFields: ['token'],
+        onSubmit: submitPasswordResetForm,
+        onSuccess: (response) => {
+            router.push(response || '/');
+        },
+        toasts: { success: false },
+    });
+
+    return (
+        <Form {...formProps}>
+            <h1 className={classNames?.title}>Reset Your Password</h1>
+            <div className="relative">
+                <PasswordFormField {...fieldProps('password', 'New Password')} />
+            </div>
+            <div className="mt-8">
+                <FormSubmit>Reset Password</FormSubmit>
+            </div>
+        </Form>
+    );
+}
+
+export default PasswordResetForm;

package/src/index.ts

@@ -0,0 +1,3 @@
+export { default as Auth } from './components/Auth';
+export type { AuthProps } from './components/Auth';
+export { default as LogoutButton } from './components/LogoutButton';

package/src/server.ts

@@ -0,0 +1,87 @@
+'use server';
+
+import {
+    handleLoginForm,
+    handleLogout,
+    handleMFAForm,
+    handlePasswordForm,
+    handlePasswordResetForm,
+    checkUserHasMFA as serverCheckUserHasMFA,
+    generateMFA as serverGenerateMFA,
+    getSessionUser as serverGetSessionUser,
+    checkMFAEnabled as syncCheckMFAEnabled,
+} from '@sqrzro/server/auth';
+import type { LoginFormFields, MFAFormFields, UserObject } from '@sqrzro/server/auth';
+import type { Errorable } from '@sqrzro/interfaces';
+
+export type { MFAFormFields, ScopeObject } from '@sqrzro/server/auth';
+
+let authEvent: () => Promise<void>; // eslint-disable-line @typescript-eslint/init-declarations
+
+export async function registerAuthEvent(fn?: () => Promise<void>): Promise<void> {
+    if (fn) {
+        authEvent = fn;
+    }
+    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 PasswordFormFields {
+    email: string;
+}
+
+interface PasswordResetFormFields {
+    password: string;
+    token: string;
+}
+
+export async function submitLoginForm(formData: LoginFormFields): Promise<Errorable<string>> {
+    return handleLoginForm(formData, authEvent);
+}
+
+export async function submitMFAForm(formData: MFAFormFields): Promise<Errorable<boolean>> {
+    return handleMFAForm(formData);
+}
+
+async function sendPasswordResetMail(email: string, token: string): Promise<boolean> {
+    return true;
+}
+
+export async function submitPasswordForm(
+    formData: PasswordFormFields
+): Promise<Errorable<boolean>> {
+    return handlePasswordForm(formData, sendPasswordResetMail);
+}
+
+export async function submitPasswordResetForm(
+    formData: PasswordResetFormFields
+): Promise<Errorable<string | null>> {
+    return handlePasswordResetForm(formData);
+}
+
+export async function logout(): Promise<void> {
+    return handleLogout();
+}

package/tsconfig.json

@@ -0,0 +1,18 @@
+{
+    "compilerOptions": {
+        "allowSyntheticDefaultImports": true,
+        "declaration": true,
+        "esModuleInterop": true,
+        "importHelpers": true,
+        "jsx": "react-jsx",
+        "lib": ["DOM", "ESNext"],
+        "module": "ESNext",
+        "moduleResolution": "node",
+        "outDir": "dist",
+        "resolveJsonModule": true,
+        "skipLibCheck": true,
+        "target": "ESNext"
+    },
+    "include": ["next-env.d.ts", "src/**/*"],
+    "exclude": ["node_modules"]
+}