I am currently using Auth0 for all of my authorisation stuff so that I don't have to worry about security as much. However, it is unclear how I delete a user, I am using their NPM module: express-openid-connect. I think I may have to attach a bearer token (which I have no clue how to get) to a delete request.
How can I do this?
Related
I'm relatively new to the modern JavaScript web development world. I've built a very simple Node/Express back-end and a separate React front-end. My vague plan is to have users that will have permission to access certain areas of the front-end, and then have the front-end make requests to the back-end. Can the front-end and back-end share the same authentication/authorization scheme? Can they both use something like Auth0? How can I make these two secure?
I'm a little stuck and would appreciate any advice or a nudge in the right direction. I'm mostly stuck because these are two separate applications but the same "user" would technically have permissions to certain React views as well as certain Express endpoints - how they moosh together?
Thanks.
Although seems not directly related to your topic, but I would actually suggest you try Meteor if you are not planning to immediately start working on large projects (not pressing too hard on scalability).
Meteor has a builtin support for Accounts and interacts with MongoDB nicely, and it also has its own DDP protocol that simplifies API call massively. It also interacts nicely with React.
If you think Meteor might not be a good choice for yourself, you could still learn from its design policies of authorization, etc. It has quite a bit package source code that are not too difficult to understand, and should be helpful for you to learn the basic idea. (Actually, Meteor's Accounts package already implements the basic idea mentioned by another answerer, you can learn from its design principles)
When users log in to your site, issue them with an access token that they keep client side. On front-end, check if user has token and correct permissions before rendering components. On back-end, send the token as request headers to the endpoints.
I have implemented a similar case, but with the spring boot kotlin at the backend instead. My solution is using JWT token to validate the authentication and authorization.
User logins by input login form and send POST method to backend via a REST API.Backend validates credential and returns the JWT token including encrypted user_role, expiration date, etc... if valid or 403 exception
Front-end decodes the JWT (using jwt-decode lib or something else),
save it to validate the access permission to specific page in the
website based on user_role. Eg: role='ADMIN' can access to admin dashboard page, role='USER' can access user profile page, etc.
If you use express as the backend, I suggest to use the feathersjs. It has backend solutions for this and an optional front end version. Refer: https://docs.feathersjs.com/api/authentication/jwt.html
Secure Front end (React.js) and Back end (Node.js/Express Rest API) with Keycloak follow this
In Vue, I understand that any Javascript included in the Vue files will be exposed to the browser (The User-agent in OAuth model). I want to make an API call to an API protected using OAuth 2 and have the data returned from the API call then displayed in the Vue app. Using OAuth, I need to use an Access token only known to the client server (node/express server) and I do not want to reveal the access token to the browser (user-agent).
I tried to see if I could do it using vue-axios, but that forces me to add the auth-token to the logic within vue, which means the browser can access the access token, which seems really unsecure.
So, I thought that I could make the API call on the node/express server that hosts the Vue application. Then, have the data included in the Vue app and send it to the user's browser with the data. The Vue app would then be rendered as normal. That would keep Auth Token hidden from the user's browser. However, I got stuck trying to include JSON data extracted from the api using Express in the Vue app.
How can I insert data into Vue using express, without putting code from the API call into vue?
Note: I'm new to Vue, so if anyone thinks that there is better way to do this securely, I'm open to suggestions.
It's possible you're trying to over-think this. You're not going to out-think the designers of OAuth. Consumers of apis need access tokens. Your OAuth access token is secure, in the sense that it can't be modified to get extra rights, and it should be short-lived, requiring regular re-authentication. You security lies in the fact that even if your user recovers the token, it won't let him do anything you're not happy for him to do anyway.
I've built my MEAN web application. To authorize users I'm using JWT tokens. But there is one problem. Sometimes while reloading page I get 401 Unauthorized while I'm still authorized. I checked twice my token in locale storage and it was right there. Then I tried to reload other my pages and it's so weird cause some of the are reloading nicely and some are returning 401. I have this error while hosting my app on Heroku . I'm using angular 5 for frontend and Node js for back. Does anyone have such a problem. If you need code it's on my github https://github.com/tia337/MEAN-Stack .
I think it have some problem in package. tokenNotExpired function have some issue. You can also check by your own whether token expired or not. Just decode your token from JWT library and compare expire time with current time.
Hope it will help.
I'm using a Node.JS express backend and an Angular 4 frontend in this app. I use JWT tokens to store an id which I use to find a user. Please note these JWT tokens do not expire.
Scenario:
User logs in.
JWT Token is generated and signed (containing the user ID)
JWT token is saved in localStorage
JWT token is used from then on to find the current user that's logged in
This was working perfectly. Now, something really weird happens. In production, occasionally, the JWT token seems to change value which then throws an error on my application as the user can no longer be found. I've run through all the code, nothing on the app itself should be changing the value at all.
I appear to have isolated this issue as only occurring mostly in Google Chrome however, (I think) I might have seen it occur in Safari at times. I have no idea why this would be happening. When I go to a protected page in Angular, it checks if a JWT token exists or not before proceeding. If it doesn't then it'll go to login. Nowhere is the value of that token changed.
Does anyone know what I may be doing wrong/why this is happening?
Are you using a middleware function in order to implement your JWT logic?
If not, I would recommend using a middleware function, that is written prior to your route logic/handler function. I guess, that helps debugging the problem and also a good practice.
I'm currently sending the client an empty html document with a few scripts included that set up my single page application with react-redux. After everything is set up I'm fetching the dynamic data using AJAX and determine if the user is logged in or not. If the user is not logged in, he will see the products available only for users that are not authenticated and conversely.
Even though I am a noob, this seems extremly primitive to me and I don't know how I can do this better.
So what is the best way to handle authentication in react-redux applications?
Thanks a lot for helping.
There's a few options:
Passport which you can install through npm and it has a variety of strategies you can authenticate through such as Auth0 Link here
Firebase - a solution that google has that can be used as a drop-in authentication module. Link here
Meteor framework - I believe this framework has multi user authentication. Link here
First, for authentification you need to have a token or session id on the client side. So, there should be next steps:
After login, you receive token|session_id from backend and put it to the store and also to the localstorage not to lose it after page reload.
While initializing your app, get the token from localstorage and put it to the store every time.
When you do request for products list, add the token to ajax request (usually in headers).
Based on token, back-end application should returns another list of products.
It is a regular logic for such situations and of course it requires work on back-end side as well.