Is it compatible with Nuxt latest branch ? Got "No match found for location with path "/auth/google?code=..."

[SirMishaa]

Hello,

Context

When I try to log in with Google, I get the validation promp from Google (basically OAuth works fine), but once it returns to the page with the code provided by Google, there's an error.

Here's the error

client.mjs:33 [nuxt] error caught during app initialization H3Error: Page not found: /auth/google?code=......&scope=email+profile+openid+https%3A%2F%2Fwww.googleapis.com%2Fauth%2Fuserinfo.profile+https%3A%2F%2Fwww.googleapis.com%2Fauth%2Fuserinfo.email&authuser=0&prompt=consent
    at createError (index.mjs?v=a07ff093:78:15)
    at router.js?t=1724016405945&v=a07ff093:109:56
    at fn (nuxt.js?v=a07ff093:214:44)
    at Object.runWithContext (runtime-core.esm-bundler.js?v=a07ff093:2682:18)
    at callWithNuxt (nuxt.js?v=a07ff093:220:24)
    at nuxt.js?v=a07ff093:37:41
    at EffectScope.run (reactivity.esm-bundler.js?v=a07ff093:32:16)
    at Object.runWithContext (nuxt.js?v=a07ff093:37:31)
    at router.js?t=1724016405945&v=a07ff093:109:25
    at vue-router.mjs?v=a07ff093:2453:64

Only one file (except tsconfig.json) in the server directory server/routes/auth/google.get.ts :

export default oauthGoogleEventHandler({
  config: {
    authorizationParams: {
      redirect_uri: 'https://<REDACTED>:3000/auth/google',
    }
  },
  async onSuccess(event, { user }) {
    console.log(user)
    await setUserSession(event, {
      user: {
        google: user.email,
      },
      loggedInAt: Date.now(),
    })

    return sendRedirect(event, '/')
  },
})

I've changed my hosts file to map my domain and enable HTTPS. I'm not behind a PROXY, I just enabled the HTTPS server of Vite (in the nuxt conf) and I'm using WSL 2.

app/pages/login.vue

<template>
  <div v-if="loggedIn">
    <h1>Welcome {{ user?.login }}!</h1>
    <p>Logged in since {{ session?.loggedInAt }}</p>
    <button @click="clear">Logout</button>
  </div>
  <div v-else>
    <h1>Not logged in</h1>
    <a href="/auth/google">Login with Google</a>
  </div>
</template>

<script setup lang="ts">
const { loggedIn, user, session, fetch, clear } = useUserSession()
</script>

nuxt.config.ts :

// https://nuxt.com/docs/api/configuration/nuxt-config
import {fileURLToPath} from "node:url";

export default defineNuxtConfig({
  future: {
    compatibilityVersion: 4,
  },

  devServer: {
    https: {
      key: fileURLToPath(new URL('./certs/key.pem', import.meta.url)),
      cert: fileURLToPath(new URL('./certs/cert.pem', import.meta.url))
    },
    host: 'mishaa.io'
  },

  compatibilityDate: '2024-04-03',
  devtools: { enabled: true },

  typescript: {
    typeCheck: false
  },

  runtimeConfig: {
    oauth: {
      google: {
        clientId: process.env.NUXT_OAUTH_GOOGLE_CLIENT_ID,
        clientSecret: process.env.NUXT_OAUTH_GOOGLE_CLIENT_SECRET
      }
    }
  },

  modules: ["nuxt-auth-utils"]
})

Versions :

"dependencies": {
    "nuxt": "^3.12.4",
    "nuxt-auth-utils": "^0.3.4",
    "vue": "latest",
    "zod": "^3.23.8"
  },
  "devDependencies": {
    "typescript": "^5.5.4",
    "vue-tsc": "^2.0.29"
  }

Am I doing something wrong? The application is running on development mode

[Barbapapazes]

Hey,

What is the full URL where Google is trying to redirect you and what is your local dev URL?

For HTTPS, you could take a look at the arg --https, https://nuxt.com/docs/api/commands/dev#:~:text=of%20the%20server.-,%2D%2Dhttps,protocol%20with%20a%20self%2Dsigned%20certificate%20by%20default.,-%2D%2Dssl%2Dcert

[SirMishaa]

Hey,

What is the full URL where Google is trying to redirect you and what is your local dev URL?

For HTTPS, you could take a look at the arg --https, https://nuxt.com/docs/api/commands/dev#:~:text=of%20the%20server.-,%2D%2Dhttps,protocol%20with%20a%20self%2Dsigned%20certificate%20by%20default.,-%2D%2Dssl%2Dcert

My local URL : https://mishaa.io:3000/ The google redirection url : https://mishaa.io:3000/auth/google?code=4/0AQlEd8yY8GErEe1-EoDrtZUJXW00REDACTED00OLBNQ8TgqjKOvKDCUw&scope=email+profile+openid+https://www.googleapis.com/auth/userinfo.profile+https://www.googleapis.com/auth/userinfo.email&authuser=0&prompt=consent

I'm already using HTTPS since it's configured in that way in the configuration of Nuxt.

[tcarterBAMF]

@SirMishaa

Nuxt is making some changes to the directory layout in version 4 and it's starting to creep into these latest 3.x releases, especially with the compatibility keys in nuxt.config. I ran into 401 errors with my server routes when I upgraded to 3.12.4.

https://nuxt.com/docs/getting-started/upgrade#new-directory-structure

You might compare your project structure to what your config is specifying.

[atinux]

Sorry to hear that it does not work @SirMishaa

Could you try with redirectURL instead of authorizationParams?

export default oauthGoogleEventHandler({
  config: {
      redirectURL: 'https://<REDACTED>:3000/auth/google',
  },
  // ...
})

[SirMishaa]

Sorry to hear that it does not work @SirMishaa

Could you try with redirectURL instead of authorizationParams?

export default oauthGoogleEventHandler({
  config: {
      redirectURL: 'https://<REDACTED>:3000/auth/google',
  },
  // ...
})

I can confirm this is working. Thank you !