Skip to content

Commit fd55d3f

Browse files
Update fullstack authentication tutorial for Next.js and Cloudflare D1
- Clarified instructions for modifying `tsconfig.json` and `cloudflare-env.d.ts`. - Added note about wrangler creating the worker if not deployed. - Improved error handling in the GET function. - Updated file references for clarity and consistency.
1 parent d731cf9 commit fd55d3f

File tree

1 file changed

+17
-13
lines changed

1 file changed

+17
-13
lines changed

src/content/docs/developer-spotlight/tutorials/fullstack-authentication-with-next-js-and-cloudflare-d1.mdx

Lines changed: 17 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -60,7 +60,7 @@ From within the repository or directory where you want to create your project ru
6060

6161
This will create a new Next.js project using [OpenNext](https://opennext.js.org/cloudflare) that will run in a Worker using [Workers Static Assets](/workers/frameworks/framework-guides/nextjs/#static-assets).
6262

63-
Before we get started, open your project's `tsconfig.json` file and add the following to the `compilerOptions` object to allow for top level await needed to let our application get the Cloudflare context:
63+
Before we get started, open your project's `tsconfig.json` file and modify the following to the `compilerOptions` object to allow for top level await needed to let our application get the Cloudflare context:
6464

6565
```json title="tsconfig.json"
6666
{
@@ -101,6 +101,8 @@ Now, deviating from the standard Auth.js setup, locate your generated secret (li
101101
npx wrangler secret put AUTH_SECRET
102102
```
103103

104+
If you have not deployed yet that's fine. Allow wrangler to create the worker for you.
105+
104106
After adding the secret, update your `.dev.vars` file to include an `AUTH_SECRET` value (this secret should be different from the one you generated earlier for security purposes):
105107

106108
```sh title=".dev.vars"
@@ -109,9 +111,9 @@ AUTH_SECRET = "<replace-me>"
109111
# ...
110112
```
111113

112-
Next, go into the newly generated `env.d.ts` file and add the following to the <Type text="CloudflareEnv" /> interface:
114+
Next, go into `cloudflare-env.d.ts` file and add the following to the <Type text="CloudflareEnv" /> interface:
113115

114-
```ts title="env.d.ts"
116+
```ts title="cloudflare-env.d.ts"
115117
interface CloudflareEnv {
116118
AUTH_SECRET: string;
117119
}
@@ -144,9 +146,9 @@ database_id = "<unique-ID-for-your-database>"
144146

145147
</WranglerConfig>
146148

147-
Now, within your `env.d.ts`, add your D1 binding, like:
149+
Now, within your `cloudflare-env.d.ts`, add your D1 binding, like:
148150

149-
```ts title="env.d.ts"
151+
```ts title="cloudflare-env.d.ts"
150152
interface CloudflareEnv {
151153
DB: D1Database;
152154
AUTH_SECRET: string;
@@ -185,9 +187,9 @@ AUTH_RESEND_KEY = "<replace-me>"
185187
# ...
186188
```
187189

188-
After adding both of those Secrets, your `env.d.ts` should now include the following:
190+
After adding both of those Secrets, your `cloudflare-env.d.ts` should now include the following:
189191

190-
```ts title="env.d.ts"
192+
```ts title="cloudflare-env.d.ts"
191193
interface CloudflareEnv {
192194
DB: D1Database;
193195
AUTH_SECRET: string;
@@ -234,7 +236,7 @@ export const { GET, POST } = handlers;
234236
```
235237
</TypeScriptExample>
236238

237-
Now, within the `src/` directory, create a `middleware.ts` file to persist session data containing the following:
239+
Now, within the `src/` directory, create a `middleware.ts` file. If you do not have a `src/` directory, create a `middleware.ts` file in the root of your project. This will persist session data.
238240

239241
<TypeScriptExample filename="src/middleware.ts">
240242
```ts
@@ -248,15 +250,17 @@ The D1 adapter requires that tables be created within your database. It [recomme
248250

249251
<TypeScriptExample filename="src/app/api/setup/route.ts">
250252
```ts
251-
import type { NextRequest } from 'next/server';
252253
import { up } from "@auth/d1-adapter";
253254
import { getCloudflareContext } from "@opennextjs/cloudflare";
254255

255-
export async function GET(request: NextRequest) {
256+
export async function GET() {
256257
try {
257258
await up((await getCloudflareContext()).env.DB)
258-
} catch (e: any) {
259-
console.log(e.cause.message, e.message)
259+
} catch (e: unknown) {
260+
if (e instanceof Error) {
261+
const causeMessage = e.cause instanceof Error ? e.cause.message : String(e.cause);
262+
console.log(causeMessage, e.message)
263+
}
260264
}
261265
return new Response('Migration completed');
262266
}
@@ -283,7 +287,7 @@ Before we go further, make sure you've created all of the necessary files:
283287
- auth.ts
284288
- page.ts
285289
- middleware.ts
286-
- env.d.ts
290+
- cloudflare-env.d.ts
287291
- wrangler.toml
288292
</FileTree>
289293

0 commit comments

Comments
 (0)