I'm developing a program which consists of a back-end server, a mobile application, and a web application. I have added JWT token to my mobile application and I'm storing in async storage. However, I cannot find an appropriate way to do in web server.
I have created a middleware file for creating and checking token's validity. In my API route's I'm doing the following
router.post('/:url', middleware.checkToken, (req, res, next)=>
{
...
}
So, every time I call this API, middleware file checks for the token. In my mobile application, I'm storing the token in the async storage and pass it to the web server.
However, in the browser side, I want to store the token inside a cookie rather than storing in local storage. How can I do this without changing my code?
This is mobile login API.
router.post('/login', (req,res,next) => {
let username = req.body.username;
let password = req.body.password;
User.findOne({'username' : username})
.exec()
.then(doc =>{
if(doc.validPassword(password))
{
let token = jwt.sign({
id: doc.id,
email: doc.email,
},
config.secret,
{ expiresIn: '24h' // expires in 24 hours
}
);
res.status(200).json({
success: true,
message: 'Authentication successful!',
token: token
});
}
else{
// invalid credentials
res.send(403).json({
success: false,
message: 'Incorrect username or password'
});
}
})
})
I don't want a separate file for web login. I just want to use the same code, without copying to another file.
Should I write another different code for both mobile and web but one send a cookie, other sends plain token? Is there any way to achieve this with simple solution?
In short:
Mobile users send credentials to the mobile login page and they receive token.
Web users send credentials to the web page and they receive a cookie (a token resides inside the cookie). I don't want to have separate code for login.
You can easily add a new cookie in the front-end with document.cookie = ... (MDN document cookie)
In your middleware, you just have to parse for cookie instead of some Bearer token or whatever.
Related
I want to integrate sign in by google to an app that already has account signup and login.
I followed some youtube tutorial and I now have a working sign in by google working on my frontend. It returns a JWT upon successful log in. Decoding it gives me an object that contains an email, name, family name, pfp, and some other properties that I don't know what they are for.
What do I do with that ?
In my express server I have a register route
router.post("/register", async (req, res, next) => {
try {
// expects {email, password} in req.body
const { password, email } = req.body;
const user = await User.create(req.body);
const token = jwt.sign(
{ id: user.dataValues.id },
process.env.SESSION_SECRET,
{ expiresIn: 86400 }
);
res.json({
...user.dataValues,
token,
});
} catch (error) {
if (error.name === "SequelizeUniqueConstraintError") {
return res.status(401).json({ error: "Email already exists" });
} else if (error.name === "SequelizeValidationError") {
return res.status(401).json({ error: "Validation error" });
} else next(error);
}
});
Login route is similar.
The database I used was postgres with sequelize ORM, User.create(...) basically just creates a user and stores the hashed password to verify later.
As you could see, if they use google auth it wont have a password while regular signup would. Do I just allow User.create to also create a user if password not given? Would that be secure? What is the correct way to go about this?
A user who logs on to your app must
either type their email address and password into your login form, then your app checks the password hash and creates the token = jwt.sign(...). I would recommend that your JWT also contains the email address, preferably in the same format that Google's JWT uses.
or start a Google logon flow, then Google sends your app a JWT. During this flow, no password hash is looked up from your user database, but if the Google email address is not already in your database, it is a new user for whom you must insert a record into your database (only email address, no password).
The JWT should have an iss claim that tells you whether it was issued by your app or by Google. In Google's case, the JWT is signed by Google, and in your /register and /login routes you must verify the signature with jwt.verify using Google's public key (presumably this). (Actually, registration and login don't differ much if you use a third party authentication service like Google's.)
I assume that in both cases you store the JWT in a session cookie
res.cookie("jwt", token, {httpOnly: true});
and every subsequent request must repeat the signature verification of the JWT
try {
var jwt = jwt.verify(req.cookies.jwt, publicKey);
if (jwt.exp <= new Date().getTime() / 1000)
throw "expired";
// Token verification succeeded
} catch(e) {
// Token verification failed
}
(either with your own app's public key or with Google's, depending on the iss). Only after successful verification does the request count as authenticated, and you can then retrieve the user record from your user store based on the email address.
The password (hash) in your use database is thus optional, but even users with a password could use Google for logon.
I was attempting to build a signup/signin application using Nodejs. By looking at the articles, I came to know that it's a good structure to design your app so that your backend is actually a RESTful API and your client accesses that API. (Both client & server running on different servers, whereas the client is just a plain old static file server).
Now things went smooth until I had to sign users in. When the API endpoint (/signin) with the specific data is accessed, the data is validated against the database and if Okay, I am signing a JSON Web Token and passing it along to the client.
But the problem is that with this, I can only secure routes on my API i.e. I can only enforce that a user must be signed in to access a specific backend API endpoint.
But what can I do to enforce the same thing on my client with this JWT? For example, if in my client I have dashboard.html and I want it only accessible to signed in users, a user can go ahead and get a JWT generated. But how does this JWT come into play about restricting client routes?
My Signin Route:
app.post('/signin', (req, res) => {
var data = req.body;
if (!exists(data.username) || !exists(data.password))
return res.status(422).json({
message: 'All fields are required'
});
const users = db.get('users');
users
.findOne({
username: data.username,
password: shajs('sha256').update(data.password).digest('hex')
})
.then((user) => {
if (user) {
jwt.sign({
_id: user._id,
username: user.username
}, 'keyboard_cat', {
expiresIn: '1h'
}, (err, tok) => {
return res.status(200).json({
message: 'OK',
token: tok
});
});
return;
}
return res.status(200).json({
message: 'Invalid Username or Password.'
})
});
});
You can use conditional render on the front-end side. You can fire an api with the api token (generated from '/signin' api) which will tell you wether the api token is valid or not whenever you enter the route.
On the basis of the response from the server about the token you can decide which page to render (normal one or the unauthorised page).
There is also a better approach, send the api token in every route in the header, and if the token is malformed or invalid return 401 error from backend. Catch this error globally(or you can use response interceptor which is provided by axios) and then do conditional rendering.
I'm currently working on a MEAN full stack web project for a little marketplace app. This project's build in 3 parts :
- server -> node.js express mongoose
- front web -> angular 4
- front mobile -> ionic
I've to build this simple API REST, with a classic CRUD, but I have to use JWT to secure my adverts (for the market place).
An user will be able to delete or modify only the advertisements which he himself create, using JWT verification.
Currently, I have a token verification's middle-ware, but it does not prevent a user from deleting an ad created by another user.
I'm calling my middle-ware as I understood on tutorials, it can be change.
And after a lot of research, i only found information about authentication with JWT, then if someone can help my, thanks.
//my token verification's middle-ware
function verifyToken(req, res, next) {
var token = req.headers['x-access-token'];
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.' });
// if everything good, save to request for use in other routes
req.userId = decoded.id;
next();
});
}
//an example of middle-ware call
router.delete('/:id',VerifyToken, (req, res) => {
advertModel.findById(req.params.id, (err, advert) => {
if(!advert){
res.json({message:"No advert corresponding"})
}
advert.remove((err) => {
if(err){
console.log(err);
}
res.json({message: 'Successfully deleted'});
});
});
});
This application is still under construction, then if you have any comments that would allow me to improve the few pieces of code that you see, go.
jwt token when comes with a request, if that token is valid it just pass the request to next with that user credential, but if the token is not valid, it stops the request lifecycle. But it does not have anything to do with the things you are trying to do.
You can write a simple conditional in your controller code like this
if(req.user.id !== youradd.user_id){
return ('with valid message and http code')
#shahinmahmud is right. Basically there are two parts to what you are doing. Authentication and Authorization. Authentication is done by JWT token validation. Authorisation is to restrict access based on the user. In your case, if it's just access to one resource, a simple if-else will do. Otherwise you need to look into some user management libraries.
This definition should probably help
So far I have only dealt with server-rendered apps, where after a user logs in via username/password or using an OAuth provider (Facebook etc.), the server just sets a session cookie while redirecting to the relevant page.
However now I'm attempting to build an app using a more 'modern' approach, with React on the frontend and a JSON API backend. Apparently the standard choice for this is to use a JSON web token for authentication, however I'm having trouble working out how I'm meant to provide the JWT to the client so it can be stored in session/local storage or wherever.
Example to illustrate better:
User clicks link (/auth/facebook) to log in via Facebook
User is redirected and shown Facebook login form and/or permission dialog (if necessary)
Facebook redirects user back to /auth/facebook/callback with an authorization code in tow, the server exchanges this for an access token and some information about the user
Server finds or creates the user in the DB using the info, then creates a JWT containing a relevant subset of the user data (e.g. ID)
???
At this point I just want the user to be redirected to the main page for the React app (let's say /app) with the JWT in tow, so the frontend can take over. But I can't think of an (elegant) way to do that without losing the JWT along the way, other than to put it in the query string for the redirect (/app?authtoken=...) - but that will display in the address bar until I remove it manually using replaceState() or whatever, and seems a little weird to me.
Really I'm just wondering how this is typically done, and I'm almost sure I'm missing something here. The server is Node (Koa with Passport), if that helps.
Edit: To be clear, I'm asking what the best way is to provide a token to the client (so it can be saved) after an OAuth redirect flow using Passport.
I recently ran across this same issue, and, not finding a solution here or elsewhere, wrote this blog post with my in-depth thoughts.
TL;DR: I came up with 3 possible approaches to send the JWT to the client after OAuth logins/redirects:
Save the JWT in a cookie, then extract it on the front-end or server in a future step (eg. extract it on the client with JS, or send a request to the server, server uses the cookie to get the JWT, returns the JWT).
Send the JWT back as part of the query string (which you suggest in your question).
Send back a server-rendered HTML page with a <script> tag that:
Automatically saves the embedded JWT to localStorage
Automatically redirects the client to whatever page you like after that.
(Since logging in with JWTs is essentially equivalent to "saving the JWT to localStorage, my favorite option was #3, but it's possible there are downsides I haven't considered. I'm interested in hearing what others think here.)
Hope that helps!
Client: Open a popup window via $auth.authenticate('provider name').
Client: Sign in with that provider, if necessary, then authorize the application.
Client: After successful authorization, the popup is redirected back to your app, e.g. http://localhost:3000, with the code (authorization code) query string parameter.
Client: The code parameter is sent back to the parent window that opened the popup.
Client: Parent window closes the popup and sends a POST request to /auth/provider withcode parameter.
Server: Authorization code is exchanged for access token.
Server: User information is retrived using the access token from Step 6.
Server: Look up the user by their unique Provider ID. If user already exists, grab the existing user, otherwise create a new user account.
Server: In both cases of Step 8, create a JSON Web Token and send it back to the client.
Client: Parse the token and save it to Local Storage for subsequent use after page reload.
Log out
Client: Remove token from Local Storage
here is a login request from the server side. it's storing the token in the header:
router.post('/api/users/login', function (req, res) {
var body = _.pick(req.body, 'username', 'password');
var userInfo;
models.User.authenticate(body).then(function (user) {
var token = user.generateToken('authentication');
userInfo = user;
return models.Token.create({
token: token
});
}).then(function (tokenInstance) {
res.header('Auth', tokenInstance.get('token')).json(userInfo.toPublicJSON());
}).catch(function () {
res.status(401).send();
});
});
here is the login request on the react side, where I am grabbing the token from the header and setting the token in local storage once the username and password pass authentication:
handleNewData (creds) {
const { authenticated } = this.state;
const loginUser = {
username: creds.username,
password: creds.password
}
fetch('/api/users/login', {
method: 'post',
body: JSON.stringify(loginUser),
headers: {
'Authorization': 'Basic'+btoa('username:password'),
'content-type': 'application/json',
'accept': 'application/json'
},
credentials: 'include'
}).then((response) => {
if (response.statusText === "OK"){
localStorage.setItem('token', response.headers.get('Auth'));
browserHistory.push('route');
response.json();
} else {
alert ('Incorrect Login Credentials');
}
})
}
When you get a token from any passport authentication sites you have to save the token in your browser's localStorage. The Dispatch is Redux's Middleware. Ignore dispatch if you don't use redux in your app. you can just use setState here (A bit weird without redux).
Client-side:
Here's something similar API of mine, which returns token.
saving tokens
axios.post(`${ROOT_URL}/api/signin`, { email, password })
.then(response => {
dispatch({ type: AUTH_USER }); //setting state (Redux's Style)
localStorage.setItem('token', response.data.token); //saving token
browserHistory.push('/home'); //pushes back the user after storing token
})
.catch(error => {
var ERROR_DATA;
try{
ERROR_DATA = JSON.parse(error.response.request.response).error;
}
catch(error) {
ERROR_DATA = 'SOMETHING WENT WRONG';
}
dispatch(authError(ERROR_DATA)); //throw error (Redux's Style)
});
So When you make some authenticated requests,you have to attach the token with the request in this form.
authenticated requests
axios.get(`${ROOT_URL}/api/blog/${blogId}`, {
headers: { authorization: localStorage.getItem('token') }
//take the token from localStorage and put it on headers ('authorization is my own header')
})
.then(response => {
dispatch({
type: FETCH_BLOG,
payload: response.data
});
})
.catch(error => {
console.log(error);
});
Here's my index.js:
The token is checked each and everytime, so even if the browser got refreshed, you can still set the state.
checks if the user is authenticated
const token = localStorage.getItem('token');
if (token) {
store.dispatch({ type: AUTH_USER })
}
ReactDOM.render(
<Provider store={store}>
<Router history={browserHistory}>
<Route path="/" component={App}>
..
..
..
<Route path="/blog/:blogid" component={RequireAuth(Blog)} />
//ignore this requireAuth - that's another component, checks if a user is authenticated. if not pushes to the index route
</Route>
</Router>
</Provider>
, document.querySelector('.container'));
All that dispach actions does is it sets the state.
my reducer file(Redux only) else you can just use setState() in your index route file to provide the state to the whole application. Every time the dispatch is called, it runs a similar reducer file like this which sets the state.
setting the state
import { AUTH_USER, UNAUTH_USER, AUTH_ERROR } from '../actions/types';
export default function(state = {}, action) {
switch(action.type) {
case AUTH_USER:
return { ...state, error: '', authenticated: true };
case UNAUTH_USER:
return { ...state, error: '', authenticated: false };
case AUTH_ERROR:
return { ...state, error: action.payload };
}
return state;
} //you can skip this and use setState() in your index route instead
Delete the token from your localStorage to logout.
caution: Use any different name rather than token to save the token in your browser's localStorage
Server-Side:
considering your passport services file. You must set the header search.
Here's passport.js
const passport = require('passport');
const ExtractJwt = require('passport-jwt').ExtractJwt;
const JwtStrategy = require('passport-jwt').Strategy;
..
..
..
..
const jwtOptions = {
jwtFromRequest: ExtractJwt.fromHeader('authorization'), //client's side must specify this header
secretOrKey: config.secret
};
const JWTVerify = new JwtStrategy(jwtOptions, (payload, done) => {
User.findById(payload._id, (err, user) => {
if (err) { done(err, null); }
if (user) {
done(null, user);
} else {
done(null, false);
}
});
});
passport.use(JWTVerify);
In my router.js
const passportService = require('./services/passport');
const requireAuthentication = passport.authenticate('jwt', { session: false });
..
..
..
//for example the api router the above react action used
app.get('/api/blog/:blogId', requireAuthentication, BlogController.getBlog);
I need to build a token based authentication on my node.js app , that the user can use the his facebook or twitter credential to login my app, and use access token to get to resource. this post is suggesting to once authenticated through facebook or twitter or other, use access token on every request, and Session is NOT needed at all
For example
GET /api/v1/somefunction?token='abcedf'
The client gets the access token from the response.
The client calls some server api with the token argument.
so the following code, is to authorize user through twitter, if my app doesn't find my user information, then store user information into the database.
passport.use(new TwitterStrategy({
consumerKey: config.twitter.clientID,
consumerSecret: config.twitter.clientSecret,
callbackURL: config.twitter.callbackURL
},
function(token, tokenSecret, profile, done) {
console.log('TwitterStrategy /auth/twitter.............',profile.id, profile.displayName, profile.username, profile.emails[0], profile._json.avatar_url);
userModel.findUserByQuery({ 'social.twitter.id': profile.id }, function (err, user) {
if (!user) {
console.log('twitter user not found'.red);
userModel.createNewUser( { username:profile.username,
email:profile.emails[0].value,
img:profile._json.avatar_url,
fullname:profile.displayName,
password:profile._json.avatar_url,
social:{twitter:{id:profile.id,avatar:profile._json.avatar_url, name:profile.username,token:accessToken} }},
function(err,data){
if(err) return done(err);
else if(!data) return done(null, false, { message: 'can not create your profile in database' });
else {
console.log('save the new twitter user into database'.green, data._id);
return done(err, user);
}
})
} else {
console.log('twitter user found'.green);
return done(err, user);
}
})
}
))
However, I have two questions,
1. how to send the access token to the client for the following requests
in the code, after authenticated from twitter, I get the access token and send this token to the client on the browser, since the token is embedded in the url parameter, I tried the code
res.redirect ('/users/profile ? token = blabla '), but in the client browser, the url is still shown as '/users/profile' rather than '/users/profile ? token=blabla'
2. once authenticated from twitter, the following request with token is going through my app locally( which I store the token in database, and compare the following token to verify) or still to twitter API to authenticate?
if in the first situation, so I should store the token into the database, in order to compare the following request in token in the following requests to my app? is that right
I'm also trying hard to get this, and just found this rather relevant answer: Call Bitbucket REST API using 2leg oauth token
I just can't get how to do this with passport? Particularly, how to get ouath instance from passport authenticated session, to do oauth.get(...), as described here: https://github.com/ciaranj/node-oauth
UPDATE: Jared (author of passportjs) has explained this is wrong approach in the google groups thread below, and recommends to use https://github.com/mikeal/request.
This is how it works for me:
var oauth = {
consumer_key: process.env.BB_CONSUMER_KEY,
consumer_secret: process.env.BB_CONSUMER_SECRET
};
passport.use(new BitbucketStrategy({
...
function(token, tokenSecret, profile, done) {
oauth = extend(oauth, {
token: token,
token_secret: tokenSecret
});
}
Note, tokens above may need be persisted per user in clustered environment.
Later, to access api, do:
request.get({url: 'protected end point', oauth: oauth})
Hope it will help someone!