nuxt-auth

nuxt-auth copied to clipboard

Environment

Working directory: /app
Nuxt project info:

---

• Operating System: Linux
• Node Version: v20.11.1
• Nuxt Version: 3.11.2
• CLI Version: 3.11.1
• Nitro Version: 2.9.6
• Package Manager: [email protected]
• Builder: -
• User Config: devtools, modules, runtimeConfig, css, typescript, tailwindcss, i18n, auth, vite
• Runtime Modules: @nuxt/test-utils/[email protected], @nuxtjs/[email protected], @nuxtjs/[email protected], @pinia/[email protected], @sidebase/[email protected], ./modules/flowbite.ts
• Build Modules: -

---

Reproduction

• Create nuxt project
• Set up sidebase with authjs
• Configure google cloud api and use google provider
• build the project use it

Describe the bug

Hello everyone.

I have a problem with my google provider when using it in production. When I want to authenticate with Google in production (so with the url https://my-prod.com) it sends me an error 400: redirect_uri_mismatch with its information: redirect_uri=http://localhost:3000/api/auth/callback/google.

After searching, I saw this issue #664 and so I modified my [...].ts to have this

 GoogleProvider.default({
      clientId: runtimeConfig.private.GOOGLE_CLIENT_ID,
      clientSecret: runtimeConfig.private.GOOGLE_CLIENT_SECRET,
      authorization: {
        params: {
          redirect_uri: `https://my-prod.com/api/auth/callback/google`,
        },
      },
    }),

And now I can select my email in google!

But I now have another problem: when I arrive at my callback url, I'm automatically redirected to http://localhost:3000/api/auth/error?error=OAuthCallback. with an error in my app:

[next-auth][error][OAUTH_CALLBACK_ERROR] 
https://next-auth.js.org/errors#oauth_callback_error redirect_uri_mismatch (Bad Request) {
  error: OPError: redirect_uri_mismatch (Bad Request)
      at processResponse (/app/.output/server/node_modules/openid-client/lib/helpers/process_response.js:38:13)
      at Client.grant (/app/.output/server/node_modules/openid-client/lib/client.js:1354:22)
      at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
      at async Client.callback (/app/.output/server/node_modules/openid-client/lib/client.js:493:24)
      at async oAuthCallback (/app/.output/server/node_modules/next-auth/core/lib/oauth/callback.js:109:16)
      at async Object.callback (/app/.output/server/node_modules/next-auth/core/routes/callback.js:52:11)
      at async AuthHandler (/app/.output/server/node_modules/next-auth/core/index.js:208:28)
      at async Object.handler (file:///app/.output/server/chunks/routes/api/auth/_..._.mjs:85:24)
      at async Object.handler (file:///app/.output/server/chunks/runtime.mjs:3075:19)
      at async Server.toNodeHandle (file:///app/.output/server/chunks/runtime.mjs:3341:7) {
    name: 'OAuthCallbackError',
    code: undefined
  },
  providerId: 'google',
  message: 'redirect_uri_mismatch (Bad Request)'
}

After searching and seeing different issues, I think it's because it couldn't get my AUTH_ORIGIN environment variable (or maybe NEXTAUTH_URL (I tried to put both to hope for a different result but nothing)). Checking the nuxt doc I came across this

Production Preview After your server is built, you are responsible for setting environment variables when you run the server. Your .env file will not be read at this point. How you do this is different for every environment.

I'm afraid this is what makes all the difference with my dev environment and therefore causes all the errors.

Does anyone have a solution? I'm deeply blocked and can't see what the solution is.

Additional context

My auth part in nuxt.config.ts :

  auth: {
    baseURL: "https://my-prod.com/api/auth",
    provider: {
      type: "authjs",
    },
  },

Logs

No response

Hi @FlorientPlouvin 👋

I assume that this issue occurs because you have set a different redirect URL in the Google OAuth application.

Please open your Google cloud console and verify the OAuth application redirect URL matches your production URL. Below I posted an example from one of my applications using NuxtAuth (and FushionAuth).

When it comes to the environment variables, I recommend the following:

• Set AUTH_ORIGIN to: https://MY_DOMAIN.com
• Set NEXTAUTH_URL to: https://MY_DOMAIN.com/api/auth
• Do not set auth.baseURL in the nuxt.config.ts, as this overwrites the AUTH_ORIGIN environment variable!
  • auth.baseURL sets the URL at build time, while AUTH_ORIGIN lets you configure it at runtime!