Hello is there any guide to using a
Hello, is there any guide to using a global state provider with Refine tool? I'm trying to implement a global state to store access token, but it appears it is going into an endless loop. Can somebody guide me? Note I'm just a beginner and following a tutorial to make this. Thanks for being gentle.
14 Replies
sensitive-blue•2y ago
Hello @kataiwo2023 , never hesitate asking any questions here! Any question is welcome for us. We are happy to have you on board.
I guess you can use AuthProviders to handle access tokens, refine already handles it for you
https://refine.dev/docs/api-reference/core/providers/auth-provider/
Auth Provider | refine
Auth provider is an object which contains methods to handle authentication and authorization in your app. It provides a way to authenticate users and authorize them to access resources. refine consumes these methods via auth hooks.
Hey @batuhanw! I'm the kapa.ai support bot. I've searched through the docs to try to answer your question. :wave:
----------------------
Yes, there is a guide to using Ant Design with Refine. You can find the guide in the Refine Basic Tutorial (https://refine.dev/docs/tutorial/introduction/index/). It covers how to include the features (i18n, Realtime, Access Control) provided by Refine in your project and how to use them.
You can also use the superplate (https://github.com/pankod/superplate) to create a Refine project with Ant Design. To do this, run the following command in your terminal:
Then select the following options to complete the CLI wizard:
You can find more information about using Ant Design with Refine in the Refine blog (https://refine.dev/blog/).
----------------------
GitHub
GitHub - pankod/superplate: A well-structured production-ready fron...
A well-structured production-ready frontend boilerplate with Typescript, React Testing Library, styled-component, React Query, .env, Axios, Bundle Analyzer, Prettier and 30+ plugins. superplate cr...
<@146068211501236224> kapa.ai is still learning and improving, please let us how it did by reacting below
extended-salmon•2y ago
Yeah I'm just dropping token into local storage, like the examples here https://refine.dev/docs/tutorial/understanding-authprovider/create-authprovider/#setting-authorization-credentials
sensitive-blue•2y ago
Then I guess you don't need to store it in a global state, other methods of the AuthProvider can help you understand if user is logged in or not, I advise completing the tutorial until the end
wise-white•2y ago
Many thanks for your helps. I am actually trying to comply with modern guidelines which discourages storing token in Local Storage because of vulnerability to attacks as explained in https://dev.to/cotter/localstorage-vs-cookies-all-you-need-to-know-about-storing-jwt-tokens-securely-in-the-front-end-15id
The recommended practice is to store access token in memory which is why the global state is attractive in React apps.
I think it will be good if implementing global state is possible in this excellent tool.
Well done guys.
DEV Community
LocalStorage vs Cookies: All You Need To Know About Storing JWT Tok...
JWT Tokens are awesome, but how do you store them securely in your front-end? We'll go over...
extended-salmon•2y ago
Ah that is super interesting, thanks!
But why do you need a library etc to handle the global state for a bit of data that you are likely only going to need to set in one place? Global variables aren't that bad if handled correctly also 🙂
I'm going to refactor my auth based on that article I think, I've sort of put off the refresh bit, but will have to deal with it now
Actually, as we control the API, I'm looking at patching the api to look at cookies for the auth token, then I can set them httponly at the client side and radically simplify the clientside code
wise-white•2y ago
It'll be helpful to get your wisdom on implementing this using this tool. Many thanks as always.
extended-salmon•2y ago
It's not really a tool issue. You need your backend to set the refresh token as a http only cookie, store your auth token in a global in memory variable.
Then call your refresh end point when your auth token expires, which should read your http cookie, return a new auth token, you replace the in memory one
wise-white•2y ago
I'm comfortable with the back-end and that is working fine, my issue is implementing the global state and integrating it with the refine tool.
extended-salmon•2y ago
I'm just setting the value as an in memory variable and grabing it when I need it
wise-white•2y ago
I was following a YouTube tutrial which instructs to create a global state, and that's what was giving me problem to implement with Refine.
How does the in-memory variable compare with the global state? From the sound of it, it appears it will suffice.
extended-salmon•2y ago
Global state management is complicated, only get into it if you need it 😄