Next.js Discord

Discord Forum

Following the guide "Next.js Platforms Starter Kit" guide resulted in 404 not found error

Unanswered
Armin posted this in #help-forum
Open in Discord
Original message was deleted.

13 Replies

Giant ichneumon wasp
I have the same issue. Were you able to find a solution?
No still trying to debug this, I also added my comments to https://github.com/vercel/platforms/issues/289 Vercel should either remove this from templates or help resolve this issue.
@Ray I saw your comments in another thread regarding the same issue, would you mind taking a look at this as well?
I can't figure out why I can't login to "Vecrel Platforms Starter Kit" https://github.com/vercel/platforms I followed all the steps. When I run the app locally http://localhost:3000/login returns 404, but, http://app.localhost:3000/login takes me to the login page, then again after logging in I get 404
I added bunch of console.logs and this is what I get

Hostname: app.localhost:3000
Path: /login
Session: null
[next-auth][error][OAUTH_CALLBACK_ERROR] 
https://next-auth.js.org/errors#oauth_callback_error State cookie was missing. {
  error: TypeError: State cookie was missing.
      at Object.use (webpack-internal:///(rsc)/./node_modules/.pnpm/next-auth@4.24.5_next@14.0.2_react-dom@18.2.0_react@18.2.0/node_modules/next-auth/core/lib/oauth/checks.js:126:27)
      at oAuthCallback (webpack-internal:///(rsc)/./node_modules/.pnpm/next-auth@4.24.5_next@14.0.2_react-dom@18.2.0_react@18.2.0/node_modules/next-auth/core/lib/oauth/callback.js:98:29)
      at async Object.callback (webpack-internal:///(rsc)/./node_modules/.pnpm/next-auth@4.24.5_next@14.0.2_react-dom@18.2.0_react@18.2.0/node_modules/next-auth/core/routes/callback.js:18:79)
      at async AuthHandler (webpack-internal:///(rsc)/./node_modules/.pnpm/next-auth@4.24.5_next@14.0.2_react-dom@18.2.0_react@18.2.0/node_modules/next-auth/core/index.js:202:38)
      at async NextAuthRouteHandler (webpack-internal:///(rsc)/./node_modules/.pnpm/next-auth@4.24.5_next@14.0.2_react-dom@18.2.0_react@18.2.0/node_modules/next-auth/next/index.js:50:30)
      at async NextAuth._args$ (webpack-internal:///(rsc)/./node_modules/.pnpm/next-auth@4.24.5_next@14.0.2_react-dom@18.2.0_react@18.2.0/node_modules/next-auth/next/index.js:85:24)
      at async /Users/armin/repos/arminbabaeistudio/abs-platforms/node_modules/.pnpm/next@14.0.2_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/compiled/next-server/app-route.runtime.dev.js:6:62591 {
    name: 'OAuthCallbackError',
    code: undefined
  },
  providerId: 'github',
  message: 'State cookie was missing.'
}
yes, I did. and I have NEXTAUTH_URL=http://app.localhost:3000 and NEXT_PUBLIC_ROOT_DOMAIN=localhost:3000 in my .env
I can see the information returned from github after logging in, the thing is the session is missing, I can see in my prisma studio userId, type, provider, providerAccountId, refresh_token, refresh_token_expires_in, access_token, expires_at, toke_type BUT scope, id_token, session_state, oauth_token_secret, auth_token are missing
I also tested https://github.com/nextauthjs/next-auth-example with the same setup and it worked!
@Armin yes, I did. and I have `NEXTAUTH_URL=http://app.localhost:3000` and `NEXT_PUBLIC_ROOT_DOMAIN=localhost:3000` in my `.env`
the callback url in the guide is http://app.localhost:3000
this is what I get when I change it to http://app.localhost:3000/api/auth/callback/github

I get

[next-auth][error][OAUTH_CALLBACK_HANDLER_ERROR] 
https://next-auth.js.org/errors#oauth_callback_handler_error redirect_uri_mismatch {
  error: {
    message: 'redirect_uri_mismatch',
    stack: 'Error: redirect_uri_mismatch\n' +
      '    at oAuthCallback (webpack-internal:///(rsc)/./node_modules/.pnpm/next-auth@4.24.5_next@14.0.2_react-dom@18.2.0_react@18.2.0/node_modules/next-auth/core/lib/oauth/callback.js:56:23)\n' +
      '    at Object.callback (webpack-internal:///(rsc)/./node_modules/.pnpm/next-auth@4.24.5_next@14.0.2_react-dom@18.2.0_react@18.2.0/node_modules/next-auth/core/routes/callback.js:18:107)\n' +
      '    at AuthHandler (webpack-internal:///(rsc)/./node_modules/.pnpm/next-auth@4.24.5_next@14.0.2_react-dom@18.2.0_react@18.2.0/node_modules/next-auth/core/index.js:202:51)\n' +
      '    at async NextAuthRouteHandler (webpack-internal:///(rsc)/./node_modules/.pnpm/next-auth@4.24.5_next@14.0.2_react-dom@18.2.0_react@18.2.0/node_modules/next-auth/next/index.js:50:30)\n' +
      '    at async NextAuth._args$ (webpack-internal:///(rsc)/./node_modules/.pnpm/next-auth@4.24.5_next@14.0.2_react-dom@18.2.0_react@18.2.0/node_modules/next-auth/next/index.js:85:24)\n' +
      '    at async /Users/armin/repos/arminbabaeistudio/abs-platforms/node_modules/.pnpm/next@14.0.2_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/compiled/next-server/app-route.runtime.dev.js:6:62591',
    name: 'Error'
  },
  error_description: 'The redirect_uri MUST match the registered callback URL for this application.',
  providerId: 'github',
  message: 'redirect_uri_mismatch'
}
and when I go to http://app.localhost:3000/api/auth/providers I see

{
    "github": {
        "id": "github",
        "name": "GitHub",
        "type": "oauth",
        "signinUrl": "http://localhost:3000/api/auth/signin/github",
        "callbackUrl": "http://localhost:3000/api/auth/callback/github"
    }
}