I am making a webpage which fetches data from mongoDB( atlas BASIC free plan) and has dynamic routing page with SSG. The dynamic routing page, [cogid].js, has getstaticpaths and getstaticprops. getstaticpaths seems work, but getstaticprops does not work. I guess the problem is variable "params.cogid" inside getstaticprops...
import { MongoClient } from "mongodb";
const { MONGODB_URI, MONGODB_DB } = process.env;
export default function Cog({ cogData }) {
return (
<div className="container mx-auto px-2 my-5 flex flex-col ">
<p>COG ID: COG{cogData.cog_id}</p>
<p>name: {cogData.name}</p>
</div>
);
}
export async function getStaticPaths() {
const client = new MongoClient(MONGODB_URI, {
useNewUrlParser: true,
useUnifiedTopology: true,
});
if (!client.isConnected()) await client.connect();
const res = await client
.db(MONGODB_DB)
.collection("test1")
.find({})
.project({ cog_id: 1, _id: 0 })
.toArray();
if (client.isConnected()) client.close();
const paths = res.map((copiedCog) => ({
params: { cogid: copiedCog.cog_id },
}));
return { paths, fallback: false };
}
export async function getStaticProps({ params }) {
const client = new MongoClient(MONGODB_URI, {
useNewUrlParser: true,
useUnifiedTopology: true,
});
if (!client.isConnected()) await client.connect();
const resp = await client
.db(MONGODB_DB)
.collection("test1")
.findOne({ cog_id: params.cogid });
if (client.isConnected()) client.close();
const cogData = await JSON.parse(JSON.stringify(resp));
return { props: { cogData } };
}
I solved the problem.
I should have changed the data type of params.cogid to Integer (from String?) like Number(params.cogid) or parseInt(params.cogid). It is because the type of the field "cog_id" of the DB is Integer.
Related
Looking for a backend dev that can simply help me implement MONGODB with nextJS and the current model I have now. I have bought https://www.devias.io admin dashboard, and just want to implement auth and database reading with it.
Just want the basic auth setup. It's already setup in the FILES just wanting to know how to configure it properly based on the devias guides
Has anyone done this before I can't find any documentation on it
It's setup with mock data at the moment
SRC/API/AUTH/index.js
import { createResourceId } from '../../utils/create-resource-id';
import { decode, JWT_EXPIRES_IN, JWT_SECRET, sign } from '../../utils/jwt';
import { wait } from '../../utils/wait';
import { users } from './data';
class AuthApi {
async signIn(request) {
const { email, password } = request;
await wait(500);
return new Promise((resolve, reject) => {
try {
// Find the user
const user = users.find((user) => user.email === email);
if (!user || (user.password !== password)) {
reject(new Error('Please check your email and password'));
return;
}
// Create the access token
const accessToken = sign({ userId: user.id }, JWT_SECRET, { expiresIn: JWT_EXPIRES_IN });
resolve({ accessToken });
} catch (err) {
console.error('[Auth Api]: ', err);
reject(new Error('Internal server error'));
}
});
}
async signUp(request) {
const { email, name, password } = request;
await wait(1000);
return new Promise((resolve, reject) => {
try {
// Check if a user already exists
let user = users.find((user) => user.email === email);
if (user) {
reject(new Error('User already exists'));
return;
}
user = {
id: createResourceId(),
avatar: undefined,
email,
name,
password,
plan: 'Standard'
};
users.push(user);
const accessToken = sign({ userId: user.id }, JWT_SECRET, { expiresIn: JWT_EXPIRES_IN });
resolve({ accessToken });
} catch (err) {
console.error('[Auth Api]: ', err);
reject(new Error('Internal server error'));
}
});
}
me(request) {
const { accessToken } = request;
return new Promise((resolve, reject) => {
try {
// Decode access token
const { userId } = decode(accessToken);
// Find the user
const user = users.find((user) => user.id === userId);
if (!user) {
reject(new Error('Invalid authorization token'));
return;
}
resolve({
id: user.id,
avatar: user.avatar,
email: user.email,
name: user.name,
plan: user.plan
});
} catch (err) {
console.error('[Auth Api]: ', err);
reject(new Error('Internal server error'));
}
});
}
}
export const authApi = new AuthApi();
then /SRC/API/AUTH/data.js
export const users = [
{
id: '5e86809283e28b96d2d38537',
avatar: '/assets/avatars/avatar-anika-visser.png',
email: 'demo#devias.io',
name: 'Anika Visser',
password: 'Password123!',
plan: 'Premium'
}
];
This is the documentation on it
JSON Web Token (JWT)
Most auth providers use this strategy under the hood to provide access tokens. Currently, the app doesn't cover the backend service, and this service is mocked (faked) using http client interceptors. The implementation is basic, but enough to give you a starting point.
How it was implemented
Since tokens are meant to be created on the backend server, they are built with encrypt, encode and decode utility methods because they are not meant to be used on the client. These utilities can be found in src/utils/jwt. These are for development purposes only, and you must remove (or avoid using) them.
How to use JWT Provider
The app is delivered with JWT Provider as default auth strategy. If you changed or removed it, and you want it back, simply follow these steps:
Step 1: Import the provider
Open src/pages/_app.js file, import the provider and wrap the App component with it.
// src/pages/_app.js
import { AuthConsumer, AuthProvider } from '../contexts/auth/jwt-context';
const App = (props) => {
const { Component, pageProps } = props;
return (
<AuthProvider>
<Component {...pageProps} />
</AuthProvider>
);
};
Step 2: Set the hook context
Open src/hooks/use-auth.js file and replace the current context the following line:
import { AuthContext } from '../contexts/auth/jwt-context';
How to use auth
Retrieve user profile
In the example below, you can find how it can be used in any component not just the App. Should you want to use it in any other component, you'll have to import the useAuth hook and use it as needed.
// src/pages/index.js
import { useAuth } from '../hooks/use-auth';
const Page = () => {
const { user } = useAuth();
return (
<div>
Email: {user.email}
</div>
);
};
Auth methods / actions
For simplicity and space limitations, the code below is used only to exemplify, actual code can be found in the components.
// src/pages/index.js
import { useAuth } from '../hooks/use-auth';
const Page = () => {
const { login } = useAuth();
const handleLogin = () => {
// Email/username and password
login('demo#devias.io', 'Password123!');
};
s
return (
<div>
<button onClick={handleLogin}>
Login
</button>
</div>
);
};
Implemented flows
Currently, the app only covers the main flows:
Register
Login
Logout
const mongoose = require('mongoose');
const jwt = require("jsonwebtoken");
// Connect to MongoDB
mongoose.connect('mongodb://localhost/yourdbname', {
useNewUrlParser: true,
useUnifiedTopology: true
});
const userSchema = new mongoose.Schema({
id: {
type: String,
required: true,
unique: true
},
email: {
type: String,
required: true
},
name: {
type: String,
required: true
},
password: {
type: String,
required: true
},
plan: {
type: String,
default:
'Standard'
},
avatar: {
type: String,
default:
null
},
});
const User = mongoose.model('User', userSchema);
const JWT_SECRET = process.env.JWT_SECRET;
const JWT_EXPIRES_IN = '7d';
class AuthApi {
async signIn(request) {
const {
email,
password
} = request;
const user = await User.findOne({
email
});
if (!user || (user.password !== password)) {
throw new Error('Please check your email and password');
}
const accessToken = jwt.sign({
userId: user.id
}, JWT_SECRET, {
expiresIn: JWT_EXPIRES_IN
});
return {
accessToken
};
}
async signUp(request) {
const {
email,
name,
password
} = request;
const existingUser = await User.findOne({
email
});
if (existingUser) {
throw new Error('User already exists');
}
const newUser = new User({
id: mongoose.Types.ObjectId(),
email,
name,
password,
plan: 'Standard',
avatar: null,
});
await newUser.save();
const accessToken = jwt.sign({
userId: newUser.id
}, JWT_SECRET, {
expiresIn: JWT_EXPIRES_IN
});
return {
accessToken
};
}
async me(request) {
const {
accessToken
} = request;
const decoded = jwt.verify(accessToken, JWT_SECRET);
const {
userId
} = decoded;
const user = await User.findById(userId);
if (!user) {
throw new Error('Invalid authorization token');
}
return {
id: user.id,
avatar: user.avatar,
email: user.email,
name: user.name,
plan: user.plan
};
}
}
export const authApi = new AuthApi();
I have the following ApolloServer (v4)
import { MongoDataSource } from 'apollo-datasource-mongodb'
export default class LoaderAsset extends MongoDataSource {
async getAsset(assetId) {
return this.findOneById(assetId) // ERROR IS HERE
}
}
async function startApolloServer(app) {
const httpServer = http.createServer(app);
const server = new ApolloServer({
typeDefs,
resolvers,
plugins: [ApolloServerPluginDrainHttpServer({ httpServer })]
});
await server.start();
app.use(
'/graphql',
cors(),
bodyParser.json(),
expressMiddleware(server, {
context: async ({ req }) => {
return {
dataSources: {
loaderAsset: new LoaderAsset(modelAsset),
}
}
},
}),
);
const port = config.get('Port') || 8081;
await new Promise(resolve => httpServer.listen({ port }, resolve));
}
when I run graphql and send one assetId, everything is working till I get following error:
this.findOneById is not a function
By the way (this) has collection and model objects but not any methods.
is it because apollo-datasource-mongodb is not compatible with the new version of apollo server v4?
dataSources in v3 were as follows:
dataSources: () => ({
users: new Users(client.db().collection('users'))
// OR
// users: new Users(UserModel)
})
but in the new version dataSources is inside the context
Maybe the issue is because of this change.
Credit to: https://github.com/systemkrash on https://github.com/GraphQLGuide/apollo-datasource-mongodb/issues/114
what i did is i override my datasource class so I can call the initialize method inside in the MongoDatasource class. Now it works for me.
import { MongoDataSource } from 'apollo-datasource-mongodb';
class ReceptionDataSource extends MongoDataSource {
constructor({ collection, cache }) {
super(collection);
super.initialize({ context: this.context, cache });
}
async getReception(receptionId) {
return await this.findOneById(receptionId);
}
}
export default ReceptionDataSource;
then in my context
async function startApolloServer(app) {
const httpServer = http.createServer(app);
const server = new ApolloServer({
typeDefs,
resolvers,
plugins: [ApolloServerPluginDrainHttpServer({ httpServer })]
});
await server.start();
app.use(
'/graphql',
cors(),
bodyParser.json(),
expressMiddleware(server, {
context: async ({ req }) => {
const { cache } = server
return {
dataSources: {
loaderAsset: new ReceptionDataSource({collection: ReceptionModel, cache}),
}
}
},
}),
);
const port = config.get('Port') || 8081;
await new Promise(resolve => httpServer.listen({ port }, resolve));
}
i am getting set-cookie in response header but my browser does not use it.
also, the cookie is not sent to the server there every time a new session is made on server side due to this.
I have checked my routes on postman everything working as expected i.e : cookies are receive and sent by postman but the browser completely ignores cookies.
zip file of project
index.js
const express = require('express');
const session = require('express-session')
const cookieParser = require('cookie-parser');
const mongoDBStore = require('connect-mongodb-session')(session)
const routes = require('./routes/routes')
require('./model/model');
require('./db/mongoose')
const app = express();
const store = new mongoDBStore({
uri: 'mongodb+srv://mny:QTCdKtdkjfdjfouJJWbUYN#cluster0.zxfwd.mongodb.net/MernDocker?retryWrites=true&w=majority',
collection: "mySessions"
})
// app.use(cookieParser())
app.use(express.json());
// app.use(express.urlencoded({ extended: false }));
app.use((req, res, next) => {
res.header("Access-Control-Allow-Origin", req.headers.origin);
res.header("Access-Control-Allow-Headers", "*");
res.header("Access-Control-Allow-Credentials", 'true')//true as string
// res.header('Access-Control-Expose-Headers',
// 'Date, Etag, Access-Control-Allow-Origin, Set-Cookie, Access-Control-Allow-Credentials')
if (req.method === "OPTIONS") {
res.header("Access-Control-Allow-Methods", "GET,PATCH,POST,DELETE");
return res.status(200).send()
}
next();
});
app.use(session({
secret: "mny",
saveUninitialized: true,
cookie: {
path: "/",//if / the cookies will be sent for all paths
httpOnly: false,// if true, the cookie cannot be accessed from within the client-side javascript code.
secure: true,// true->cookie has to be sent over HTTPS
maxAge: 2*24 * 60 * 60 * 1000,
sameSite: 'none',//- `none` will set the `SameSite` attribute to `None` for an explicit cross-site cookie.
},
store: store,
resave: false,
}))
app.use(routes);
const port = process.env.PORT || 3001;
app.listen((port), (error) => {
console.log(`lisning on port ${port}`)
})
const express = require('express');
const User = require('../model/model');
const routes = express.Router();
/*
routes.get('/', async (req, res, next) => {
console.log('req.headers.cookie get')
console.log(req.headers.cookie)
// console.log(req.headers.cookie.split(';')[1].split('=')[1])
res.send({
"post": req.session.postClick,
"patch": req.session.patchClick
})
})*/
routes.post('/', async (req, res) => {
console.log("req.headers.cookie post method")
console.log(req.headers)
// console.log(req.headers.cookie.split(';')[1])
const user = new User(req.body)
try {
await user.save()
if (!req.session.postClick) {
req.session.postClick = 0
console.log(req.session);
}
req.session.postClick++
res.send({ "user": user, "postClick": req.session.postClick });
} catch (e) {
res.send(e)
}
})
module.exports = routes;
app.js frontend
import logo from './logo.svg';
import './App.css';
import { useState } from 'react';
const url = 'http://localhost:3001'
console.log(document.cookie)
function App() {
const [inputValue, setInputValue] = useState({
name: '',
})
const handleChange = (e) => {
const { name, value } = e.target;
setInputValue({
...inputValue,
[name]: value
})
}
const handleOnAdd = (e) => {
e.preventDefault()
console.log(document.cookie)
const addData = async () => {
try {
const res = await fetch(`${url}`, {
method: 'POST',
headers: {
"mode": 'cors',
"Credentials": 'include',
'Content-Type': 'application/json',
'Accept': 'application/json',
'WithCredentials': true,
},
body: JSON.stringify(inputValue)
})
if (res.ok) {
let d = await res.json()
console.log(d)
} else {
alert('fetch add failed')
}
} catch (e) {
console.log(e)
}
}
addData()
// setInputValue({})
}
return (
<div>
<h1>session with mongodb</h1>
<form className='form' >
<label>name</label>
<input
name='name'
onChange={(e) => handleChange(e)}
value={inputValue.name}
/>
<button onClick={handleOnAdd}>Add</button>
</form>
</div>
)
}
export default App;
I'm struggling getting this axios call to work. It's in a password reset feature, and it calls an axios request that sends through to the back end, but it's just coming up with an error instead of executing the code in the router route.
I call the request in this block here.
front end side:
async componentDidMount() {
const {
match: {
params: { token },
},
} = this.props;
try {
const response = await axios.get('http://localhost:5000/api/users/reset', {
params: {
resetPasswordToken: token,
},
});
console.log(response)
if (response.data.message === 'password reset link a-ok') {
this.setState({
username: response.data.username,
updated: false,
isLoading: false,
error: false,
});
}
} catch (error) {
console.log(error.response.data);
this.setState({
updated: false,
isLoading: false,
error: true,
});
}
}
It's getting the proper token and everything, but the http://localhost:5000/api/users/reset should be pointing to the /reset route in the code below, and it's never reached.
const express = require("express");
const router = express.Router();
const bcrypt = require("bcryptjs");
const jwt = require("jsonwebtoken");
const keys = require("../../config/keys");
const validateRegisterInput = require("../../validation/register");
const validateLoginInput = require("../../validation/login");
const nodemailer = require('nodemailer');
const crypto = require('crypto');
require('dotenv').config();
const User = require("../../models/User");
router.route('/reset').get((req, res, next) => {
User.find({
where: {resetPasswordToken: req.query.resetPasswordToken,
resetPasswordExpires: {
$gt: Date.now(),
},
},
}).then(user => {
if(user == null) {
console.log('password reset link is invalid or has expired');
res.json('password reset link is invalid or has expired');
}else{
res.status(200).send({
username: user.username,
message: 'password reset link a-ok',
});
}
});
});
module.exports = router;
Actually #TamasSzoke you led me to answer my own question so I thank you! I had another route that was just /:id and that's what it was trying to validate there.
Just have to change that one up and it'll be all good.
thank you!!!
i'm not sure why i am receiving this. I am trying to create a simple test while using #hapi/crumb. i am only registering it once in my server.js.
const Path = require("path");
const hapi = require("hapi");
const inert = require("inert");
const vision = require("vision");
const Ejs = require("ejs");
const Crumb = require("#hapi/crumb");
const Blankie = require("blankie");
const Scooter = require("#hapi/scooter");
const routes = require("./routes");
// Configure the server
const server = hapi.Server({
host: "0.0.0.0",
port: process.env.PORT || 3000,
routes: {
files: {
relativeTo: Path.join(__dirname, "..", "public")
},
state: {
parse: true,
failAction: "ignore"
},
security: {
xframe: true,
noOpen: false
},
cors: {
origin: ["banglarelief.org"],
headers: ["Authorization"], // an array of strings - 'Access-Control-Allow-Headers'
exposedHeaders: ["Accept"], // an array of exposed headers - 'Access-Control-Expose-Headers',
additionalExposedHeaders: ["Accept"], // an array of additional exposed headers
maxAge: 60,
credentials: true // boolean - 'Access-Control-Allow-Credentials'
}
}
});
const plugins = async () => {
const pluginsToRegister = [
inert,
vision,
require("hapi-mobile-views"),
{ plugin: Crumb, options: { cookieOptions: { isSecure: false } } },
Scooter,
{
plugin: Blankie,
options: {} // specify options here
}
];
await server.register(pluginsToRegister);
};
const init = async () => {
await plugins();
server.state("player", {
ttl: null,
clearInvalid: true,
isSecure: false
});
server.views({
engines: { ejs: Ejs },
path: `${__dirname}/views`,
layout: "layout"
});
await server.route(routes);
return server;
};
const start = async () => {
try {
await init();
await server.start();
} catch (err) {
console.log(err);
process.exit(1);
}
};
module.exports = { init, start };
My test file is very basic and i have tried to move around where the start should be called but it keep throwing same error.
'use strict';
const Lab = require('#hapi/lab');
const { expect } = require('#hapi/code');
const { afterEach, beforeEach, describe, it } = exports.lab = Lab.script();
const { init, start } = require('../src/server');
let server = start();
describe('GET /', () => {
//let server;
//server = start();
beforeEach(async () => {
//server = start();
});
afterEach(async () => {
//await server.stop();
});
it('responds with 200', async () => {
const res = await server.inject({
method: 'get',
url: '/'
});
expect(res.statusCode).to.equal(200);
});
});
I have been following https://hapijs.com/tutorials/testing?lang=en_US
The solution seems to work if you break up your plugins function into two parts. One part will init 3rd party plugins like #Hapi/*. The other function will init your 1st party plugins that you wrote. You will only init the 3rd party plugins in your start function.
It's critical that you include { once: true } because that will prevent your error. It will only initialize the plugin once, which will prevent your error. You cannot always specify { once: true } on 3rd party plugins. Thus, we have to handle that a different way. Since we moved all the 3rd party plugins to their own function, which is invoked on start, that should prevent 3rd party plugins from causing an issue of being reinitialized.
const hapiPlugins = async () => {
const pluginsToRegister = [
inert,
vision,
require("hapi-mobile-views"),
{ plugin: Crumb, options: { cookieOptions: { isSecure: false } } },
Scooter,
{
plugin: Blankie,
options: {} // specify options here
}
];
};
const myPlugins = async () => {
await server.register([
allOfMyPlugins...
],
{
once: true //critical so that you don't re-init your plugins
});
};
const init = async () => {
server.state("player", {
ttl: null,
clearInvalid: true,
isSecure: false
});
server.views({
engines: { ejs: Ejs },
path: `${__dirname}/views`,
layout: "layout"
});
await server.route(routes);
return server;
};
const start = async () => {
try {
await hapiPlugins();
await init();
await server.start();
} catch (err) {
console.log(err);
process.exit(1);
}
};
Then, you should be able to call init in your test's before function. Use that server object to inject.