I am trying to deploy a NextJs application to vercel, I am using next auth to authenticate via discord.
Locally it is working fine. The right callback URL's are all configured and NEXT_AUTH_URL is configured too.
export default NextAuth({
providers: [
DiscordProvider({
clientId: process.env.DISCORD_CLIENT_ID,
clientSecret: process.env.DISCORD_CLIENT_SECRET
})
],
secret: process.env.SECRET,
jwt: {
signingKey: process.env.JWT_SIGNING_PRIVATE_KEY,
},
database: process.env.DATABASE_URL,
adapter: PrismaAdapter(prisma),
})
When trying to log in on the deployed site, however, I am receiving a 500 CLIENT_FETCH_ERROR.
Maybe it is something with keys in enviroment:
use keys in this format : process.env.NEXT_PUBLIC_JWT_SIGNING_PRIVATE_KEY
I have found what it was.
I had made changes to the prisma schema before it stopped working.
Vercel had cached the old prisma client, which was generated with the old schema.
I had to update my build settings and perform a redeployment to clear the cache and regenerate the prisma client to be up to date.
This is the build command I configured on vercel, after that I simply had to trigger a redeployment.
prisma generate && next build
Related
I have a two basic next apps that uses next-auth for its authentication along with keycloak provider.
i've been trying to use the feature of SSO (single sign on) that keyckoak provides, so i have a website running on http://localhost:3000/ and another one on http://localhost:3001/, and everytime i try to login using the second app, it redirects me to localhost 3000, not localhost 3001, which is a weird behavior, let me show you some code.
api/auth/[...nextauth].ts
(note: i'm using same realm and clientId for both apps)
import NextAuth from "next-auth/next";
import KeycloackProvider from "next-auth/providers/keycloak";
export default NextAuth({
debug: true,
providers: [
KeycloackProvider({
clientId: "react-client-1",
clientSecret: "react-auth",
issuer: "http://localhost:8080/realms/react-auth",
enter image description here }),
],
});
Function to sign in
here, the callbackUrl just doesn't work, no matter what i put there, it's just not going to redirect me to that url
const handleKeycloackSignIn = (): void => {
signIn("keycloak", {
callbackUrl: "http://localhost:3001/",
});
};
next-auth cookies for redirecting on localhost:3001
photo #1
Keycloack config
photo #2
What could be the reason for always redirecting to localhost:3000 ? is it some next-auth config that i'm missing or, maybe is related to keycloak ?
How can i redirect to wherever i want after a successful login/logout
I've tried hardcore google search around this topic, nothing really related to my specific issue.
You need to add some variables that next-auth need to your .env file, something like this.
NEXTAUTH_URL=http://localhost:3000/
NEXTAUTH_SECRET=PRUEBA
this provides the url to redirect and a secret to your jwt token
There was a driver for connecting to the Datastax Astra-DB Cassandra Database in node.js called 'cassandra-driver'. For legacy connection It uses a connection secret key file named secure-connect-{DB-Name}.zip, syntax like this:
const client = new Client({
cloud: {
secureConnectBundle: 'Address of the zipped file'
},
credentials: {
username: 'This is client_id',
password: 'This is client_secret',
},
});
In local the syntax works well but when I deploy it on AWS Amplify, since the file does not put in Next.js bundle, A file not found error will be raised. Now the Question: Is there any way to keep the file in Amplify itself inside Next.js bundle and not upload it on external storage (like S3 , a silly way!) to access?
This is the logs
I have built an amazon clone and when i deployed it to vercel the signin with google is not working, and i got this error:
Server error
There is a problem with the server configuration.
Check the server logs for more information.
i have added my environement variables
Kindly share screenshot of the browser console so we can get some more clarity on the error.
I had also faced a similar error once, I'll tell you how I resolved it. It may work out for you as well.
Check in your .env file if you have changed the callback URL to the deployment url and not localhost
You may need to generate a Nextauth secret key. You can easily do so by running the below command.
openssl rand -base64 32
This will give you a alphanumeric string. Copy and paste that as NEXTAUTH_SECRET = 'generated-value' in the .env file
Then in your pages/api/auth/[...nextauth.js] file, add this secret as well like shown below.
import NextAuth from "next-auth"
import GoogleProvider from "next-auth/providers/google"
export default NextAuth({
providers: [
GoogleProvider({
clientId: process.env.GOOGLE_CLIENT_ID,
clientSecret: process.env.GOOGLE_CLIENT_SECRET,
}),
secret: process.env.NEXTAUTH_SECRET
],
})
If this works out it's good, else you have to share your console log's screenshot so we can debug further if needed.
I have resolved this issue , if added uri on the cridentials of my project on google cloud platform and i added also a NEXTAUTH_SERET and redeployed the build
THank you everyone
hi I had the same problem and I added NEXTAUTH_SECRET and it show an error with secret: process.env.NEXTAUTH_SECRET
I followed some simple instructions to set-up next-auth and cognito as per https://www.youtube.com/watch?v=U4hEflgix9c&t=8s&ab_channel=EvanDoesTech
It works on localhost but then I tried to deploy to Vercel and I get 404 error when clicking sign-in -> [vercel website domain]/api/auth/providers returns 404. This is the error message: ["providers",{"name":"SyntaxError","message":"Unexpected token < in JSON at position 0","stack":"SyntaxError: Unexpected token < in JSON at position 0"}]
On Vercel, I've manually configured env variables including setting NEXTAUTH_URL to https://[my custom domain name].vercel.app
This is my code so far (pages/api/auth/[...nextauth].js) and I used next-auth V3 to keep it consistent with the YouTube tutorial:
import NextAuth from 'next-auth';
import Providers from 'next-auth/providers';
export default NextAuth({
providers: [
Providers.Cognito({
clientId: process.env.COGNITO_CLIENT_ID,
clientSecret: process.env.COGNITO_CLIENT_SECRET,
domain: process.env.COGNITO_DOMAIN,
}),
],
secret: process.env.NEXTAUTH_SECRET,
});
This wasn't a problem before and is currently not a problem in my production deployment. But now I get this response when I start up my dev environment and try google OAuth signin:
"API key not valid. Please pass a valid API key."
This is my firebase setup:
// firebase.js
import "firebase/auth";
import firebase from "firebase/app";
if (typeof window !== "undefined" && !firebase.apps.length) {
firebase.initializeApp({
apiKey: process.env.NEXT_PUBLIC_API_KEY,
authDomain: process.env.NEXT_PUBLIC_AUTH_DOMAIN,
projectId: process.env.NEXT_PUBLIC_PROJECTID
})
firebase.initializeApp(firebaseConfig);
firebase.auth().setPersistence(firebase.auth.Auth.Persistence.SESSION);
}
export { firebase };
// .env.local
NEXT_PUBLIC_API_KEY=<private>
NEXT_PUBLIC_AUTH_DOMAIN=<private>
NEXT_PUBLIC_PROJECTID=<private>
When looking at the http request made from both environments, there are two differences in the urls:
deployed: https://www.googleapis.com/identitytoolkit/v3/relyingparty/getProjectConfig?key=(api key)=(some random number)
development: https://www.googleapis.com/identitytoolkit/v3/relyingparty/getProjectConfig?key=(api key)=(some random number)
The api keys are exactly the same but the (some random number) are different. I don't know if this reveals anything but that's all I can see that's different. I'm not sure as to what happened because this was working before both in dev and in the deployed version. Now it just works only in the deployed.