Error using D1+Auth.js in CF Starter - [auth][details] TypeError: immutable
manishrc opened this issue · 7 comments
manishrc commented
Something strange happened where the auth with dropbox worked the first time, and then stopped working.
Changes
Below are the only changes made after bootstrapping using bun setup
// apps/web/app/server/auth.ts
providers: [
{
id: 'dropbox',
name: 'Dropbox',
type: 'oidc',
clientId: process.env.AUTH_DROPBOX_ID,
clientSecret: process.env.AUTH_DROPBOX_SECRET,
allowDangerousEmailAccountLinking: true,
issuer: 'https://www.dropbox.com',
wellKnown: 'https://www.dropbox.com/.well-known/openid-configuration',
authorization: {
url: 'https://www.dropbox.com/oauth2/authorize',
params: {
scope: 'openid profile email account_info.read files.content.read', //files.metadata.read
token_access_type: 'offline',
response_type: 'code', // OICD
},
},
// Dropbox always provides a verified email: https://developers.dropbox.com/oidc-guide
token: {
url: 'https://api.dropboxapi.com/oauth2/token',
},
profile(profile) {
return {
...profile,
name: profile.given_name,
};
},
},
],// apps/web/app/page.tsx
await signIn('dropbox'); // Switch from await signIn('google');
Trace
web:dev: ⨯ Error [TypeError]: immutable
web:dev: at _Headers.delete (file:///Users/someone/Projects/dropbox-cms/node_modules/next/dist/compiled/edge-runtime/index.js:1:657096)
web:dev: at <unknown> (file:///Users/someone/Projects/dropbox-cms/node_modules/next/dist/server/web/sandbox/sandbox.js:117:47)
web:dev: at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
web:dev: at async runWithTaggedErrors (file:///Users/someone/Projects/dropbox-cms/node_modules/next/dist/server/web/sandbox/sandbox.js:107:9)
web:dev: at async DevServer.runEdgeFunction (file:///Users/someone/Projects/dropbox-cms/node_modules/next/dist/server/next-server.js:1201:24)
web:dev: at async NextNodeServer.handleCatchallRenderRequest (file:///Users/someone/Projects/dropbox-cms/node_modules/next/dist/server/next-server.js:248:37)
web:dev: at async DevServer.handleRequestImpl (file:///Users/someone/Projects/dropbox-cms/node_modules/next/dist/server/base-server.js:816:17)
web:dev: at async (file:///Users/someone/Projects/dropbox-cms/node_modules/next/dist/server/dev/next-dev-server.js:339:20)
web:dev: at async Span.traceAsyncFn (file:///Users/someone/Projects/dropbox-cms/node_modules/next/dist/trace/trace.js:154:20)
web:dev: at async DevServer.handleRequest (file:///Users/someone/Projects/dropbox-cms/node_modules/next/dist/server/dev/next-dev-server.js:336:24)
Related conversation:
curtis-allan commented
Got this working with your exact auth.ts setup, error was resolved by making sure the dropbox app included the exact scope fields being included in the scope params being inserted into the authorise url. Let me know how you go and I'll try to help :)
inurhuda00 commented
same issue with immutable error. in my case, the d1 database schema on local was not migrated
manishrc commented
Got this working with your exact auth.ts setup, error was resolved by making sure the dropbox app included the exact scope fields being included in the scope params being inserted into the authorise url. Let me know how you go and I'll try to help :)
@curtis-allan Thanks for trying and offering to help 🙏
same issue with immutable error. in my case, the d1 database schema on local was not migrated
@inurhuda00 I checked using TablePlus and could confirm that the migrations where there. Running the migration again would also give me an error:
⛅️ wrangler 3.72.2
-------------------
🌀 Executing on local database MASKED (MASKED) from .wrangler/state/v3/d1:
🌀 To execute on your remote database, add a --remote flag to your wrangler command.
✘ [ERROR] table `account` already exists at offset 13: SQLITE_ERROR
If you think this is a bug then please create an issue at https://github.com/cloudflare/workers-sdk/issues/new/choose
✔ Would you like to report this error to Cloudflare? … no
I just tried this from scratch and still seeing the immutable error. Below are the specific steps I took:
git clone https://github.com/Dhravya/cloudflare-saas-stack
cd cloudflare-saas-stack
npm i -g bun
bun install
bun run setup
diff --git a/apps/web/app/server/auth.ts b/apps/web/app/server/auth.ts
index ba64138..01e7b76 100644
--- a/apps/web/app/server/auth.ts
+++ b/apps/web/app/server/auth.ts
@@ -1,6 +1,5 @@
import { DrizzleAdapter } from '@auth/drizzle-adapter';
import NextAuth from 'next-auth';
-import Google from 'next-auth/providers/google';
import { db } from './db';
export const {
@@ -21,9 +20,33 @@ export const {
},
adapter: DrizzleAdapter(db),
providers: [
- Google({
- clientId: process.env.GOOGLE_CLIENT_ID,
- clientSecret: process.env.GOOGLE_CLIENT_SECRET,
- }),
+ {
+ id: 'dropbox',
+ name: 'Dropbox',
+ type: 'oidc',
+ clientId: process.env.AUTH_DROPBOX_ID,
+ clientSecret: process.env.AUTH_DROPBOX_SECRET,
+ allowDangerousEmailAccountLinking: true,
+ issuer: 'https://www.dropbox.com',
+ wellKnown: 'https://www.dropbox.com/.well-known/openid-configuration',
+ authorization: {
+ url: 'https://www.dropbox.com/oauth2/authorize',
+ params: {
+ scope: 'openid email account_info.read files.content.read', //files.metadata.read
+ token_access_type: 'offline',
+ response_type: 'code', // OICD
+ },
+ },
+ // Dropbox always provides a verified email: https://developers.dropbox.com/oidc-guide
+ token: {
+ url: 'https://api.dropboxapi.com/oauth2/token',
+ },
+ profile(profile) {
+ return {
+ ...profile,
+ name: profile.given_name,
+ };
+ },
+ },
],
});diff --git a/apps/web/app/page.tsx b/apps/web/app/page.tsx
index 72bfc61..0089b01 100644
--- a/apps/web/app/page.tsx
+++ b/apps/web/app/page.tsx
@@ -106,7 +106,7 @@ export default async function Page() {
<form
action={async () => {
'use server';
- await signIn('google');
+ await signIn('dropbox');
}}
>
<Button className="mt-4">Login with Google</Button>Confirmed I've all the scopes I'm requesting are provided allowed in the dropbox app too:
Error:
Versions
- Bun: 1.1.21
- OS: MacOS 14.5
- Everything else was unchanged after cloning the repo today.
curtis-allan commented
Make sure the profile scope is checked as well in the dopbox app, its needed for your auth setup. Let me know if that does anything.
manishrc commented
Make sure the profile scope is checked as well in the dropbox app, its needed for your auth setup. Let me know if that does anything.
Tried that too. Checked profile in Dropbox App Settings and added profile to scope. Still getting the same error.
web:dev: ✓ Compiled /api/[...nextauth] in 262ms (908 modules)
web:dev: error { error: 'invalid_grant', error_description: 'redirect_uri mismatch' }
web:dev: [auth][error] CallbackRouteError: Read more at https://errors.authjs.dev#callbackrouteerror
web:dev: [auth][cause]: Error: TODO: Handle OIDC response body error
web:dev: at handleOAuth (webpack-internal:///(rsc)/../../node_modules/@auth/core/lib/actions/callback/oauth/callback.js:97:19)
web:dev: at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
web:dev: at async Module.callback (webpack-internal:///(rsc)/../../node_modules/@auth/core/lib/actions/callback/index.js:37:41)
web:dev: at async AuthInternal (webpack-internal:///(rsc)/../../node_modules/@auth/core/lib/index.js:39:24)
web:dev: at async Auth (webpack-internal:///(rsc)/../../node_modules/@auth/core/index.js:126:34)
web:dev: at async eval (webpack-internal:///(rsc)/../../node_modules/next/dist/esm/server/future/route-modules/app-route/module.js:228:37)
web:dev: at async AppRouteRouteModule.execute (webpack-internal:///(rsc)/../../node_modules/next/dist/esm/server/future/route-modules/app-route/module.js:157:26)
web:dev: at async AppRouteRouteModule.handle (webpack-internal:///(rsc)/../../node_modules/next/dist/esm/server/future/route-modules/app-route/module.js:290:30)
web:dev: at async EdgeRouteModuleWrapper.handler (webpack-internal:///(rsc)/../../node_modules/next/dist/esm/server/web/edge-route-module-wrapper.js:92:21)
web:dev: at async adapter (webpack-internal:///(rsc)/../../node_modules/next/dist/esm/server/web/adapter.js:179:16)
web:dev: [auth][details]: {
web:dev: "provider": "dropbox"
web:dev: }
web:dev: ⨯ Error [TypeError]: immutable
web:dev: at _Headers.delete (file:///private/tmp/cloudflare-saas-stack/node_modules/next/dist/compiled/edge-runtime/index.js:1:657096)
web:dev: at <unknown> (file:///private/tmp/cloudflare-saas-stack/node_modules/next/dist/server/web/sandbox/sandbox.js:117:47)
web:dev: at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
web:dev: at async runWithTaggedErrors (file:///private/tmp/cloudflare-saas-stack/node_modules/next/dist/server/web/sandbox/sandbox.js:107:9)
web:dev: at async DevServer.runEdgeFunction (file:///private/tmp/cloudflare-saas-stack/node_modules/next/dist/server/next-server.js:1201:24)
web:dev: at async NextNodeServer.handleCatchallRenderRequest (file:///private/tmp/cloudflare-saas-stack/node_modules/next/dist/server/next-server.js:248:37)
web:dev: at async DevServer.handleRequestImpl (file:///private/tmp/cloudflare-saas-stack/node_modules/next/dist/server/base-server.js:816:17)
web:dev: at async (file:///private/tmp/cloudflare-saas-stack/node_modules/next/dist/server/dev/next-dev-server.js:339:20)
web:dev: at async Span.traceAsyncFn (file:///private/tmp/cloudflare-saas-stack/node_modules/next/dist/trace/trace.js:154:20)
web:dev: at async DevServer.handleRequest (file:///private/tmp/cloudflare-saas-stack/node_modules/next/dist/server/dev/next-dev-server.js:336:24)
web:dev: ✓ Compiled /_error in 266ms (468 modules)
Dropbox redirects to https://<remote-host>/api/auth/callback/dropbox?code=<code> and I've make sure it's added as callback URL in dropbox too.
Dhravya commented
Hi! Please refer to this issue:
#42 (comment)
Dhravya commented
This worked for others - #15 (comment)