Destructuring assignment object from a middleware response - node.js

I created a middleware as below:
const oAuth = (req, res, next) => {
axios.post(tokenEndpoint, "", { params: {
grant_type: process.env.GRANT_TYPE,
client_id: process.env.CLIENT_ID,
client_secret: process.env.CLIENT_SECRET,
code: process.env.AUTHORIZATION_CODE,
}}).then(response => {
req.oAuth = response.data;
//console.log(response.data);
console.log(req.oAuth);
}).catch(err => {
console.error(err);
})
next();
}
module.exports = oAuth;
the response/result of the oauth function is something like:
{
access_token: '1000.ddf6d96b4f3sadasdasdas55a2450ae13',
refresh_token: '100dasdsadasdsadhgdhgfhdghdfghe427288',
api_domain: 'https://www.oapis.com',
token_type: 'Bearer',
expires_in: 3600
}
now in the "index.js" file I'm trying to destructure the oAuth function response object to access the attribute access_token and put it in the URL to make a post request, but I'm not succeeding. what am I doing wrong?
const express = require("express");
const axios = require("axios");
const oAuth = require("./oAuth.js");
const app = express();
app.use(oAuth);
var port = process.env.PORT || 3001;
const someAPI = "https://www.oapis.com/crm/v2/Leads";
app.get("/", async (req, res) => {
try {
const {access_token} = req.oAuth
const response = await axios({
method: "GET",
url: someAPI,
//timeout: 1000,
headers: { Authorization: `Zoho-oauthtoken ${access_token}` },
});
return res.json(response.data);
} catch (error) {
console.log(error);
if (error.response.status === 401) {
res.status(401).json("Unauthorized to access data");
} else if (error.response.status === 403) {
res.status(403).json("Permission denied");
} else {
res.status(500).json("Whoops. Something went wrong");
}
};
});

I would suggest using async/await here to wait for oauth response and only then modify request object in order to pass it further to the next() callback.
const oAuth = async (req, res, next) => {
try {
const response = axios.post(tokenEndpoint, "", { params: {
grant_type: process.env.GRANT_TYPE,
client_id: process.env.CLIENT_ID,
client_secret: process.env.CLIENT_SECRET,
code: process.env.AUTHORIZATION_CODE,
}});
console.log(response.data);
req.oAuth = response.data;
} catch (e) {
console.log(e);
}
next();
}
module.exports = oAuth;

Related

Cannot post Token from Client

Frontend Code
<script>
const formDOM = document.querySelector(".form");
const btnSubmitDOM = document.querySelector(".btn-submit");
// get token form server
formDOM.addEventListener("submit", async (e) => {
e.preventDefault();
const email = document.querySelector("#email").value;
const password = document.querySelector("#password").value;
try {
const { data } = await axios.post(
"http://localhost:3000/api/v1/auth/login",
{ email, password }
);
console.log("token", data.token);
localStorage.setItem("token", data.token);
} catch (error) {
console.log(error);
}
});
// after submit, if authenticated, goes to protective route
btnSubmitDOM.addEventListener("click", async () => {
const token = localStorage.getItem("token");
console.log("toekn when press", token);
try {
const { data } = await axios.get("http://localhost:3000/api/v1/inventories", {
headers: {
Authorization: `Bearer ${token}`,
},
});
location.assign("/inventories");
} catch (error) {
localStorage.removeItem("token");
console.log(error);
}
});
</script>
Here is the backend code
const jwt = require("jsonwebtoken");
const auth = async (req, res, next) => {
const authHeader = req.headers.authorization;
if (!authHeader || !authHeader.startsWith("Bearer")) {
res.send("Auth route - Unauthenticated Error");
}
const token = authHeader.split(" ")[1];
console.log("token is ", token);
try {
const payload = jwt.verify(token, 'secret');
// console.log(payload);
// attached to the inventories route
req.user = {
userId: payload.userId,
email: payload.email,
};
// console.log(req.user)
next();
} catch (error) {
console.log(error);
}
};
module.exports = auth;
Here is the error from server side
token is eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VySWQiOiI2MzY4ZjFiM2U1ODJlYmQ1MjJkODI4MGEiLCJlbWFpbCI6Imt5YXdAZ21haWwuY29tIiwiaWF0IjoxNjY3ODI3NzIzLCJleHAiOjE2NzA0MTk3MjN9.rptgRrYB4TrLQCxbB18JqMHd05LSox-LQuiLJS0L2Gw
/Users/kyawmyo/Desktop/software-development/nodejs-&-vanilajs-projects/inventories/middleware/authentication.js:8
const token = authHeader.split(" ")[1];
^
TypeError: Cannot read properties of undefined (reading 'split')
I try to test with postman, all working fine.
But I send request from client side, it is error, I cannot figure it out. Please help.

