I am currently using the following config in my NextAuth for production:
const options = {
secret: process.env.NEXTAUTH_SECRET,
adapter: PrismaAdapter(prisma),
providers: [...],
pages: {
signIn: '/signin'
},
callbacks: {
...,
cookies: {
sessionToken: {
name: 'next-auth.session-token',
options: {
httpOnly: true,
sameSite: 'lax',
path: '/',
secure: process.env.NODE_ENV === 'production',
domain: hostName
},
},
}
}
export default (req, res) => NextAuth(req, res, options)
However when looking back I was using:
name: process.env.NODE_ENV === 'production' ? `__Secure-next-auth.session-token` : 'next-auth.session-token'
The problem is that if I use the __Secure-next-auth.session-token the authentication does not work in production (the session is never created) what is the difference between using next-auth.session-token and __Secure-next-auth.session-token? does using next-auth.session-token in production make my application vulnerable?
Related
Migrating a react application to an Nx integrated workspace, and having an issue with advanced proxy configuration.
I understand that for a simple proxy...
Specify the proxy.conf.json file
"serve": {
"executor": "#nrwl/webpack:dev-server",
"defaultConfiguration": "development",
"options": {
"verbose": true,
"buildTarget": "ydsca:build",
"hmr": true,
**"proxyConfig": "apps/ydsca/proxy.conf.json",**
"ssl": true,
"sslKey": "certs/localhost.key.pem",
"sslCert": "certs/localhost.crt.pem"
},
Implement the proxy.conf.json file, e.g....
{
"/caconnect/common/*": {
"target": "https://127.0.0.1:9443",
"secure": false,
"logLevel": "debug"
}
}
This works without any issues, however, the current React application uses "http-proxy-middleware" and a more advanced setupProxy.js file (wildcard matching such as "/**/common/" for any patch that contains /common/):
const { createProxyMiddleware } = require('http-proxy-middleware');
module.exports = function(app) {
app.use(
[
'/**/common/',
'/**/commonClassic/',
'/**/ydscaCommon/',
'/ymca',
'/staff'
],
createProxyMiddleware({
//Must use 127.0.0.1 as for some reason, localhost stopped working in node versions > 16
target: 'https://127.0.0.1:9443',
//Necessary for https with self signed certificates
secure: false,
changeOrigin: false,
//Additional logging stuff!
onProxyReq: function onProxyReq(proxyReq, req, res) {
// Log outbound request to remote target
console.log('--> ', req.method, req.path, '->', proxyReq.baseUrl + proxyReq.path);
},
onError: function onError(err, req, res) {
console.error(err);
res.status(500);
res.json({error: 'Error when connecting to remote server.'});
},
//logLevel: 'debug'
})
);
};
How can the same advanced proxying be configured in Nx?
Tried changing proxyConfig": "apps/ydsca/proxy.conf.json" to proxyConfig": "apps/ydsca/setupProxy.js", but it doesn't seem to like javascript files for proxy configuration!
Any suggestions?
Thank you.
I'm trying to redirect the user when entering manually the URL, here's the next.config.js file structure:
module.exports = {
basePath: '/BookManagement',
reactStrictMode: true,
redirects: async () => {
return [
{
source: '/books',
destination: '/',
permanent: true,
},
{
source: '/book',
destination: '/',
permanent: true,
},
]
},
}
Everything works as expected in the local env, but when deploying using Azure DevOps, it doesn't having this error code:
warn - rewrites, redirects, and headers are not applied when exporting your application, detected (redirects). See more info here: https://nextjs.org/docs/messages/export-no-custom-routes
Any idea how can I use rewrites and redirects ?
I have ejected react scripts, and I have the following in my setupProxy.js.
module.exports = function(app) {
app.use(
proxy({
changeOrigin: true,
logLevel: "debug",
onProxyReq: function onProxyReq(proxyReq, req, res) {
console.log(
chalk.red(
'Request'
)
);
},
onError(err, req, res) {
console.log(err);
},
secure: false,
target: "http://www.google.com"
})
I would expect the above to proxy, and log every request going out from the react app, but this is not the case. Is there a config that I need to add in Webpack ?
Thank you
Right now I have everything working in regards to React and webpack:
Here is my webpack.config.js
const HtmlWebPackPlugin = require('html-webpack-plugin');
const path = require('path');
module.exports = {
entry: {
index: './client/index.js',
},
output: {
filename: '[name].bundle.js',
path: path.join(__dirname, 'public'),
},
devServer: {
contentBase: path.join(__dirname, 'public'),
port: 3000,
},
/* module info */
......
/* module info */
plugins: [
new HtmlWebPackPlugin({
filename: './index.html',
template: './src/index.html',
}),
],
};
When running npm run dev this kicks off the webpack-dev-server on localhost:3000 \o/
Now I would also like to use express to serve data from a route or api and have react on the front end make calls to it as well.
My Express setup:
const express = require('express');
const app = express();
const path = require('path');
app.set('port', process.env.PORT || 8016);
const issues = [
{
id: 1,
status: 'Open',
owner: 'Ravan',
created: new Date('2016-08-15'),
effort: 5,
completionDate: undefined,
},
{
id: 3,
status: 'Assigned',
owner: 'Eddie',
created: new Date('2016-08-16'),
effort: 14,
completionDate: new Date('2016-08-30'),
title: 'Missing bottom border on panel',
},
]; // global data
app.use(express.static(path.join(__dirname, '..', 'public')));
app.get('/api/issues', (req, res) => {
var metadata = { total_count: issues.length };
res.json({ _metadata: metadata, records: issues });
});
// sends index.html
app.use('*', (req, res) => {
res.sendFile(path.join(__dirname, '..', 'public/index.html'));
});
app.listen(app.get('port'), function(error) {
console.log(`App started on port ${app.get('port')}!`);
});
module.exports = app;
So you can see express is going to run on http://localhost:8016
and react on http://localhost:3000. Is there a way to have them run on the same port? If not can you explain why?
Thanks in advance!
Is not possible because you can't run two servers in the same port (if that's possible I don't have that knowledge yet :P).
What you can do to make request to your api is to setup the devServer's proxy option:
devServer: {
contentBase: resolve(__dirname, 'public'),
clientLogLevel: 'warning',
historyApiFallback: true,
host: '0.0.0.0',
hot: true,
port: 3000,
proxy: {
'/api/*': 'http://localhost:8016'
}
Now you'll be able to make to make request like this from react:
axios.get('/api/issues').then((res) => { console.log(res.data) })
You can review the doc here.
My app uses a Python backend so when I'm running locally I need to proxy my requests to a different port than what Webpack is running on.
I've tried several different ways of making this work:
devServer: {
contentBase: outDir,
proxy: [
{
path: "**",
target: "http://localhost:8000",
secure: false,
bypass: function(req, res, options) {
if(req.url === '' || req.url === '/') {
res.statusCode = 302;
res.setHeader('Location', '/a/');
return '/a/';
}
var frontend = new RegExp("^\/$^|\/a\/index\.html|^\/a\/|^\/a$|^\/styleguide");
if (frontend.test(req.url)) return req.url;
}
}
],
// serve index.html for all 404 (required for push-state)
historyApiFallback: true,
},
And this:
proxy: [{
context: '/',
target: 'http://localhost:8000',
}],
Both of those will at least show a message similar to this when it starts up: [HPM] Proxy created: ** -> http://localhost:8000. When I look at the docs and do something like this, it doesn't work either (I don't even get a message about the proxy running):
proxy: {
"/": "http://localhost:8000"
}
Is there something obvious I'm doing wrong? I'be been trying every combination that I can think of to make it work.
Try to add changeOrigin: true. Don't forget to change API pattern.
proxy: {
'/api/**': {
target: 'http://localhost:8000',
secure: false,
changeOrigin: true
},
}