Following the guide resulted in 404 not found error

[piyushhanchate]

I followed this guide with the exact steps and deployed the application. Now I get 404 errors on every page. Looks like a lot of other people have faced the same issue, but the solution replies to those are not satisfactory/up to date

[devonsoto]

You have to go to http://app.localhost:3000/ or try adding login to the end of that. If you don't set up your own domains

[yoschoolist]

Hello, did any one get to resolve this issue. I followed the same guide with the exact steps and deployed the application. Now I get 404 errors on every page.

[c-johnson]

I'm also having this issue. I filled out all the environment variables, and even added a custom domain (app.anticarbs.com) for nonlocal deployments.

I notice the repo doesn't actually have an .env file, only an .env.example file, so not sure if I need to copy those keys over in the repository code itself or whether the configured environment variables in the dashboard project settings should suffice. I've double-checked them all and they all seems reasonable and I followed the guide to produce them, but still getting 404 errors when I tried to load the landing page.

Next likely culprit to look at is the postgres integration, so maybe I'll learn something there.

[jesper-bylund]

Also having this issue. This repo doesn't seem to have any support though?

[steven-tey]

Just merged #323 which should fix this issue! Anyone still facing this problem?

[cameronking4]

I'm also having this issue. I filled out all the environment variables, and even added a custom domain (app.anticarbs.com) for nonlocal deployments.

I notice the repo doesn't actually have an .env file, only an .env.example file, so not sure if I need to copy those keys over in the repository code itself or whether the configured environment variables in the dashboard project settings should suffice. I've double-checked them all and they all seems reasonable and I followed the guide to produce them, but still getting 404 errors when I tried to load the landing page.

Next likely culprit to look at is the postgres integration, so maybe I'll learn something there.

Same here, i can only get to the Github login screen. After authorizing with Github it returns back to Login. No other pages work and returns 404 on Github page. Triple checked env and its deployed to custom domain: https://support.plus

[lexsemenenko]

Hello, did any one get to resolve this issue. I followed the same guide with the exact steps and deployed the application. Now I get 404 errors on every page.

Not sure if it's the same, but I was getting 404 after succesful login via github. But if your app doesn't have any blog posts created, it redirects to 404, in code, if posts == null redirect to 404. Try to create posts. Unless you have a different issue. The repo worked for me

[cameronking4]

@steven-tey @lexsemenenko I did create posts: https://cameron-king.support.plus/ -->
https://cameron-king.support.plus/clncebft40003l9088j942qp8

Another site:
https://cashlytics.support.plus/
https://cashlytics.support.plus/clncb4it80003l2081i9dn43q

Here's my repo:
https://github.com/cameronking4/platforms

[ybidois]

Hey @cameronking4, I ran into the same issue, and I solved it by setting up my custom domain correctly in Vercel:

• Link your domain to Vercel Nameservers (NS) if you've bought it externally
• Add your root domain support.plus to your project and redirect www.support.plus to it (not the other way around)
• Add your domain with a wildcard to your project: *.support.plus

You can learn more about Vercel Nameservers and wildcard domains here: https://vercel.com/docs/projects/domains/add-a-domain#using-wildcard-domain.

You've probably moved to other things since then, but in case you want to try it or if someone else runs into the problem.

[ThomasBarnekow]

Hi, I have the problem that "it works" locally, using http://app.localhost:3000, but not once deployed. The deployed site only shows a nicely rendered "404 | This page could not be found", regardless of which page I am hitting (e.g., root, /login).

I deployed the template directly, creating my GitHub repo from it. I did not use any custom domain in the first attempt but sticked to vercel.app initially. Later, I added a custom domain of my own, creating a CNAME record in my DNS settings. Both the auto-generated domain (which looks like platforms-starter-kit-AB-CDEF.vercel.app) and my custom domain (which looks like platforms.DOMAIN.COM) resolve to the same IP address.

I have not added wildcard domains. I would have to change the name servers in my DNS, which I did not want to do without knowing whether that is really necessary. For the auto-generated domain, I can't even add wildcard domains. Again, both domains (auto-generated and custom) only show a 404 page.