JWT Full Stack Verify Token Not Working to Frontend

I have an API in which uses VerifyToken authentication with JWT. This works through postman, however it appears there's an issue passing this through to the frontend to ensure the token is verified.
For one, I have a code block to create verifyToken:
const verifyToken = (req, res, next) => {
const authHeader = req.headers.token;
if (authHeader) {
const token = authHeader.split(" ")[1];
jwt.verify(token, process.env.JWT_SEC, (err, user) => {
if (err) res.status(403).json("Token is not valid!");
req.user = user;
next();
});
} else {
return res.status(401).json("You are not authenticated!");
}
};
If I run the following in Postman, it works all good, header and all.
localhost:5000/api/users/updateUser/62a9be62a8262145b72feee9
This is then handled in requestMethods,
import axios from "axios";
const BASE_URL = "http://localhost:5000/api/";
const user = JSON.parse(localStorage.getItem("persist:root"))?.user;
const currentUser = user && JSON.parse(user).currentUser;
const TOKEN = currentUser?.accessToken;
export const publicRequest = axios.create({
baseURL: BASE_URL,
});
export const userRequest = axios.create({
baseURL: BASE_URL,
bearer: { token: `Bearer ${TOKEN}` },
});
However when I pass this to the frotnend, for example through a request like this,
const updateUser = async () => {
//include all in the state earlier with spread
//update only position, which is input
userRequest.put(`users/updateUser/${user._id}`, userData);
console.log('your data has updated to', userData)
//include the put request here for API
}
I am now getting an error for a 401: Error: Request failed with status code 401
It appears the token isn't being passed to the frontend correctly. What am I doing wrong?
Passing token in headers in Axios is not tuned correctly. Notice the headers config.
export const userRequest = axios.create({
baseURL: BASE_URL,
headers: { token: `Bearer ${TOKEN}` },
});
Another way to pass the token is where you are calling the API:
const updateUser = async () => {
//include all in the state earlier with spread
//update only position, which is input
userRequest.put(`users/updateUser/${user._id}`, userData, {
headers: {token: `Bearer ${TOKEN}`}
});
console.log('your data has updated to', userData)
//include the put request here for API
}
Here is another tip: in your auth middleware by detecting a wrong token, do not go to next and return!
const verifyToken = (req, res, next) => {
const authHeader = req.headers.token;
if (authHeader) {
const token = authHeader.split(' ')[1];
jwt.verify(token, process.env.JWT_SEC, (err, user) => {
if (err) {
res.status(403).json('Token is not valid!');
return;
} else {
req.user = user;
next();
}
});
} else {
return res.status(401).json('You are not authenticated!');
}
};

NodeJS - Custom Scheme URIs are not allowed for 'WEB' client type

I am trying to use Oauth2 with googleapis but I got some error like this.
I found someone got same error but they are using IOS, I am using NodeJS in this case.
I do follow this example: https://dev.to/uddeshjain/authentication-with-google-in-nodejs-1op5
This is my code:
const { google } = require('googleapis');
const express = require('express')
const OAuth2Data = require('./google_key.json')
const app = express()
const CLIENT_ID = OAuth2Data.client.id;
const CLIENT_SECRET = OAuth2Data.client.secret;
const REDIRECT_URL = OAuth2Data.client.redirect
const oAuth2Client = new google.auth.OAuth2(CLIENT_ID, CLIENT_SECRET, REDIRECT_URL)
var authed = false;
app.get('/', (req, res) => {
if (!authed) {
const url = oAuth2Client.generateAuthUrl({
access_type: 'offline',
scope: 'https://www.googleapis.com/auth/gmail.readonly'
});
res.redirect(url);
} else {
const gmail = google.gmail({ version: 'v1', auth: oAuth2Client });
gmail.users.labels.list({
userId: 'me',
}, (err, res) => {
if (err) return console.log('The API returned an error: ' + err);
const labels = res.data.labels;
if (labels.length) {
console.log('Labels:');
labels.forEach((label) => {
});
} else {
}
});
res.send('Logged in')
}
})
app.get('/auth/google/callback', function (req, res) {
const code = req.query.code
if (code) {
oAuth2Client.getToken(code, function (err, tokens) {
if (err) {
console.log('Error authenticating')
console.log(err);
} else {
console.log('Successfully authenticated');
oAuth2Client.setCredentials(tokens);
authed = true;
res.redirect('/')
}
});
}
});
const port = process.env.port || 3000
app.listen(port, () => console.log(`Server running at ${port}`));
And credentials file: google_key.json
{
"client": {
"id": "xxx-rm7s51vmr320brk5b5mrhopgma0e65o9.apps.googleusercontent.com",
"secret": "nIMQpHo6LRMs128Hp8sjh6-bxxxx",
"redirect": "testauth.com:3000"
},
"credentials": {
"access_token": "your access_token",
"token_type": "Bearer",
"expires_in": 3600,
"refresh_token": "your refresh_token"
}
}
Any help!

