Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: update Arcjet integration and improve security checks #333

Merged
merged 4 commits into from
Nov 26, 2024
Merged

fix: update Arcjet integration and improve security checks #333

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
516b75e
fix: update Arcjet integration and improve security checks
ixartz Nov 26, 2024
edf0387
chore: update npm dependencies to the latest version
ixartz Nov 26, 2024
5d9665b
style: reorder import statements for respecting new antfu rules
ixartz Nov 26, 2024
8e178b1
chore: reorganize logos in sponsors components
ixartz Nov 26, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 3 additions & 2 deletions .env
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,8 +12,9 @@ NEXT_PUBLIC_CLERK_SIGN_IN_URL=/sign-in
######## Please create a new file named `.env.local`, all environment files ending with `.local` won't be tracked by Git.
######## After creating the file, you can add the following variables.
# Arcjet security
# Get your key from https://app.arcjet.com
#ARCJET_KEY=
# Get your key from https://launch.arcjet.com/Q6eLbRE
# ARCJET_KEY=

# Clerk authentication
CLERK_SECRET_KEY=your_clerk_secret_key
######## [END] SENSITIVE DATA
4 changes: 2 additions & 2 deletions .env.production
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,8 +14,8 @@ NEXT_PUBLIC_SENTRY_DSN=
######## Please create a new file named `.env.production.local`, all environment files ending with `.local` won't be tracked by Git.
######## After creating the file, you can add the following variables.
# Arcjet security
# Get your key from https://app.arcjet.com
#ARCJET_KEY=
# Get your key from https://launch.arcjet.com/Q6eLbRE
# ARCJET_KEY=

# Database
# Using an incorrect DATABASE_URL value, Next.js build will timeout and you will get the following error: "because it took more than 60 seconds"
Expand Down
40 changes: 25 additions & 15 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
<a href="https://demo.nextjs-boilerplate.com"><img height="300" src="public/assets/images/nextjs-starter-banner.png?raw=true" alt="Next js starter banner"></a>
</p>

