fair-rose
fair-rose15mo ago

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
future-harlequin
future-harlequin15mo 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.
kapa.ai
kapa.ai15mo ago
Hey @batuhanw! I'm the kapa.ai support bot. I've searched through the docs to try to answer your question. :wave:
kapa.ai
kapa.ai15mo ago
---------------------- 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:
npx superplate-cli -p refine-react refine-advanced-tutorial
npx superplate-cli -p refine-react refine-advanced-tutorial
Then select the following options to complete the CLI wizard:
Cloned remote source successfully.
✔ What will be the name of your app · tutorial
✔ Package manager: · Npm
✔ Do you want to use a UI Framework?: · Ant Design
✔ Do you want a customized theme?: · Yes (Custom Variables)
✔ Router Provider: · React Router v6
✔ Data Provider: · REST API
✔ Auth Provider: · None
✔ Do you want to add example pages? · Yes (Recommended)
✔ Do you want a customized layout? · Yes
✔ i18n - Internationalization: · No
Cloned remote source successfully.
✔ What will be the name of your app · tutorial
✔ Package manager: · Npm
✔ Do you want to use a UI Framework?: · Ant Design
✔ Do you want a customized theme?: · Yes (Custom Variables)
✔ Router Provider: · React Router v6
✔ Data Provider: · REST API
✔ Auth Provider: · None
✔ Do you want to add example pages? · Yes (Recommended)
✔ Do you want a customized layout? · Yes
✔ i18n - Internationalization: · No
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...
kapa.ai
kapa.ai15mo ago
<@146068211501236224> kapa.ai is still learning and improving, please let us how it did by reacting below
vicious-gold
vicious-gold15mo ago
future-harlequin
future-harlequin15mo 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
deep-jade
deep-jade15mo 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...
vicious-gold
vicious-gold15mo 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
deep-jade
deep-jade15mo ago
It'll be helpful to get your wisdom on implementing this using this tool. Many thanks as always.
vicious-gold
vicious-gold15mo 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
deep-jade
deep-jade15mo 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.
vicious-gold
vicious-gold15mo ago
I'm just setting the value as an in memory variable and grabing it when I need it
deep-jade
deep-jade15mo 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.
vicious-gold
vicious-gold15mo ago
Global state management is complicated, only get into it if you need it 😄