I am building a project with a React frontend and .NET core backend.
One of the functions of the site is users can submit a form (an event/meetup) which goes to an admin user for approval. Once approved the event is posted on the website along with a list of others from other users.
I then want the user to be able to go to the event/meetup page and when they see their post they should see an edit button (only visible to them and admin) that allows them to modify their post.
This is just one feature of the project but all the others are very similar. User submits data, admin approves, gets posted to live website, user or admin can edit.
I am trying to figure out how to build in authentication/permissions.
I was looking at using JWT tokens.
I am new to React so trying to not use Redux if possible.
What do people suggest as the best way to tackle this?
How do I manage permissions and what parts of a component gets rendered?
Thank you.
Given the scope of the application that you have described, unless you have any unusual authentication requirements, I would simply consider using cookies to track the user.
A user can login via a HTTP request (AJAX or form post) then subsequent requests will include the authentication cookie ensuring that they're logged in.
Like #azium mentioned, this question is not particularly related to React but is standard authentication flow for any web application.
Related
I’m in the process of creating a React application that will use Spotify’s web api to compile different types of analytics from each users’ Spotify account.
I set up my react app to use Firebase’s authentication so users can create an account and once logged in, link their spotify to that account.
The goal is to store important info in the user database like the web api’s refresh token so they don’t have to re-link their account in the future when they log in. However, I have very little experience with any of these frameworks and don’t know the best way to handle authenticating each users’ spotify account within my React app.
Should I also create an express server to handle the callbacks for my spotify authentication, database queries, and sending data to the front end, or can all of this be handled in React? And if it can be handled in react, where should I set the callback uri to go? The app has a home page for new users to see its features, and a dashboard page that they go to once logged in.
Sorry if this isn’t very well described, but Im basically just looking for the best practice stack to use for a React-Firebase App that uses the spotify web api, and whether or not I need to separate the spotify authentication into some backend to handle those requests.
I tried setting the callback to go to the Dashboard, but that means every time the user goes to the dashboard it has to check for the callback url parameters that it sends, which doesn’t seem like the best way to handle it.
I also tried creating a /callback page to handle the spotify authentication, which worked but meant there was a random callback page on my site, which also doesn’t seem ideal, so Im not sure what the best way to handle it is.
I'm working on MERN project, while on backend I have implement logic for route protection based on user role but now I'm confused if I should do that also in React-frontend or if backend logic is enough?
Thanks in advance
In general, each side should have rules for what users can see what information. On the backend, this is usually some sort of authentication and authorization to enforce access rules to each API route. On the frontend, this is rules for which pages the user can navigate to. These are two different things, but can work together. For example, the frontend might query the back end for information about what the current user has access to then use that to determine which items to put in a menu or which links to render on a page.
PS
Just note I am pretty new with react(with redux) and express in general.
My question is more of a "what do I do now?" or "help me in the right direction,please" type of question.
My english is very bad.
I am not afraid to teach myself , just show me where to look.
Most internet resources are half explained or assumes you are a pro.
I have a react client side application that needs user authentication, and after the authentication the react application needs to know if client is logged in or out
Now currently my react application is using conditional rendering which means my entire application is depended on the app-level state.
When my react application starts it starts with a login component where the user can add his email and password
Now from here on out I am completely stuck on what to do,so many questions...
How do I authenticate(from the backend) the user using his login input(email/password) and check agiants users in mongoDB if he is there or not, and if he is there how do I let front-end application know he is valid user and use that user information to access certain routes?
How can I check if user is logged in(after authentication and valid user have been authenticated) from front-end react application
Can I use cookies as a possible solution?For example set a cookie on the server-side(express) and access the cookie on the client-side(react) and vice-versa?
Little of topic(or maybe on topic) question? What is Passport.js and it help with my current dilemma ???
as far as authentication is concerned, using a JWT which will be saved in session storage and can be sent to your server app via API is a very popular approach with react/redux applications. this will be sent with all api requests so that the server app can verify that the user is logged in before serving data to them. to check if someone is logged in on the client app, you should have a reducer/saga/thunk that, upon recieving a successful login message from the server app, will update the auth reducer portion of the redux store to flip a boolean isLoggedIn property that you can expose to your props to check if you are logged in.
have a react client side application that needs user authentication, and after the authentication the react application needs to know if client is logged in or out
Now currently my react application is using conditional rendering which means my entire application is depended on the app-level state.
When my react application starts it starts with a login component where the user can add his email and password
there is a react-redux structure called the duck structure that is very good: https://github.com/erikras/ducks-modular-redux
sorry but I do not have mongodb experience but search for authentication handling and there will definitely be examples. .NET Core is excellent and there are many tutorials if you consider changing.
I would like to create a new AngularJS, Web API Single page application. Does anyone have any examples that show how I can set up a user login screen that connects to a WEB API controller for a simple login (no need for google/facebook login etc) that uses ASP.NET Identity and without the need for user registration.
Also how can I handle showing a new view once the login has been completed. What I would like is to have a solution that does not show routing in the browser URL. So for example I would like to be able to switch from the login view and a couple of other different views without the url changing from www.abc.com.
In other words I would like to avoid showing www.abc.com/login, www.abc.com/screen1, www.abc.com/screen2
Any advice would be much appreciated.
So, instead of trying to find an example, I created one instead (link at the bottom). To explain how the functionality works, I want to go over a few things:
The new ASP.NET Identity system provides an OAuth 2.0 Bearer token implementation which can be used with clients that consume a Web API resource over HTTP. Since the authentication is not stored in a session cookie, the server is not responsible for maintaining the authentication state. The side-effect is that the consumer has to manage authenticating the server and managing the returned token. This is the system that Microsoft uses in the SPA template that it provides with VS 2013.
AngularJS makes no assumptions about authentication, so it's up to you how to authenticate.
AngularJS provides the $http service for querying remote HTTP-based services as well as $resource which is built on top of $http. Using Authorization headers with the Bearer token implementation above, you can combine both to provide authenticated access to server resources over HTTP. AngularJS allows you to set a 'default' Authorization header which it will use in every subsequent HTTP transaction.
With that in mind, the way I accomplished this is by creating a User service that handles all of the authentication details, including setting the HTTP Authorization header, between the Web API server and the SPA. Based on the authentication status of the user, you can hide certain UI elements in order to prevent navigation. However, if you also define the state as requiring authentication as a property of the resolve object for the state, a watcher set on the $stateChangeError event will capture the error and redirect the user to the login form. Upon proper authentication, it will then redirect the user to the state they were trying to navigate to.
In order to prevent authentication from being lost between browser sessions (since the client is responsible for maintaining the authentication token, and that token is maintained in memory), I also added the ability for the user to persist the authentication to a cookie. All of this is transparent to the user. For them, it is practically identical to traditional form-and-session based authentication.
I'm not sure why you want to prevent the user from seeing the routes, but I have coded it as such. I am in debt to Sedushi's Plunker example of how to use AngularUI Router to navigate in a stateful manner without using URLs. Still, I'm not sure I can personally recommend this for any application I would write on my own.
The full solution (both the WebAPI and the WebUI) is available with step-by-step instructions here.
Let me know about any specific part that is unclear, and I will try to make it more clear in the answer.
Refer the following blog for the demo of single page application (SPA) for ASP.NET Web API 2 and AngularJS, developed by the team at Marlabs.
http://weblogs.asp.net/shijuvarghese/archive/2014/01/25/demo-spa-app-for-asp-net-web-api-2-and-angularjs.aspx
The app is built with following technologies:
ASP.NET Web API 2
EF 6 Code First
AutoMapper
Autofac
Semantic UI
AngularJS 1.1.5
The application is published on github at https://github.com/MarlabsInc/webapi-angularjs-spa.
#DavidAntaramian gave a great example. But if you want a simple one, you can look to this HOL from Microsoft.
Their latest example on github uses .NET Core, but you can download release from October 2015.
I would like to add an authentication mechanism to my AngularJS app with Firebase backend. The requirements are simple:
Authenticated users should be able to access any page.
If unauthenticated users goes to /some_page (any page except /login), they should be redirected to /login. Once they enter the right credentials, they should be redirected to back to /other_page.
Possible solution that is described here makes the following assumption:
My solution assumes the following server side behaviour: for every
/resources/* call, if user is not authorized, response a 401 status
But, I'm not sure if it is possible to enforce this behavior when using Firebase as a backend.
Any help and/or examples to implement such AngularJS+Firebase integration will be appreciated!
One solution is to do your routing on the client side with the $route service.
When a user authenticates through Firebase, save some record of this on the client, like in localstorage, some all-encompassing controller, or your own Angular service (my preferred option).
In your routing controller, if the user is authenticated, redirect to /some_page, otherwise redirect to /login and keep track of the $location where the user intended to go.
If, on the other hand, you want to route with your server, you could use the solution you linked to by having your server generate Firebase auth tokens.
I had the same requirement recently and came across this blog post.
http://www.42id.com/articles/firebase-authentication-and-angular-js/
It explains setting up an Angular JS application that interacts with Firebase. Also included are ways to authenticate against OAuth providers such as Google+ and Github using Firebase API, routing based on authentication status, storing user profile information on Firebase and setting up security rules on Firebase to protect user data.
If you are using Firebase Simple Login (rather than generating the authentication tokens on your own servers), you can see how to detect your login state client-side here:
Displaying text after login