feat: add Arcjet Security (#368)

Co-authored-by: David Mytton <david@mytton.net>

Author: dev-xo

.env.example

@@ -25,3 +25,7 @@ STRIPE_WEBHOOK_ENDPOINT=""
 # Honeypot.
 # https://github.com/sergiodxa/remix-utils?tab=readme-ov-file#form-honeypot
 HONEYPOT_ENCRYPTION_SEED="AUTOMATICALLY_GENERATED_ON_TEMPLATE_INITIALIZATION"
+
+# Arcjet Security (Optional) - Bot detection, spam signup detection, and attack prevention.
+# Get your free API key at https://arcjet.com and increase your app security.
+ARCJET_KEY=""

.eslintrc.cjs

@@ -1,6 +1,82 @@
 /**
- * @type {import('eslint').Linter.Config}
+ * ESLint configuration for the application.
+ * Based on the Official Remix Starters.
  */
+
+/** @type {import('eslint').Linter.Config} */
 module.exports = {
-  extends: ['@remix-run/eslint-config', '@remix-run/eslint-config/node', 'prettier'],
+  root: true,
+  parserOptions: {
+    ecmaVersion: 'latest',
+    sourceType: 'module',
+    ecmaFeatures: {
+      jsx: true,
+    },
+  },
+  env: {
+    browser: true,
+    commonjs: true,
+    es6: true,
+  },
+  ignorePatterns: ['!**/.server', '!**/.client', 'remix.init/*'],
+
+  // Base configuration.
+  extends: ['eslint:recommended', 'prettier'],
+
+  overrides: [
+    // React.
+    {
+      files: ['**/*.{js,jsx,ts,tsx}'],
+      plugins: ['react'],
+      extends: [
+        'plugin:react/recommended',
+        'plugin:react/jsx-runtime',
+        'plugin:react-hooks/recommended',
+      ],
+      settings: {
+        react: {
+          version: 'detect',
+        },
+        formComponents: ['Form'],
+        linkComponents: [
+          { name: 'Link', linkAttribute: 'to' },
+          { name: 'NavLink', linkAttribute: 'to' },
+        ],
+        'import/resolver': {
+          typescript: {},
+        },
+      },
+    },
+
+    // Typescript.
+    {
+      files: ['**/*.{ts,tsx}'],
+      plugins: ['@typescript-eslint', 'import'],
+      parser: '@typescript-eslint/parser',
+      settings: {
+        'import/internal-regex': '^~/',
+        'import/resolver': {
+          node: {
+            extensions: ['.ts', '.tsx'],
+          },
+          typescript: {
+            alwaysTryTypes: true,
+          },
+        },
+      },
+      extends: [
+        'plugin:@typescript-eslint/recommended',
+        'plugin:import/recommended',
+        'plugin:import/typescript',
+      ],
+    },
+
+    // Node.
+    {
+      files: ['.eslintrc.cjs'],
+      env: {
+        node: true,
+      },
+    },
+  ],
 }

README.md

@@ -42,3 +42,14 @@ If you found **Remix SaaS** helpful, consider supporting it with a ⭐ [Star](ht
 ## Acknowledgments
 
 Special thanks to [@mw10013](https://github.com/mw10013) who has been part of the Remix SaaS development.
+
+## Sponsors
+
+Remix SaaS is proudly supported by [Arcjet](https://launch.arcjet.com/hdXzPbO).
+
+<a href="https://launch.arcjet.com/hdXzPbO" target="_arcjet-home">
+  <picture>
+    <source media="(prefers-color-scheme: dark)" srcset="https://arcjet.com/logo/arcjet-dark-lockup-voyage-horizontal.svg">
+    <img src="https://arcjet.com/logo/arcjet-light-lockup-voyage-horizontal.svg" alt="Arcjet Logo" height="128" width="auto">
+  </picture>
+</a>

app/components/ui/dropdown-menu.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable */
 import * as React from 'react'
 import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu'
 import { Check, ChevronRight, Circle } from 'lucide-react'

app/components/ui/select.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable */
 import * as React from 'react'
 import * as SelectPrimitive from '@radix-ui/react-select'
 import { Check, ChevronDown, ChevronUp } from 'lucide-react'

app/components/ui/switch.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable */
 import * as React from 'react'
 import * as SwitchPrimitives from '@radix-ui/react-switch'
 

app/entry.client.tsx

@@ -8,9 +8,12 @@ import { getInitialNamespaces } from 'remix-i18next/client'
 import * as i18n from '#app/modules/i18n/i18n'
 
 async function main() {
+  // eslint-disable-next-line import/no-named-as-default-member
   await i18next
-    .use(initReactI18next) // Initialize `react-i18next`.
-    .use(I18nextBrowserLanguageDetector) // Setup client-side language detector.
+    // Initialize `react-i18next`.
+    .use(initReactI18next)
+    // Setup client-side language detector.
+    .use(I18nextBrowserLanguageDetector)
     .init({
       ...i18n,
       ns: getInitialNamespaces(),

app/modules/email/templates/auth-email.tsx

@@ -106,7 +106,7 @@ export function renderAuthEmailEmail(args: AuthEmailOptions) {
  * Senders.
  */
 export async function sendAuthEmail({ email, code, magicLink }: AuthEmailOptions) {
-  const html = renderAuthEmailEmail({ email, code, magicLink })
+  const html = await renderAuthEmailEmail({ email, code, magicLink })
 
   await sendEmail({
     to: email,

app/modules/email/templates/subscription-email.tsx

@@ -77,7 +77,7 @@ export function SubscriptionErrorEmail({ email }: SubscriptionEmailOptions) {
           <Text style={{ fontSize: '16px', lineHeight: '26px' }}>
             We were unable to process your subscription to PRO tier.
             <br />
-            But don't worry, we'll not charge you anything.
+            But don&apos;t worry, we&apos;ll not charge you anything.
           </Text>
           <Text style={{ fontSize: '16px', lineHeight: '26px' }}>
             The <Link href="http://localhost:3000">domain-name.com</Link> team.
@@ -108,7 +108,7 @@ export async function sendSubscriptionSuccessEmail({
   email,
   subscriptionId,
 }: SubscriptionEmailOptions) {
-  const html = renderSubscriptionSuccessEmail({ email, subscriptionId })
+  const html = await renderSubscriptionSuccessEmail({ email, subscriptionId })
 
   await sendEmail({
     to: email,
@@ -121,7 +121,7 @@ export async function sendSubscriptionErrorEmail({
   email,
   subscriptionId,
 }: SubscriptionEmailOptions) {
-  const html = renderSubscriptionErrorEmail({ email, subscriptionId })
+  const html = await renderSubscriptionErrorEmail({ email, subscriptionId })
 
   await sendEmail({
     to: email,

app/root.tsx

@@ -1,4 +1,9 @@
-import type { MetaFunction, LinksFunction, LoaderFunctionArgs } from '@remix-run/node'
+import type {
+  MetaFunction,
+  LinksFunction,
+  LoaderFunctionArgs,
+  TypedResponse,
+} from '@remix-run/node'
 import type { Theme } from '#app/utils/hooks/use-theme'
 import {
   Links,
@@ -46,6 +51,11 @@ export const links: LinksFunction = () => {
   return [{ rel: 'stylesheet', href: RootCSS }]
 }
 
+export type LoaderData = Exclude<
+  Awaited<ReturnType<typeof loader>>,
+  Response | TypedResponse<unknown>
+>
+
 export async function loader({ request }: LoaderFunctionArgs) {
   const sessionUser = await authenticator.isAuthenticated(request)
   const user = sessionUser?.id

app/routes/_home+/_index.tsx

@@ -346,7 +346,7 @@ export default function Index() {
               <svg viewBox="0 0 259 84" className="h-9" fillRule="evenodd">
                 <title id="title-F7R838wtvsn8DF6B"></title>
                 <desc id="description-F7R838wtzc_8DF6R"></desc>
-                <g buffered-rendering="static">
+                <g>
                   <path
                     d="M57.413 10.134h9.454c8.409 0 15.236 6.827 15.236 15.236v33.243c0 8.409-6.827 15.236-15.236 15.236h-.745c-4.328-.677-6.205-1.975-7.655-3.072l-12.02-9.883a1.692 1.692 0 0 0-2.128 0l-3.905 3.211-10.998-9.043a1.688 1.688 0 0 0-2.127 0L12.01 68.503c-3.075 2.501-5.109 2.039-6.428 1.894C2.175 67.601 0 63.359 0 58.613V25.37c0-8.409 6.827-15.236 15.237-15.236h9.433l-.017.038-.318.927-.099.318-.428 1.899-.059.333-.188 1.902-.025.522-.004.183.018.872.043.511.106.8.135.72.16.663.208.718.54 1.52.178.456.94 1.986.332.61 1.087 1.866.416.673 1.517 2.234.219.296 1.974 2.569.638.791 2.254 2.635.463.507 1.858 1.999.736.762 1.216 1.208-.244.204-.152.137c-.413.385-.805.794-1.172 1.224a10.42 10.42 0 0 0-.504.644 8.319 8.319 0 0 0-.651 1.064 6.234 6.234 0 0 0-.261.591 5.47 5.47 0 0 0-.353 1.606l-.007.475a5.64 5.64 0 0 0 .403 1.953 5.44 5.44 0 0 0 1.086 1.703c.338.36.723.674 1.145.932.359.22.742.401 1.14.539a6.39 6.39 0 0 0 2.692.306h.005a6.072 6.072 0 0 0 2.22-.659c.298-.158.582-.341.848-.549a5.438 5.438 0 0 0 1.71-2.274c.28-.699.417-1.446.405-2.198l-.022-.393a5.535 5.535 0 0 0-.368-1.513 6.284 6.284 0 0 0-.285-.618 8.49 8.49 0 0 0-.67-1.061 11.022 11.022 0 0 0-.354-.453 14.594 14.594 0 0 0-1.308-1.37l-.329-.28.557-.55 2.394-2.5.828-.909 1.287-1.448.837-.979 1.194-1.454.808-1.016 1.187-1.587.599-.821.85-1.271.708-1.083 1.334-2.323.763-1.524.022-.047.584-1.414a.531.531 0 0 0 .02-.056l.629-1.962.066-.286.273-1.562.053-.423.016-.259.019-.978-.005-.182-.05-.876-.062-.68-.31-1.961c-.005-.026-.01-.052-.018-.078l-.398-1.45-.137-.403-.179-.446Zm4.494 41.455a3.662 3.662 0 0 0-3.61 3.61 3.663 3.663 0 0 0 3.61 3.609 3.665 3.665 0 0 0 3.611-3.609 3.663 3.663 0 0 0-3.611-3.61Z"
                     fill="url(#a)"

app/routes/auth+/verify.tsx

@@ -84,7 +84,7 @@ export default function Verify() {
       <div className="mb-2 flex flex-col gap-2">
         <p className="text-center text-2xl text-primary">Check your inbox!</p>
         <p className="text-center text-base font-normal text-primary/60">
-          We've just emailed you a temporary password.
+          We&apos;ve just emailed you a temporary password.
           <br />
           Please enter it below.
         </p>

app/routes/onboarding+/username.tsx

@@ -110,7 +110,7 @@ export default function OnboardingUsername() {
         <span className="mb-2 animate-pulse select-none text-6xl">👋</span>
         <h3 className="text-center text-2xl font-medium text-primary">Welcome!</h3>
         <p className="text-center text-base font-normal text-primary/60">
-          Let's get started by choosing a username.
+          Let&apos;s get started by choosing a username.
         </p>
       </div>
 

app/utils/env.server.ts

@@ -16,6 +16,7 @@ const schema = z.object({
 })
 
 declare global {
+  // eslint-disable-next-line @typescript-eslint/no-namespace
   namespace NodeJS {
     interface ProcessEnv extends z.infer<typeof schema> {}
   }
@@ -41,11 +42,9 @@ export function getSharedEnvs() {
   }
 }
 
-type ENV = ReturnType<typeof getSharedEnvs>
-
 declare global {
-  let ENV: ENV
-  interface Window {
-    ENV: ENV
+  // eslint-disable-next-line @typescript-eslint/no-namespace
+  namespace NodeJS {
+    interface ProcessEnv extends z.infer<typeof schema> {}
   }
 }

app/utils/misc.server.ts

@@ -60,7 +60,7 @@ export function combineHeaders(
  * Singleton Server-Side Pattern.
  */
 export function singleton<Value>(name: string, value: () => Value): Value {
-  const globalStore = global as any
+  const globalStore = global as unknown as { __singletons?: Record<string, Value> }
 
   globalStore.__singletons ??= {}
   globalStore.__singletons[name] ??= value()

app/utils/misc.ts

@@ -1,6 +1,5 @@
-import type { SerializeFrom } from '@remix-run/node'
 import type { ClassValue } from 'clsx'
-import type { loader as rootLoader } from '#app/root'
+import type { LoaderData as RootLoaderData } from '#app/root'
 import { useFormAction, useNavigation, useRouteLoaderData } from '@remix-run/react'
 import { clsx } from 'clsx'
 import { twMerge } from 'tailwind-merge'
@@ -16,14 +15,14 @@ export function cn(...inputs: ClassValue[]) {
 /**
  * Use root-loader data.
  */
-function isUser(user: any): user is SerializeFrom<typeof rootLoader>['user'] {
+function isUser(user: RootLoaderData['data']['user']) {
   return user && typeof user === 'object' && typeof user.id === 'string'
 }
 
 export function useOptionalUser() {
-  const data = useRouteLoaderData<typeof rootLoader>('root')
-  if (!data || !isUser(data.user)) return undefined
-  return data.user
+  const loaderData = useRouteLoaderData<RootLoaderData>('root')
+  if (!loaderData || !isUser(loaderData.data.user)) return undefined
+  return loaderData.data.user
 }
 
 export function useUser() {

docker-entrypoint.js

@@ -1,4 +1,5 @@
 #!/usr/bin/env node
+/* eslint-disable */
 
 import { spawn } from 'node:child_process'
 

docs/README.md

@@ -142,3 +142,14 @@ Deployment and some other docs are available in the [Deployment](./guide/09-depl
 # Support
 
 If you found **Remix SaaS** helpful, consider supporting it with a ⭐ [Star](https://github.com/dev-xo/remix-saas). It helps the repository grow and provides the required motivation to continue maintaining the project. Thank you!
+
+## Sponsors
+
+Remix SaaS is proudly supported by [Arcjet](https://launch.arcjet.com/hdXzPbO).
+
+<a href="https://launch.arcjet.com/hdXzPbO" target="_arcjet-home">
+  <picture>
+    <source media="(prefers-color-scheme: dark)" srcset="https://arcjet.com/logo/arcjet-dark-lockup-voyage-horizontal.svg">
+    <img src="https://arcjet.com/logo/arcjet-light-lockup-voyage-horizontal.svg" alt="Arcjet Logo" height="128" width="auto">
+  </picture>
+</a>

docs/guide/05-utilities.md

@@ -34,6 +34,29 @@ You can authenticate as `admin` by using the following credentials:
 
 The default admin email can be changed in the `/prisma/seed.ts` file.
 
+## Arcjet Security
+
+Remix SaaS includes an optional integration with [Arcjet](https://launch.arcjet.com/hdXzPbO), a security-as-code product that helps secure your application with bot protection, rate limiting, and signup form spam protection.
+
+Arcjet's philosophy is that proper security protections need the full context of the application, which is why security rules and protections should be located alongside the code they are protecting.
+
+Arcjet security-as-code means you can version control your security rules, track changes through pull requests, and test them locally before deploying to production.
+
+### Arcjet Configuration
+
+You can enable this integration by [signing up for a free account](https://launch.arcjet.com/hdXzPbO) and setting the `ARCJET_KEY` environment variable in the `.env` file.
+
+An easier approach is to simply initialize the template opting into Arcjet, as this will automatically add the `ARCJET_KEY` environment variable to the `.env` file and update a few other files to fully enable Arcjet for you.
+
+By opting into Arcjet, you will benefit from:
+
+- Bot protection on the website index. The rules are defined in the loader of `app/routes/_home+/_index.tsx`.
+- Bot protection, rate limiting, email verification, and validation on the login form. This will help protect against fraudulent or spam signups. The rules are defined in the action of `app/routes/auth+/login.tsx`.
+
+Both of these use a central client with a base rule to detect common attacks that is applied everywhere the client is used. This is defined in `app/utils/arcjet.server.ts`.
+
+See [the Arcjet documentation](https://docs.arcjet.com) for full details.
+
 ## Toasts
 
 Toasts are a way to display messages to the user. They are defined in the `/utils/toasts` directory. Some of the toasts that are available are: