Nuxt•6mo ago

NuxtAuthUtils - no auto redirect to Google login page

Hi!

I'm integrating Google OAuth login into my Nuxt app using NuxtAuthUtils. When a user clicks the Google login button in my app, I expect them to be redirected to the Google login page automatically. Instead, they get a 404 error page. If they manually refresh that 404 error page, only then are they redirected to Google login page. I'm trying to figure out why the redirect isn't working right away.

My app Google login button is linking to:

/api/auth/google

/api/auth/google

/api/auth/google

/api/auth/google

And here's how I defined the route to

/api/auth/google

/api/auth/google

/api/auth/google

/api/auth/google:

File: /server/api/auth/google.get.ts

export default defineOAuthGoogleEventHandler({
    async onSuccess(event, { user }) {
        await setUserSession(event, {
            user: {
                id: user.id
            }
        })

        return sendRedirect(event, '/')
    },
    onError(event, error) {
        console.error('Google OAuth error:', error)

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

File: /server/api/auth/google.get.ts

export default defineOAuthGoogleEventHandler({
    async onSuccess(event, { user }) {
        await setUserSession(event, {
            user: {
                id: user.id
            }
        })

        return sendRedirect(event, '/')
    },
    onError(event, error) {
        console.error('Google OAuth error:', error)

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

File: /server/api/auth/google.get.ts

export default defineOAuthGoogleEventHandler({
    async onSuccess(event, { user }) {
        await setUserSession(event, {
            user: {
                id: user.id
            }
        })

        return sendRedirect(event, '/')
    },
    onError(event, error) {
        console.error('Google OAuth error:', error)

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

File: /server/api/auth/google.get.ts

export default defineOAuthGoogleEventHandler({
    async onSuccess(event, { user }) {
        await setUserSession(event, {
            user: {
                id: user.id
            }
        })

        return sendRedirect(event, '/')
    },
    onError(event, error) {
        console.error('Google OAuth error:', error)

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

What did I miss?

kapa.ai•7/24/25, 11:13 AM

Hi @KAT. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

kapa.ai•7/24/25, 11:13 AM

----------------------
It looks like your Google OAuth integration with NuxtAuthUtils is mostly correct, but the issue—where clicking the Google login button leads to a 404 page, and only after a manual refresh does the redirect to Google happen—suggests a problem with how the route is being handled in your Nuxt app.

Based on the knowledge sources, here are some things to check:

Route Handling in Static/Prerendered Deployments:
If you are deploying your Nuxt app as a static site (using nuxt generatenuxt generate), server routes like
```
/api/auth/google
```
```
/api/auth/google
```
will not exist at runtime on static hosting. When you try to access
```
/api/auth/google
```
```
/api/auth/google
```
from the browser, the static server will return a 404 because it doesn't know about this API route. Only after a manual refresh (which might hit a different server or trigger a fallback) does the redirect work.
This is a common issue when using server API routes with static hosting. You need to ensure your deployment supports serverless functions or API routes, or use a deployment target that supports full server-side rendering (SSR) or hybrid rendering, as described in the Nuxt docs about server endpoints & middleware.

kapa.ai•7/24/25, 11:13 AM

**Middleware and Route Rules:** If you are using route rules or middleware to protect routes, make sure they are not interfering with your `/api/auth/google` endpoint. For example, if you have middleware that redirects unauthenticated users, it could be triggering before your OAuth handler runs, causing unexpected redirects or 404s. The Nuxt docs recommend using client-side middleware for authentication checks and being careful with how middleware is applied, especially in static deployments. See the [Protect App Routes](<https://nuxt.com/docs/4.x/guide/recipes/sessions-and-authentication#protect-app-routes>) section for more details.
**Deployment Environment:** Make sure your deployment environment supports server API routes. If you are using Vercel, Netlify, or another platform with serverless functions, ensure your `/server/api/auth/google.get.ts` is being deployed as a serverless function and is accessible at runtime.
**No Mention of Automatic Redirects in NuxtAuthUtils Docs:** The knowledge sources do not mention any built-in automatic redirect from NuxtAuthUtils for OAuth providers. The redirect should happen as soon as the user hits the `/api/auth/google` endpoint, which should trigger the OAuth flow. If this is not happening, it's likely due to the reasons above.

kapa.ai•7/24/25, 11:13 AM

Summary:
Your code for the OAuth handler looks correct, but the 404 issue is likely due to static hosting not supporting server API routes. To fix this, deploy your app to a platform that supports server API routes (SSR or serverless functions), or adjust your deployment strategy. The knowledge sources do not provide a direct fix for this issue, but they do highlight the importance of deployment environment and middleware configuration for authentication flows in Nuxt apps Sessions and Authentication, Server Endpoints & Middleware.

If you need to support static hosting, you may need to use an external authentication service or proxy your API routes through a server that supports them.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------

kapa.ai•7/24/25, 11:13 AM

@162643219220398080 Kapa.ai is still learning and improving, please let me know how I did by reacting below.

dmarr•7/24/25, 2:58 PM

You can look at example how its done in this repo https://github.com/atinux/atidone it might be in the way you are linking the user. are you using a NuxtLink? if so maybe try adding externalexternal prop

GitHub

GitHub - atinux/atidone: A full-stack application with Auth, SSR an...

A full-stack application with Auth, SSR and SQL, running on the edge with Nuxt. - atinux/atidone

KATOP•7/24/25, 7:17 PM

External prop solved the problem - thanks @dmarr

NuxtAuthUtils - no auto redirect to Google login page

Similar Threads

Similar Threads

Similar Threads