-
-
Notifications
You must be signed in to change notification settings - Fork 3.7k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Preact will cause the mongodb package to not be found? #2622
Comments
Are you actually using mongodb, or you tried to add it to fix the problem? We are nearing a major release that will make this problem go away by explicitly requiring users to import the adapters they are using, and in case if you don't, the problem you are reporting just won't exist. Any chance you want to give it a try? Check out https://docs-nextauthjs.vercel.app/getting-started/upgrade-v4 API is pretty much stable now, only expected changes are bug fixes/ minor tweaks. |
Yeah the actual project i am using next-auth in is using mongodb/Mongoose with next-auth. The sandbox just replicates the issue with same preact setup my main project has. I will give V4 a go to see if it fixes the issue. |
Here is a pure mongodb adapter for you as well, then!: https://www.npmjs.com/package/@next-auth/mongodb-adapter It's a PR, but I hope to merge it soon: |
Unfortunately does not seem to work with pReact, Seems like the sessionContext wont accept the session being undefined when the user is logged out. This is the error for more detail
It works fine when i disable pReact. The setup is identical to the one in the codesandbox |
The error you are seeing is because Make sure that you have exactly this in your package.json: And you use the import |
Yeah i updated my code with the docs you sent over, Ive cleared all yarn, npm locks + cache as well as deleted node_modules and .next same issue so i dont think its related to my env. Ill update the code sandbox to replicate the issue. EDIT: package.json "dependencies": {
"@mongoosejs/double": "^0.2.0",
"@next-auth/mongodb-adapter": "^0.0.2-pr.193-6071c497.276",
"@reduxjs/toolkit": "^1.6.1",
"@tailwindcss/forms": "^0.3.2",
"@tailwindui/react": "^0.1.1",
"bcryptjs": "^2.4.3",
"coinbase-commerce-node": "^1.0.4",
"cookies": "^0.8.0",
"ioredis": "^4.27.5",
"mongodb": "^4.1.1",
"mongoose": "^5.12.7",
"mongoose-unique-validator": "^2.0.3",
"next": "11.1.0",
"next-auth": "4.0.0-next.24",
"next-images": "^1.7.0",
"next-plugin-preact": "3.0.6",
"next-seo": "^4.26.0",
"next-swagger-doc": "^0.1.8",
"preact": "10.5.14",
"preact-render-to-string": "5.1.19",
"preact-ssr-prepass": "1.2.0",
"react": "npm:@preact/compat@0.0.4",
"react-dom": "npm:@preact/compat@0.0.4",
"react-icons": "^4.2.0",
"react-multi-carousel": "^2.6.3",
"react-redux": "^7.2.4",
"redux-persist": "^6.0.0",
"swr": "^0.5.6"
}, _app.tsx import Layout from '../components/Layout';
import { store } from '../redux/store';
import '../styles/globals.css';
import * as gtag from '../util/gtag';
import { NextPage } from 'next';
import { SessionProvider } from 'next-auth/react';
import { DefaultSeo } from 'next-seo';
import type { AppProps } from 'next/app';
import { useRouter } from 'next/router';
import React, { useEffect } from 'react';
import { Provider as ReduxProvider } from 'react-redux';
import { persistStore } from 'redux-persist';
import { PersistGate } from 'redux-persist/integration/react';
const App: NextPage<AppProps> = ({ Component, pageProps }) => {
const router = useRouter();
const persistor = persistStore(store);
useEffect(() => {
const handleRouteChange = (url: string): void => {
gtag.pageview(url);
};
router.events.on('routeChangeComplete', handleRouteChange);
return () => {
router.events.off('routeChangeComplete', handleRouteChange);
};
}, [router.events]);
return (
<ReduxProvider store={store}>
<PersistGate loading={null} persistor={persistor}>
<SessionProvider session={pageProps.session}>
<Layout>
<Component {...pageProps} />
</Layout>
</SessionProvider>
</PersistGate>
</ReduxProvider>
);
}; |
Thank you, updating the CodeSandbox will be very helpful! 🙏 I'll look into it once you have it. |
Here is the sandbox with the same issue maybe you can spot something - https://codesandbox.io/s/gracious-night-s346g?file=/next.config.js |
I was able to verify that the problem is with |
So I did test out our PR #2552 that rewrites the core to TypeScript (and also changes the build process quite a bit), and actually, it resolves the problem without more changes! If you want to give it a try: Keep in mind, this is still a work in progress. When merged though, your issue here should be resolved. If you don't like to "live on the edge", I suggest you wait a few days/weeks for us to get the new release over the finish line. 🙂 Hope that helps! |
Im down to live on the edge for a while :), That PR does seem to fix the SessionProvider issue however it seems like the google provider does not work.
import { MongoDBAdapter } from '@next-auth/mongodb-adapter';
import { MongoClient, ObjectId } from 'mongodb';
import NextAuth from 'next-auth';
import GoogleProvider from 'next-auth/providers/google';
const client = new MongoClient('mongodb://127.0.0.1:27017');
export default NextAuth({
providers: [
GoogleProvider({
clientId: process.env.GOOGLE_ID,
clientSecret: process.env.GOOGLE_SECRET,
}),
//TODO: Add Discord and Facebook
],
session: {
jwt: true,
maxAge: 30 * 24 * 60 * 60, // 30 days
},
debug: process.env.DEBUG_NEXTAUTH === 'true',
secret: process.env.NEXT_SECRET,
// TODO: TS interface in types.d.ts is incorrect for JWT options needs to be corrected.
jwt: {
// openssl rand -base64 64
secret: process.env.JWT_SECRET,
// jose newkey -s 512 -t oct -a HS512
signingKey: {
kty: 'oct',
kid: '',
alg: 'HS512',
k: '',
},
verificationOptions: {
algorithms: ['HS256'],
},
encryption: true,
// You can generate an encryption key by using `npx node-jose-tools newkey -s 256 -t oct -a A256GCM -u enc`
encryptionKey: process.env.JWT_ENCRYPTION_KEY,
decryptionKey: process.env.JWT_ENCRYPTION_KEY,
decryptionOptions: {
algorithms: ['A256GCM'],
},
adapter: MongoDBAdapter({
db: () => client.db('db'),
ObjectId,
}),
}); Error
Sign in function onClick={() =>
signIn('google', {
callbackUrl: `${window.location.origin}/`,
})
} |
Lines 33 to 35 in 08349c3
You are right about the |
I dont think the mongo adapter is working, the google call is successful now as the JWT is no longer failing. however when it calls getUserByAccount it absolutely spams my termal with it and exits the application. The OAUTH_CALLBACK_RESPONSE seems correct with all the data. one more seems like useSession is requesting options parameter can this be changed to optional, In index.d.ts its required atm. same [...nextauth].js config as above, just without JWT bit.
|
could you share what you mean by spamming your terminal? I tried myself locally and although didn't use the Google Provider specifically, it did seem to work. |
All it does is spam the getuserbyaccount posted above in terminal. Before it just displays what Google pauth returns with all of the correct data. Seems like the dB and tables don't get created in mongodb |
What do you mean by spamming specifically? Could you please paste anything printed to the terminal? It might be very helpful information there. |
I dont know if i explaied it wrong or not but it literally just spams the
as if it was trying to call the function again if it fails causing the app to exit right after too many calls where made. here is a pic - |
That is strange, I don't have an explanation. There is no retry mechanism anywhere in the core or the adapter. I'll try to reproduce it locally. |
@Patryks1 I reproduced it locally, will investigate now! UPDATE: |
I think you released the wrong version (seems like its main branch not next), But weirdly enough it does work haha. |
Not sure what you mean, here it is on npm it's on the |
Not sure if i am missing something but in the 4.0.0-next.24 i had to change the useSession hooks, Session provider, next-auth/react does not exist and use the adapter instead of the DB. With 4.0.0-next.26 it seems to use the old structure. |
That would be really surprising. You can verify here it's not the case 👀 https://unpkg.com/browse/next-auth@4.0.0-next.26/ |
Seems like it was an yarn issue, using NPM fetched the correct build. Weird how 3.29.0 gives me the mongo dependency issue but if i use 4.0.0-next.26 with yarn it fetches the wrong build but that works fine with preact. any ways with the actual 4.0.0-next.26 and mongoDbAdapter does the client need to be connected? if so do you have any recommendations how to go about that as i am getting the following.
|
Yes, hoping to get the adapter PR merged this weekend. until then, check this page: |
Brilliant it worked :).
Intended? I use google, fb and discord, I can use them as a provider just fine but ofc typescript will complain. Could this be changes to the old one -
|
Awesome! Happy to accept a PR that I can check out locally. let's open a different issue. Sounds like the original problem here is solved! 😊 |
Question 💬
When using nextjs with Preact the database part of auth will fail with -
I have tried to add the OptionalDependenciesand peerOptionalDependencies but both lead to the same error.
Is this a bug / Indented behaviour ? If so is there a way around it while still using preact? Removing pReact will fix this issue.
EDIT:
Looking at previous PR's seems like this is more of a bug, Here is extra details if required -
How to reproduce ☕️
Sandbox - https://codesandbox.io/s/elated-rumple-yu39t
Contributing 🙌🏽
Yes, I am willing to help answer this question in a PR
The text was updated successfully, but these errors were encountered: