I'm working on a simple frontend in react.js and a backend in node.js. At the moment I'm working on a Login that should work as follow:
The Frontend send username and password to the backend
Obtain a token that will be needed for all the following requests to the backend
Now all my files in the frontend should see the obtained token so they can use it to send the requests when needed, how can I do this, considering that not all the components in my React.js frontend are childs of the Login? Should I make a global variable? If yes how? Thank you in advance
After getting your token from node server, you can use useContext() hook of React and provide the token as value to the components. This is the simplest way in my opinion. Otherwise, if you are familiar with redux, flux etc, you can use them as well.
I think you can use localStorage to store the token you received from the backend and simply get it from localStorage when you need it.
Related
I have a project where I use Next.js on the front-end and Nest.js on the back-end.
I want to use a JWT authentification method via email and password.
My question is:
What is the best way to implement an authentification for Next.js with custom Back-end.
I'm sending API requests through redux-saga to get some data from back-end.
For me the Set-Cookies from the back-end not work. It's not applying on the client browser.
For now my possible solution is to create a custom axios instance and somehow do the Auth check there.
But I'm sure there should be a better solution, thanks for help!
For now my possible solution is to create a custom axios instance and somehow do the Auth check there.
Yes. This is the correct way of going about it. Give the token to whatever you use for queries and let it handle it for you.
You have a number of different ways of achieving this.
Provide it via a side-effect
Whenever a login event happens, run a side-effect to configure your axios instance to always send the newly acquired token with each request
Set the token in your cookies or localstorage and let axios retrieve it for each request
Set the token in a context and only make requests through that context with a hook
I am developing React Native app. I need to use access token for auth requests. Currently I am storing it in redux store. But on refresh token become null. So I was thinking of using AsyncStorage to store token. But don't know which one is fast. I can use Persist with redux store to keep token for long time as well.
One more issue with AsyncStorage is that I can't get token without using await, and for that I must use this inside async function. But I will require it in other places as well where I can't use async function , like to in header configs of post request where I set Authorization for all request.
Any help would be appreciated. Thanks.
Both comments are correct - if you want to reuse the access token when the user enters the app again after a short time, it becomes really handy to have the token still in the async storage.
For usage within the app it is then better to have the token in redux or the AuthContext, if you use that one.
Now Redux-persist is a combination of both, gets you the methods to automatically load data into store on starting the app and also put them back into storage.
I'm using Apollo GraphQL Client to develop my client app, and I implemented an authentication process using JWT that stored in Local Storage.
I have the following issue:
In order to make ApolloProvider to retrieve the token before it sends it to the server, I'm using the window.reload() function, beacuse the ApolloProvider is wrapping the whole application.
This solution is not optimal because we are not supposed to reload a page in SPA, which also causing my app to make an unnecessary network request after the login process and before the reload.
I'm looking for a better solution, thanks in advance for any help!
I am currently working on a single page react app. This app will not require any login and it will be publicly available.
I am making a POST request to a webhook of another API that I do not have access to and that I do not maintain. This API required me to send an authentication token via the POST. I wonder how I can securely store this token so that it does not get out in the world. I need to send it as is so storing it in a cookie that a backend provides is not an option. Storing in in JWT will not work as I can decode that without the secret.
Is there even a way to store the token without exposing it to the world?
I hope the issue is clear, if not let me know and I'll explain better.
Thank you all for your time!
I would usually have a local Express server running and proxy the request through that.
You would set up a route in your Express app that you would POST to from your React front-end, this Express route handler then makes the call to the external API from the server side which has the token to put in the header. Then the response is returned to your React front-end without it knowing anything about the external API or tokens.
You can't store the token in front-end. either you need to use
cookies/session to store the token. If you want to store the token you
need to encrypt it and store it will be the better option.
Please check here to understand the JWT token mechanism
if the web app doesn't have a login. you can't generate token without user details.
The token should be passed in the header of the request for best practices.
If you're using create-react-app to instantiate your React project, have you looked into using an environment variable to store the token? It's not 100% safe and secure, check here for the cons, but can be a quick fix without a separate proxy request. You can make an .env file (make sure to add it to your .gitignore if using git) in the root of your directory and define variables there. They need to start with REACT_APP, like REACT_APP_SECRET=1234 and can then be referenced where you need them in your app with process.env.REACT_APP_SECRET.
Read more about environments in React here.
I have a working rails RESTful api-only app.
I use Postman to consume that api. Now, to use the api the user have to login to http://localhost:3002/authenticate first by setting content-type to application-json in Header then Email and Password's value in body. After sending the POST request to the server I get auth-token as a json response. Then after successful login I have to pass that auth-token as a Authorization key in each GET request to get respective data.
Now, I want to build a UI for that back-end api as I learn React js. But till now all tutorials I could find was how to send GET requests without any authorization factor. And they are using axios, redux etc.
Can any-one please guide me on where should I start or how to
approach this problem?
Do I necessarily have to use a third-party library for this purpose?
If so which will be better axios or redux??
Any beginner friendly tutorial link would be of tremendous help
How start
Securing React Redux Apps With JWT Tokens - Rajaraodv explains how you get a jwt token and how to keep it in the front end app. I think this way will fits for you.
Keep the auth-token
Rajaraodv uses localStorage to keep the jwt token, you can use the same or keep directly in redux store, it's your choice, the best manner that fits you.
Ajax call
You can use Axios to make Ajax calls, or use fetchApi from the browser as Rajaraodv did, it's up to you.
Explains
"If so which will be better axios or redux??" these two libraries are totally different, each with it's own purpose.