I am making a sign up page with 3 providers (Twitter, Facebook and Instagram) using next-auth and prisma with mongoDB. The issue appears when I try to sign up with any of the providers. Here is my nextauth.js file.
import NextAuth from "next-auth"
import { PrismaAdapter } from "#next-auth/prisma-adapter"
import { PrismaClient } from '#prisma/client';
import InstagramProvider from "next-auth/providers/instagram";
import TwitterProvider from "next-auth/providers/twitter";
import FacebookProvider from "next-auth/providers/facebook";
const prisma = new PrismaClient();
export default NextAuth({
adapter: PrismaAdapter(prisma),
providers: [
InstagramProvider({
clientId: process.env.INSTAGRAM_CLIENT_ID,
clientSecret: process.env.INSTAGRAM_CLIENT_SECRET
}),
TwitterProvider({
clientId: process.env.TWITTER_CLIENT_ID,
clientSecret: process.env.TWITTER_CLIENT_SECRET,
version: "2.0",
}),
FacebookProvider({
clientId: process.env.FACEBOOK_CLIENT_ID,
clientSecret: process.env.FACEBOOK_CLIENT_SECRET
}),
],
session: {
strategy: 'jwt',
},
});
I have tried to reinstall all the dependencies, because I don't see what else could be the problem. At first I thought it was the dependencies so I reinstall all the dependencies.
The problem is in your adapter in the [nextauth].js file or wherever you are declaring the prisma instance.
Check out those similar discussions:
https://github.com/nextauthjs/next-auth/discussions/4152
Integrating Prisma Adapter with Next Auth - Unexpected token 'export'
The issue actually comes from the prisma schema. I fixed it after reading the next auth documentation about prisma and mongoDB.
Related
import NextAuth from "next-auth"
import { PrismaAdapter } from "#next-auth/prisma-adapter"
import prisma from "../../../lib/prismadb"
import InstagramProvider from "next-auth/providers/instagram";
import TwitterProvider from "next-auth/providers/twitter";
import FacebookProvider from "next-auth/providers/facebook";
export default NextAuth({
adapter: PrismaAdapter(prisma),
providers: [
InstagramProvider({
clientId: process.env.INSTAGRAM_CLIENT_ID,
clientSecret: process.env.INSTAGRAM_CLIENT_SECRET
}),
TwitterProvider({
clientId: process.env.TWITTER_CLIENT_ID,
clientSecret: process.env.TWITTER_CLIENT_SECRET,
version: "2.0",
}),
FacebookProvider({
clientId: process.env.FACEBOOK_CLIENT_ID,
clientSecret: process.env.FACEBOOK_CLIENT_SECRET
})
],
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
enter image description hereI am trying to make a website with option to sign up with twitter with next auth.
I have watched all the videos about setting it up but nothing works and this error still appears
I have the twitter client and the twitter client id in the .env provided from twitter
It was because of the redirect URl which has to have "/api/auth/callback/twitter" in the end of your domain
User data isn't saving to mongo, I did this a while ago but I can't seem to get it to work now. I'm using "mongodb": "^3.5.9" so it's not a version error and I can also connect to the database outside of NextAuth, so it's not a connection issue from what I can see.
[...nextauth].js
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
})
],
jwt: {
secret: process.env.JWT_SECRET,
},
database: process.env.DATABASE_URL,
})
.env
GOOGLE_CLIENT_ID =
GOOGLE_CLIENT_SECRET =
NEXTAUTH_URL = http://localhost:3000
JWT_SECRET =
DATABASE_URL = mongodb+srv://username:password#cluster0.klwliur.mongodb.net/?retryWrites=true&w=majority
I git clone & copy MUI Nextjs example project & start from there.
From NextAuth portal, they said I can just copy mongodb adapter setup here and basically it will work well out of the box. I placed this file in this path: /src/lib/mongodb.js
Here I'm using CredentialsProvider. Basically I'm using my own form for login & authentication process.
Here my /pages/api/auth/[...nextauth].js file:
import { MongoDBAdapter } from "#next-auth/mongodb-adapter";
import NextAuth from 'next-auth';
import CredentialsProvider from 'next-auth/providers/credentials';
import clientPromise from "../../../src/lib/mongodb";
export default NextAuth({
secret: process.env.SECRET,
adapter: MongoDBAdapter(clientPromise),
providers: [
CredentialsProvider({
async authorize(credentials) {
const { email, password } = credentials
if(email !== 'test#test.com' || password !== 'password123') {
throw new Error('User does not exists. Please make sure you insert the correct email & password.')
}
return {
id: 1,
name: 'Tester',
email: 'test#test.com'
}
}
})
],
callbacks: {
redirect: async ({ url, baseUrl }) => {
return baseUrl
}
}
})
What I understood, I can just straight away use this adapter & it will create 4 models/tables (User, Session, Account, VerificationToken) by default. So I don't need to create them myself. Ref doc here
According to the NextAuth MongoDB Adapter documentation, I just need to specify the MONGODB_URI in .env.local.
so here my /.env.local file content:
NEXTAUTH_URL=http://localhost:3000
MONGODB_URI=mongodb+srv://<username>:<password>#rest.lvnpm.mongodb.net/<database_name>?retryWrites=true&w=majority
SECRET=someSecret
NODE_ENV=development
So currently, it does nothing at all. I don't need to specify session.strategy to database since by default NextAuth will recognized that if I use adapter option.
What do I need to do here to make this work? Any helps is appreciated. Here my github project
I just found out that in NextAuth, if I use CredentialsProvider. I won't be able to persist data using database strategy. You may go here to NextAuth documentation itself to know why
I am building an api using nestjs. After adding the typeorm and pg dependencies and adding the TypeOrmModule.forRoot({}) code in app.module.ts like shown below.
import { Module } from '#nestjs/common';
import { TypeOrmModule } from '#nestjs/typeorm';
import { AppController } from './app.controller';
import { AppService } from './app.service';
import { CoffeesModule } from './coffees/coffees.module';
#Module({
imports: [CoffeesModule, TypeOrmModule.forRoot({
type: 'postgres',
host: 'localhost',
port: 5432,
username: 'postgres',
password: 'xxx',
database: 'postgres',
autoLoadEntities: true,
synchronize: true
})],
controllers: [AppController],
providers: [AppService],
})
export class AppModule { }
I get an error TypeError: rxjs_1.lastValueFrom is not a function with but no error when I exclude TypeOrmModule.forRoot({}).
What could be the reason for the error ?
If you're using Nest v8, RxJS version 7 is used, which no longer has a toPromise() method for Observables, so Nest uses the lastValueFrom method instead. If you're receiving this error, you probably need to update your rxjs dependency to >7.
npm i rxjs#^7
yarn add rxjs#^7
pnpm i rxjs #^7
Pick your flavor of package manager and have at it.
In the last update of NestJS, when is used cli to initialization of project this error is throw.
The real answer
The issue is conflict with nest version.. anyone who see this - just make sure all your nestJs packages are of version 7 or 8 - don't mix them. especially those:
#nestjs/common
#nestjs/core
#nestjs/typeorm
from here: https://github.com/nestjs/nest/issues/7468#issuecomment-876174870
update "#nestjs/typeorm": "^7.1.5" in package.json and enter npm i and restart server
I have an issue that I couldn't resolve for a quite long time.
I'm making a shop using feathersJS as a backend api and Vue.js on the front and Mongodb. As I try to authenticate user on website, everything goes smoothly until "setUser" action fires and in auth service getters I get an error saying "Cannot read property 'idField' of undefined". I believe that I changed this property to "_id", wherever I could, but still this error occurs. Here are some screenshots, that may be helpful. This project is supposed to get me my first job in webDev so I would be eternally grateful for your support.
AddItem action in vuex,
setUser action in vuex
Feathers-client.js:
import feathers from '#feathersjs/feathers';
import socketio from '#feathersjs/socketio-client';
import auth from '#feathersjs/authentication-client';
import io from 'socket.io-client';
import { iff, discard } from 'feathers-hooks-common';
import feathersVuex from 'feathers-vuex';
const socket = io('http://localhost:3030', { transports: ['websocket'] });
const feathersClient = feathers()
.configure(socketio(socket))
.configure(auth({ storage: window.localStorage, debug: false }))
.hooks({
before: {
all: [
iff(
context => ['create', 'update', 'patch'].includes(context.method),
discard('__id', '__isTemp'),
),
],
},
});
export default feathersClient;
// Setting up feathers-vuex
const {
makeServicePlugin, makeAuthPlugin, BaseModel, models, FeathersVuex,
} = feathersVuex(
feathersClient,
{
idField: '_id', // Must match the id field in your database table/collection
whitelist: ['$regex', '$options'],
},
);
export {
makeAuthPlugin, makeServicePlugin, BaseModel, models, FeathersVuex,
};
auth service file:
import { makeAuthPlugin } from '../../feathers-client';
export default makeAuthPlugin({
userService: 'api/users',
entityIdField: '_id',
});
The issue here was the name of the service, which as a plugin in vuex was under a name of "users" not "api/users". The solution was to change in servicePlugin options nameStyle: "path" instead of "short"