🚀 Boilerplate and Starter for Next.js with App Router, Tailwind CSS, and TypeScript ⚡️ Prioritizing developer experience first: Next.js, TypeScript, ESLint, Prettier, Husky, Lint-Staged, Vitest (replacing Jest), Testing Library, Playwright, Commitlint, VSCode, Tailwind CSS, Authentication with [Clerk](https://clerk.com?utm_source=github&utm_medium=sponsorship&utm_campaign=nextjs-boilerplate), Database with DrizzleORM (PostgreSQL, SQLite, and MySQL), Error Monitoring with [Sentry](https://sentry.io/for/nextjs/?utm_source=github&utm_medium=paid-community&utm_campaign=general-fy25q1-nextjs&utm_content=github-banner-nextjsboilerplate-logo), Logging with Pino.js and Log Management, Monitoring as Code, Storybook, Multi-language (i18n), and more.
🚀 Boilerplate and Starter for Next.js with App Router, Tailwind CSS, and TypeScript ⚡️ Prioritizing developer experience first: Next.js, TypeScript, ESLint, Prettier, Husky, Lint-Staged, Vitest (replacing Jest), Testing Library, Playwright, Commitlint, VSCode, Tailwind CSS, Authentication with [Clerk](https://clerk.com?utm_source=github&utm_medium=sponsorship&utm_campaign=nextjs-boilerplate), Database with DrizzleORM (PostgreSQL, SQLite, and MySQL), Error Monitoring with [Sentry](https://sentry.io/for/nextjs/?utm_source=github&utm_medium=paid-community&utm_campaign=general-fy25q1-nextjs&utm_content=github-banner-nextjsboilerplate-logo), Logging with Pino.js and Log Management, Monitoring as Code, Storybook, Multi-language (i18n), Secure with [Arcjet](https://launch.arcjet.com/Q6eLbRE) (Bot detection, Rate limiting, Attack protection, etc.) and more.

Clone this project and use it to create your own Next.js project. You can check out the live demo at [Next.js Boilerplate](https://demo.nextjs-boilerplate.com), which includes a working authentication system.

Expand Down Expand Up @@ -48,6 +48,15 @@ Clone this project and use it to create your own Next.js project. You can check
</td>
</tr>
<tr height="187px">
<td align="center" width="33%">
<a href="https://launch.arcjet.com/Q6eLbRE">
<picture>
<source media="(prefers-color-scheme: dark)" srcset="public/assets/images/arcjet-dark.svg?raw=true">
<source media="(prefers-color-scheme: light)" srcset="public/assets/images/arcjet-light.svg?raw=true">
<img alt="Arcjet" src="public/assets/images/arcjet-light.svg?raw=true">
</picture>
</a>
</td>
<td align="center" width="33%">
<a href="https://posthog.com/?utm_source=github&utm_medium=sponsorship&utm_campaign=next-js-boilerplate">
<picture>
Expand All @@ -66,6 +75,8 @@ Clone this project and use it to create your own Next.js project. You can check
</picture>
</a>
</td>
</tr>
<tr height="187px">
<td align="center" width="33%">
<a href="https://www.checklyhq.com/?utm_source=github&utm_medium=sponsorship&utm_campaign=next-js-boilerplate">
<picture>
Expand All @@ -75,8 +86,6 @@ Clone this project and use it to create your own Next.js project. You can check
</picture>
</a>
</td>
</tr>
<tr height="187px">
<td align="center" style=width="33%">
<a href="https://nextjs-boilerplate.com/pro-saas-starter-kit">
<img src="public/assets/images/nextjs-boilerplate-saas.png?raw=true" alt="Next.js SaaS Boilerplate with React" />
Expand Down Expand Up @@ -362,14 +371,14 @@ To complete the setup, update the `checkly.config.ts` file with your own email a

The project uses [Arcjet](https://launch.arcjet.com/Q6eLbRE), a security as code product that includes several features that can be used individually or combined to provide defense in depth for your site.

To set up Arcjet, [create a free account]((https://launch.arcjet.com/Q6eLbRE)) and get your API key. Then add it to the `ARCJET_KEY` environment variable.
To set up Arcjet, [create a free account](https://launch.arcjet.com/Q6eLbRE) and get your API key. Then add it to the `ARCJET_KEY` environment variable.

Arcjet is configured with two main features: bot detection and the Arcjet Shield WAF:

- [Bot detection](https://docs.arcjet.com/bot-protection/concepts) is configured to allow search engines, preview link generators e.g. Slack and Twitter previews, and to allow common uptime monitoring services. All other bots, such as scrapers and AI crawlers, will be blocked. You can [configure additional bot types](https://docs.arcjet.com/bot-protection/identifying-bots) to allow or block.
- [Arcjet Shield WAF](https://docs.arcjet.com/shield/concepts) will detect and block common attacks such as SQL injection, cross-site scripting, and other OWASP Top 10 vulnerabilities.

Arcjet is configured with a central client at `src/libs/Arcjet.ts` that includes the Shield WAF rules. Additional rules are configured in `src/app/[locale]/(auth)/layout.tsx` and `src/app/[locale]/(marketing)/page.tsx` based on the page type.
Arcjet is configured with a central client at `src/libs/Arcjet.ts` that includes the Shield WAF rules. Additional rules are configured in `src/app/[locale]/layout.tsx` based on the page type.

### Useful commands

Expand Down Expand Up @@ -451,6 +460,15 @@ See [LICENSE](LICENSE) for more information.
</td>
</tr>
<tr height="187px">
<td align="center" width="33%">
<a href="https://launch.arcjet.com/Q6eLbRE">
<picture>
<source media="(prefers-color-scheme: dark)" srcset="public/assets/images/arcjet-dark.svg?raw=true">
<source media="(prefers-color-scheme: light)" srcset="public/assets/images/arcjet-light.svg?raw=true">
<img alt="Arcjet" src="public/assets/images/arcjet-light.svg?raw=true">
</picture>
</a>
</td>
<td align="center" width="33%">
<a href="https://posthog.com/?utm_source=github&utm_medium=sponsorship&utm_campaign=next-js-boilerplate">
<picture>
Expand All @@ -469,6 +487,8 @@ See [LICENSE](LICENSE) for more information.
</picture>
</a>
</td>
</tr>
<tr height="187px">
<td align="center" width="33%">
<a href="https://www.checklyhq.com/?utm_source=github&utm_medium=sponsorship&utm_campaign=next-js-boilerplate">
<picture>
Expand All @@ -478,16 +498,6 @@ See [LICENSE](LICENSE) for more information.
</picture>
</a>
</td>
</tr>
<tr height="187px">
<td align="center" width="33%">
<a href="https://launch.arcjet.com/Q6eLbRE" target="_arcjet-home">
<picture>
<source media="(prefers-color-scheme: dark)" srcset="public/assets/images/arcjet-dark.svg">
<img src="public/assets/images/arcjet-light.svg" alt="Arcjet Logo" height="128" width="auto">
</picture>
</a>
</td>
<td align="center" style=width="33%">
<a href="https://nextjs-boilerplate.com/pro-saas-starter-kit">
<img src="public/assets/images/nextjs-boilerplate-saas.png?raw=true" alt="Next.js SaaS Boilerplate with React" />
Expand Down
Loading
Loading