Am I missing anything?

[ThomasBarnekow]

@ybidois, I've tried your approach just now. However, that does not seem to work either. I can only assume there is some issue in the codebase. @steven-tey, can you help and point me into the right direction?

• I had another, unused domain, which I linked to the Vercel nameservers by adding the NS records (ns1.vercel-dns.com and ns2.vercel-dns.com) to my DNS settings.
• I added the root domain (let's use domain.com for illustration) to the project and redirected www.domain.com to domain.comin the domain settings.
• I added the wildcard domain *.domain.com to my project.

When pinging the domain and subdomains, I am getting the following at the moment:

• domain.com: 76.76.21.61
• www.domain.com: 76.76.21.61 (always the same as domain.com)
• app.domain.com: 76.76.21.241 (always different from the two above)

The IP addresses for domain.com and www.domain.com are always equal. However, both addresses are changing over time. The IP address for app.domain.com has been different from the other two in my tests.

Again, "it works on my machine", using app.localhost:3000.

[ThomasBarnekow]

@ybidois and @steven-tey, I finally made it work! The one thing that was missing was to set the NEXT_PUBLIC_ROOT_DOMAIN environment variable to the custom domain (domain.com) in the example above. Previously, it was still set to the apex domain vercel.app of the auto-generated domain (platforms-starter-kit-AB-CDEF.vercel.app in my initial post). As that never worked, I assume I should have set NEXT_PUBLIC_ROOT_DOMAIN to equal the full, auto-generated domain instead of just vercel.app. Correct?

[pdlipman]

@ybidois @steven-tey @ThomasBarnekow For my project https://pedal-cms-next.vercel.app/ I've tried setting NEXT_PUBLIC_ROOT_DOMAIN to vercel.app, pedal-cms-next.vercel.app, and pedal-cms-next-klne1tlux-pdlipman.vercel.app and I'm still getting 404s. I'm guessing it requires a custom domain at this point (but I could be missing something too, wouldn't be the first time 😄 )

[isturiz]

@cameronking4 Were you able to solve the problem? I also have the same problem.

[VSVS]

I've tried to deploy 3 times from scratch following the guide and their clone/deploy page and still getting a 404 as well.

[graham-fleming]

same

[itsarminbabaei]

Hey there,

Running into a bit of a wall with this one – it's a known issue, but I'm drawing blanks on support from Vercel or the community. Could really use a hand to sort it out.

Thanks!

#368

middleware.ts

import { NextRequest, NextResponse } from "next/server";
import { getToken } from "next-auth/jwt";

export const config = {
  matcher: [
    /*
     * Match all paths except for:
     * 1. /api routes
     * 2. /_next (Next.js internals)
     * 3. /_static (inside /public)
     * 4. all root files inside /public (e.g. /favicon.ico)
     */
    "/((?!api/|_next/|_static/|_vercel|[\\w-]+\\.\\w+).*)",
  ],
};

export default async function middleware(req: NextRequest) {

  console.log('Middleware hit!');

  const url = req.nextUrl;

  // Get hostname of request (e.g. demo.vercel.pub, demo.localhost:3000)
  let hostname = req.headers
    .get("host")!
    .replace(".localhost:3000", `.${process.env.NEXT_PUBLIC_ROOT_DOMAIN}`);

    console.log('Hostname:', hostname);

  // special case for Vercel preview deployment URLs
  if (
    hostname.includes("---") &&
    hostname.endsWith(`.${process.env.NEXT_PUBLIC_VERCEL_DEPLOYMENT_SUFFIX}`)
  ) {
    hostname = `${hostname.split("---")[0]}.${
      process.env.NEXT_PUBLIC_ROOT_DOMAIN
    }`;
  }

  const searchParams = req.nextUrl.searchParams.toString();
  // Get the pathname of the request (e.g. /, /about, /blog/first-post)
  const path = `${url.pathname}${
    searchParams.length > 0 ? `?${searchParams}` : ""
  }`;

  console.log('Path:', path);

  // rewrites for app pages
  if (hostname == `app.${process.env.NEXT_PUBLIC_ROOT_DOMAIN}`) {
    const session = await getToken({ req });

    console.log('Session:', session);

    if (!session && path !== "/login") {

      console.log('Redirect to /login');
      
      return NextResponse.redirect(new URL("/login", req.url));
    } else if (session && path == "/login") {
      return NextResponse.redirect(new URL("/", req.url));
    }
    return NextResponse.rewrite(
      new URL(`/app${path === "/" ? "" : path}`, req.url),
    );
  }

  // special case for `vercel.pub` domain
  if (hostname === "vercel.pub") {
    return NextResponse.redirect(
      "https://vercel.com/blog/platforms-starter-kit",
    );
  }

  // rewrite root application to `/home` folder
  if (
    hostname === "localhost:3000" ||
    hostname === process.env.NEXT_PUBLIC_ROOT_DOMAIN
  ) {
    return NextResponse.rewrite(
      new URL(`/home${path === "/" ? "" : path}`, req.url),
    );
  }

  // rewrite everything else to `/[domain]/[slug] dynamic route
  return NextResponse.rewrite(new URL(`/${hostname}${path}`, req.url));
}

Middleware hit!
Hostname: app.localhost:3000
Path: /login
Session: null
 ✓ Compiled /app/login in 372ms (1643 modules)
 ✓ Compiled /api/auth/[...nextauth] in 98ms (1096 modules)
[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.'
}

I have NEXTAUTH_URL=http://app.localhost:3000 and NEXT_PUBLIC_ROOT_DOMAIN=localhost:3000 in my .env

Github callback URL http://localhost:3000/api/auth/callback/github

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!

this is what I get when I change the callback URL 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'
}
[next-auth][error][OAUTH_CALLBACK_ERROR] 
https://next-auth.js.org/errors#oauth_callback_error redirect_uri_mismatch {
  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'
}

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"
    }
}

