wise-white•17mo 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

extended-salmon•17mo 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•17mo 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•17mo 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•17mo ago

<@146068211501236224> kapa.ai is still learning and improving, please let us how it did by reacting below

fair-rose•17mo 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

extended-salmon•17mo 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

modern-teal•17mo 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...

fair-rose•17mo 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

modern-teal•17mo ago

It'll be helpful to get your wisdom on implementing this using this tool. Many thanks as always.

fair-rose•17mo 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

modern-teal•17mo 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.

fair-rose•17mo ago

I'm just setting the value as an in memory variable and grabing it when I need it

modern-teal•17mo 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.

fair-rose•17mo ago

Global state management is complicated, only get into it if you need it 😄