CODEWITHSUNDEEP
javascriptreactjsfirebasenext.jsvercel
ProgrAMmeR
ProgrAMmeR

Reputation: 41

Failed to load resource: the server responded with a status of 500. Deployed react app with vercel

Hello I have error on deployed version of max app. App is deployed with vercel and when I click login in button in application I receive this error "Server error There is a problem with the server configuration. Check the server logs for more information."error1

When I check console in console can see this message "Failed to load resource: the server responded with a status of 500 ()"

My code for authentication is this

import NextAuth from "next-auth";
import GoogleProvider from "next-auth/providers/google";

export default NextAuth({
  // Configure one or more authentication providers
  providers: [
    GoogleProvider({
      clientId: process.env.GOOGLE_CLIENT_ID,
      clientSecret: process.env.GOOGLE_CLIENT_SECRET,
    }),
    // ...add more providers here
  ],
  pages: {
    signIn: "/auth/signin",
  },
  callbacks: {
    async session({ session, token, user }) {
      session.user.username = session.user.name
        .split(" ")
        .join("")
        .toLocaleLowerCase();

      session.user.uid = token.sub;
      return session;
    },
  },
});

Code for login page is this

import { getProviders, signIn as SignIntoProvider } from "next-auth/react";
import Header from "../../components/Header";

function signIn({ providers }) {
  return (
    <>
      <Header />
      <div className="flex flex-col items-center justify-center min-h-screen py-2 -mt-55 px-14 text-center">
        <img className="w-80" src="http://links.papareact.com/ocw" alt="" />
        <p className="font-xs italic">
          This is not a REAL app, it is built for educational purposes only
        </p>

        <div className="mt-40">
          {Object.values(providers).map((provider) => (
            <div key={provider.name}>
              <button
                className="p-3 bg-blue-500 rounded-lg text-white"
                onClick={() => SignIntoProvider(provider.id, { callbackUrl: "/"})}
              >
                Sign in with {provider.name}
              </button>
            </div>
          ))}
        </div>
      </div>
    </>
  );
}

export async function getServerSideProps() {
  const providers = await getProviders();
  return {
    props: {
      providers,
    },
  };
}

export default signIn;

In localhost everything is good but in deployed version I receiving error.

Vercel log is

[GET] /api/auth/error
14:16:09:08
2021-12-22T13:16:09.140Z    e3d29912-86c7-49c8-91a9-ecb87758e1a9    ERROR   [next-auth][error][NO_SECRET] 
https://next-auth.js.org/errors#no_secret Please define a `secret` in production. MissingSecret [MissingSecretError]: Please define a `secret` in production.
    at assertConfig (/var/task/node_modules/next-auth/core/lib/assert.js:24:14)
    at NextAuthHandler (/var/task/node_modules/next-auth/core/index.js:34:52)
    at NextAuthNextHandler (/var/task/node_modules/next-auth/next/index.js:16:51)
    at /var/task/node_modules/next-auth/next/index.js:52:38
    at Object.apiResolver (/var/task/node_modules/next/dist/server/api-utils.js:102:15)
    at processTicksAndRejections (internal/process/task_queues.js:95:5)
    at async Server.handleApiRequest (/var/task/node_modules/next/dist/server/next-server.js:1064:9)
    at async Object.fn (/var/task/node_modules/next/dist/server/next-server.js:951:37)
    at async Router.execute (/var/task/node_modules/next/dist/server/router.js:222:32)
    at async Server.run (/var/task/node_modules/next/dist/server/next-server.js:1135:29) {
  code: 'NO_SECRET'
}

Upvotes: 4

Views: 6359

Answers (2)

Den Pat
Den Pat

Reputation: 1254

If by any change, you are using version 3.27.3 of next-auth then upgrade to 3.29.3 and it should solve the issue: more info: https://github.com/nextauthjs/next-auth/issues/4709

Upvotes: 0

Mary
Mary

Reputation: 61

You should generate a NEXTAUTH_SECRET using this command 'openssl rand -base64 32' , add your NEXTAUTH_SECRET=generatedSecret to .env file and update your nextauth.js file.

import NextAuth from "next-auth";
import GoogleProvider from "next-auth/providers/google";

export default NextAuth({
   providers: [
     GoogleProvider({
      clientId: process.env.GOOGLE_ID,
      clientSecret: process.env.GOOGLE_SECRET,
     }),
   ],
  secret: process.env.NEXTAUTH_SECRET,
});

Check https://next-auth.js.org/configuration/options#secret for more information

Upvotes: 6

Related Questions