Dhravya / cloudflare-saas-stack

Quickly make and deploy full-stack apps with database, auth, styling, storage etc. figured out for you. Add all primitives you want.
2.95k stars 210 forks source link

Error using D1+Auth.js in CF Starter - [auth][details] TypeError: immutable #38

Open manishrc opened 1 month ago

manishrc commented 1 month ago

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:

https://github.com/nextauthjs/next-auth/issues/9966

curtis-allan commented 1 month ago

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 1 month ago

same issue with immutable error. in my case, the d1 database schema on local was not migrated

manishrc commented 3 weeks ago

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:

CleanShot 2024-08-23 at 2  38 40@2x

Error:

CleanShot 2024-08-23 at 2  28 52@2x

Versions

curtis-allan commented 3 weeks ago

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 3 weeks ago

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 1 week ago

Hi! Please refer to this issue: https://github.com/Dhravya/cloudflare-saas-stack/issues/42#issuecomment-2327384300

Dhravya commented 1 week ago

This worked for others - https://github.com/Dhravya/cloudflare-saas-stack/issues/15#issuecomment-2256562180