How to sequence authentication using Express and Angular 2 - node.js

Question

this is a authentication sequence question. I currently have a website that is hosted with an Express back-end, which manages the routing for both my main website and the API points. For any of my routes, the request has to come with a posted OAuth token for the website, which corresponds to a specific GMail account.
I have a function which checks this token/corresponding email to be authorized to access my website (although auth function is not done, this is not the problem).
function validateUser(token) {
return new Promise(
(resolve, reject) => {
if (!token)
reject("Empty token");
request(
'https://www.googleapis.com/oauth2/v3/tokeninfo?id_token=' + token,
(error, response, body) => {
console.log(body);
if (error) {
return reject("Error");
} else if (JSON.parse(body)['error_description']) {
return reject(JSON.parse(body)['error_description']);
} else if (body) {
let theDict = JSON.parse(body);
theDict['oauth_token'] = token;
return resolve(theDict);
}
return reject("some other error");
}
);
}
);
}
Then I have a route that manages get requests at any location (which then redirects to the login page, and once user is logged in it posts to the route with the token to get the content).
router.post(
'/*',
(req, res, next) => {
var token = req.body['token'];
validateUser(token).then(
(data) => {
request(
'http://localhost:4200',
(err, remoteResponse, remoteBody) => {
if (err) {
return res.status(500).end('Error');
}
res.send(remoteBody);
}
);
},
(err) => {
res.redirect('/login');
}
);
}
);
Now, the problem here is, whenever I go to the main page of my site (which reverse proxies back to the dev server), loading the index.html file works fine, but obviously loading everything else like "/assets/js" or default Angular 2 files does not work because they are not similarly authenticated.
Is there a way in Angular 2 to send these requests using the same authentication method? I have the oauth token being stored in my Angular 2 application once the index.html is loaded, so maybe I can use that somehow?
Alternatively, I can also setup another API route in Express to load the files from there, but when Angular 2 generates my index.html with the extra script tag for loading vendor.js or other files, can I tell it this new location instead?
Appreciate the help.

Answer 1

In express, you can use serve-static to serve static files, which would take precedence over your /* route. See https://expressjs.com/en/starter/static-files.html for more details.
Note: this assumes your static assets don't require authentication (which they usually don't).
app.use(express.static('public'))
Note: this should be above the block declaring the /* route in order for it to take precendence.
If you script.js file lives in the /public folder, it will be served at the root of the express server.