I've been with this issue for days and I cant seem to figure out, Google also doesnt help.
I log in, I get JWT token from the API response, add the token to my localstorage and my plan is to then redirect to the dashboard. How would I go on about adding the token to header? I cant seem to figure out. When I push the dashboard route to history, the page doesnt get reloaded it simply renders the dashboard. The dashboard route is protected in my backend and it verifies if the token is valid from the header, if so then it lets on the route. but if I push to history then it completely ignores the backend. I tried doing like window.location.reload(), then it reloads but I cant figure out how to add the token to header from localstorage.
Thanks
If you're in a single page app, like a React app with React router, navigating between routes do not trigger a page reload or server request.
With your JWT on your client, you should then be able to access it and attach it to the ajax requests made by your React app.
Somewhere in your app, you would make requests using fetch() or similar, where you can configure the Authorization: Bearer XXXXX header.
Related
I am pretty new to React and front end world.So ignore mistakes.
So i am using auth0 for authentication in my react app. Login button is a component which redirecta to auth0 authentication button and upon login user can go to /profile component. Using react router for going to profile component.
All this works perfectly in localhost.
But the moment i deployed on s3 and cloudfront. it shows profile key not found so based on various solution (https://stackoverflow.com/a/58978355/13126651)on stack now add i can see my go to profile component however the page is entirely blank nothing is being render on profile component.
UPDATE :- the error is definitely related to cloudfront, because if i directly access my s3 bucket website endpoint,it renders everything works.
I solved it by add error response 403 404 for cloud front.
Logging out on page refresh in React + Redux Application, but if I store token in localstorage, then it works fine, but i don't want to store token in localstorage. Is there any other way to achieve it?
I just can't seem to access URLs to the server or backend once my react-router has been loaded. I can curl the requests like so to https://produktivv.com/api/testme - the same goes if you access this link without visiting the home page.
Basically, as soon as React is loaded in to the browser, it handles all URLs from there on in. Have even set up a reverse proxy, still no luck. It's a React thing.
All is working with axios requests to the server, I just can't seem to access it from the browser.
I am using React and Express. I am doing server side rendering, for the first load for any of my routes.
This routes are something like "/contacts", "/aboutUs" and so on.
Now I am doing API POST and GET request with Axis and hitting endpoints like "/api/contactForm"
When someone visits this route in Browser, there is nothing there.
Is it possible or actually is there any need doing SSR from the responses that this API gives me?
For example, I visit "http://mydomain/contacts" page and that page is server side rendered. On that page there is button, and when it's clicked it uses Axios to make GET request for some data in Express on a route "/api/myData". I return the fetched data to client and show it on "http://mydomain/contacts" page.
Can the data that is being returned be server side rendered (SSR). I don't see what would be the benefit but to ask just in case?
When user navigation to app ex: http://myapp.mydomain.com
I initialize a bunch of stuff, make requests to auth the user based on a cookie etc. This setup the main state of my main-reducer.
If a user navigation directly by pasting let say: http://myapp.mydomain.com/userProfile
The main state, will never be setupped. So the trick I'm using is putting the last part of the url (userProfile) in a cookie (or somewhere else) and redirecting to http://myapp.mydomain.com. After auth and requests, I the redirect back to the page the user wants to view. This works, but feels wrong. I was wondering: is there a better way of doing that?
Thanks!
Why don't you just make the route /userProfile as protected route.
Only if the user is authenticated he can see that page if not redirect to root page and re-validate the user.