I am trying to learn to react front end by creating a simple frontend website. My goal is simple I want to implement a login menu when I run the app. The user will log in through this window and if the user is a regular user it will redirect the user to a new component call regular.js. If the user is admin then redirect the user to another page lets calls that admin.js. I have been trying to understand how to redirect in react. Like in javascript I can write if Credentials match then go to this page can I do that too in react? However, I do not want the user to log out automatically when the redirect happens. I am not sure how to approach it because I read other answers saying use hooks but then some said use routes as well. I am providing the App.js, index.js, and loginForm.js file underneath, any direction will be helpful or documents to refer to like guide me to do this will be helpful. I am not looking for a design or any content on the new pages I just want the redirect to work while the user is logged in.
You should not handle login on the front end with React states, there is 0 security in this. You should look into how to implement authentication, consider reading through some tutorials like this one: https://bezkoder.com/react-express-authentication-jwt/
Related
I'm working on this web app that include several pages.
I really would know if it's better handle the router in the backend (Node.js) or in the frontend (React.js) or with both (I didn't understand in the Internet).
For example, how have I to work with the login page (that will re-direct on the user area).
Thanks
I don't know how big your project is, or its requirements, but if this is a personal project I would suggest using the React Router Library. You can make a call to your Express app from the Front, and based on the response you get back you can route the user to wherever.
In a project of mine I had an express route for login that looked for the user in a database, then checked to see if they provided the correct password. If the user provided the wrong password or if the account wasn't found I sent back an error message. If the user provided the right password I sent a success message to the front. I would listen for the response on the frontend, if I received a success message, I would call useNavigate from React Router to route the user to the user page.
Here is the documentation for React Router Dom: https://www.npmjs.com/package/react-router-dom
If this is a bigger project and you need to think about accessibility and search engine optimization, you would have to find a way to render React from the backend. Its called server side rendering, which I'm not familiar with.
Hope this helps a little.
I'm trying to incorporate deep links/universal links for my music app so when I send out emails to people regarding new songs/albums, they will either be directed to details page or the login/signup page (with the song/album info displayed).
branch.io looks good but I'm having a tough time understanding how my app would handle the appropriate redirects for a single-page app. When a user clicks on a generated link, how should my app request for more data based on that user's link so I can render the correct page/view?
The flow is pretty simple. Create a Branch link with all the parameters you want to pass -> you click on the link -> Redirect to your the web app -> Initialise Branch Web SDK -> Callback is received with all the parameters -> Use these parameters to navigate to whatever page you want in your app and/or use these parameters to customise your user experience.
You can read more about it here:
https://docs.branch.io/web/integrate/#read-deep-link
https://docs.branch.io/deep-linking/routing/#branch-added-parameters
In case you still have doubt feel free to reach out to our super helpful support team at support#branch.io
Both Derick Bailey and David Sulc are very conclusive at the time to have the Landing page and auth logic (+ login/signup forms) separed from the actual Marionette app. However, I haven't been able to find any example nor explanation of how should this be handled and thus, I have few doubts:
CHANGING THE INDEX.HTML
The index.html won't be loading the Marionette app anymore. This means that when loading example.com we will end up in a simple landing page even if the user is authenticated (localStorage has his token credentials stored). I understand that this simple landing should somehow handle that if the user has stored credentials, the user should be immediately redirected to a app.html that will actually load the Marionette app, with the users account and the initially accessed route. In other words:
The url fragment is stored.
Check if user is logged in
If the user is logged in, then load app.html which will load the app (how to load the app for a certain route?)
If the user is not logged in, then do nothing
LOGGING IN
In the case the user is not logged in and logs in. Independently of if index.html has the login form or we have redirected the user to login.html, our auth logic has to be independant of the app. This means login.html has to include a .js that will make an ajax call against out API.
User enters credentials
AJAX call to check credentials
If API returns token, then store credentials in localStorage and load app.html (which will load the marionette app)
SIGNING UP
The user signs up at /signup signup.html or index.html if this includes a sign up form. Whichever HTML is loaded, it must include the necessary js logic to make an ajax call to the API for a new user.
User enters new account data
Our independant js makes an ajax call to the API
If creation successful we store the data to localStorage and load app.html (which loads the app)
If not, we show errors
And you'll say I'm missing the question. My question is, are these workflows correct?
Which workflow do you normally use?
How do you structure this code inside the marionette app project folder?
If you know of any simple examples on github on how to approach this I'd be very happy to learn about them!
Well, in case someone stumbles upon this question, I finally decided to have the landing/auth logic inside the Marionette app. This way I keep my backend to be only an API REST, and I don't need of any further backend to serve me more pages.
i am enabling Facebook login button to my blog by follow this https://developers.facebook.com/docs/facebook-login/login-flow-for-web/
I've done everything perfect but its not showing i am getting these when i goto browser console.
Invalid App Id: Must be a number or numeric string representing the
application id. all.js:56 FB.getLoginStatus() called before calling
FB.init().
what to do?
and i also integrate google+ sign in button and its working perfect check it in working here.
http://hashtaginside.blogspot.com/
You need an app id for your log-in workflow to work. To get one you must register as a Facebook Developer. Then after that go to https://developers.facebook.com/apps and create a new app. Then you will be able to use Facebook log in.
Then for your log-in button change the src to
http://www.facebook.com/plugins/login_button.php?app_id={your_app_id}&channel=http%3A%2F%2Fstatic.ak.facebook.com%2Fconnect%2Fxd_arbiter%2FLEdxGgtB9cN.js%3Fversion%3D40%23cb%3Dfd83dd978%26domain%3Dhashtaginside.blogspot.com%26origin%3Dhttp%253A%252F%252Fhashtaginside.blogspot.com%252Ff2e65db4e4%26relation%3Dparent.parent&locale=en_US&max_rows=1&sdk=joey&show_faces=true&width=200
Where {your_app_id} is the app id Facebook gave you.
Once you have that if you need more assistance let me know I can take you further.
In my work with a Javascript single page application, i have recently run into a problem.
The whole idea behind this project, is to avoid page reload. When the user comes to my application they won't need to make any reloads. This is done with jQuery and Backbone.js and PHP as service.
I have this static index.html file, where i hide my login container and application container. Then i show the login container, if the user is not recognize by my application, and if they have auth i show the application.
if auth:
application.show()
elif not auth:
login.show() // like Gmail or Facebook etc.: Information + login-form
I wan't to show users who aren't authenticated, both login-form and general info. Very important is also that the site can be found by robots as Google etc.
Can this only be done with 2 different files, giving me reload? A site.com and login.site.com. That solution irritates me, because my login, as it is by now, is quite instant.
Not sure I get the question completely but if you want to check if a user in authenticated, try to do an ajax call. If it fails with "401 unauthorized" the user needs to login...
You can achieve what you want by using ajax calls to authenticate (Although this is not a recommended approach, and people usually prefer the two page solution you have outlined).
What you can do, is have very skinny controllers that just exist to provide data to rich client UI.
Your gateway controller(A separate controller, with no model that acts as an entry point in the application) will just render the basic application structure to the client (without any user specific data, you dont know if the user is logged in, you dont need to know at this point). Then the client will query the UserController for identity of currently logged in user, if user is logged in server returns a json response containing information related to user and if not, server returns a response saying that user is not logged in. Then you can fetch a partial for the login form and then submit it again through ajax. As you see, creating the UI once and communicating with the server with lightweight ajax calls can solve your issue easily.