I am using Node.js with express server, and passport package for authentication. Client is on same server, different domain built on Backbone.js. The session is created on login request, but if another request comes from client side, I don't manage to access the session.
Node server configuration:
var express = require( 'express' ),
path = require( 'path' ),
mongoose = require( 'mongoose' ),
passport = require('passport'),
cors = require('cors');
app.configure( function() {
app.use(express.cookieParser());
app.use(express.bodyParser());
app.use(express.session({
secret: secret,
key: key,
cookie : {
maxAge: maxAge
}
}));
app.use(passport.initialize());
app.use(passport.session());
app.use( express.methodOverride() );
app.use( app.router );
app.use( express.static(application_root) );
app.use(cors());
});
Logging in and auth check:
app.post('/login', cors(corsOptions), passport.authenticate('login', {
successRedirect : successDirect,
failureRedirect : failureDirect
}));
function requireAuth(req, res, next) {
if(req.session.user) {
next();
}
else if (req.cookies.isAuthenticated) {
next();
} else {
res.redirect(loginUrl);
}
}
On login, the session is created. If I send any requests from the server side (localhost:9999/anymethod), then the session is accessed, responses accordingly. If I try to send a request from client side to the same url, then the session is always 'undefined'.
Example:
app.get('/mymethod', cors(corsOptions), requireAuth, function(request, response) {
return response.send("Done");
});
This method works when accessed from server after logging in, but not when accessed from client side (client is established on same server, different domain).
Added to Backbone.js:
initialize: function() {
this.collection.fetch({reset: true, beforeSend: this.beforeFetch});
},
beforeFetch: function(xhr) {
xhr.withCredentials = true;
},...
Edit: The request coming from client doesn't contain any cookies.
How can I access the session created by passport after logging in, sending a request from client?
I guess cors library does it (i haven't used that library). But if it doesn't then in server side
app.use(function (req, res, next) {
res.header('Access-Control-Allow-Credentials', true);
res.header('Access-Control-Allow-Origin', req.headers.origin);
res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE,PATCH');
res.header('Access-Control-Allow-Headers', 'X-Requested-With, X-HTTP-Method-Override, Content-Type, Accept');
next();
});
And in client ajax request
xhrFields: {
withCredentials: true
}
Related
I'm using the passport.js local strategy.
I was testing it under proxy setting, localhost.
Things worked fine until I prepare to deploy.
I changed the API address to include dotenv and set CORS settings on the server-side.
When trying to login, CORS works fine, OPTIONS and the POST get 200 ok. The client receives the success data. cookie saved in client.
But when auth checking process runs right after Redux "isLoggedin" state is updated(useEffect), req.session doesn't
t have the passport object. So deserializeUser not be called. The session contains other cookie info except for Passport.
This one is only on Firefox(not Chrome): Page will be redirected if the login auth succeeded(it checks right after login redux state changed), but since it's failed, the user stays on the login page still. But if I try to login on the same page again, the cookie start to show the passport object.(in other words, it shows from 2nd attempt). But it doesn't persist because the Redux login state has been changed to true at the first login attempt already.(so Auth checking doesn't occur.)
client:
Axios.post(
`${process.env.REACT_APP_API_URI}/api/users/login`,
loginData,
{ withCredentials: true, }
).then((res) => res.data){
//save isLoggedin to true in Redux
}
// auth check logic starts right after changing isLoggedin. Axios Get to authenticateCheck
server.js
app.use(helmet());
// app.use(express.static('public'));
app.use("/uploads", express.static("uploads"));
// Passport configuration.
require("./utils/passport");
// connect to mongoDB
mongoose
.connect(db.mongoURI, {
useNewUrlParser: true,
useUnifiedTopology: true,
useCreateIndex: true,
useFindAndModify: false,
})
.then(() => console.log("mongoDB is connected."))
.catch((err) => console.log(err));
// CORS Middleware
const corsOptions = {
origin: "http://localhost:8000",
optionsSuccessStatus: 200, // some legacy browsers (IE11, various SmartTVs) choke on 204
credentials: true,
methods: ["POST", "GET", "DELETE", "PUT", "PATCH", "OPTIONS"],
allowedHeaders:
"Origin, X-Requested-With, X-AUTHENTICATION, X-IP, Content-Type, Accept, x-access-token",
};
// app.use(cors(corsOptions));
app.options(/\.*/, cors(corsOptions), function (req, res) {
return res.sendStatus(200);
});
app.all("*", cors(corsOptions), function (req, res, next) {
next();
});
// to get json data
// support parsing of application/json type post data
app.use(express.json());
app.use((req, res, next) => {
req.requestTime = new Date().toISOString();
next();
});
//support parsing of application/x-www-form-urlencoded post data
app.use(express.urlencoded({ extended: true }));
app.use(cookieParser());
// db session store
const sessionStore = new MongoStore({
mongoUrl: db.mongoURI,
collection: "sessions",
});
// tell app to use cookie
app.use(
session({
secret: process.env.SESSION_SECRET_KEY,
resave: false,
saveUninitialized: false,
store: sessionStore,
cookie: {
httpOnly: true,
secure: false,
sameSite:"none",
maxAge: 24 * 60 * 60 * 1000, // 24 hours
//keys: [process.env.COOKIE_ENCRYPTION_KEY]
},
name: "pm-user",
})
);
// tell passport to make use of cookies to handle authentication
app.use(passport.initialize());
app.use(passport.session());
app.use(compression());
app.use(flash());
app.use((req, res, next) => {
console.log("req.session:", req.session);
// console.log('/////// req: ///////', req);
console.log("////// req.user: ", req.user, " //////");
next();
});
//---------------- END OF MIDDLEWARE ---------------------//
authController:
exports.authenticateCheck = (req, res, next) => {
console.log("req.isAuthenticated():", req.isAuthenticated());
if (req.isAuthenticated()) {
return next();
} else {
return res.json({
isAuth: false,
error: true,
});
}
};
It would be a really big help if you can advise me where to look to fix it.
Thanks.
I found the solution finally.
It was because the session was renewed every time when a new request starts other than a login request.
The solution was, I had to add { withCredentials: true } to every Axios option in my frontend.
I've been struggling with this issue for a while now. First, everything works great on my local PC, which makes it more difficult to test. When I upload the site to our public site, it breaks. I can log in just fine and get a cookie. But after that, all my endpoints stop working. Network tab shows nothing for request or response for them. I have tested with Postman. I can hit all the endpoints just fine until I log in and get a cookie. Then I can't hit those endpoints anymore, it just spins. If I delete the cookie, I can hit them again. So it's gotta be something with the way I'm setting the cookie or checking the cookie in my Node server.
Here is my main app.js Node server file. If any other files are needed, let me know.
const createError = require('http-errors');
const express = require('express');
const cookieParser = require('cookie-parser');
const logger = require('morgan');
const passport = require('passport');
const session = require('express-session');
const flash = require('connect-flash');
const cors = require('cors');
const MySQLStore = require('express-mysql-session')(session);
const config = require('./config/config');
// MySql Store setup
const options = {
host: config.host,
port: config.port,
user: config.username,
password: config.password,
database: config.database
};
const sessionStore = new MySQLStore(options);
const app = express();
// Middleware
app.use(logger('dev'));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser(config.session_secret));
app.use(cors());
app.options('*', cors());
// app.use(function(req, res, next) {
// res.header('Access-Control-Allow-Origin', '*');
// res.header(
// 'Access-Control-Allow-Headers',
// 'Origin, X-Requested-With, Content-Type, Accept'
// );
//
// next();
// });
//
// app.use(function(req, res, next) {
// res.setHeader('Access-Control-Allow-Origin', '*');
// res.setHeader(
// 'Access-Control-Allow-Methods',
// 'GET, POST, PUT, DELETE'
// );
// res.setHeader('Access-Control-Allow-Headers', 'Content-Type');
// res.setHeader('Access-Control-Allow-Credentials', true);
// next();
// });
// session setup
app.set('trust proxy', 1); // trust first proxy
app.use(
session({
secret: config.session_secret,
resave: false,
saveUninitialized: false,
store: sessionStore,
name: 'reg-portal-cid',
cookie: {
secure: false,
httpOnly: false,
maxAge: 1000 * 60 * 60 * 24 * 365
}
})
);
app.use(flash());
require('./API_Gateways/passport')(passport);
// passport authentication
app.use(passport.initialize());
app.use(passport.session());
// user identification
app.use(require('./middleware/user_identification'));
app.use('/auth', require('./API_Gateways/Auth_Routes'));
// Application Gateways
// app.use('/api', function(req, res) {
// return res
// .status(200)
// .json({ message: 'Success! Base API endpoint.' });
// });
app.use('/users', require('./API_Gateways/User_Gateway'));
app.use('/customers', require('./API_Gateways/Customer_Gateway'));
app.use('/SDS', require('./API_Gateways/SDS_Gateway'));
app.use('/chemicals', require('./API_Gateways/Chemical_Gateway'));
app.use('/PDF', require('./API_Gateways/PDF_Gateway'));
app.get('/', (req, res) => {
return res
.status(200)
.send(
'<h1>This is the Node server for the Registration Portal.</h1>'
);
});
// Logout Route
app.post('/logout', (req, res) => {
console.log('app logout route');
sessionStore.destroy(req.sessionID, (err) => console.log(err));
req.logout();
req.session.destroy();
res.clearCookie('reg-portal-cid');
// res.clearCookie('connect.sid');
return res.status(200).json({ message: 'User Logged Out' });
});
// catch 404 and forward to error handler
app.use(function(req, res, next) {
next(createError(404));
});
// error handler
app.use(function(err, req, res, next) {
// set locals, only providing error in development
res.locals.message = err.message;
res.locals.error = req.app.get('env') === 'development' ? err : {};
// render the error page
res.status(err.status || 500);
});
process
.on('unhandledRejection', (reason, p) => {
console.error(reason, 'Unhandled Rejection at Promise', p);
})
.on('uncaughtException', (err) => {
console.error(err, 'Uncaught Exception thrown');
//process.exit(1);
});
module.exports = app;
Also, if this helps at all, after I have logged in with Postman and have a cookie, I click on the logout route and it just sits there and spins. When I hit cancel in Postman, my Node server terminal prints out POST /logout - - ms - - which tells me it is getting hit kind of.
The issue seems to be related to caching in the browser as there are no requests in the network tab of the browser.
To rule out this can you try to open the site in an incognito tab and try?
Try adding a memorystore, it worked for me
var MemoryStore = require('memorystore')(session)
app.use(session({
cookie: { maxAge: 86400000 },
store: new MemoryStore({
checkPeriod: 86400000 // prune expired entries every 24h
}),
resave: false,
secret: 'keyboard cat'
}))```
I figured out the issue. It was not anything anyone would have figured out from my question or from my code. So it is likely this question and answer will not be useful to anyone in the future. And it was very hard to find, like a needle in a haystack. I figured out that the session was not saving into the database on our live site, but it was on localhost.
So I started looking into why and started specifically looking into the express-mysql-session package. I figured out there was a way to run it in debug mode and once I did that, I instantly saw errors in the terminal saying it could not save to the database. So I knew I was on the right track. I looked up the specific error I was getting of ER_NOT_SUPPORTED_AUTH_MODE and that brought me to this Github issue thread: https://github.com/chill117/express-mysql-session/issues/109 And then I found twentythreetea's answer to run these 2 Mysql queries:
ALTER USER 'YOUR USERNAME'#'localhost' IDENTIFIED WITH mysql_native_password BY 'YOUR PASSWORD'
flush privileges;
I was using MySQL Workbench and figured out I had to remove the #'localhost' part. Once I did that, BOOM!! Everything is working beautifully on the live site!!
I am creating a login strategy for my angular 6 web app. The user clicks the login button and it triggers an HTTP request to localhost:3000/login on my node server. I am using okta as an authenticator and using the passport oidc strategy. If I go to localhost:3000/login it performs the redirect as expected to the okta sign-in the portal. When I try it from my angular front end I get a CORS error. I have enabled Access-Control-Allow-Origin with a wildcard.
//app.js
require("dotenv").config();
const express = require("express");
const app = express();
const bodyParser = require("body-parser");
const routes = require("./routes/routes");
const mongoose = require("mongoose");
const casperRoutes = require("./routes/casper-routes");
const oktaRoutes = require("./routes/okta-routes");
const slackRoutes = require("./routes/slack-routes");
const session = require("express-session");
const passport = require("passport");
const OidcStrategy = require("passport-openidconnect").Strategy;
const oktaBaseAuth = process.env.OKTA_AUTH_URI;
mongoose
.connect(
"mongodb+srv://xxxxx",
{ useNewUrlParser: true }
)
.then(() => {
console.log("connected to database!");
})
.catch(() => {
console.log("connection failed");
});
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));
app.use((req, res, next) => {
res.setHeader("Access-Control-Allow-Origin", "*");
res.setHeader(
"Access-Control-Allow-Headers",
"Origin, X-requested-With, Content-Type, Accept"
);
res.setHeader(
"Access-Control-Allow-Methods",
"GET, POST, PATCH, PUT, DELETE, OPTIONS, PUT"
);
next();
});
app.use(
session({
secret: "xxx",
resave: false,
saveUninitialized: true
})
);
app.use(passport.initialize());
app.use(passport.session());
passport.use(
"oidc",
new OidcStrategy(
{
issuer: oktaBaseAuth + "/oauth2/default",
authorizationURL: oktaBaseAuth + "/oauth2/default/v1/authorize",
tokenURL: oktaBaseAuth + "/oauth2/default/v1/token",
userInfoURL: oktaBaseAuth + "/oauth2/default/v1/userinfo",
clientID: process.env.OKTA_AUTH_CLIENT_ID,
clientSecret: process.env.OKTA_AUTH_CLIENT_SECRET,
callbackURL: 'http://localhost:3000/authorization-code/callback',
scope: "openid profile"
},
(issuer, sub, profile, accessToken, refreshToken, done) => {
return done(null, profile);
}
)
);
passport.serializeUser((user,next)=>{
next(null,user);
});
passport.deserializeUser((obj,next)=>{
next(null,obj);
});
app.use('/login', passport.authenticate('oidc'));
app.use('/authorization-code/callback',
passport.authenticate('oidc', {failureRedirect: '/error'}),
(req,res)=>{
res.redirect('/');
});
function checkLogged(req,res,next){
if (req.isAuthenticated()){
return next();
}
res.redirect('/login');
}
app.use("/api/casper",checkLogged, casperRoutes);
app.use("/api/data",checkLogged, routes);
app.use("/api/okta", checkLogged,oktaRoutes);
app.use("/api/slack", checkLogged, slackRoutes);
module.exports = app;
The front end service
import { HttpClient, HttpHeaders } from '#angular/common/http';
import { Subject, Observable } from "rxjs";
import * as OktaSignIn from "#okta/okta-signin-widget";
import { Injectable } from "#angular/core";
import { Router } from "#angular/router";
#Injectable({
providedIn: "root"
})
export class OktaService {
widget;
isAuthenticated = false;
user;
private headers = new HttpHeaders();
private authStatusListener = new Subject<boolean>();
constructor(private http: HttpClient, private router: Router) {}
loginUser(){
this.http.get('http://localhost:3000/login').subscribe(res=>console.log(res));
}
}
And the error
Failed to load https://dev-795809.oktapreview.com/oauth2/default/v1/authorize?response_type=code&client_id=0oag898j7zj7j8jqw0h7&redirect_uri=http%3A%2F%2Flocalhost%3A3000%2Fauthorization-code%2Fcallback&scope=openid%20openid%20profile&state=rtFMOtsHHBOc90UcM3nLIz%2Fp: Redirect from 'https://dev-795809.oktapreview.com/oauth2/default/v1/authorize?response_type=code&client_id=0oag898j7zj7j8jqw0h7&redirect_uri=http%3A%2F%2Flocalhost%3A3000%2Fauthorization-code%2Fcallback&scope=openid%20openid%20profile&state=rtFMOtsHHBOc90UcM3nLIz%2Fp' to 'https://dev-795809.oktapreview.com/login/login.htm?fromURI=/oauth2/v1/authorize/redirect?okta_key=c8hyLEuNV3KeYJyLfw2EU9xDjqsqeSOLft2jLzh-07E' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.
I've enabled CORS on my OKTA app as well. I read somewhere this may be because I cannot resolve CORS with a wildcard for authorization data. How can I connect to the backend for login using angular front-end running on a different port?
This happens because you're trying to make an XHR request to your backend. If you change it to redirect to your backend, it should work.
loginUser() {
window.location.href = 'http://localhost:3000/login'
}
The problem with this approach is that you'll likely be redirected back to your Node app after successfully logging in, rather than your Angular app. You could write custom code in your Node app to redirect back to the referrer after authentication. I've done this with Spring Security, but I'm not sure how to do it for Node.
Another option would be to use our Angular SDK and do the authentication in your Angular app, and set up your Node API as a resource server that simply validates the access token that's passed in.
I have a REST Api, and all endpoints must send a response when the user has an authentication token (I use the jwt token).
everything works fine when I test my code using postman, but from front not working(session closes after OPTION request, and on the request header bearer token not set).
Authentication Middleware
module.exports = function(req, res, next) {
const authorization = req.headers['authorization'];
console.log(authorization);
const token = authorization
? authorization.replace('Bearer ', '')
: null;
if (!token)
return res.status(403).send({ auth: false, message: 'No token provided.' });
jwt.verify(token, config.secret, function(err, decoded) {
if (err)
return res.status(500).send({ auth: false, message: 'Failed to authenticate token.' });
req.userId = decoded.id;
next();
});
}
route
const Router = require('express').Router;
//Authentication Middleware
const requireAuthentication = require('../middlewares/').Auth()
module.exports = () => {
let router = new Router();
router.use(requireAuthentication);
router.use('/accounts', require('./account')());
router.use('/projects', require('./projects')());
return router;
};
with authentication
https://i.stack.imgur.com/cAFw5.png
without authentication
https://i.stack.imgur.com/VUuuv.png
The reason was in access headers
I add middleware in bootstrap file.
app.use(function(req, res, next) {
res.header('Access-Control-Allow-Origin', '*');
res.header('Access-Control-Allow-Methods', 'GET, PUT, POST, DELETE, OPTIONS');
res.header('Access-Control-Allow-Headers', 'Content-Type, Authorization, Content-Length, X-Requested-With');
if ('OPTIONS' === req.method) {
res.send(200);
}
else {
next();
}
});
Try to use Express Cors: https://github.com/expressjs/cors
Simple Usage (Enable All CORS Requests)
var express = require('express')
var cors = require('cors')
var app = express()
app.use(cors())
app.get('/products/:id', function (req, res, next) {
res.json({msg: 'This is CORS-enabled for all origins!'})
})
app.listen(80, function () {
console.log('CORS-enabled web server listening on port 80')
})
Cross-Origin Resource Sharing (CORS) is a mechanism that uses additional HTTP headers to tell a browser to let a web application running at one origin (domain) have permission to access selected resources from a server at a different origin. A web application makes a cross-origin HTTP request when it requests a resource that has a different origin (domain, protocol, and port) than its own origin.
Read more about CORS here https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS
I have a suite of programs that are all under the same company and I am trying to develop a single login / authentication service that can persist through all of the programs. The idea is very micro-service oriented in which we will have one service to handle authentication and persist it as long as someone is in one of the programs. The issue is I need my other services to be able to access the same cookies across all of the domains and be able to send those cookies to the auth service for session verification. Please correct me if this is not the proper way to set up micro-services with a login/auth service.
For my front end (Angularjs):
service.login = function (obj, callback) {
$http.post(loginService + "login", obj, {
withCredentials: true
}).success(function (data) {
callback(data);
})
.error(function (data, status, headers) {
console.log(status);
});
};
For my server (Node, Express, Mongo):
var options = {
pfx: fs.readFileSync('company.pfx'),
passphrase: 'pass',
ca: [fs.readFileSync('gd1.crt'), fs.readFileSync('gd2.crt'), fs.readFileSync('gd3.crt')],
spdy: {
protocols: ['h2', 'spdy/3.1', 'http/1.1'],
plain: false,
'x-forwarded-for': true,
connection: {
windowSize: 1024 * 1024, // Server's window size
// **optional** if true - server will send 3.1 frames on 3.0 *plain* spdy
autoSpdy31: false
}
}
};
var server = spdy.createServer(options, app);
app.use(helmet());
app.use(cookieParser());
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));
app.use("/static", express.static('static'));
app.use("/logins", express.static('logins'));
app.set('trust proxy', 1) // trust first proxy for production with a proxy server
app.use(session({
resave: false,
saveUninitialized: true,
genid: function (req) {
return uuid.v4() // use UUIDs for session IDs
},
name: "myToken",
secret: 'mysecret',
cookie: { secure: false, maxAge: (45 * 60000) }, // set secure to true when in production
store: new mongoStore({ url: 'mongodb://' + base + 'sessions' })
}));
app.use(function (req, res, next) {
res.header('Access-Control-Allow-Credentials', true);
res.header('Access-Control-Allow-Origin', req.headers.origin);//req.headers.origin);
res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE,PATCH');
res.header('Access-Control-Allow-Headers', 'X-CSRF-Token, X-Requested-With, Accept, Accept-Version, Content-Length, Content-MD5, Content-Type, Date, X-Api-Version');
next();
});
Requesting:
app.get('/', function (req, res) {
var sess = req.session, token = req.cookies.myToken;
res.send('Hello World!');
});
To test this I have a virtual machine running on my system with the application deployed and then I am also running my localhost:/ application. From my understanding my cookies should remain the same between the two calls with the same session if I have CORS set up properly. Any help or suggestions?
Have you tried
res.header('Access-Control-Allow-Origin', '*.domain') ?
Basically a wildcard matching any subdomain under your main domain.