[piclez]

@ThomasBarnekow solution worked for me locally so http://app.localhost:3000 now shows:
Edit this page on app/home/page.tsx instead of 404 not found. But I cannot login to add new sites:
http://app.localhost:3000/login I get 404.

I have setup Github App callbacks url correctly.

[RobSteele]

I have the same issue @piclez . Did everyone deploy from the vercel template GUI first ?

[piclez]

@RobSteele I got it working setting NEXT_PUBLIC_ROOT_DOMAIN to a custom domain I setup. Yes I deployed importing from a github repo.

[matthewvb77]

Steps to check from the guide:

• NEXT_PUBLIC_ROOT_DOMAIN is set to your custom root domain
• NextAuth.js GitHub callback URLs are set up correctly
• In Vercel project, root domain and wildcard domain are added
• Use Nameservers method: select 'Custom DNS' at your DNS provider and paste in Vercel's Nameservers
• Update Next.js (it was still broken on localhost until I updated)

[dolf0204]

Just merged #323 which should fix this issue! Anyone still facing this problem?

Yes, not working in production mode (any route except root wich points to home) results in 404.

in localhost it works as expected

[YannisHaismann]

Same here, any solution ?

[YannisHaismann]

Just merged #323 which should fix this issue! Anyone still facing this problem?

Yes, not working in production mode (any route except root wich points to home) results in 404.

in localhost it works as expected

Have you find a solution ?

[tutnyal]

Just merged #323 which should fix this issue! Anyone still facing this problem?

Yes, not working in production mode (any route except root wich points to home) results in 404.
in localhost it works as expected

Have you find a solution ?

I had the same error.

The solution is to NOT skip the domain configuration on this guide

To explain further, I'll write the steps that solved for me:

1. Add your custom domain to your Vercel project domains settings:

• Add both your base domain (yourdomain.com) and also wildcard domain (*.yourdomain.com)
  As I have seen, .vercel.app domains don't work with wildcard, so you SHOULD use a custom domain instead of .vercel.app

2. Add your domain to the middleware.ts file:

• Add .yourdomain.com to this line (replace .vercel.pub with your domain)
• Add yourdomain.com to this line (replace platformize.vercel.app with your domain)