Securely access route with JWT and localstorage

I'm building a small application where a user logs in and gets redirected to /profile. Right now, I fetch the JWT from localstorage and check it via the server. The server then sends it back to the client to tell me if it's a valid session or not.
jQuery/Client:
UserController.initPanel = () => {
if (session === null) {
window.location = "/";
} else {
UserController.requestAuth(session);
}
};
UserController.requestAuth = (sessionToken) => {
var settings = {
"url": "/api/auth",
"method": "POST",
"headers": {
"Content-Type": "application/json",
"Authorization": `Bearer ${sessionToken}`,
},
"data": ""
}
$.ajax(settings).done(function (response) {
console.log(response);
});
};
Node.js/auth.js route:
router.post("/", (req, res) => {
const authHeader = req.headers.authorization;
if (typeof authHeader !== 'undefined') {
const bearerToken = authHeader.split(' ')[1];
verifyToken(bearerToken, (authData) => {
tokenRequest(authData, (authResponse) => {
handleAuthResponse(req, res, authResponse);
})
});
}
});
const handleAuthResponse = (req, res, authResponse) => {
console.log(authResponse);
return res.status(200).json(authResponse);
}
const verifyToken = (token, cb) => {
jwt.verify(token, 'mysecret', (err, authData) => {
if (err) {
res.sendStatus(403)
} else {
cb(authData);
}
});
}
const tokenRequest = (authHeader, cb) => {
//console.log(authHeader);
var config = {
headers: {'Authorization': `bearer ${authHeader.token}`}
};
axios.get('https://myapi.dev/api/session/me', config)
.then((res) => {
if (res.data.error) {
return response.data
} else {
cb(res.data);
}
})
.catch((error) => {
console.log('error', error);
});
}
I feel like this isn't the correct way to do it. I'm rendering templates with ejs:
router.get("/profile", (req, res) => {
const settings = {
title: "Profile",
revslider: false
};
res.render("profile/profile", { settings: settings } );
});
And if for some reason, JS is disabled, /profile is still accessible. Which isn't that big of a problem, it just feels wrong.
So, is it possible to access /profile route, securely checking for authorization server-side first, before rendering?
Also, auth.js returns some user data I could use in the .ejs template. So that's another reason I'd like to try check auth before rendering as well.
EDIT:
Auth middleware, which I didn't use because I wasn't sure how to pass in the token?
module.exports = (req, res, next) => {
try {
const decoded = jwt.verify(req.body.token, 'mysecret');
req.token = decoded;
} catch (error) {
console.log(error);
return res.status(401).json({
message: 'Auth Failed'
});
}
next();
}
Very basic middleware implementation below which leverages express and express-session.
We basically create a simple function to check req.session exists, within that object, you could have something that identifies whether the user has actually authenticated. I'd recommend you add your own logic here to further check the user status.
const authCheckMiddleware = (req, res, next) => {
// Perform auth checking logic here, which you can attach
// to any route.
if(!req.session) {
return res.redirect('/');
}
next();
};
The authCheckMiddleware can be attached to any route, with app.use or router.use. The req object is passed to all middleware.
// Use the authCheckMiddleware function
router.use('/profile', authCheckMiddleware);
Your router.get('/profile') call is now protected by the above middleware.
// Route protected by above auth check middleware
router.get("/profile", (req, res) => {
const settings = {
title: "Profile",
revslider: false
};
res.render("profile/profile", { settings: settings } );
});

Google OAuth getting new access token with refresh token

I'm trying to get my refresh_token to generate a new access_token. I'm using the request module to make the request, but It's returning an error saying something along the lines of "Could not find page".
var request = require('request');
module.exports = function(callback){
console.log('here');
request('https://googleapis.com/oauth2/v3/token?client_id=NotID&client_secret=Not_Secret&refresh_token=NotRefresh&grant_type=refresh_token', function (error, response, body) {
if (!error && response.statusCode == 200) {
callback(response)
}
});
}
Try this:
request.post('https://accounts.google.com/o/oauth2/token', {
form: {
grant_type:'refresh_token',
refresh_token:'..',
client_id:'..',
client_secret:'..'
}
}, function (err, res, body) {})
This works..
const axios = require('axios');
const querystring = require('querystring');
const keys = require('../config/keys');
const getAccessToken = async refreshToken => {
try {
const accessTokenObj = await axios.post(
'https://www.googleapis.com/oauth2/v4/token',
querystring.stringify({
refresh_token: refreshToken,
client_id: keys.googleClientID,
client_secret: keys.googleClientSecret,
grant_type: 'refresh_token'
})
);
return accessTokenObj.data.access_token;
} catch (err) {
console.log(err);
}
};

Resources