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
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
I need some help to get me started with NextAuth.js
Following this guide I am trying to add Google authentication with existing Next.js app. I registered an app via Firebase and got GOOGLE_ID and GOOGLE_SECRET which I set in the app. Here is my [...nextauth].js:
import NextAuth from "next-auth";
import GoogleProvider from "next-auth/providers/google";
export const authOptions = {
providers: [
GoogleProvider({
clientId: process.env.GOOGLE_ID,
clientSecret: process.env.GOOGLE_SECRET,
}),
// ...add more providers here
],
};
export default NextAuth(authOptions);
.env.local file:
GOOGLE_ID=xxx
GOOGLE_SECRET=xxx
NEXTAUTH_URL=http://localhost:3000
Then in the component I import:
import { signIn, signOut, useSession } from "next-auth/react";
Then I call it like this:
<div className="link" onClick={signIn}>
<p>Hello Alex Smith</p>
<p className="font-extrabold md:text-sm">Account & Lists</p>
</div>
Then weird stuff begins. Then I click on the div, I get to see button: Login With Google and URL is:http://localhost:3000/api/auth/signin?callbackUrl=http%3A%2F%2Flocalhost%3A3000%2F
When I click on it, I get Internal Server Error and URL is:http://localhost:3000/api/auth/signin/google
Also in terminal I see: ReferenceError: ReadableStream is not defined popping up. Don't know if that is relevant.
Strangely, in Google console I see no trace of app registered in Firebase.
I tried creating OAuth client manually and getting different set of credentials, switching Google account - to no avail.
I always hit that error and cannot go further. They say NextAuth is super easy to integrate, however...
Found the cause was do do with version of Node.
Updated it to the latest version and that fixed the issue.
Now can can log in.
Finally, I (un)successfully deployed my new app. I had many errors on production like, I was used tutorial to implement login/rest/register part and there was an error that login.js not correctly import signInWithEmailAndPassword from ./firebase so I just import it from import {signInWithEmailAndPassword} from "firebase/auth"; as is should. I had another error like Error [FirebaseError]: Firebase: Error (auth/invalid-api-key). on but I just change my variable to be in quotes "NEXT(...) " .
But now I deployment everything and it should work perfect, but when I try to login in I see an alert Firebase: Error (auth/api-key-not-valid.-please-pass-a-valid-api-key.).
and do not know what I suppost to do to fix it.
Not only login form do not work, but also do not work any of other section of application. I can fetch date etc.
btw. i depoleyd on Vercel.
btw. it all work perfect on local
update.
I updated variable in verbal environmental variable like
NEXT_PUBLIC_MEASUREMENT_ID but there is no difference. In documentation is written that it should be ````NEXT_PUBLIC_VERCEL_MEASUREMENT_ID``` but this approach do not work.
in my env.local:
NEXT_PUBLIC_VERCEL_API_KEY=
in my env
NEXT_PUBLIC_VERCEL_API_KEY=
(it is in gitignore)
in Vercel server all variable are the same
NEXT_PUBLIC_VERCEL_API_KEY=
To solve my problem with no access to firebase in production I had to do many things:
correctly set variables
set up authorised domain
ad1
npm i -g vercel
Vercel env add NAME
then connect to variable and select what kind of variable it is (using space).
variable should look like NEXT_PUBLIC_KEY_API="..." and used as process.env.NEXT_PUBLIC_API_KEY (without "...").
then Vercel --prod
ad 2 Authentication => settings =>.
Authorized domains and add domain.
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
After running the following line in node-js:
import * as admin from "firebase-admin";
import * as serviceAccount from "../../firebase_service_account_key.json";
const app = admin.initializeApp({
credential: admin.credential.cert(serviceAccount as any),
databaseURL: "https://my-app-path.firebaseio.com"
});
admin.messaging().send({
token: "known-good-token",
notification: {
title: "Test Push Note",
body: "Here is some text"
}
});
I'm getting the error:
Error: Auth error from APNS or Web Push Service
Raw server response:
"{
"error":{
"code":401,
"message":"Auth error from APNS or Web Push Service",
"status":"UNAUTHENTICATED",
"details"[
{
"#type":"type.googleapis.com/google.firebase.fcm.v1.FcmError",
"errorCode":"THIRD_PARTY_AUTH_ERROR"
},
{
"#type":"type.googleapis.com/google.firebase.fcm.v1.ApnsError",
"statusCode":403,
"reason":"InvalidProviderToken"
}
]
}
}"
I've added an "APNs Authentication Key" to my ios project under the Settings > Cloud Messaging section of Firebase. I've also properly downloaded and imported my service account json file.
In terms of research, I've tried looking up the errors.
For the InvalidProviderToken error, this answer seems to indicate I'm using an old token. This is totally possible, but the logs on my app and database appear to match, so it seems off.
As for the THIRD_PARTY_AUTH_ERROR, google gave me no hits. The closest thing I found was this, and the following text might be the culprit (EDIT: it's not the issue):
auth/unauthorized-domain
Thrown if the app domain is not authorized for OAuth operations for your Firebase project. Edit the list of authorized domains from the Firebase console.
Does anyone have anymore details on this error which might help me get to the bottom of it?
This error arises if your app setup for iOS has an error in any one of the following:
Found in Settings > General > Your Apps > iOS Apps:
App Store ID
Bundle ID
Team ID
When adding an APNs key (Uploading to Cloud Messaging > APNs Authentication Key):
Team ID (should auto set based off ios app info above)
Key Id (often is in the name of the key, best to grab when creating it)
Everything worked for me the other day, so all setup was fine. But today I got this error.
Here's what solved it for me:
Revoked APNs Key
Created new one and downloaded it
Deleted old one and Uploaded it to Firebase Dashboard / Settings /
Cloud Messaging
Gone to Settings / Service Accounts and generated new private key
Added it to my Cloud Functions project (renamed it to
service-account.json in my case)
Saved the files and deployed the functions: firebase deploy --only
functions
Did you call admin.initializeApp()?
There are many official samples.
See:
https://github.com/firebase/functions-samples/blob/master/fcm-notifications/functions/index.js#L20
https://github.com/firebase/functions-samples/tree/master/fcm-notifications
https://github.com/firebase/functions-samples
https://github.com/firebase/quickstart-js/tree/master/messaging
I had the same issue. The culprit was lowercase APNs teamId. Changing it to capital solved it.
Double check if you have uploaded your apns key on firebase console. That was my case.