This was very helpful. Thanks!

also, for those still facing the issue, do the above. Here is how I fixed mine.

My hostname or NEXT_PUBLIC_ROOT_DOMAIN is "ainime.me"

1. In vercel, don't forget to change the NEXT_PUBLIC_ROOT_DOMAIN under settings/environment variables.
   

2. In your middleware.ts file, bc I added the wildcard domain(*.ainime.me" I made sure to add the "www" to my domain name. the "Get hostname of request" part of the code will change your host name to ".ainime.me" instead of "ainime.me" This will make the middleware think this is a page URL in your app/platform, but it doesn't exist so it returns a 404page not found. see what I did below.
   if ( hostname === "www.ainime.me" || "ainime.me" || hostname === process.env.NEXT_PUBLIC_ROOT_DOMAIN ) { return NextResponse.rewrite( new URL(/home${path === "/" ? "" : path}, req.url), ); }

3. now with this middleware.ts file change, in vercel under your project domain settings, make sure to forward the domain without the "www." in front(ainime.me), to the one with it(www.ainime.me). See mine below
   

I hope this helps, I spent 2 days on it.

[wbuc]

2. hostname === "www.ainime.me" || "ainime.me" || hostname === process.env.NEXT_PUBLIC_ROOT_DOMAIN

Thanks for this it solved my problem. But I'm still unable to access the sub domains with 404. Have you changed anything to cater for that?

[ebakken]

• Update Next.js (it was still broken on localhost until I updated)

Thank you! This solved it for me.

[EricStrohmaier]

2. hostname === "www.ainime.me" || "ainime.me" || hostname === process.env.NEXT_PUBLIC_ROOT_DOMAIN

Thanks for this it solved my problem. But I'm still unable to access the sub domains with 404. Have you changed anything to cater for that?

I am also here right now hahah
@tutnyal any idea ?

[EricStrohmaier]

2. hostname === "www.ainime.me" || "ainime.me" || hostname === process.env.NEXT_PUBLIC_ROOT_DOMAIN

Thanks for this it solved my problem. But I'm still unable to access the sub domains with 404. Have you changed anything to cater for that?

I am also here right now hahah @tutnyal any idea ?

AAAHHH! If you are still here like I was. if you set the NEXT_PUBLIC_ROOT_DOMAIN make sure here is no ENTER/RETURN sim bole or extra space at the hostname you put in ....

[Singh-AP]

2. In your middleware.ts file, bc I added the wildcard domain(*.ainime.me" I made sure to add the "www" to my domain name. the "Get hostname of request" part of the code will change your host name to ".ainime.me" instead of "ainime.me" This will make the middleware think this is a page URL in your app/platform, but it doesn't exist so it returns a 404page not found. see what I did below.
   if ( hostname === "www.ainime.me" || "ainime.me" || hostname === process.env.NEXT_PUBLIC_ROOT_DOMAIN ) { return NextResponse.rewrite( new URL(/home${path === "/" ? "" : path}, req.url), ); }

This worked! Thanks tutnyal!

Nit: Rewriting the code as a code block below as in the above format tildas aren't copied when someone copies them directly.

if ( hostname === "www.ainime.me" || "ainime.me" || hostname === process.env.NEXT_PUBLIC_ROOT_DOMAIN   ) { return NextResponse.rewrite( new URL(`/home${path === "/" ? "" : path}`, req.url), );   }

[farajabien]

I fixed the issue by first ensuring wildcard domains like *.<MYDOMAIN.COM> and platforms.<MYDOMAIN.COM> were properly set up in my project. Then, I adjusted the auth.js configuration to handle GitHub profiles without emails:

profile(profile) {
  return {
    id: profile.id.toString(),
    name: profile.name || profile.login,
    gh_username: profile.login,
    email: profile.email || `${profile.login}@no-email.com`,
    image: profile.avatar_url,
  };
}

Additionally, I added a fallback string to my drizzle.config.ts where I hard-coded the PostgreSQL URL. This change allowed the build to succeed.